En genomgång av konsekventa designer på webben

Visuellt språk på en webbplats imponerar en besökare långt bortom deras första glimt.

Faktum är att du observerar de bästa webbsidorna genom att de små detaljerna talar med dig omedvetet och att konsistensen förbättrar din erfarenhet av webbplatsen och som ett resultat gör att du är mer sannolikt att återvända.

I den här artikeln kommer vi att undersöka vad som gör en design konsekvent , och vi visar några av de mest konsekventa webbdesignerna där ute.

Vänligen kommentera i slutet av artikeln om konsistensen av dessa webbplatser och gärna lägga till länkar till andra som följer denna princip.

Vad menar vi med konsistens i design? Enligt denna definition konsistens kan definieras som: "En harmonisk enhetlighet eller överenskommelse bland saker eller delar."

Du som designer är att skapa ordning för att göra det enkelt för användarna att hitta den information de söker. Konsistens kan hjälpa dig att uppnå det målet.

Checklista över detaljer

Låt oss först bestämma vilka kriterier vi ska bestämma om de webbplatser vi granskar här är konsekventa. Att ställa in kriterier för dig själv skulle också gynna ditt eget dagliga designarbete. Som jag gillar att säga, skapas bra design först med god observation . Här är våra kriterier:

Typografisk konsistens:

Finns det en konsekvent vertikal rytm?
Är den typografiska anpassningen konsekvent?
Är typfältvalen konsekventa?
Är typografisk navigering förutsägbar över sidor?

Grafisk konsistens:

Håller webbplatsens bilder en konsekvent stämning?
Färgerna i bilderna matchar?
Är texturerna i bilderna konsekventa?
Är storleken på bilderna förenliga med webbplatsens övergripande struktur och varandra?

Färgkonsistens:

Används färger konsekvent över sidor?

Ikon och knapp konsistens:

Är webbplatsens ikoner av samma familj?
Matchar ikonerna i storlek?

En webbplats behöver inte uppfylla dessa kriterier till pricken, men listan är en bra utgångspunkt för att göra dina egna konstruktioner konsekventa och harmoniska.

Okej, vi har nu en fin liten checklista att leka med. Låt oss granska våra webbplatser, lära av dem och bli inspirerade!

52 veckor av UX

Vad är några av webbplatsens höjdpunkter:

Det vita utrymmet i rubriken är lika uppdelat.
Typografi är konsekvent inriktad, spola åt vänster med en ragged höger.
Den ihållande paginerade navigeringen på toppen är både smart och bekant.
Bilder för inlägg är alltid svartvita.

Nu, för att den här artikeln handlar om detaljer, vill jag påpeka två mindre problem med den här webbplatsen, både i sidfoten: Först märker du hur sökknappen "Go" har en reflektion, medan de andra elementen på webbplatsen inte gör det (jämför till exempel RSS-knappen längst upp).

För det andra märker du att mellanslag mellan rubrikerna och texten är mycket strängare i sidfoten jämfört med resten av webbplatsen.

Ribbons of Red

Först, den mest framträdande delen av webbplatsen: den röda! Vackert och konsekvent används från logotypen till rubrikerna till länkarna till knapparna.
Därefter är texturen i knappgrafik densamma som vad som används för logotypen.
Observera också att knapparna är visuellt av samma familj, även de sociala ikonerna längst ner.
Skärmtypen är en fin plattserver igen, används konsekvent från logotypen till rubrikerna till knapparna.
Slutligen anpassas textelementen i hela webbplatsen konsekvent, spola åt vänster och ragged höger.

Yaron Schoen

Det första som fångar ögat är hur illustrationen i huvudet spelar med djupet. Även de fyra grafiska elementen nedan dyker ut ur behållarna och spelar med djup på samma sätt.
Typografi anpassas perfekt i ett rutnät.
Tecknet är välvalgt och exekverat. Hemsidan och andra sidor visar också kontinuitet.
Färgerna är också mycket konsekventa, spelar snyggt med mörkblå till den blågröna, hela vägen från rubriken till sidfoten.

Fuzzco

