UX design
Geplaatst op: 28 december 2020, aangepast op: 22 mei 2024
De layout is misschien wel het belangrijkste onderdeel van je ontwerp. Maar welke website layouts zijn er en wanneer gebruik je welke?
Wat is een website layout?
Een layout is een indeling waarmee een ontwerp mee kan worden opgezet. Het bepaalt de vlakverdeling en waar de elementen komen te staan. Een goede layout leidt de ogen van de gebruiker met een vloeiende beweging door het ontwerp heen. De layout bepaalt dus de volgorde waarin de website wordt bekeken. Het maakt zo duidelijk wat het meest belangrijk is aan een ontwerp. Door een bestaande layout te gebruiken hoef je niet zelf het wiel uit te vinden bij het ontwerpen, én snappen je bezoekers je ontwerp sneller.
Hoe maak je nou een website layout? Maak een lijstje van al je website-elementen en inhoud van je website. Kies daarna het belangrijkste element van je website. Als je moeite hebt met het belangrijkste te kiezen, stel jezelf dan de volgende vraag: 'Wat is het eerste wat mijn websitebezoeker moet zien bij het bezoeken van de website?' Dit is vaak een call-to-action button of een titel van de pagina. Markeer van elk punt in je lijstje hoe belangrijk deze is. Op basis van dit lijstje kun je een website layout kiezen.
Soorten layouts
Er zijn verschillende soorten website layouts. Maar hoe kies je nu de juiste? En wat zijn de eigenschappen van de meest voorkomende types? Hieronder zie je meest voorkomende typen layouts.
F-patroon
Het F-patroon is één van de vaakst voorkomende website layouts. Veel mensen lezen stukken tekst op deze manier, waarbij af en toe gescand wordt. De regels bovenaan worden nog helemaal gelezen, maar hoe verder je naar beneden gaat, hoe minder er gelezen en hoe sneller er gescrold wordt.
Deze layout is zeer geschikt als je grote stukken informatie wilt laten zien aan je gebruikers. Dit is de reden waarom veel zoekresultaten op deze manier worden laten zien (kijk maar eens naar Google). Je kunt de gebruiker hierbij een handje helpen door duidelijke koppen en andere opmaak toe te passen.
Z-patroon
Net zoals het F-patroon, heeft deze layout betrekking op de leesrichting. De ogen van de bezoeker worden als het ware langs een Z-vorm geleid. Ook deze richting is erg natuurlijk, kijk maar eens naar hoe je een boek leest.
Op websites wordt deze layout vaak gebruikt bij landingspagina's of one page websites om de aandacht te vestigen op een call-to-action. Probeer te experimenteren met witruimte en afbeeldingen om het Z-patroon in je website te verwerken.
Magazine layout
Een magazine layout wordt vaak gebruikt om nieuws- of blogberichten te tonen. Hierbij wordt vaak een grid gebruikt om alles mooi uit te lijnen. De informatie wordt op een gestructureerde manier laten zien waardoor er veel tegelijkertijd op het scherm kan worden laten zien.
Grid layout
Net zoals de magazine layout wordt een grid layout gebruikt om vele soorten informatie op een hiërarchische manier te laten zien. Nog meer dan bij de magazine layout wordt een grid gebruikt en worden de blokken (ook wel kaarten genoemd) vaak herhaald. Bij een typische grid layout is de informatie niet hiërarchisch getoond, waardoor alle informatie er hetzelfde uitziet.
Websites die een grid layout gebruiken zijn bijvoorbeeld blog, portfolio of video websites. In een grid kun je namelijk veel en complexe informatie laten zien, zonder dat dit er slordig uit gaat zien. Zorg wel voor voldoende witruimte om zo het scannen makkelijker te maken.
Bij een asymmetrische layout wordt het scherm in delen verdeeld van verschillende groottes. Hierdoor ontstaat een dynamische uitstraling.
Om deze ongelijke verdeling te versterken kun je spelen met afbeeldingen of kleurgebruik om dit effect te versterken. Hiermee kun je ook een hiërarchie aangeven, en de aandacht van de gebruiker leiden naar het belangrijkste op de website.
Enkele kolom
Websites met één kolom zijn super simpel. Alle inhoud wordt hierbij onder elkaar geplaatst. Vaak wordt dit gebruikt als er veel inhoud is, maar dit moet worden gerangschikt, bijvoorbeeld op datum. Ook als er veel tekst is, zoals bij een artikel, wordt de enkele kolom vaak gebruikt.
Websites die een enkele kolom gebruiken zijn Twitter (die Tweets geordend op datum onder elkaar laat zien) of Medium (waar lange artikelen in een enkele kolom zijn geplaatst).
De theorie die we hierboven hebben behandeld lijkt best abstract, dus hier een aantal voorbeelden van webpagina's die een goede website layout hebben gekozen. Let ook op de manier waarop kleur, typografie en beelden worden ingezet om de layout te versterken.
De website van Mailchimp maakt gebruik van een Z-patroon. Dit wordt bereikt door het kleurgebruik (de turquoise buttons trekken de aandacht op de gele achtergrond), maar ook de kop en de illustratie ernaast vallen op. Hierdoor ontstaat een natuurlijke leesrichting. De elementen die het meest opvallen zijn de belangrijkste elementen van de website: de websitebezoeker kan zich direct aanmelden of de prijzen bekijken.
De website van ABC News is een klassiek voorbeeld van een magazine layout. De website is verdeeld in 3 kolommen waarin nieuwsberichten een afbeelding, een kop en een datum krijgen. Door alles in een grid te plaatsen, komt het geheel geordend over. De kleurrijke afbeeldingen trekken de aandacht en vallen extra op door het zwart-witte kleurenpalet.
De startpagina van Bol.com gebruikt een grid layout. De verschillende acties en producten staan in blokken. De achtergrondkleur is steeds anders, waardoor het grid er niet eentonig uitziet. Ook neemt het eerste blok de hele breedte van de website in beslag wat extra variatie en hiërarchie aangeeft.
Medium is een perfecte kandidaat voor de enkele kolom layout. Het gehele artikel is in één enkele kolom gezet waardoor alle aandacht naar de tekst gaat. De kolom is smaller dan de volledige breedte van het scherm om ervoor te zorgen dat de tekst nog steeds prettig leest en de regels niet te breed worden.
code d'azur creëert een spannende compositie door de belangrijkste tekst aan de rechterkant van de website uit te lijnen. De asymmetrische layout werkt heel goed bij het maken van een unieke website. Aan de linkerkant ontstaat veel witruimte wat de website mooi balanceert.
Website layout maken
Experimenteren met verschillende website layouts? Maak wireframes voordat je veel kostbare tijd kwijtraakt aan het ontwerpen van je website. Als je wireframes gaat maken voor je website kun je snel veel ideeën uitwerken.
Nadat je wireframes hebt gemaakt kun je nadenken over je kleurgebruik en kun je de basisprincipe voor grafisch ontwerp toepassen en bijvoorbeeld contrast, hierarchie of witruimte toepassen aan je webdesign.
