Het powerkoppel van modern webdesign

Leestijd: 3,5 minuten

Typografie, hiërarchie en kleur. Durf je hand op te steken als je nog nooit van dit rijtje gehoord hebt, collega. Het zijn een aantal van de basis ontwerpprincipes die elke designer tijdens zijn studie ingeprent heeft gekregen. Als designer maak ik continue afwegingen om een zo consistent en samenhangend design neer te zetten, dat werkt op alle schermformaten. In dit artikel vertel ik over twee technieken achter modern webdesign: modulair- en asymmetrisch ontwerpen. Beiden dienen een andere designgedachte, maar zijn wel complementair. Te vaag? Ik ga je vertellen hoe het zit.

Van ontwerpen met eenvoud terug naar creativiteit

Webdesign evolueert net als technologie continue. De laatste jaren lag de focus van de designwereld op ontwerpen met eenvoud en structuur, om toegankelijkheid op alle apparaten te verhogen. Denk aan het mobile first- en responsive design. Termen die zelfs de niet designer kan dromen. Designs met eenvoud kwamen ten goede aan de gebruikerservaring, maar gingen ten koste van de verrassing binnen een ontwerp. Hier is, luckily, verandering in gekomen. Het mag weer wat spannender. Designers hebben meer ruimte voor creativiteit in hun ontwerp. De eerste stap (terug) naar flexibeler ontwerpen is modulair design, de volgende stap is asymmetrisch ontwerpen. Door beide technieken aandacht te geven kan een ontwerp zowel creatief als gestructureerd zijn.

Modulair design is te vergelijken met Tetris spelen

Modulair design, ook atomisch of component ontwerpen genoemd, bestaat uit het gebruik van bouwblokken. Het is als het spelen van Tetris of bouwen met lego. Websites worden gezien als een verzameling van onderdelen, modules, in plaats van statische pagina’s. De modules bestaan bijvoorbeeld uit buttons, cards en tekstvlakken. Een modulair design is efficiënt, omdat de modules herbruikbaar zijn. Dit resulteert in flexibele, responsive en makkelijk up-te-daten websites.

modulardesign

“Aanpassingen doen op je website vanwege een nieuwe branding? Dat is in een modulair design een eitje”.

Het doel van modulair designen is bouwblokken ontwerpen die op verschillende manieren te combineren zijn. Hierdoor zorg je als designer toch voor variatiemogelijkheden in de pagina lay-out. De herbruikbare bouwblokken die terugkomen in de lay-outs zorgen tegelijkertijd voor visuele samenhang. De gebruiker ervaart de onderlinge webpagina’s als één geheel. Aanpassingen doen op je website vanwege een nieuwe branding? Dat is in een modulair design een eitje. De verschillende bouwblokken zijn makkelijk aan te passen, wat zorgt voor een consistente merkervaring. En daar wordt de marketeer aan de klantzijde weer blij van.

Zie als voorbeeld van een modulair design de website van LifeSight (die ik zelf gedesigned heb), internationaal platform Hatch en de website van Leesferry. Een van de programma’s waar modulair mee ontworpen kan worden is designtool Sketch waar mijn collega Sarah eerder een artikel over schreef.

Tijdens asymmetrisch ontwerpen mag je buiten de lijntjes denken

Wat is het verschil met asymmetrisch ontwerpen? Asymmetrisch ontwerpen schuurt tegen de heldere structuuropbouw van een modulair design. Een asymmetrisch ontwerp betekent simpel gezegd, de afwezigheid van ontwerp-symmetrie. Binnen een asymmetrisch design is geen sprake van een waarneembaar grid, of een lay-out systeem. De ontwerper mag buiten de lijntjes denken en daar houden we van in het creatieve vak.

“Asymmetrische lay-outs zijn meer dynamisch opgezet. Het effect? De website komt tot leven.”

asymmetricdesign

Asymmetrie toevoegen aan een design kan een impactvolle aanpak zijn. Deze vorm van ontwerpen is visueel uitdagend voor de gebruiker. Het zet subtiele design signalen in om gebruikers door een website heen te leiden. Denk aan integraties als het toevoegen van overlappende elementen met een parallax voor meer beweging op het scherm. Asymmetrische lay-outs zijn meer dynamisch opgezet. Het effect? De website komt tot leven. Door elementen ongelijk over een pagina te verdelen en balans te negeren wordt spanning en verrassing toegevoegd. In een asymmetrisch ontwerp worden pagina’s op een andere manier gerangschikt dan een modulair design. Dit alles zorgt voor een interessante invalshoek van het ontwerp.

Voorbeelden van een asymmetrisch ontwerp zijn de websites van muzikant Rémi Jousselme, outdoor merk Rottefella en studio Chaptr.

Een goed asymmetrisch design is georganiseerde chaos

Wie denkt dat een asymmetrisch design puur een creatieve uitspatting is van een chaotische ontwerper heeft het mis. Een goed asymmetrisch design is ijzersterk doordacht. De grootste uitdaging is balans vinden binnen de asymmetrie waarmee je met een design zowel voor verrassing als harmonie zorgt.  Hoe je dit doet? Start met spelen met design elementen. Varieer met kleur, experimenteer met textuur en maak creatief gebruik van witruimte en typografie. Voor een harmonisch asymmetrisch design haal je zorgvuldig het grid patroon uit elkaar en stel je een heldere hiërarchie vast voor de ontwerpelementen. Moeilijk? Dat niet, je moet gewoon een beetje durven.

Asymmetrisch design is complementair op een modulair ontwerp

Ondanks dat een modulair ontwerp en een asymmetrisch design beiden vanuit een andere designgedachte opgebouwd worden, kunnen de ontwerpprincipes complementair ingezet worden. Asymmetrisch webdesign kan gezien worden als een uitbreiding van een modulair ontwerp. Een modulair ontwerp organiseert en ondersteunt een asymmetrisch design door het bieden van een sterk grid systeem. Het grid systeem biedt de mogelijkheid om verschillende patronen, groeperingen en ritmes op te bouwen, vanuit makkelijk toepasbare bouwblokken. Het toepassen van asymmetrie op de modulaire bouwblokken, zorgt ervoor dat de modules meer regels en acties toegewezen krijgen. Zo kan een bouwblok driedimensionaal worden door het te laten zweven. Ook kunnen bouwblokken uit niet-standaard vormen of animaties opgezet worden. Het resultaat? Een webdesign met structuur én met beleving. Samen vormen de designtechnieken het powerkoppel van modern webdesign.

Mooie voorbeelden van websites waar modulaire blokken gecombineerd zijn met asymmetrische elementen zijn zie je in ons werk voor CreditDevice en ImpactCity.

Heb je vragen over dit artikel of wil je dat ik binnenkort een tof design voor je maak? Laat het me weten, ik denk graag met je mee.