Webdesign
Geplaatst op: 4 januari 2019, aangepast op: 22 mei 2024
Hoe pas je zo'n blokkendoos nu goed toe zonder dat de website saai oogt? In dit artikel een aantal prachtige voorbeelden en tips.
Een grid is eigenlijk een (onzichtbaar) rooster wat over de website wordt gelegd en wordt gebruikt om alle elementen daarmee uit te lijnen. Het rooster bestaat uit punten welke op gelijk afstanden van elkaar zijn geplaatst. Het rooster verdeelt de website zo in voorspelbare onderdelen.
En dat is dan ook direct het doel van een grid: het opdelen van de website en de informatie hierop duidelijk weergeven. Of dit nu in afgekaderde blokken word gedaan, of in onzichtbare roosters, de website zal hierdoor eenvoudiger te begrijpen zijn.
Maar hoe pas je nu zo'n grid toe zonder de website té rechttoe rechtaan te laten ogen? In dit artikel vind je een aantal voorbeelden van websites met een grid layout die er speels en indrukwekkend uit zien.
Letterlijk de gehele website van MGGA is opgebouwd uit blokken en alles staat in een grid: zelfs het logo is hieruit opgebouwd. Toch doet de website niet saai aan: integendeel, de rechthoekige vlakken maken het geheel juist interessant.
Doordat de blokken soms nét uit het lood staan (uit het grid breken) ontstaat er een gezonde spanning. Kijk maar eens naar de afbeelding in de header, deze is net naast het lichtgrijze blok geplaatst waardoor het geheel net wat spontaner overkomt.
Hemingsworth pakt het net iets anders even aan. Waar MGGA de blokken liet 'zweven', gebruikt Hemingsworth afgekaderde blokken die tegen elkaar aan zijn geplaatst.
Dit zorgt voor een heel andere uitstraling. De pastelkleuren en de ongebruikelijke manier van navigeren - de vier kolommen op de homepage zijn scrollbaar - maken deze website nog net wat unieker.
Ook op de website van Beats by Dre worden blokken gebruikt. Het valt direct op dat de blokken niet perfect uitgelijnd zijn, maar wel over elkaar heen gelegd lijken te zijn. Dit komt niet druk over doordat de onderkant van de cards nog steeds zijn uitgelijnd.
Het vele witruimte en de strakke typografie met een duidelijk hiërarchie helpen nog eens een handje.
Over de website heen zijn lijnen te zien welke een verticaal grid vormen: Reed neemt het plaatsen van een rooster zo wel heel letterlijk.
De rechthoeken waaruit de afbeelding op de homepage is gesneden zijn opzettelijk buiten deze lijnen geplaatst. Deze rechthoeken vormen de hoofdafbeelding die op de detailpagina wordt gebruikt. Deze afbeelding komt met een sierlijke animatie in beeld.
De strakke typografie en het eenvoudige kleurpalet zijn de kers op de taart en maken deze prachtige website helemaal af.
Grid toepassen op jouw website
Hier nog even wat tips om een grid met success toe te passen op je eigen website:
Plaats een (onzichtbaar) rooster over je ontwerp en lijn elementen uit met de punten:
Speel met witruimte, plaats ruimte tussen vlakken om tot een ruimtelijker geheel te komen:
Wees niet bang om uit het grid te breken: hiermee wordt het geheel minder voorspelbaar.
