Welkom op mijn blog:

Webdesign trends 2019



Blijf altijd up-to-date

Up-to-date blijven op webdesigngebied is cruciaal voor het succes van een website en webshop. In twaalf maanden verandert er veel op dit gebied. Daarom wordt er kort gekeken welke trends er in 2018 waren, op welke we voortborduren en welke nieuwe trends er zijn in 2019.

Het jaar 2018

Het formaat
In 2018 werd het design van een website meer en meer bepaald door het formaat van mobiele schermen. Gebruikers zoeken vooral op het internet met hun mobiel. Hier is de layout op aangepast. Zo werd er gebruik gemaakt van symmetrische designs, een webpagina met kortere teksten en grote knoppen met een sterke call-to-action.
Beweging
Geanimeerde achtergronden werden een ding omdat is gebleken dat de gebruiker door beweging zich meer aangetrokken voelde. Zo werden de websites minder statisch en kwamen er micro-interacties. Ook de video’s binnen het webdesign komen in opkomst al worden deze in 2018 alleen nog maar op een aantrekkelijker manier getoond.
Persoonlijk
In 2018 is er een ommekeer gekomen in de onpersoonlijke stockfoto’s en ging het meer naar professionele productfoto’s en illustraties. Deze illustraties worden nu als SVG’s geïmplementeerd binnen websites en niet meer als jpg of png. Het voordeel van SVG’s is dat de afbeelding altijd scherp blijft in welke mate je hem ook vergroot.

2019 en heden

Snelheid
De mens houdt niet van wachten, 50% van de gebruikers die klikt op een zoekresultaat van Google verwacht dat een website binnen 2 seconden geladen is. Als dit langer duurt dan drie seconden dan wordt de website door de gebruiker verlaten. Dit is belangrijk om te weten omdat de grotere zoekmachines al langere tijd rekening houden met de laadsnelheid van pagina’s en hun algoritme voor het rangschikken van websites.. Google heeft in juli 2018 een grote update uitgerold, de Page Speed Update. Deze update zorgt ervoor dat mobiele websites voorrang hebben op de desktop versies en worden gecontroleerd en laadsnelheid en gebruikerservaring.

Voor de gebruikers is het van belang dat zei weten hoelang zij moeten wachten op een handeling die zij uitvoeren. Bijvoorbeeld bij het uploaden van een document. Niet dat hierdoor het uploaden sneller gaat maar je geeft de gebruiker een tijdsindicatie en feedback vanuit het systeem mee.
Material- en Flatdesign
Clean en minimalistisch design worden gekenmerkt door het snel laden van de webpagina wat in 2019 zeer belangrijk is. Zo kunnen zowel mobiele als desktop versies snel laden. Hierdoor kan het material- en flatdesign een bijdrage zijn aan een hogere SEO-waarde. Hierdoor blijft het designprincipe populair en trendy in 2019.

Material- en flatdesign wil niet zeggen dat alles wordt teruggebracht naar twee dimensies. Het gaat juist om het minimalistische design en gebruiksvriendelijkheid. Dit in combinatie met heldere kleuren, zuivere en scherpe randen en veel open ruimte. Het designprincipe is verfrissend doordat het niet afleidt van andere zaken.
Mobile First
Aangezien Google mobiele versies van websites voorrang geeft ten op zichten van desktop versies is het van belang dat we hier met het ontwerpen rekening mee houden. Hierdoor is mobile first design ontstaan. Het start met het designen van de website voor mobiel voordat er wordt begonnen met het ontwikkelen van de desktop versie.
Card Layout
Websites zijn tegenwoordig responsive waardoor de webpagina wordt opgesplitst in losstaande blokken. Deze manier van designen noemen we Card Layout. Elke kaart heeft als waren zijn eigen informatie (titel, afbeelding, iconen etc.). Tevens kunnen ze een korte productinformatie bevatten. Deze designtechniek wordt niet alleen toegepast binnen websites maar ook binnen webshops. Het voordeel voor de gebruiker is dat de boodschap sneller gecommuniceerd kan worden. Het opdelen van informatie zorgt ervoor dat de gebruiker deze sneller in zich opneemt.
A-symmetrisch grid
Het rastersysteem dat gebruikt wordt binnen het webdesign stampt uit de tijd van de kranten en papieren advertenties. Bij dit proces maakten ze al gebruik van een grid die bestaat uit een aantal kolommen. Het grid systeem helpt de ontwerpen de elementen uit te lijnen en is consistent te handhaven binnen het ontwerp. Bij geen gebruik van een grid ontstaat er chaos deze zorgt ervoor dat de gebruiker zich niet op de belangrijkste informatie kan focussen.

