Brug af Whitespace til at skabe fantastiske webstedsdesign

Afsløring: Din support hjælper med at holde webstedet kørt! Vi tjener et henvisningsgebyr for nogle af de tjenester, vi anbefaler på denne side.


Ord som “rent” ?? “enkel,”?? “luksuriøs,”?? og “effektiv” ?? bliver ofte smidt rundt, når vi taler om hvidafstand. Men så let som det er at kvalificere whitespace som et designelement – og minimalisme som designteknikken der bruger det – ved du hvordan man korrekt bruger whitespace i webdesign?

Sådan bruges Whitespace mere effektivt

For at starte er der et par ting, du har brug for at vide om hvidafstand, før du bruger det i dit arbejde.

  • Hvidafstand er også kendt som negativt rum.
  • Mens hvidafstand indikerer mangel på indhold inden for et bestemt område, handler det på ingen måde om tomhed. Hvidafstand er i sig selv et designelement.
  • Nøglen til korrekt arbejde med hvidafstand er evnen til at tage al plads i betragtning. Hvis du forstår forholdet mellem alle de forskellige elementer på en webside, kan du bruge et mellemrum til at påvirke og forbedre disse forhold.

Når det kommer til webdesign, er mindre virkelig mere. Sig det med færre ord. Forenkle din farvepalet. Brug det naturlige gitter. Med andre ord, tag hele billedet og planlæg dine websider mere strategisk med hvidafstand. Du kan blive overrasket over de fordele, du får, til gengæld for at gøre det:

  • Mere effektivt henlede besøgende opmærksomhed på opfordringerne til handling (CTA).
  • Forbedre organisationen og balance, så alt er lettere at finde.
  • Forøg indholdets læsbarhed.
  • Formidle en følelse af luksus, som besøgende igen vil forbinde med dit brand.
  • Træk tilknytninger til mærker som Google og Apple, der også effektivt bruger rene, enkle designs og hvidafstand.

Lyder godt, ikke sandt? Nå, det er tid til at tjekke de 12 måder, du kan bruge hvidafstand korrekt på dine websider.

1. Opret et kontaktpunkt

Når du tænker på et websted, der er så minimalt og grundlæggende i design og alligevel meget effektivt i dets mission, vil du sandsynligvis forestille dig Google. Det er indlysende, hvad den vigtigste del af dette websted er – og det er ikke kun fordi de har et farverigt logo og søgefelt på siden. Med alt dette mellemrum kan du ikke undgå at rette dine øjne mod centrum.

2. Afbryd tekst

Whitespace handler ikke kun om at bringe fokus til de vigtige dele af et websted. Det kan også bruges effektivt til at gøre meget indhold i et enkelt område mere læsbart. Mozilla-startsiden har gjort dette ved at bruge stærke farver, åbent rum og balance for at forbedre læsbarheden af ​​det.

3. Blæs sidemarginalerne

Husk i skolen, når du ville ændre dine sidemargener til 1,25 ″ ?? og håber læreren ikke bemærkede den ekstra polstring for at få din rapport til at vises længere end den var? Nå, du er heldig, fordi bredere marginer faktisk er meget effektive til at henlede opmærksomheden mod midten af ​​en side. iA tilbyder et godt eksempel på dette.

4. Organiser sider konsekvent

Hvidafstand bruges ofte til at etablere en rytme og en sæt struktur på en webside. Tag f.eks. Dropbox. Du ved, at der vil være et stykke tekst på den ene side, et billede på den anden og et stort mellemrum til at introducere det næste afsnit med identisk størrelse.

5. Balance asymmetriske design

Når vi tænker på symmetri i design er det som regel så simpelt som, “Jeg har fået et billede over på denne side, så jeg vil tilføje et billede eller tekst med samme vægt på den anden side.” ?? Undertiden ser asymmetri dog lige så pæn og logisk ud som symmetrisk design, som på Apple iPad-siden.

6. Etablere forhold

