När du tänker på det vita utrymmet i webbdesign är exempel som Apple eller Google förmodligen de första som kommer att tänka på. Medan dessa företag gör ett bra jobb med att använda vitt utrymme i sina mönster, finns det många andra sätt att få ut det mesta av rymden? även om den inte alltid är vit.!
Vitt utrymme är en viktig del av din designplan. Här ska vi titta på betydelsen av rymden som ett designverktyg och fem exempel på webbplatser som utnyttjar vitt utrymme (det är inte vitt).
Vit utrymme 101
Vitt utrymme avser någon del av konstruktionen som lämnas orörd av designelement. Detta inkluderar utrymmet mellan grafik eller bilder, mellan textlinjer och marginaler och rännor. Det öppna utrymmet inom designelement, till exempel? Pil inuti FedEx-logotypen kallas negativt utrymme, även om det har blivit ganska vanligt att byta terminologi.
Vitt utrymme är viktigt eftersom det spelar en viktig roll för att bidra till den övergripande läsbarheten och organisationen av en design.
- Gör texten lättare för användarna att skanna.
- Hjälper till att skapa en naturlig gruppering av liknande element.
- Prioriterar element i designen, till exempel uppmaningar till handling, sökning eller navigering.
- Skapar en känsla av harmoni och sofistikering.
- Upprättar balans och visuell hierarki.
- Hjälper att göra tunga block av text lättare att smälta (och mer sannolikt att läsas)
- Guider användarna genom designen på ett logiskt sätt.
Utrymmet behöver inte vara? Vit?
Det finns den här myten om vitt utrymme som behöver debunking: Vitt utrymme behöver inte vara vit.
Vitt utrymme kan vara en fast färg, eller en suddig bakgrund eller till och med lite rörelse. Den gemensamma faktorn är att utrymmet bara är det? rymden. Det innehåller inte något annat innehåll eller designelement. Om användaren tittat förbi den eller bort från den, skulle ingen information gå förlorad.
Tröskeln är att allt vitt utrymme faktiskt skulle kunna vara vit, men designern har valt att skapa visuellt på ett annat sätt samtidigt som man använder rymdprinciperna.
Vitt utrymme kan förekomma i någon del av konstruktionen och bör fungera som ett verktyg för att förbättra användbarheten från början av sidan till botten och på andra sidor. Ett bra designmönster kommer att använda vitt utrymme konsekvent för att göra visuella enklare för användarna att smälta.
Exempel 1: U + Design
U + Design omger bokstavligen ut begreppet vitt utrymme med stor öppenhet på en svart duk för textelement. Bilderna lever i ett lättare utrymme, vilket skapar en yin och yang-effekt, och medan ingen av utrymmet är tekniskt vit är det allt vitt utrymme.
Rymden används lika långt under rullningen med gott om utrymme för element och ett nästan rörligt mönster av utrymme och designelement som uppmuntrar till rullning.
Om du letar efter en lektion i hur man skapar läsbar text, ta en titt på denna design. Medan flera textstilar och färger används kan allt läsas och textplacering och storlek ger en bra hierarkisk ram.
Exempel 2: Emark
Emark använder utklipp och geometriska mönster för att skapa vitt utrymme och lägga visuellt intresse för bilder och text. Utrymmet är en blandning av vit och färg med former och linjer som hjälper till att ge visuellt flöde.
Designen använder också färgblock mot en vit bakgrund som innehåller gott om vitt utrymme. Den ljusa färgen och rymdkombinationen skapar tydliga textbehållare som dubbelar som mycket klickbara samtal till handling. På grund av färgat vitt utrymme vet användarna att var och en av dessa block är utformade för att klicka.
Hela designen använder förstorat vitt utrymme runt textelement med gott om vaddering och linjeavstånd för att förbättra läsbarheten också. (Det här är en av de trenderna som vi sannolikt kommer att se ännu fler av, eftersom mobila textavståndskoncept börjar dyka upp i ännu mer desktop-baserade webbdesigner.)
Exempel 3: Joke de Winter
Joke de Winter använder ett suddigt svartvitt foto som en mall för vitt utrymme i bakgrunden av hans hemsida. Utseendet är en modern, skiktad design som har en distinkt känsla och lätt flöde.
Nedan rullar ännu mer vitt utrymme runt textelement med överdimensionerade marginaler för att lägga tonvikten på specifika textelement. Det vita utrymmet i designen växlar mellan vitt och grått och som i föregående exempel ingår mer avstånd än vi ofta ser mellan rader f text.
Under hela designen har alla marginaler en asymmetrisk stil med gott om utrymme. Balansen utanför balans? är harmonisk och visuellt intressant.
Exempel 4: Astronauter önskade
Den snabba aktiviteten hos Astronauts Wanted kanske inte är det som först kommer att tänka på när man tänker på vitt utrymme. Men logotypen, texten och elementen ovanpå videon fungerar på det sättet. Den viktiga informationen ovanför rullen är lätt att läsa och ser trots åtgärden i bakgrunden. Det är centrerat med gott om utrymme på vardera sidan och hela vägen. (Och logotypen med negativt utrymme bidrar till att uppmärksamma den övergripande effekten.)
Samma begrepp används under scrollen med textblock ovanpå stillbilder. Utrymmet är vackert utformat och det enda faktiska vita färgelementet i designen är själva texten.
Exempel 5: Le Farfalle
Le Farfalle använder en enkel utklipp i hjältebilden som ett av de föregående exemplen, men den mest imponerande användningen av utrymme visas som du rullar med stora alternerande utrymmen för bilder balanserade med stora vitrum som innehåller text.
Denna stil gör det enkelt för användare att flytta från bild till text och tillbaka och sedan ner sidan genom hela innehållet. Vad som kan vara en tung design blir lätt och lätt att läsa.
Dessutom använder designen breda marginaler och vadderingar så att varje element verkligen har plats att stå på egen hand.Denna användning av rymden skapar en sofistikerad estetik som matchar restaurangen.
Slutsats
Dagens takeaway - det vita utrymmet behöver inte vara vit. Låt inte dig falla i den fällan. Du har några exempel på sätt att använda utrymme med färg och bilder och video som en plats för att hoppa på din kreativitet.
Nu är det din tur att visa några exempel på vitt utrymme. Dela några mönster som du har skapat i Design Shack-galleriet eller dela webbplatser du älskar med mig på Twitter. (Du vet aldrig? De kunde hamna i ett framtida inlägg!)