En gjennomgang av konsistente design på nettet

Det visuelle språket til et nettsted imponerer en besøkende langt utover deres første glimt.

Faktisk, når du observerer de beste nettstedene, merker du at de små detaljene snakker med deg ubevisst, og at konsistensen forbedrer din opplevelse av nettstedet og som et resultat gjør at du er mer sannsynlig å returnere.

I denne artikkelen vil vi undersøke hva som gjør et design konsekvent , og vi vil fremheve noen av de mest konsistente nettsteddesignene der ute.

Vennligst kommentere i slutten av artikkelen om konsistensen til disse nettstedene og gjerne legge til linker til andre som følger dette prinsippet.

Hva mener vi med konsistens i design? I følge denne definisjonen , konsistens kan defineres som: "En harmonisk enhetlighet eller enighet mellom ting eller deler."

Du mål som designer er å skape ordre, for å gjøre det enkelt for brukerne å finne informasjonen de leter etter. Konsistens kan hjelpe deg med å nå det målet.

Sjekkliste over detaljer

Først, la oss definere kriteriene som vi vil avgjøre om nettstedene vi vurderer her er konsistente. Innstilling av kriterier for deg selv vil også være til nytte for ditt eget daglige designarbeid. Som jeg liker å si, er god design først opprettet med god observasjon . Her er våre kriterier:

Typografisk konsistens:

Er det en konsistent vertikal rytme?
Er den typografiske tilpasningen konsistent?
Er skriftvalgene konsekvente?
Er den typografiske navigasjonen forutsigbar på tvers av sider?

Grafisk konsistens:

Behandler nettstedets bilder et konsekvent humør?
Farges fargene i bildene?
Er strukturen på bildene konsistente?
Er bildestørrelsene i samsvar med den generelle strukturen på nettsiden og hverandre?

Fargekonsistens:

Brukes farger konsekvent på tvers av sider?

Ikon og knappekonsekvens:

Er nettstedets ikoner av samme familie?
Stemmer ikonene i størrelse?

Et nettsted trenger ikke å oppfylle disse kriteriene til prikken, men listen er et godt utgangspunkt for å gjøre dine egne design konsistente og harmoniske.

Ok, vi har nå en fin liten sjekkliste for å leke med. La oss se gjennom våre nettsider, lære av dem og bli inspirert!

52 uker av UX

Hva er noen av nettstedets høydepunkter:

Den hvite plassen i toppteksten er like delt.
Typografien er konsekvent justert, flush til venstre med en ragged høyre.
Den vedvarende paginerte navigasjonen øverst er både smart og kjent.
Bilder for innlegg er alltid svart og hvitt.

Nå, fordi denne artikkelen handler om detaljer, vil jeg påpeke to mindre problemer med denne nettsiden, både i footer: Først legg merke til hvordan "Go"-søkeknappen har en refleksjon, mens de andre elementene på nettstedet ikke gjør det (sammenlign for eksempel RSS-knappen øverst).

For det andre, legg merke til at mellomrommet mellom overskriftene og teksten er mye strammere i footeren sammenlignet med resten av nettstedet.

Ribbons of Red

Først, den mest fremtredende delen av nettstedet: den røde! Vakkert og konsekvent brukt fra logoen til overskriftene til koblingene til knappene.
Deretter er teksten på knappgrafikken den samme som det som brukes til logoen.
Legg merke til at knappene er visuelt av samme familie, selv de sosiale ikonene nederst.
Skjermtypen er en fin plate serif-igjen, brukt konsekvent fra logoen til hodene til knappene.
Til slutt er tekstelementene i hele nettstedet rettet opp konsekvent, flush til venstre og ragged til høyre.

Yaron Schoen

Det første som fanger øyet er hvordan illustrasjonen i overskriften spiller med dybde. Selv de fire grafiske elementene nedenfor popper ut av beholderne og spiller med dybde på samme måte.
Typografien er perfekt justert i et rutenett.
Skriften er velvalgt og utført. Hjemmesiden og andre sider viser også kontinuitet.
Fargene er også veldig konsistente, spiller pent med mørkblått til det blågrønne, helt fra topptekst til bunntekst.

Fuzzco