Denne særlige hvidafstandsteknik er lidt sværere at trække af end andre, fordi du er nødt til at finde det rigtige sted at gøre det. Et af de bedste eksempler på dette er priser eller servicetabeller. Mens nogle virksomheder bruger kontroller og X’er til at udfylde al plads, gør WordPress et godt stykke arbejde med at bruge negativ plads til at demonstrere, hvor meget mere du får med deres dyrere planer.

7. Kort et kursus

Du har ikke brug for pile eller skydere til at guide dine besøgende gennem en bestemt sti på dit websted. Faktisk, hvis du bruger forskudte billeder og lige den rigtige mængde hvidafstand, kan du indirekte guide dine besøgende fra top til bund med lethed som Apple gør.

8. Giv navigationsrummet til at trække vejret

Navigationslinjen er et fantastisk sted at lege med store åbne rum. Brug hvidafstand til at give et logo vægt som Philip House. Eller brug en udtræksmenu, der giver et mega-menuerum til at trække vejret, som Bulgari har gjort. Den samme regel bør gælde for sidefødder.

9. Opret drama

CTA’er handler om at bruge følelser til at få besøgende til at klikke på en knap eller udfylde en formular eller foretage et køb. Men disse CTA’er har ikke så stor indflydelse, hvis du ikke giver dem et øjeblik til at lade følelserne sætte sig ind. Despreneur-heltebilledet gør netop det med “Er du opladning nok?” ?? giver besøgende et øjeblik at få panik, før de tilbyder den lysegrønne løsning.

10. Fremhæv typografi

Hvis du bruger større skrifttyper på dit websted, skyldes det, at de fortjener mere opmærksomhed. Ved at bygge et ekstra rum omkring den typografi signaliserer du overfor besøgende, at det er her, de har brug for at stoppe og være opmærksomme, før de går videre, ligesom superReal-webstedet gør.

11. Brug fotos med Whitespace

Når det kommer til at bruge whitespace på et websted, skal du ikke føle, at du er nødt til at oprette det hele på egen hånd. Med en simpel søgning af udtrykket “negativt rum” ?? på Flickr og Pixabay, får du mere end nok muligheder for fotos, du kan bruge, som ville hjælpe med at forevige denne idé om et enkelt, rent og strategisk design.

12. Opret Peekaboo-elementer

Mens ideen om at oprette breve, figurer og andre kendte objekter med kun fed farver og hvidafstand er virkelig cool, er det svært at udføre, fordi det kræver mindst et mellemliggende niveau af designoplevelse. To af de mere kendte eksempler på “peekaboo” ?? hvidafstandselementer er pilen i FedEx-logoet og påfuglen i NBC-logoet. Logoer er ikke den eneste del af dit websted, hvor du enten kan bruge denne type hvidafstand.

Hvidafstand i fremtidens design

I nogle henseender er webdesign meget lettere i dag end det var for ti år siden. Vi har indholdsstyringssystemer, der er fyldt med tutorials, plugins og temaer, der hjælper selv den mest nybegynder af udviklere og webmastere med at bygge websteder. På den anden side er webdesign meget vanskeligere nu, end det var for ti år siden. Det er fordi vi har alle disse værktøjer og referencematerialer til rådighed, der gør forventningerne meget større, end de nogensinde var før. Dette er grunden til, at designere og udviklere, der ønsker at stå over konkurrencen og tage deres websteder til større højder, har brug for at vide, hvordan man bruger hvidområdet effektivt.

Yderligere læsning og ressourcer

Vi har flere guider, tutorials og infografik relateret til webdesign:

  • Komponering af god HTML: dette er en solid introduktion til at skrive velformet HTML og bruge HTML validator software.
  • CSS3 – Intro, guider og ressourcer: dette er et godt sted at begynde at lære websides layout.

Webdesign-tendenser, du aldrig vil glemme

Enhver designer ønsker at oprette tidløse dokumenter – sådanne, der aldrig vil se kløende ud. Men det mislykkes ofte. I vores infografiske webdesign-tendenser glemmer du aldrig vi løber igennem årtier af design, der engang blev antaget at være højden af ​​coolness.

Webdesign-tendenser, du aldrig glemmer
Webdesign-tendenser, du aldrig vil glemme

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map