In 2019 gaan we de symmetrie in een grid anders benaderen door bedachtzaam het grid te doorbreken en een nieuwe hiërarchie vast te stellen. Zo ontstaat er een A-symmetrisch design (gecontroleerde chaos). Met behulp van kleuren, vormen, texturen, afbeeldingen en typografie kunnen we op een boeiende manier de belangrijkste informatie visualiseren voor de gebruiker.
Vormen
Tussen de trends van minimalisme, material- en flatdesign en A-symmetrische grid zit de trend van de geometrische vormen. Denk hierbij aan driehoeken, zeshoeken en cirkels. Vormen kunnen de kloof overbruggen tussen het flatdesign en een a-symmetrisch grid omdat ze gemakkelijk geïntegreerd kunnen worden binnen een design. Simpele geometrische vormen met felle kleuren kunnen interessante overgangen creëren. Maar dit kan ook met afbeeldingen die in een bepaalde vorm zijn gegoten. Daarbij is de laadtijd snel.

Het A-symmetrische grid gaat goed samen met deze vormen. De balans binnen het design komt door het gebruik van deze vormen weer terug. Geometrische vormen passen gemakkelijk in of naast elkaar waardoor er sneller een hiërarchie ontstaat. Het gebruik van vormen werkt op dezelfde manier als het gebruik van kleur. Ze dragen emotie uit. Rechthoeken vertegenwoordigen stabiliteit, cirkels staan voor een eenheid en driehoek en ruiten voor dynamisch.
Kleuren
Kleur doet veel binnen een website. We gebruiken tegenwoordig niet alleen volvlakkleuren maar ook gradients. Het creëert het gevoel van uniek zijn en frisheid. Dit zien we in 2019 veel terug in de headers in combinatie met een afbeelding.
Brutal Design
Tevens is er een trend die vloekende kleuren met elkaar laat combineren, het zogeheten brutal design. In eerste instantie absurd maar als je beter kijkt naar de mogelijkheden dan is het nog niet eens zo gek. Met het brutal design kun je met een out-of-the box denkwijze op een andere manier bijvoorbeeld CTA toepassen, producten accentueren of headers vormgeven. Uit het brutal design dicteert de kleurkeuze in 2019: roze en turquoie.

Deze kleuren kun je gebruiken als Grain Texture. Grain Texture zijn ongelijkvormige vlekjes die een schaduw, halftransparant of gradient maken.
Typografie
Het gebruik van unieke fontsen zijn erg populair binnen het webdesign het wordt gebruikt om de aandacht van de gebruiker te trekken. Grote bedrijven laten zelfs hun eigen lettertype ontwerpen. In 2019 maken we veel gebruik van sans serif fonts en dramatische typografie. Tegenwoordig is de fontsize extreem groot en zit er veel ruimte in de verticale ruimte (regelafstand). De letters die helemaal zijn gemaakt voor in-your-face. Voorbeelden zijn: Gilroy, Circular, Proxima Nova, GT Walsheim. De kopregels blijven groot, de sub-koppen iets kleiner en de body tekst kleiner dan de sub-koppen.