Se på tekstur i toppnavigasjonen; Den brukes også til bildene nær bunnen.
Sjekk ut typen i overskriften på tvers av sider; pent gjort med egendefinert Flash, noe som gir den en kreativ følelse.
Serif er konsekvent på tvers av hjemmesiden, men bryter litt på interne sider.
Fargene i toppnavigasjonen samsvarer med bunnteksten, harmoniserer og rammer innholdet.

Styleboost

Størrelsen gjør definitivt dette nettstedet konsistent: stort . Store knapper, store bilder (alle sammenhengende i størrelse), stor type, stor hvit plass.
Fargen holdes til et minimum og brukes godt. Lyseblå opprettholder harmoni, og sekundærgrået spiller med dybde og hierarki.
Knappene er alle store og ensartede. De er også litt avrundet, som samsvarer med søkefeltet.
Gitterstrukturen er enkel og forteller deg hva som kommer neste. Selv bunnteksten er i proporsjon, som ser ut til å være nær det gyldne forholdet.

Lekkert Monster

Dette nettstedet er ikke nytt, men det er vakkert i hvordan det har vært konsistent gjennom årene, og har ikke blitt alderen litt. Oppmerksomheten på detaljer har hjulpet.

Legg merke til teksturen. Nettstedet er innrammet av en hylle, som knytter seg til temaet for programvaren som tilbys av selskapet.
De grafiske elementene som gress og planter opprettholder harmonien.
Hvert avsnitt har avrundede hjørner, til og med slideshowknappene.
Den grønngrønne dominerer siden, og inviterer deg til å komme inn i denne fantasifulle og minneverdige verden.

Richard Meier & Partners Architects.

Det ble designet av Massimo Vignelli , som er kjent for å ha mestret gridet og produserer moderne, konsistente og logiske design.

Legg merke til justeringen av grafiske elementer. Plush-left-typen i menyen stemmer overens med bildene nedenfor.
Den horisontale regelen under undernavigasjonen er vedvarende, og hjelper brukerne å orientere seg på nettsiden.
Rommet mellom navigasjons- og kroppsinnholdet er konsekvent, noe som gir øynene en klar vei å følge.
Og typografien er enkel, flush til venstre og sans-serif, og faller konsekvent inn i rutenettet.

Teamet bak Informasjon Arkitekter har også mestret enkelhet, rutenettdesign og konsistens.

Legg merke til hvordan navigasjonen øverst er justert med kroppsinnholdet nedenfor.
Fargepaletten er enkel og konsistent: rød, hvit og svart.
Tekstelementene er jevnt justert. Legg merke til hvordan mellomromet mellom de horisontale reglene er konsistente ned på siden.

Wilson Miner

Datoene og metainnholdet er justert i den første kolonnen, etterfulgt av kroppsinnholdet.
Legg merke til hvordan navigasjonen øverst faller inn i rutenettet, tilpasser seg innholdet under.
Typografi er en enkel hvit og svart: hvit for seksjonstitler, svart for kroppskopi.

Tapbots

Det første som henter meg, er den utmerkede bruken av det hvite rommet, spesielt det jevne mellomromet mellom logoen og navigasjonen, både over og under.
Ikonene ser ut til å komme fra samme familie og skaper harmoni.
Bruken av dybde, fra den øverste grafikken til fotfotografiene, er også konsistent.
Fargene samsvarer på tvers av siden: den svarte på toppen stemmer overens med bunnteksten; den røde knappen øverst samsvarer med søkeknappen under; og den grå navigasjonen samsvarer med den grå linjen i bunnteksten.

Wrapping Up

Konsekvent design krever mange verktøy og kan være vanskelig å oppnå.

Et tips jeg kan tilby er å starte med et fint rutenett og deretter bygge en wireframe på toppen av den. Dette gir deg et fugleperspektiv av de grafiske elementene og hvordan de relaterer seg til hverandre.

Ovennevnte eksempler skal gi deg mat til tanker når det gjelder å utføre designet ditt. Konsistens består av mange deler, som alle er essensielle ingredienser i prosessen.

Skrevet utelukkende for Webdesigner Depot av Noam Almosnino, webdesigner i Brooklyn, New York. Følg Noam på Twitter , eller besøke hans nettside hellonoam.com .

Vet om andre konsekvente nettsteder å dele med oss? Vennligst legg inn dem i kommentarene!

design webdesign konsistens