Titta på texturen i toppnavigering; Den används också för bilderna nära botten.
Kolla in typen i rubriken över sidor. snyggt gjort med anpassad Flash, vilket ger en kreativ känsla.
Serif är konsekvent över hemsidan men bryter lite på interna sidor.
Färgerna i den översta navigeringen matchar sidfoten, harmoniserar och inramar innehållet.

Styleboost

Storleken gör definitivt denna webbplats konsekvent: stor . Stora knappar, stora bilder (all konsekvent i storlek), stor typ, stort vitt utrymme.
Färgen hålls till ett minimum och används bra. Den ljusblå bibehåller harmoni, och sekundärgrået spelar med djup och hierarki.
Knapparna är alla stora och enhetliga. De är också något rundade, som matchar sökrutan.
Rattstrukturen är enkel och berättar vad som kommer nästa. Även sidfoten står i proportion, vilket tycks vara nära det gyllene förhållandet.

Läckra Monster

Denna webbplats är inte ny, men den är vacker i hur den har varit konsekvent under åren och har inte åldrats en bit. Uppmärksamhet på detaljer har hjälpt.

Lägg märke till texturerna. Webbplatsen är inramad av en trähylla, som knyter till temat för programvaran som erbjuds av företaget.
De grafiska elementen som gräs och växter bibehåller harmonin.
Varje sektion har rundade hörn, även bildspelsknapparna.
Den gröngula dominerar sidan och inbjuder dig att komma in i denna fantasifulla och minnesvärda värld.

Richard Meier & Partners Architects.

Den designades av Massimo Vignelli , som är känd för att ha behärskat nätet och producerar moderna, konsekventa och logiska konstruktioner.

Observera inriktningen av grafiska element. Den vänstra typen i menyn justeras med bilderna nedan.
Den horisontella regeln under undernavigationen är beständig och hjälper användarna att orientera sig på webbplatsen.
Utrymmet mellan navigations- och kroppsinnehållet är konsekvent, vilket ger ögat en klar väg att följa.
Och typografi är enkelt, spola åt vänster och sans-serif, som faller konsekvent i gallret.

Teamet bakom Informationsarkitekter har också behärskat enkelhet, rutnät design och konsistens.

Lägg märke till hur navigeringen överst ligger i linje med kroppsinnehållet nedan.
Färgpaletten är enkel och konsekvent: röd, vit och svart.
Textelementen är jämnt anpassade. Lägg märke till hur utrymmet mellan de horisontella reglerna är konsekventa nedåt på sidan.

Wilson Miner

Datum och metainnehåll är inriktade i första kolumnen följt av kroppsinnehållet.
Lägg märke till hur navigeringen i toppen faller in i rutnätet, i linje med innehållet nedan.
Typografi är en enkel vit och svart: vit för sektionstitlar, svart för kroppskopia.

Tapbots

Det första som fångar mitt öga är den utmärkta användningen av vitt utrymme, i synnerhet jämn avstånd mellan logotypen och navigeringen, både ovanför och nedanför.
Ikonen verkar alla komma från samma familj och skapa harmoni.
Användningen av djup, från topp grafik till sidfot illustrerar, är också konsekvent.
Färgerna matchar hela sidan: den svarta överst matchar sidfoten; Den röda knappen överst matchar sökknappen nedan; och den grå navigeringen matchar den grå fältet i sidfoten.

Avslutar

Konsekvent design kräver många verktyg och kan vara svårt att uppnå.

Ett tips som jag kan erbjuda är att börja med ett bra rutnät och bygga sedan en wireframe ovanpå den. Detta ger dig ett fågelperspektiv av de grafiska elementen och hur de relaterar till varandra.

Ovanstående exempel bör ge dig mat för tanke när det gäller att genomföra din design. Konsistens består av många delar, som alla är väsentliga ingredienser i processen.

Skriven uteslutande för Webdesigner Depot av Noam Almosnino, webbdesigner i Brooklyn, New York. Följ Noam på Twitter , eller besöka hans hemsida hellonoam.com .

Vet om andra konsekventa webbplatser att dela med oss? Vänligen skicka in dem i kommentarerna!

design webbdesign konsistens