En gennemgang af konsistente design på nettet

Det visuelle sprog på et websted imponerer en besøgende langt ud over deres første glimt.

Faktisk ved at observere de bedste hjemmesider, bemærker du, at de små detaljer taler til dig ubevidst, og at konsistensen forbedrer din oplevelse af hjemmesiden og som følge heraf gør du mere tilbøjelig til at vende tilbage.

I denne artikel vil vi undersøge, hvad der gør et design konsistent , og vi vil fremvise nogle af de mest ensartede website designs derude.

Vær venlig at kommentere i slutningen af artiklen om sammenhængen mellem disse hjemmesider og velkommen til at tilføje links til andre, der følger dette princip.

Hvad mener vi med konsistens i design? Ifølge denne definition , konsistens kan defineres som: "En harmonisk ensartethed eller aftale mellem ting eller dele."

Dit mål som designer er at skabe ordre, så det bliver nemt for brugerne at finde de oplysninger, de leder efter. Konsistens kan hjælpe dig med at nå dette mål.

Checkliste over detaljer

Lad os først definere de kriterier, hvormed vi vil afgøre, om de websites, vi vurderer her, er konsistente. Indstilling af kriterier for dig selv vil også gavne dit eget daglige designarbejde. Som jeg gerne siger, er godt design først skabt med god observation . Her er vores kriterier:

Typografisk konsistens:

Er der en konsistent lodret rytme?
Er den typografiske tilpasning ensartet?
Er skrifttyperne ensartede?
Er den typografiske navigation forudsigelig på tværs af sider?

Grafisk konsistens:

Giver hjemmesidens billeder et sammenhængende humør?
Farver farverne i billederne?
Er billederne i billederne konsekvente?
Er størrelserne på billederne i overensstemmelse med den samlede struktur på hjemmesiden og hinanden?

Farve konsistens:

Bruges farver konsistent på tværs af sider?

Ikon og knap konsistens:

Er webstedets ikoner af samme familie?
Stemmer ikonerne i størrelse?

En hjemmeside behøver ikke at opfylde disse kriterier til prikken, men listen er et godt udgangspunkt for at gøre dine egne designs ensartede og harmoniske.

Okay, vi har nu en god lille tjekliste for at lege med. Lad os gennemgå vores hjemmesider, lære af dem og blive inspireret!

52 uger af UX

Hvad er nogle af disse websites højdepunkter:

Det hvide rum i overskriften er ligeligt opdelt.
Typografien er konsekvent justeret, flush venstre med en ragged højre.
Den vedvarende paginerede navigation øverst er både smart og velkendt.
Billeder til indlæg er altid sort og hvid.

Nu, fordi denne artikel handler om detaljer, vil jeg gerne påpege to mindre problemer med denne hjemmeside, både i footer: Først skal du bemærke, hvordan "Go" søgeknappen har en refleksion, mens de andre elementer på hjemmesiden ikke gør (sammenlign for eksempel RSS-knappen øverst).

For det andet bemærke, at mellemrummet mellem overskrifterne og teksten er meget strammere i footer sammenlignet med resten af hjemmesiden.

Ribbons of Red

For det første er det mest fremtrædende element på hjemmesiden: den røde! Smukt og konsekvent anvendt fra logoet til overskrifterne til linkene til knapperne.
Dernæst er teksturgrafen på knapgrafik den samme som det, der bruges til logoet.
Bemærk også, at knapperne er visuelt af samme familie, selv de sociale ikoner nederst.
Skærmtypen er en god plade serif-igen, der anvendes konsekvent fra logoet til overskrifterne til knapperne.
Endelig er tekstelementerne i hele hjemmesiden justeret konsekvent, flush venstre og ragged højre.

Yaron Schoen

Den første ting, der fanger øjet, er, hvordan illustrationen i overskriften spiller med dybden. Selv de fire grafiske elementer nedenfor springer ud af deres beholdere og spiller med dybde på samme måde.
Typografi er perfekt tilpasset i et gitter.
Skriften er velvalgt og udført. Hjemmesiden og andre sider udviser også kontinuitet.
Farverne er også meget konsekvente og spiller pænt med den mørkeblå til den blågrønne, hele vejen fra overskriften til sidefoden.