De gebruiker besteed steeds minder tijd om te lezen. Door grote typografische elementen te gebruiken komt de boodschap sneller binnen. Dit in combinatie met korte teksten. Een fijne bijkomstigheid is dat sans serif fonts voor een betere leesbaarheid zorgt op het scherm. Wat de leesbaarheid vergroot in menu’s, buttons en op de mobiel. Tevens neemt het minder waardevolle ruimte in beslag.
Foto's
Foto’s en video’s blijven de blikvangers binnen het webdesign. Voor als het gaat om het presenteren van producten. Het moet de bezoeker overtuigen dat het product voldoet aan zijn specifieke behoefte.

Hero Image
Net zoals het gebruik van grote video’s in headers is het een trend om grote afbeeldingen te gebruiken. De zogeheten Hero Images. Het enigste wat je hiervoor nodig hebt zijn fantastische afbeeldingen die als een echte blikvanger dienen.

Vormen
Gestroomlijnde vormen zijn eind 2018 een trend geworden. Deze trend zet zich voort in 2019. Denk hierbij aan de afgeronde hoeken. De gestroomlijnde lijnen zijn vooral succesvol in combinatie met kleur en verschillende vormen.
Datavisualisatie
In 2019 is het een trend om geen procesbeschrijving toekomstvisie, jaarverslag te schrijven maar dit juist te visualiseren door middel van balkjes, lijntjes, taartpuntjes en een paar kleurtjes.

Diagonale lijnen
Diagonale lijnen zien er niet alleen speels uit op een website maar het creëert tevens een richtdoel voor de ogen van de gebruiker. Onbewust wordt de lijn gevolgd. Dit kan gebruikt worden om naar een call-to-action te verwijzen.

Icons
Tegenwoordig wordt er steeds meer gebruik gemaakt van icoonbibliotheken. Hierdoor wordt het design meer een eye-cather. Het beste van deze icoonbibliotheken is dat we er CSS op toe kunnen passen. De iconen zijn vector waardoor het altijd schaalbaar blijft en er geen kwaliteitsverlies optreedt. De bestandsgrote van de iconen zijn klein waardoor de snelheid van de website hierop niet achteruit gaat.
Single Page Design
Omdat de laadsnelheid van een website van cruciaal belang is in 2019 komt de single page design steeds meer in. Het houdt in dat de website maar uit één webpagina bestaat. Vanuit het traditionele SEO standpunt is dit geen goed idee omdat het moeilijker is om keywords te bepalen. Dit kan immers niet meer per webpagina. Met een single page design gaat het laden van de HTML, CSS, JavaScript en afbeelding sneller wat zorgt voor een betere experience voor de gebruiker en dit is prioriteit voor de zoekmachines.
Video's
Ondanks dat minimalistisch design en snelle laadtijden in 2019 van het grootste belang zijn. Is het toch een trend om gebruik te maken van videobeelden. Je zou denken dat de laadtijd hierdoor juist een minpunt is maar het vergroot juist de conversie binnen websites.

Een video is nu eenmaal meer zeggend dan een afbeelding of tekst. Als een gebruiker op je website terecht komt en er speelt direct een video in de achtergrond dan is de gebruiker geneigd om de video verder te kijken. Het is een echte trigger en de informatie die je wil overbrengen is er binnen een paar seconden.

Subtiele video’s
https://tributetofemininity.bulgari.com/en-US
https://stphilips.co.uk/

Video’s met user interaction
https://www.velux.dk/se-lyset/?lang=en

Op de website van Velux is te zien dat de video automatisch wordt afgespeeld en dat de gebruiker invloed heeft op de video. Het bedrijf wil laten zien wat daglicht doet met je leven. De gebruiker kan schakelen tussen twee vergelijkbare video’s, zo is het verschil in verschillende lichtsoorten te zien.

