Responsive design en bijhorende UI-patronen
Als websites vroeger al statisch waren, is dat nu voorgoed verleden tijd. Dé trend van het afgelopen jaar was responsive design. Websites die volgens dit principe zijn ontworpen, passen zich automatisch aan aan de schermbreedte van surfers. Dankzij responsive design is het veel makkelijker en goedkoper geworden om websites te ontwikkelen die zowel op de pc als op de tablet en smartphone gebruiksvriendelijk zijn.
Ten gevolge van de doorbraak van responsive design én de opkomende markt in WordPress-thema’s vind je deze UI-patronen – identieke elementen die je op zowat elke website kunt gebruiken – nu nagenoeg overal:
- Registratieknoppen en -velden. Almaar vaker wordt het inschrijfproces opgedeeld in opeenvolgende stappen, zodat de gebruiker nooit wordt geconfronteerd met een scherm vol invulvelden.
- De ‘long scroll’, dé doorbraak van het jaar. In plaats van naar andere webpagina’s door te klikken, wordt de lezer nu uitgenodigd om te blijven scrollen. Gemaakt voor mobiele surfers, maar nu ook mainstream op pc’s. Ideaal voor storytelling.
- De ‘card layout’ is gebaseerd op Pinterest, maar zie je nu overal opduiken. Dit webdesign is bijzonder handig omdat je je lezers veel informatie kunt aanbieden op een visueel aantrekkelijke manier. De lezer vindt het bovendien handig om snel door je content te bladeren.
- De ‘hero image’ is een bijzonder grote fotobanner. In plaats van je lezer te confronteren met tekst en knoppen, toon je een grote foto die rustgevend of inspirerend werkt. Clichés zijn de Golden Gate Bridge in de mist of de ondergaande zon – hiervoor haalde men de mosterd duidelijk bij Instagram – maar je kunt het als bedrijf gelukkig ook origineler aanpakken.
Bron: dittodc.com
Trends in webdesign 2016: rijke animaties
Zo’n tien jaar geleden overspoelden gif-animaties zowat alle websites. Het was duidelijk ‘too much’ – en behoorlijk zinloos. Anno 2016 zijn animaties terug van weggeweest, maar dan slimmer, mooier én met duidelijke functies. Dit mag je verwachten:
- Grote animaties als onderdeel van een verhaal dat je – via een ‘long scroll’ bijvoorbeeld – echt wil vertellen. Deze techniek levert, in combinatie met ‘parallax scrolling’, een boeiende bijdrage aan je verhaal.
- Kleine, functionele animaties zoals laadbalkjes en -wieltjes. Het saaie wachten wordt daardoor toch iets minder vervelend. Of wat dacht je van deze leuke animatie?
Bron: burst-digital.com
- Animaties die tevoorschijn komen wanneer je met je muis over een beeld beweegt. Handig in webshops en fotogalerijen. Bovendien moet je bezoeker zo minder rondklikken, wat de gebruikerservaring behoorlijk verbetert.
- Beweegbare animaties. Zoals je een product in de bakstenen winkel graag eens wil vastnemen en van alle kanten bekijken, zo kan je de producten van webwinkels dankzij deze animatie ook beter bestuderen.
Bron: awwwards.com
Vlakke websites, of toch niet?
Nog twee trends waarvoor je in 2016 moet uitkijken: ‘flat design’ en ‘material design’. Vlak design – waarbij de website strak of zelfs minimalistisch is vormgegeven, zonder gebruik van reliëf of schaduwen – is al enkele jaren aan een opmars bezig en is zeker een blijver in 2016.
Maar deze designstrategie krijgt er wel een concurrent bij: material design van Google. De tech-gigant lanceerde deze ontwerptaal in 2014. Op het eerste gezicht lijken de websites eveneens vlak te zijn, maar dat zijn ze niet. Material design legt, zoals de naam doet vermoeden, een grote mate van materialiteit aan de dag. De vlakken en knoppen zijn vlak – geen grote reliëfverschillen hier – maar hebben wél een minimale dikte, zogezegd van 1 dp (pixel). Ze zweven dan ook lichtjes boven de achtergrond en werpen een korte schaduw. Verder deelt material design zijn minimalisme met de school van het vlakke websitedesign.
Bron: angular.io