Fuzzco

Kig på tekstur i øverste navigation; Den bruges også til billederne nær bunden.
Tjek typen i overskriften på tværs af sider; Smukt gjort med brugerdefineret Flash, hvilket giver det en kreativ følelse.
Serif er konsistent på tværs af hjemmesiden, men bryder en smule på interne sider.
Farverne i den øverste navigation matcher footer, harmoniserer og rammer indholdet.

Styleboost

Størrelsen gør denne hjemmeside konsekvent: stor . Store knapper, store billeder (alt i overensstemmelse med størrelse), stor type, stort hvidt rum.
Farven holdes på et minimum og bruges godt. Den lyseblå opretholder harmoni, og den sekundære grå spiller med dybde og hierarki.
Knapperne er alle store og ensartede. De er også lidt afrundede, der matcher søgefeltet.
Gitterstrukturen er enkel og fortæller dig, hvad der kommer næste gang. Selv footer er i proportioner, som synes at være tæt på det gyldne forhold.

Delicious Monster

Denne hjemmeside er ikke ny, men det er smukt i, hvordan det har forblevet ensartet gennem årene og har ikke været en smule gammel. Opmærksomheden på detaljer har hjulpet.

Bemærk teksturerne. Webstedet er indrammet af en træhylde, der binder til temaet for den software, der tilbydes af virksomheden.
De grafiske elementer som græs og planter opretholder harmonien.
Hvert afsnit har afrundede hjørner, endda diasshowknapperne.
Den grønlig-gule dominerer siden og inviterer dig til at komme ind i denne fantasifulde og mindeværdige verden.

Richard Meier & Partners Arkitekter.

Det blev designet af Massimo Vignelli , som er kendt for at have mestret nettet og producerer moderne, konsistente og logiske designs.

Bemærk justeringen af grafiske elementer. Den flush-venstre type i menuen justeres med nedenstående billeder.
Den vandrette regel under undernavigationen er vedvarende og hjælper brugerne med at orientere sig på hjemmesiden.
Rummet mellem navigations- og kropsindhold er ensartet, hvilket giver øjet en klar vej at følge.
Og typografien er enkel, skylles til venstre og sans-serif, falder konsekvent i gitteret.

Holdet bag Information Arkitekter har også mestret enkelhed, netdesign og konsistens.

Bemærk hvordan navigationen øverst er justeret med kropsindholdet nedenfor.
Farvepaletten er enkel og ensartet: rød, hvid og sort.
De tekstmæssige elementer er jævnt justeret. Bemærk hvordan rummet mellem de vandrette regler er konsistente ned på siden.

Wilson Miner

Dato og metaindhold er justeret i den første kolonne efterfulgt af kroppens indhold.
Bemærk, hvordan navigationen øverst falder ind i nettet, der passer til indholdet nedenfor.
Typografi er en simpel hvid og sort: hvid til sektion titler, sort til body copy.

Tapbots

Den første ting, der fanger mit øje, er den fremragende brug af hvidt rum, især den lige afstand mellem logoet og navigationen, både over og under.
Ikonerne ser ud til at komme fra samme familie og skaber harmoni.
Anvendelsen af dybde, fra den øverste grafik til footer illustrationerne, er også konsistent.
Farverne passer på tværs af siden: den sorte på toppen passer til fodfoden; den røde knap øverst matcher søgeknappen nedenfor; og den grå navigation matcher den grå bjælke i footeren.

Afslutter

Konsistent design kræver mange værktøjer og kan være svært at opnå.

Et tip jeg kan tilbyde er at starte med et dejligt gitter og derefter bygge en wireframe oven på den. Dette giver dig en fugleperspektiv over de grafiske elementer og hvordan de vedrører hinanden.

Ovennævnte eksempler skal give dig mad til tankegang med hensyn til udførelse af dit design. Konsistens består af mange dele, som alle er væsentlige ingredienser i processen.

Skrevet udelukkende til Webdesigner Depot af Noam Almosnino, en webdesigner i Brooklyn, New York. Følg Noam på Twitter , eller besøge hans hjemmeside hellonoam.com .

Kendskab til andre sammenhængende websteder at dele med os? Venligst post dem i kommentarerne!

design webdesign konsistens