Een overzicht van consistente ontwerpen op het web

De visuele taal van een website maakt indruk op een bezoeker ver voorbij zijn eerste glimp.

Bij het observeren van de beste websites merk je namelijk dat de kleine details onbewust onbewust spreken en dat consistentie je ervaring op de website verbetert en je daardoor meer kans maakt terug te keren.

In dit artikel zullen we onderzoeken wat een ontwerp consistent maakt , en we zullen enkele van de meest consistente website-ontwerpen die er zijn weergeven.

Geef aan het einde van het artikel commentaar over de consistentie van deze websites en voeg gerust links toe aan anderen die dit principe volgen.

Wat bedoelen we met consistentie in ontwerp? Volgens deze definitie , consistentie kan worden gedefinieerd als: "Een harmonieuze uniformiteit of overeenstemming tussen dingen of delen."

Je als ontwerper als doel hebt om orde te creëren, zodat gebruikers gemakkelijk de informatie vinden waarnaar ze op zoek zijn. Consistentie kan u helpen dat doel te bereiken.

Checklist van details

Laten we eerst de criteria definiëren waarmee we bepalen of de websites die we hier beoordelen consistent zijn. Het stellen van criteria voor uzelf zou ook uw eigen dagelijkse ontwerpwerk ten goede komen. Zoals ik wil zeggen, is goed ontwerp eerst gemaakt met goede observatie . Dit zijn onze criteria:

Typografische consistentie:

Is er een consistent verticaal ritme?
Is de typografische uitlijning consistent?
Zijn de lettertype-keuzes consistent?
Is de typografische navigatie voorspelbaar over meerdere pagina's?

Grafische consistentie:

Brengen de afbeeldingen van de website een consistente stemming over?
Komen de kleuren in de afbeeldingen overeen?
Zijn de structuren van de afbeeldingen consistent?
Zijn de afmetingen van de afbeeldingen consistent met de algemene structuur van de website en met elkaar?

Kleurconsistentie:

Worden kleuren op verschillende pagina's consistent gebruikt?

Icoon en knoopconsistentie:

Zijn de pictogrammen van de website van dezelfde familie?
Komen de pictogrammen overeen in grootte?

Een website hoeft niet aan deze criteria te voldoen, maar de lijst is een goed startpunt om uw eigen ontwerpen consistent en harmonieus te maken.

Oké, we hebben nu een leuke kleine checklist om mee te spelen. Laten we onze websites beoordelen, van hen leren en geïnspireerd raken!

52 weken UX

Wat zijn enkele hoogtepunten van deze website:

De witte ruimte in de kop is gelijk verdeeld.
De typografie wordt consequent uitgelijnd, links uitgelijnd met een rafelige rechterkant.
De aanhoudend gepagineerde navigatie bovenaan is zowel slim als vertrouwd.
Afbeeldingen voor berichten zijn altijd zwart en wit.

Nu, omdat dit artikel over details gaat, wil ik twee kleine problemen met deze website benadrukken, beide in de voettekst: ten eerste, merk op hoe de zoekknop "Ga" een weerspiegeling heeft, terwijl de andere elementen op de website niet (vergelijk bijvoorbeeld de RSS-knop bovenaan).

Ten tweede, merk op dat de ruimte tussen de kopjes en de tekst veel nauwer is in vergelijking met de rest van de website.

Linten van rood

Ten eerste, het meest prominente element van de website: de rode! Fraai en consequent gebruikt van het logo tot de koppen tot de links naar de knoppen.
Vervolgens is de textuur van de grafische afbeeldingen van de knop hetzelfde als die van het logo.
Merk ook op dat de knoppen visueel allemaal van dezelfde familie zijn, zelfs de sociale pictogrammen onderaan.
Het weergavetype is weer een aardige schijfserif, consequent gebruikt van het logo tot de kopteksten tot de knoppen.
Ten slotte zijn de tekstelementen op de hele website consequent uitgelijnd, links uitgespreid en rechts versleten.

Yaron Schoen

Het eerste dat opvalt is hoe de illustratie in de kop met diepte speelt. Zelfs de vier grafische elementen hieronder komen uit hun verpakking en spelen op dezelfde manier met diepte.
De typografie is perfect uitgelijnd in een raster.
Het lettertype is goed gekozen en uitgevoerd. De startpagina en andere pagina's vertonen ook continuïteit.
De kleuren zijn ook zeer consistent, spelen mooi met het donkerblauwe tot blauwachtige groen, helemaal vanaf de kop tot het voettekstje.

Fuzzco

