Share
I den forrige artikkelen lærte vi om hvordan dimensjonering og skalering kan brukes til å gjøre designene dine harmoniske og klare. I denne, vår siste artikkelen om usynlige krefter i design, lærer vi om hvordan subtil bruk av avstand - ofte kalt "hvit plass" eller "negativ plass" -kan brukes til å gjøre designene dine kommunikere effektivt.
Jo mer oppmerksomt du bruker hvit plass, jo høyere er "data / blekkforhold". Dette er et konsept introdusert av informasjonsdesignguru Edward Tufte. Det er en funksjon av hvor mye informasjon som blir formidlet av hver dråpe blekk - eller, når det gjelder mobil og webdesign - ved hver piksel.
Grafen til venstre har et mye høyere data / blekkforhold enn grafen til høyre. Må grafen virkelig fylles ut med "blekk"? Nei, det kommuniserer fint med prikker og linjer.
Hva om du tok det et skritt videre, og fjernet linjene, og bare etterlot prikkene?
Nå har kommunikasjonen falt fra hverandre. Ja, du kan se alle datapunkter, men nå har du mistet «historien» om hvordan dataene endret seg over tid. I tillegg har det blitt vanskelig å skille fra en enkel plottdiagram, hvor "tid" ikke er en av variablene, og dataene går ikke lineært.
I den første artikkelen i denne serien lærte vi om hvordan justering av elementer innebærer forhold mellom disse elementene. Det som også er viktig, er hvor nær disse elementene er til hverandre.
Dette er bare et enkelt rutenett av firkanter, som fliser på et gulv.
Men hvis du lager større horisontal avstand mellom vertikale rader med firkanter, har du nå en rekke kolonner.
Så, når det er drastiske endringer i data i grafen ovenfor, kan tankene kanskje koble prikkene i feil rekkefølge, bare fordi en prikk er nærmere en annen.
Disse prinsippene strekker seg langt utover linjediagrammer. De er til stede i alt du designer. Spesielt når du designer for små skjermer, vil du ikke ha piksler å kaste bort - du vil designe med et høyt data / blekkforhold.
Designere har en tendens til å bruke grids for å organisere informasjon i et layout. Grids hjelper til med å justere elementer - for eksempel tekstlinjer - som da skaper områder med informasjon som er relatert til hverandre.
Her er en grunnleggende layout, designet på et rutenett. Den venstre side er din navigasjon, og det større området inneholder hovedinnholdet.
Denne oppsettet er fint, men merk at den hvite plassen mellom navigasjonen og den hvite mellomrommet mellom tekstkolonner innenfor hovedinnholdsområdet er det samme.
Det ville være fornuftig å øke randen litt mellom navigasjons- og hovedinnholdsområdet.
Nå er det en skarpere avgrensning mellom navigasjonen og hovedinnholdet, og alt vi måtte gjøre var å legge til litt hvitt rom.
I den forrige artikkelen lærte vi om hvordan dimensjonering er en av de mange faktorene som kan brukes til å lage typografisk hierarki. Hvit plass kan bidra til å organisere din typografi også.
Se for eksempel på denne overskriften, metadata og kroppskopi.
De har harmoniske størrelsesforhold med hverandre, takket være at deres størrelser er valgt i varierende skala, men de ser ganske slurvete ut.!
Problemet er at de negative mellomromene mellom disse elementene ikke er vurdert.
Metadatabasen er allerede pent differensiert fra toppteksten: Det er en annen størrelse, den er i alle caps, og det er også pent plassert litt ut.
Et flott triks er å bruke høyden til metadatatypen for å bestemme hvor mye plass det skal være mellom det og toppteksten. Som dette:
Vanligvis bruker du eyeballs for å finne ut dette avstanden. Det er ingen matematisk måte å fortelle deg nøyaktig hvor mye avstand det ville være. Det er en funksjon av linjens høyde, hvor mye margin eller polstring du bruker, og egenskapene til den aktuelle fonten.
Det er fornuftig for metadataene å være veldig nær toppteksten, men overskriften behøver ikke være så nær kroppseksemplaret. Faktisk kan toppteksten og metadataene være deres egen enhet.
Du kan bruke avstanden fra toppen av toppteksten til bunnen av metadataene som veiledning, og plasser halvparten av avstanden mellom metadataene og kroppskopien.
Ved å tenke på hvordan du formaterer layoutet ditt og kommuniserer med hvitt rom, vil designene dine se renere og klarere, og samtidig være mer brukbare og konvertere bedre.
Det bryter opp ting for nå - hvis du ikke allerede har det, må du sjekke ut første og andre artikkelen i serien!
Accentsconagua