Een aanrader is om een donkere video te gebruiker met witte tekst. Dit trekt extra de aandacht van de gebruiker. Verder zijn er een aantal opties waaruit de ontwerper kan kiezen. De video kan automatisch afgespeeld worden of er kan gekozen worden om een play-button te plaatsen zodat de gebruiker hier zelf invloed op heeft. Tevens kun je kiezen voor een .GIF die zich telkens herhaald, een slowmotion video of een normale video.
Micro-animaties
Micro-animatie is een krachtige manier om de gebruiker een intuïtieve en prettige gebruikerservaring te bieden tijdens het navigeren door de website. Dit wordt gedaan door kleine subtiele animaties dat de gebruiker helpt de website te begrijpen. Deze animaties helpt de gebruiker om de juiste acties uit te voeren op de website. Bijvoorbeeld als een menu openklapt wanneer er op het hamburgermenu wordt geklikt. De animaties kunnen bestaan uit achtergrondvideo’s, motion graphics, scroll-effecten en micro-interacties. Deze interacties worden zowel voor desktop als mobile gebruikt. Door de animaties wordt de user experience van de gebruiker vergroot en voelt hij zich meer betrokken.

Voorbeelden https://lecafenoirstudio.com/product/thefairy/ (product toevoegen aan winkelmandje)

https://material.io/design/motion/understanding-motion.html#usage

https://dribbble.com/shots/4846056-Login-flow-interactions (log-in veld)

Tegenwoordig zie je steeds vaker scroll-triggered animation. De informatie van de webpagina wordt pas opgehaald als de gebruiker hieraan toe is en wordt geladen door een simpele animatie waardoor de aandacht naar de nieuwe content wordt getrokken.
Chatbots
De laatste jaren komt interactie met bots steeds meer in opkomst. Een simpel voorbeeld is een chat op een website. In de beginjaren waren ze vrij statisch maar met de komst van Artificial Intelligence (AI) is hier verbetering ingekomen. Een voorbeeld van AI is de hulp die je van Google krijgt bij het typen van een zoekterm, je krijgt hierbij autosuggesties.

In de toekomst wordt AI alleen nog maar meer. Zo kunnen we nu al een automatisch respons creëren in een chatconversatie zonder dat de gebruiker weet dat het een computer is die dit verzorgt.

De toekomst
Stel je een website voor die van te voren weet wat de klant zoekt door simpelweg hun eerdere interacties met het bedrijf te analyseren. Dan zou je de gebruiker eerder op zijn eindbestemming kunnen brengen o de website of webshop.
Menu
Tegenwoordig zie je op steeds meer desktop websites het hamburger menu verschijnen. Deze zijn in verschillende vormen en kleuren te vinden maar bestaan altijd uit drie horizontale lijnen onder elkaar. Het menu is altijd in de linker- of rechter bovenhoek te vinden van een website. Het grote nadeel van het hamburger menu is dat veel gebruikers niet weten dat het om een menu gaat. Een oplossing hiervoor is om onder het icoon de tekst “menu” te plaatsen.

Footer
Wat eerst alleen bedoeld was voor contactinformatie en een inschrijfformulier is overgegaan in een ruimte met aanvullende elementen van de homepage. De footer moet beter aansluiten op het gehele design van de website.
Overige
- Grote headers, maakt het mogelijk om belangrijkste content te benadrukken
- Minimalistisch design, interfaces zijn eenvoudig en zo begrijpelijk mogelijk, zodat gebruiker de comfortabel door de website navigeert.
- Genoeg ruimte tussen elementen, hierdoor wordt het design niet als rommelig ervaren.
- Heldere en contrasterende kleuren.
- 3D elementen, in afbeeldingen
- Gradients
- Animaties, hierdoor wordt de boodschap beter overgebracht en de aandacht van de gebruiker naar het belangrijkste onderdeel getrokken.


Unieke ontwerpen

Nieuwsgierig naar mijn unieke ontwerpen?
Bekijk ze hiernaast, door te klikken op één van deze vier ontwerpen kom je direct bij de projecten.
Veel plezier!