Share
Plassen er en grunnleggende parameter i webdesign, men også en av de mest undervurderte. Hvis vi tar kontroll over hvitt mellomrom, kan vi styre et subtilt, men definerende element på en nettside og gjøre det godt ut av det.
I et nøtteskall er hvitt mellomrom avstanden mellom forskjellige elementer, enten det er mellom de faktiske sidene på siden eller helt ned til mellomrom mellom bokstaver. I de fleste tilfeller bruker vi hvitt plass (også referert til som negativ plass) for å plassere innhold for å gjøre det lettere, og til slutt raskere, skanning av en side uten å måtte sette inn bestemte separeringselementer.
I dag skal vi dekke hvordan du kan bruke negativt mellomrom i designene dine og finne ut hvordan nøyaktig det bidrar til å gi designet ditt en ren, ryddig følelse.
Som jeg nettopp har forklart, er hvitt mellomrom (eller negativt mellomrom) avstanden mellom forskjellige elementer som ikke inneholder noe. Til sammenligningsformål kaller vi plassen som fylles positivt. Den negative plassen hjelper faktisk å forme og definere hva det positive rommet er. Dette kan demonstreres ved å se på den optiske illusjonen nedenfor.
Hva ser du? Vase, eller de to ansiktene? Hvis du ser ansiktene, er det fordi, i dette bestemte designet, virker den hvite plassen som den negative plassen, mens den svarte er den positive. Vi kan inverse rollene og få en helt annen visning fordi de begge jobber sammen for å forme bildet.
Hva dette eksempelet prøver å få på er at din negative plass er ganske viktig, da det kan bidra til å definere innholdet som ligger i den positive plassen. Ikke tenk på hvitt mellomrom som den resterende biten du ikke lagde innhold til, men heller en stor strukturell spiller i nettstedets layout.
Det er også to nivåer av hvit plass. Disse er makro- og mikrohvidrom, relatert til mellomrommet mellom kjerneelementer og mellomrummet mellom de mindre elementene, henholdsvis.
Google, som du ser, er en stor talsmann for hvitt rom i deres design. Søkemotoren er allment ansett for å ha en ren design siden fokus er på hovedformålet med siden, uten massiv dedikasjon til andre områder (i motsetning til andre).
Jeg beundrer designarbeidet som Envato-teamet gjorde med dette området. Det er en fin, balansert bruk av hvitt mellomrom mellom titlene, kredittlinjer og avsnitt.
Negativ plass trenger ikke å være en enkelt blokk med farge. I fotografering kan ethvert område som ikke er i fokus klassifiseres som negativt mellomrom. I dette eksemplet trekker mangelen på fokus i bakgrunnen øynene til kruset som er. (Og også, forandret Starbucks ikke sin logo?)
Når en design, er fokuset normalt på den positive plassen. Det er nesten ubevisst at den negative plassen følger og egentlig hjelper mugg og form hvordan den positive plassen legges ut og deretter leses. Denne egenskapen kan da bli tweaked å skreddersy opplevelsen for en bedre tid å lese og samhandle med den positive plassen.
La oss si at du er i en butikk. Det ville ikke være en behagelig eller hyggelig opplevelse hvis du hadde problemer med å bevege deg rundt på grunn av overfylte gangene, sammen med salgsassistenten, og du ble fortalt om å tilby sine spesialtilbud. Det er bare for mye å se på, og du har hverken tid eller tålmodighet for å finne det du opprinnelig kom i å lete etter. Det er ikke fint.
Dette er en av hovedtrekkene til hvorfor Apple-butikker fungerer så godt. De er veldig minimalistiske og en stor del av butikkgulvet er gitt til produktene selv. Men bør du våge deg inn i en annen PC-butikk, blir du forbruket av endeløse ganger av maskiner som ser ut og fungerer annerledes. Etter min erfaring er den minimalistiske shoppingopplevelsen mye mer behagelig.
Nå, hva har det å gjøre med webdesign? Mye faktisk. Vi kommer ikke online for oppgaven med å jakte på en bestemt tekststreng under et vell av meningsløst innhold du ikke bryr deg om. Negativ plass hjelper med begge disse problemene ved å la designene være ryddige samtidig som det legges oppmerksomhet på sidenes fokuspunkt.
Du kan spørre, hvorfor skal jeg bry meg om at min negative plass er helt riktig?
Tekst på nettet er ulikt tekst på en hvilken som helst annen plattform, og vi skreddersyr alle våre design, slik at sluttbrukeren har den enkleste opplevelsen å lese innholdet vårt. I motsetning til en avis kan det være frustrerende på nettet for å prøve å tyde på hvor innholdet du er interessert i faktisk er. Roterte design som er for tung til å takle, gir ikke en ren og enkel leseopplevelse siden vi er tvunget til å granske nettsiden først, for å skille mellom elementer fra hverandre. Hvit plass har en buffer mellom elementene, så det er lettere for oss å finne innholdet vi bryr oss om.
Vi kan også lede oss til en nylig artikkel av meg på typografi, hvor jeg så på åtte viktige faktorer som bidrar til god webtypografi. Ved å sprekke de romlige elementene (for eksempel ledende og letteravstand), kan vi øke lesbarheten. Arbeid på dette nivået betyr at vi jobber med mikro-hvitt-rom.
I et nøtteskall (noe annet enn det som er nevnt tidligere), plasserer hvitt mellomrom alt ut, gir elementene sin egen plass til å være seg selv, å bli gjenkjent og lett å lese og interagere med.
Negativ plass brukes i mange kreative felt, spesielt fotografering. I fotografering er negativ plass noen plass som ikke er vant til å holde et emne, noe som ikke er for langt fra dets rolle i webdesign. Hvis vi tar en titt på Apples webdesign, bruker de naturligvis både makro og mikrohvitt plass til å kaste ut elementer og gi dem sitt eget sted på nettsiden.
Apples design bruker både makro og mikrovit plass, definert av de to forskjellige fargene lagt på bildet nedenfor. Dette resulterer i en ren, elegant design som er fordelt ut nådig. Du kan kanskje ikke vite det, men oppmerksomheten til innholdet vil bli påvirket av mangel på innhold i de hvite romområdene. Vårt oppmerksomhetsspenning er vist seg å være kortere når det er på nettet, så de rotete, tunge trykkdesignene var ikke en trend som gikk over til de virtuelle designrealmene.
Selvfølgelig trenger ikke plassen faktisk å være hvit. Enhver type tomrom som ikke er i konkurranse med fokusinnholdet, kan klassifiseres som "hvitt mellomrom", som utformingen nedenfor antyder.
I trykt design kan du legge merke til at klienten ønsker at hvert siste stykke av hans eiendom brukes til å markedsføre sitt produkt. Det er imidlertid en annen historie når du designer for virtuelle land. Hvit plass kan legge til en følelse av raffinement og luksus i en generisk nettside ved å skape følelsen av at produktet er viktigere enn eiendommen den lever i. Det kan gjøre et produkt ser luksuriøst ut med "mindre er mer" -prinsippet. Når du ser på Apples nettside - et merke som vi anser for å være i den mer premium slutten av databehandling - det er svært lite behov, ettersom produktene snakker for seg selv, om enn sammen med noen minimalistiske taglines. Dette er et fenomen som også er populært blant premium helse og velvære nettsteder hvor lite innhold er nødvendig for å formidle den generelle ideen om produktet eller tjenesten annonsert.
Ofte synes billigere merker å stikke så mye informasjon inn i et mellomrom som mulig; forskjellige markeder, forskjellige sluttbrukere. HP og Apple-nettsteder for eksempel markere dette punktet. Apple er beryktet og lar sine produkter snakke for seg selv. Hvis du vil ha produktet, ta en titt rundt, hvis ikke flytte sammen. På den annen side bruker HP-nettstedet travlere opp- og kryssalg, fremme tilbud og presse billig prising i brukerens sinn, samt å prøve å vise frem et utvalg av alternative produkter du kan være interessert i.
Nå skal du gjenkjenne hvilken negativ plass er og hvordan du identifiserer den i designen din. Hvis du er ny i dette feltet, kan du bli forvirret når noen foreslår at du forbedrer den hvite plassen. Jeg ville ikke være helt overrasket hvis du reagerte med noe i tråd med "det er bare venstre over plass". Vel, faktisk, kan din negative plass bli betydelig forbedret ved å tweaking noen vanlige problemer for å gjøre sin eksistens mye mer effektiv.
Inkonsekvent avstand kan være en av de største problemene, men en som lett kan tweaked. Alt ser ut til å være mer balansert og generelt bedre når du legger rundt et element er like. Hvis vi ser på eksemplet nedenfor, ser designen (det som er på søstersiden vår, ActiveTuts +) ut, den virkelige på høyre side, så mye bedre fordi polstringen mellom elementene er mye mer konsistent.
Marginene skal heller ikke gjøre en følelse av design frakoblet. Marginer som er for store kan ødelegge forholdet mellom elementer, og redusere følelsen av enhet i designet. Store marginer vil også kaste bort eiendommen din, som potensielt reduserer effektiviteten av arbeidet ditt.
Som forklart før er mellomrom på mikronivå det negative rommet som eksisterer mellom de minste elementene på siden, som bokstavene i et avsnitt.
Linjeavstand kan drastisk forbedre lesbarheten av en teksttekst, som er en kritisk avtalebryter i din case study av skreddersydd typografi. Linjeavstand, eller ledende, er den mikro-hvite mellomrommet mellom tekstlinjer. Generelt er jo større den ledende, desto bedre opplevelse brukeren vil ha mens du leser, selv om for mye kan ødelegge enheten og gjøre designet frakoblet..
Jeg har brukt bildet nedenfor i flere forskjellige artikler her på Tuts +, og jeg vil påpeke det igjen. Eksemplet til høyre har mer ledende, og når det brukes i et bredere utvalg av tekst, bør det gjøre det lettere å lese.
På samme måte kan brevavstand bidra til godt brukt negativt rom. Krammede bokstaver er ikke så morsomme å lese, men det er heller ikke de som kan misforstå for enkelte ord. Igjen handler det bare om å finne den perfekte balansen.
Når du designer og skreddersyr webdesign, gjør det med et nytt sinn som ikke blir forurenset med det du gjorde rett forrige gang. Hvert prosjekt er annerledes, og siden det ikke er noen forhåndsdefinerte retningslinjer eller konsistent matte, må du bruke ditt nylig raffinerte øye for å analysere hvert produkt separat.
Negativ plass, som jeg har nevnt flere ganger i hele denne artikkelen, både rydder design og hjelper mugg og trekker fokus på innholdet på siden. Tilbake til shopping analogi, ingen ønsker å måtte jobbe for å oppnå ønsket resultat. I stedet vil de at de skal serveres på en lett identifiserbar tallerken som ikke er forstyrret av meningsløse side retter de ikke ba om, og heller ikke.
For å gjenopprette, kan vi også forbedre negativ plassbruk ved å analysere og raffinere marginer ved å holde dem konsistente under de fleste forhold, og ta hensyn til typografi og mikronivåavstand. Ideelt sett bør du også ta hvert prosjekt annerledes for å gjenkjenne det søte stedet i designet.
Bortsett fra de praktiske fordelene med en ren, ryddig nettside, kan negativt rom skape en følelse av raffinement og eleganse ved å la innholdet "snakke for seg selv" uten store inntrengninger som ser billig ut.
Takk for dykking til en interessant reise i et område som ikke er det. Forhåpentligvis har du lært noe (jeg sikkert har) om det viktige av negativ plass i design, og kanskje tenk to ganger før du prøver å presse en million nonsensiske eller unødvendige objekter inn på siden din. Før du forlater deg, ett siste tips: prøv fem sekunders test (se en nettside i fem sekunder og skriv ned det du husker) bare for å bekrefte at designet er ryddig og bruk det hvite rommet godt.
Accentsconagua