2017 staat in het teken van mobiel webdesign. Ontwerpers starten mobile-first en passen vervolgens hun ontwerp aan voor laptop en desktop-schermen. Ook zien we de groeiende invloed van Google’s ‘Material design’, dat speciaal ontwikkeld werd voor mobiele apparaten. Lees in dit artikel over 9 trends die we dit jaar terug zullen zien in webdesign.
1. TOENEMENDE INVLOED MATERIAL DESIGN
Nog niet zo lang geleden introduceerde Google Material design als motief voor Android-apparaten, maar inmiddels werkt het gros van de webdesigners met deze stijl. Een intuïtieve manier om lay-outs van een mobiele applicaties en e-commerce websites vorm te geven, vanwege de gebruiksvriendelijke structuur. Herkenbare elementen binnen material design zijn de ‘card’ lay-outs, responsive animaties en effecten en de heldere structuren (knoppen, blokken, iconen, schaduw en lettertypes). Google heeft zelfs een online gids opgesteld met richtlijnen.
Voorbeelden van material design
2. 3D KOMT TERUG
Driedimensionale elementen zijn weer toegestaan sinds de intrede van material design, al gaat het wel om puur functionele toevoegingen. Designers 'mogen' weer gebruik maken van drop shadows, highlights, patterns en ronde hoeken. Puur omdat elementen er daardoor realistischer en mooier uitzien.
3. MOBILE-FIRST
Een groot gedeelte van de online aankopen wordt tegenwoordig via mobiele apparaten gedaan. Websites worden steeds vaker primair ontworpen voor mobiele apparaten (ook wel mobile-first genoemd). Hamburger menu’s zien we steeds vaker terug op desktop-websites, de volle breedte van van grote schermen wordt meer benut en plaatjes, buttons en iconen worden groter en duidelijker op grotere schermen.
4. BEWEGENDE GIFJES
Het bewegende gifje is weer helemaal terug, in de vorm van een ‘cinemagraph’. Dit is een stilstaand beeld (bijvoorbeeld een foto) met een herhalende animatie, een soort mini-video. Deze gifjes verschijnen als achtergrondafbeeldingen, headers, banners en zelfs als productafbeeldingen. Gifjes kunnen bovendien helpen om beter (of: sneller) te communiceren dan een tekst of een video.
nOeser, klant van CloudSuite, werkt met bewegende GIF's
5. LANG SCROLLEN EN ‘LAZY LOADING’
Om lange laadtijden tegen te gaan, maar toch in te kunnen spelen op gebruiksvriendelijkheid is ‘lazy loading’ steeds meer terug te vinden in webdesign. Dit houdt in dat er alleen objecten worden geladen zodra ze nodig zijn, dus wanneer een gebruiker naar beneden scrollt.
6. AFWIJKENDE GRIDS
Hoewel tegenwoordig alles strak en clean moet zijn, kan het ook relevant en creatief zijn om elementen af te wijken van het grid. Bekijk dit voorbeeld van Bang & Olufsen maar eens.
Een mooi voorbeeld van een afwijkende grid.
7. PRODUCTFOTO’S IN CONTEXT
Productfoto’s in 360° of in context gefotografeerd trekken de aandacht van de bezoeker. Daarom zal creatieve productfotografie dit jaar de boventoon voeren.
Het merk Beoplay laat de productfotografie in context zien.
8. FULL SCREEN MENU ONDER HET HAMBURGERTJE
Steeds vaker zien we een fullscreen menu die verschijnt zodra je op het hamburgertje klikt. Het voordeel hiervan is dat je als gebruiker de complete structuur van de website in één oogopslag ziet.
NS.nl werkt met een full screen navigatie onder het hamburger menu.
9. GEOMETRISCHE VORMEN
Driehoeken, zeskanten en ruitjes. We zien deze retro-stijl steeds vaker terug. Het doet je even denken dat je in de jaren ’80 bent.
Geometrische vormen zul je vaker gaan zien in webdesign
NL
English 