Webdesign

9 webdesigntrends voor 2019

Ontdek de nieuwste webdesigntrends, technieken en methodes die websites in 2019 en later zullen definiëren.

Webdesign

9 webdesigntrends voor 2019

Ontdek de nieuwste webdesigntrends, technieken en methodes die websites in 2019 en later zullen definiëren.

Verkeerd uitgelijnd

Organisch afgerond

In een eeuwige zoektocht naar vernieuwing, zijn webdesigners op het idee gekomen om met opzet elementen verkeerd uit te lijnen. Het resultaat is een rebelse, informele look. Afbeeldingen, texturen en tekstelementen overlappen elkaar, of hebben een bewuste offset, waardoor een diepte-effect ontstaat.

Sinds de opkomst van apps met afgeronde iconen is het een trend om vrijwel alle hoeken af te ronden. Hierdoor ontstaan organische vormen en zachte lijnen. Hierbij worden twee technieken gebruikt: ‘afgeronde rechthoek’ en ‘variabele radius’. Bij ‘afgeronde rechthoek’ is de radius waarmee de hoek wordt afgerond een constante, bijvoorbeeld 30px. Bij ‘variabele radius’ is deze radius uitgedrukt in een nader te specificeren sinusfunctie r(θ). Hierbij is θ de hoek ten opzichte van een as en r de radius. Een dergelijke variabele radius resulteert in een andere (mooiere) afronding van hoeken.

Verkeerd uitgelijnd

Organisch afgerond

In een eeuwige zoektocht naar vernieuwing, zijn webdesigners op het idee gekomen om met opzet elementen verkeerd uit te lijnen. Het resultaat is een rebelse, informele look. Afbeeldingen, texturen en tekstelementen overlappen elkaar, of hebben een bewuste offset, waardoor een diepte-effect ontstaat.

Sinds de opkomst van apps met afgeronde iconen is het een trend om vrijwel alle hoeken af te ronden. Hierdoor ontstaan organische vormen en zachte lijnen. Hierbij worden twee technieken gebruikt: ‘afgeronde rechthoek’ en ‘variabele radius’. Bij ‘afgeronde rechthoek’ is de radius waarmee de hoek wordt afgerond een constante, bijvoorbeeld 30px. Bij ‘variabele radius’ is deze radius uitgedrukt in een nader te specificeren sinusfunctie r(θ). Hierbij is θ de hoek ten opzichte van een as en r de radius. Een dergelijke variabele radius resulteert in een andere (mooiere) afronding van hoeken.

Koeienletters

Maximaliseren

Deze trend zie je voornamelijk bij e-commerce bedrijven. De lettergrootte is opzettelijk te groot, waardoor de titel tegelijkertijd een designelement wordt.

Veel websites in de modewereld gebruiken schreeuwerige lay-outs om hun identiteit te uiten. Het resultaat is wisselend. Vaak wordt dit gecombineerd met de volgende trend.  

 

Koeienletters

Maximaliseren

Deze trend zie je voornamelijk bij e-commerce bedrijven. De lettergrootte is opzettelijk te groot, waardoor de titel tegelijkertijd een designelement wordt.

Veel websites in de modewereld gebruiken schreeuwerige lay-outs om hun identiteit te uiten. Het resultaat is wisselend. Vaak wordt dit gecombineerd met de volgende trend.  

 

Serif/Sans-serif

Subtiele animatie en transparante elementen

Dit duo leent zich uitstekend voor homepagina’s. De titels hebben vaak Serif-lettertypes, terwijl de body, voor leesbaarheid, Sans-serif is. De Serif-lettertypes sluiten aan bij het logo van de website, of de stijl die de website wil uitdragen. Hotels en modehuizen gebruiken daarom vaak Serif-lettertypes, omdat dit beter aansluit bij een luxere lay-out.

Met animatie kun je bepaalde elementen accentueren. Ook kunnen animaties de UI verduidelijken, door de richting van een mogelijke interactie te impliceren. In het voorbeeld is duidelijk te zien hoe beide principes worden gebruikt. Ook kunnen transparante elementen informatie geven over de opbouw en hiërarchie van een website.  Beide technieken zijn perfect te combineren met een parallaxeffect.  

Serif/Sans-serif

Subtiele animatie en transparante elementen

Dit duo leent zich uitstekend voor homepagina’s. De titels hebben vaak Serif-lettertypes, terwijl de body, voor leesbaarheid, Sans-serif is. De Serif-lettertypes sluiten aan bij het logo van de website, of de stijl die de website wil uitdragen. Hotels en modehuizen gebruiken daarom vaak Serif-lettertypes, omdat dit beter aansluit bij een luxere lay-out.

Met animatie kun je bepaalde elementen accentueren. Ook kunnen animaties de UI verduidelijken, door de richting van een mogelijke interactie te impliceren. In het voorbeeld is duidelijk te zien hoe beide principes worden gebruikt. Ook kunnen transparante elementen informatie geven over de opbouw en hiërarchie van een website.  Beide technieken zijn perfect te combineren met een parallaxeffect.  

Scrollinput koppelen aan animatie

Gifjes en video’s

Veel hippe productpagina’s koppelen de scrollinput aan bepaalde elementen, waardoor een interactie ontstaat tussen het scrollen en de animatie. Ditzelfde wordt ook vaak toegepast op de positie van de cursor, alleen is dit effect al een stuk ouder.

Een foto zegt meer dan 1000 woorden en een Gif zegt meer dan 1000 foto’s. Gifjes (of autoreplay-video’s) maken het veel makkelijker om producten aan te prijzen, omdat het direct duidelijk is wat je ermee kunt.

Scrollinput koppelen aan animatie

Gifjes en video’s

Veel hippe productpagina’s koppelen de scrollinput aan bepaalde elementen, waardoor een interactie ontstaat tussen het scrollen en de animatie. Ditzelfde wordt ook vaak toegepast op de positie van de cursor, alleen is dit effect al een stuk ouder.

Een foto zegt meer dan 1000 woorden en een Gif zegt meer dan 1000 foto’s. Gifjes (of autoreplay-video’s) maken het veel makkelijker om producten aan te prijzen, omdat het direct duidelijk is wat je ermee kunt.

Scheve afbeeldingen

Nog zo’n rebelse trend. Een manier om een website een informele uitstraling te geven, is door afbeeldingen iets te draaien, waardoor het aantal horizontale en verticale lijnen beperkt wordt.  

Scheve afbeeldingen

Nog zo’n rebelse trend. Een manier om een website een informele uitstraling te geven, is door afbeeldingen iets te draaien, waardoor het aantal horizontale en verticale lijnen beperkt wordt.