Kijk naar de textuur in de navigatie bovenaan; het wordt ook gebruikt voor de afbeeldingen aan de onderkant.
Bekijk het type in de kop van de pagina's; mooi gedaan met aangepaste Flash, waardoor het een creatief gevoel geeft.
De serif is consistent op de startpagina maar breekt een beetje op interne pagina's.
De kleuren in de navigatie bovenaan komen overeen met de voettekst, waardoor de inhoud wordt geharmoniseerd en gecultiveerd.

Styleboost

De grootte maakt deze website zeker consistent: groot . Grote knoppen, grote afbeeldingen (allemaal consistent in grootte), groot type, grote witte ruimte.
De kleur wordt tot een minimum beperkt en goed gebruikt. Het lichtblauwe behoudt de harmonie en het secundaire grijs speelt met diepte en hiërarchie.
De knoppen zijn allemaal groot en uniform. Ze zijn ook enigszins afgerond, passend bij het zoekvak.
De rasterstructuur is eenvoudig en vertelt u wat er hierna komt. Zelfs de voettekst staat in verhouding, wat lijkt te dicht bij de gulden snede.

Heerlijk Monster

Deze website is niet nieuw, maar het is mooi in hoe het door de jaren heen consistent is gebleven en nog geen beetje verouderd is. De aandacht voor detail heeft geholpen.

Let op de texturen. De website wordt omlijst door een houten plank, die aansluit op het thema van de software die door het bedrijf wordt aangeboden.
De grafische elementen zoals gras en planten behouden de harmonie.
Elke sectie heeft afgeronde hoeken, zelfs de knoppen voor de diavoorstelling.
Het groenachtige geel domineert de pagina en nodigt u uit om deze fantasierijke en memorabele wereld te betreden.

Richard Meier & Partners Architects.

Het is ontworpen door Massimo Vignelli , die erom bekend staat dat hij het raster onder de knie heeft en moderne, consistente en logische ontwerpen produceert.

Let op de uitlijning van grafische elementen. Het flush-left type in het menu is uitgelijnd met de onderstaande afbeeldingen.
De horizontale regel onder de subnavigatie is persistent, zodat gebruikers zich kunnen oriënteren op de website.
De ruimte tussen de navigatie- en inhoud van het lichaam is consistent, waardoor het oog een duidelijk te volgen pad heeft.
En de typografie is eenvoudig, flush links en schreefloos, valt consequent in het raster.

Het team achter Informatie Architecten heeft ook de eenvoud, het ontwerp van het raster en de consistentie onder de knie.

Merk op hoe de navigatie bovenaan is uitgelijnd met de inhoud van het lichaam hieronder.
Het kleurenpalet is eenvoudig en consistent: rood, wit en zwart.
De tekstuele elementen zijn gelijkmatig uitgelijnd. Let op hoe de ruimte tussen de horizontale regels op de pagina consistent is.

Wilson Miner

De datums en meta-inhoud worden uitgelijnd in de eerste kolom, gevolgd door de inhoud van het hoofdgedeelte.
Merk op hoe de navigatie aan de bovenkant in het raster valt, in lijn met de onderstaande inhoud.
De typografie is eenvoudig wit en zwart: wit voor sectietitels, zwart voor tekstkopie.

Tapbots

Het eerste dat me opviel, is het uitstekende gebruik van de witte ruimte, met name de even afstand tussen het logo en de navigatie, zowel boven als onder.
De pictogrammen lijken allemaal afkomstig uit dezelfde familie, waardoor harmonie ontstaat.
Het gebruik van diepte, van de illustraties van de bovenste afbeelding tot de voetnoot, is ook consistent.
De kleuren komen overeen op de pagina: het zwart bovenop komt overeen met het voettekstje; de rode knop bovenaan komt overeen met de onderstaande zoekknop; en de grijze navigatie komt overeen met de grijze balk in de voettekst.

Afsluiten

Consistent ontwerp vereist veel gereedschappen en kan moeilijk te realiseren zijn.

Een tip die ik kan bieden, is om te beginnen met een mooi raster en er vervolgens een draadframe bovenop te bouwen. Dit geeft je een overzicht in vogelvlucht van de grafische elementen en hoe ze zich tot elkaar verhouden.

De bovenstaande voorbeelden zouden u stof tot nadenken moeten geven met betrekking tot het uitvoeren van uw ontwerp. Consistentie bestaat uit vele delen, die allemaal essentiële ingrediënten zijn in het proces.

Exclusief geschreven voor Webdesigner Depot door Noam Almosnino, een webdesigner in Brooklyn, New York. Volg Noam op Twitter , of bezoek zijn website hellonoam.com .

Weet u van andere consistente websites om met ons te delen? Plaats ze alsjeblieft in de reacties!

ontwerp webontwerp consistentie