Soms zijn het de kleine dingen die je website kunnen maken of breken. Denk hierbij aan je navigatie, de indeling van een homepagina, je portfolio of je contactformulieren. In deze maandelijkse rubriek, Design Patterns (ontwerppatronen), knip ik je complete website op en ga ik met de kleinere en vaak vergeten onderdelen aan de slag. Vandaag gaan we het hebben over “Grid of Equals”, ook wel het raster van gelijken. 

Wat zijn ontwerppatronen of Design Patterns eigenijk?

In wezen zijn patronen structurele en gedragskenmerken die de “bewoonbaarheid” verbeteren Van iets – een gebruikersinterface,
een website, een objectgericht programma of een gebouw.
Ze maken dingen gemakkelijker te begrijpen of mooier; ze maken hulpmiddelen nuttiger en bruikbaar.
– Jenifer Tidwell

Het zijn bewezen patronen die je kunt gebruiken om bijvoorbeeld je website gemakkelijker en begrijpelijker te maken. Het zijn bepaalde “regels” om de bezoeker van je website te helpen bij een bepaald proces. Denk bijvoorbeeld aan de hierarchie van een webshop of de logische indeling en werking van een navigatie. Zo ook de Hero. En in deze blog vertel ik je hoe je dit kunt inzetten om je bezoeker naar binnen te trekken.

Wat zijn “Grid of Equals”?

Een lastig woord en in het Nederlands is het vrij vertaald het raster van gelijken. Het zit het hem dan ook in de naam. Een Grid of Equals is een raster van gelijke grootte van foto’s. Denk hierbij aan een webshop, de producten die netjes op een rij staan en meerdere rijen onder elkaar. Dát noemen we in “websitewereld” grid of equals.

Hierbij is het belangrijk dat zowel de breedte als de hoogte van een rij even hoog is om rust te bewaren in je website. Dit patroon wordt vaak gebruikt voor bijvoorbeeld blogs, een gallerij of producten.  Je wilt je websitebezoeker een aantal mogelijkheden bieden om deze items te bekijken en te selecteren.

Waarom gebruik je zo’n grid?

Een raster dat elk item dezelfde ruimte geeft, geeft aan dat ze even belangrijk zijn. De gelijkheid van de items in het raster vertelt de gebruiker dat de items op elkaar lijken. Samen bepalen deze technieken een krachtige visuele hiërarchie die moet overeenkomen met de inhoud van je website. Grids zien er netjes, geordend en rustgevend uit. Wij mensen vinden dit erg fijn om te zien en het geeft de rust die zij nodig hebben om de website goed te bekijken.

Hoe doe ik dit?

Zoek uit hoe je elk item in het raster kunt opmaken. Hebben ze afbeeldingen? Grote koppen, subkoppen, samenvattingstekst? Links om naar andere pagina’s te gaan?  Gebruik ze met meer dan alleen maar blokken tekst: maak koppen van verschillende kleuren, wees creatief met witruimte en gebruik afbeeldingen als je dit gelijkmatig over alle items kunt doen.

Experimenteer met manieren om alle juiste informatie in een relatief kleine ruimte (hoogte, breedte of vierkant) te passen en pas dit template toe op de items die je wilt weergeven.

Maak er een grid van. Je zou een enkele rij of een matrix kunnen gebruiken; dat zijn twee, drie of meer rijen. Bedenk goed hoe breed je pagina is waar je grid op moet komen te staan, hoe zullen ze eruitzien in verschillende formaten? Bedenk hoe het eruit zal zien op desktops en mobiele telefoons.

Gebruik kleur en andere design opties, maar verander de posities, grootte of andere structurele elementen van het grid niet, je wilt geen inhoud zien verspringen terwijl de gebruiker over verschillende items gaat met zijn/haar muis.

Een paar voorbeelden

Bekijk eens een paar webshops, dan zul je precies zien wat ik bedoel. Een aantal goede voorbeelden hiervan zijn:

• Casagitane – Dit is een webshop die ik een tijd geleden heb gemaakt.
• Weddingstyles 

En check vooral ook even mijn Pinterest bord vol met voorbeelden en vooral inspiratie.

Gebruik jij al een “Grid of Equals” op je site?

Meer tips?

Wil je meer tips ontvangen over websites en personal branding? Volg mij dan op Facebook en schrijf je ook in voor mijn nieuwe maandelijkse nieuwsbrief PreCision to Inspire.

[mailerlite_form form_id=8]

Op de hoogte blijven van alles rondom mij en Cprecision? Vind mij hier: