10 Webdesign trends waar u dit jaar niet omheen kunt

  Agency, Corporate, Media

Zoals ieder jaar, heb ik alle hoeken en gaten van het internet afgezocht naar de nieuwste belangrijke trends die we vaker gaan terugzien op websites die dit jaar worden gelanceerd. Van layout tot kleurgebruik, typografie tot witte vlakken en alles ertussenin. Ieder designelement is bekeken bij het bepalen van deze trends.

Hieronder vindt u de tien designtrends waar u online meer van gaat zien.

1. Een gebroken grid en asymmetrische opmaak.

Deze trend besprak ik bij mijn designvoorspellingen van vorig, maar het ziet ernaar dat deze nog wel even standhoudt

In webdesign wordt een grid toegepast als een combinatie van strakke horizontale en verticale lijnen die helpen bij het creëren van de lay-out. Bij de meeste sites is het gird makkelijk te herkennen, linksonder wordt vaak het logo geplaatst, en logo, titels en content staan veelal op één lijn. Als het grid gebroken wordt, staan de onderdelen los van elkaar in een ontwerp dat minder rigide aanvoelt.

Het grootste gedeelte van de website van Times Talks heeft een gebroken grid, zeker in de header (die u hierboven ziet) en in verschillende andere secties.

Dit type design, dat aanhaakt op het onverwachte en grensverleggende, zien we nu al een tijdje. Het is een manier om de site onderscheidend te maken, op te vallen en met het ontwerp te experminteren. In 2019 zie ik dat dit statement steeds vaker wordt gemaakt op het web.

Studio Revele experimenteert met een asymmetrisch en gebroken grid op hun homepage (de cirkels kunnen heen en weer worden gesleept zodat dit concept nog eens wordt versterkt).

Ik verwacht in 2019 vaker gebroken grids en asymmetrische lay-outs te zien, omdat we het rigide grid van de afgelopen jaren gaan loslaten. Door met het grid te experimenteren en asymmetrie toe te laten in webdesign, denk ik dat deze trend nog prominenter wordt dit jaar.

2. Organisch design en fluïde onderdelen

We laten de rechte lijnen van platte ontwerpen achterwege en experimenteren steeds vaker met fluïde vormen en lijnen. Vormen die niet te categoriseren zijn onder de typische cirkel, vierkant of rechthoek worden vaak fluïde of organische vormen genoemd.

Een aantal accenten van de homepage van Wandering Aimfully bestaat uit organische vormen en lijnen achter ronde foto’s en als subtiele achtergrond voor de titels.

Door de rechte en bijna klinische lijnen die we gewend zijn online te zien achterwege te laten en deze te vervangen door elementen die aan de natuur en het leven refereren (zoals de vormen van meertjes of gescheurd papier), voelt het ontwerp toegankelijker en menselijker aan.

Mawla’s website maakt ook gebruik van organische vormen en lijnen, zeker in de header van de homepage.

Dit jaar worden de typische vormen die vaak werden toegepast binnen webdesign (zoals cirkels en vierkanten) vergezeld of vervangen door meer organische vormen en lijnen. Zo worden de nieuwste websites voorzien van geheel nieuwe, intrigerende elementen.

3. Nostalgisch / Throwback / Retro

Al het oude wordt weer nieuw. Nu we verder kijken dan flat design en de experimentatiedrift geen grenzen kent, lijkt de tijd rijp om oude, nostalgische designelementen terug te brengen.

Het webdesign van Statamic maakt gebruik van een retro kleurenpalet dat doet denken aan de felle kleuren en beelden van de jaren 80.

Experimenteren met nostalgische en retro designelementen kunnen een mooi contrast tussen toen en nu veroorzaken. Wat deze trend nog interessanter maakt, is dat we nog meer retro stijlen verwachten te zien die afkomstig zijn uit periodes voordat websites voor de massa toegankelijk waren, zodat deze look voor veel mensen nieuw zal aanvoelen.

De website van Great Jones maakt gebruik van de typografie en een palet uit de jaren 70. Een esthetiek die lang voor ARPANET in 1983 populair was.

Ik denk dat meer websites stijlen zullen omarmen die afkomstig zijn uit het verleden, zowel in het design als de content van de sites. Het zal waarschijnlijk om kleurenpaletten gaan die afkomstig zijn van voorbije designtrends en typografie die ons aan vroeger doet denken.

4. Creatieve beeldbewerking

Foto’s hebben altijd tot unieke designs geleid, zeker op het internet. Beelden die in cirkels zijn geplaatst, zwart-wit filters, een drop shadow, dit zijn allemaal technieken die designers hebben gebruikt om beelden op websites (en andere plekken) te doen opvallen.

Op de website van KOBU zijn de teamleden uit de originele foto’s gesneden, zodat het design één geheel vormt .

Een stap verdergaan in het bewerken van beeld kan meer aandacht voor de foto genereren of zelfs de aandacht naar een ander element leiden. Al maken de meeste website nog gebruik van een groot statisch headerbeeld over de gehele breedte en een deel van de hoogte van de site, denk dat ik dat steeds meer websites creatiever zullen omgaan met de manier waarop foto’s worden gepresenteerd.

Op de site van Drip staan foto’s die zijn versneden en waarop tekeningen en vormen zijn getekend zodat het design van de website nog meer nadruk krijgt.

In plaats van één behandeling op alle beelden toe te passen, verwacht ik dat website verschillende toepassingen zullen gebruiken om meer of juist minder aandacht op foto’s te vestigen. We zullen dit jaar steeds vaker zien dat foto’s worden uitgesneden, in duotoon worden opgemaakt of van een patroon worden voorzien om zo tot een geheel nieuw beeld te komen.

5. Effen designs en de afwezigheid van kleur

Het is natuurlijk geweldig om miljoenen kleuren tot je beschikking te hebben, maar wat er gebeurt er wanneer we ons tot één kleur beperken of alle kleur achterwege laten? Als het goed wordt gedaan kan dit type design een site verbeteren en onvergetelijk maken.

Digital Bro’s website houdt het bij een effen kleurenschema door slechts één specifieke geeltoon toe te passen waar nauwelijks van wodt afgeweken (op het gebruik van zwart en wit na).

Wanneer een merk zich tot één kleur beperkt levert dat sterke branding op, ook al maakt het het design van een website minder flexibel. De meeste website gebruiken twee tot vijf kleuren, en dus valt het gebruik van één kleur op en maakt het de site onvergetelijk voor de bezoeker.

De website van Climate houdt het bij een thema in grijstinten dat gespeend is van kleur. Zelfs de video’s op de site zijn zwart-wit.

Het beperken van het palet nog één stap verder nemen door alle kleur weg te laten is zeker een optie wanneer u het kleurgebruik op de site wilt versimpelen (binnen de kunsten en design worden zwart, wit en grijs niet als kleuren beschouwd). Ik verwacht dat steeds meer websites dit jaar zullen kiezen voor minder of helemaal geen kleur.

6. Overlappende designelementen

Net als het gebroken grid en het gebruik van asymmetrie, is het overlappen van elementen een goede manier om voor specifieke content aandacht te vragen. Dit kan voor een verrassend ontwerp zorgen, aangezien we zo gewend zijn geraakt aan sites waarop iedere element zijn eigen ruimte heeft en de andere elementen niet raakt.

Mad Studio’s website maakt gebruik van overlappende elementen door de gehele site, dit ontwerp wordt nog eens versterkt door subtiele animaties die het geheel een driedimensionale look geven.

Zolang het gebruik ervan weloverwogen wordt gedaan, kan deze trend de esthetiek van de site sterk verbeteren. Overlappende elementen kunnen voor verwarring en frustratie zorgen, zeker omdat we websites steeds vaker op mobiele apparaten bezoeken.

De website van Hers maakt op een paar plekken gebruik van overlappende elementen, zoals in de header van de homepage.

Overlappende elementen die gebruik maken van dezelfde ruimte is een trend die dit jaar zal groeien, net als driedimensionale websites.

7. Heruitgevonden headers

Zoals hierboven al werd gemeld, tonen de meeste headers een grote foto over de gehele breedte van de site, vaak met tekst erboven die de aandacht van de bezoeker moet vragen. Gedurende de laatste jaren werd er bijzonder weinig geëxperimenteerd met dit gebied van de site, terwijl het misschien wel het belangrijkste gedeelte is.

Een unieke aanpak voor de header zien we bij Zoo Creative die dit gedeelte als billboard gebruiken en slim gebruik maken van animaties.

Sommige websites hebben de mogelijkheden van headers al verkend. Nu we de typische foto’s over de gehele breedte met tekst laten voor wat ze zijn, verwacht ik dat meer en meer designers zullen gaan experimenteren met dit gebied.

De site van Andreas Nymark heeft een witte headers met een simpele titel aan de onderzijde (daarin zien we ook een andere trend die we verderop in dit artikel bespreken).

Dit jaar zullen we verschillende nieuwe manieren zien om de header op te maken, zoals het gedeelte verkleinen, de content wijzigen (en iets anders dan een brede foto plaatsen) en headers die worden ingezet om de aandacht van de bezoeker vast te houden.

8. Grote en experimentele navigatie

Het lijkt erop dat er ieder jaar sprake is van een trend die met navigatie te maken heeft. Hoogstwaarschijnlijk is dit omdat het een van de ingewikkeldste elementen van een site is. Essentieel voor het gebruik van een website, maar lastig om functioneel en esthetisch te ontwerpen.

De site van 56 Digital maakt gebruik van een nogal grote navigatie, in het midden van de pagina in plaats van een kleiner, minder opvallend gedeelte te gebruiken.

Dit jaar gaan we meer experimentatie zien op het gebied van navigatie. Maar in plaats van een paar kleine wijzigingen zoals plaatsing, lettergrootte of de lay-out, zien we veel grotere ingrepen zoals sites waarbij navigatie het grootste onderdeel is dat alle aandacht vraagt.

De website van Gander maakt gebruik van nogal grote navigatie-elementen in de vier hoeken van de site in plaats van de typische balk aan de boven- of onderzijde van de pagina.

We gaan dit jaar hele grote navigatie-elementen zien, homepages die volledig in beslag zijn genomen door de navigatie en navigatie-design die gebruik maken van verfijnde animaties.

9. Meer dan genoeg witruimte

Het gebruik van witruimte wordt al decennialang ingezet door ontwerpers. Het is echter niet zo gebruikelijk om de focus op de witruimte te leggen in plaats van de content.

De site van Daniel Boddam maakt gebruik van extra witruimte in de header van de pagina. Dit valt op omdat dit gedeelte normaal gesproken vol met content wordt gestopt.

Deze toepassing van extra witruimte is anders dan de gebruikelijke reden witruimte in te zetten, namelijk voor marges en het creëren van plekken waar de bezoeker zijn ogen kan laten rusten. Extra witruimte kan de ogen juist naar een bepaald punt trekken zodat het meer aandacht vraagt. Door extra witruimte toe te voegen aan een gedeelte dat het niet perse nodig heeft, krijgt het extra belang en zal het meer opvallen bij bezoekers.

De website van Maxime Rimbert maakt veel gebruik van witruimte zodat de werken eronder meer aandacht krijgen en deze worden gescheiden van de intro.

Dit jaar gaan we meer websites tegenkomen die witruimte inzetten om een statement te maken of aandacht te vragen voor een bepaald gedeelte van de site. In het verleden werd teveel witruimte gezien als ruimteverspilling, maar deze trend maakt dat mensen er de toegevoegde waarde van inzien.

10. Grensverleggende typografie

Experimenteren met typografie is niet nieuw, maar het is lastiger dit op het web te doen dan in print. Nu coding steeds verfijnder wordt, is het ook makkelijker geworden om te experimenteren met typografie.

De website van Kurppa Hosk experimenteert met typografie door er animaties en interactieve elementen aan toe te voegen. De tekst explodeert en vormt een cirkel rond de cursor.

Onder het experimenteren met tekst valt het snijden of weglaten van letters of woorden (en negatieve ruimte de tekst te laten afmaken), fotografie binnen de typografie, typen op een diagonale lijn of andere vorm, geanimeerde letters, etc.

De website van ARCHE68 heeft typografie die verder gaat dan de tweedimensionale grenzen en bijna 3D wordt. De typografie kan meer dan alleen buigen, de letters scrollen automatische mee naar links en rechts en beneden en onder (daarin zien we ook de eerder besproken navigatietrend terug) .

Dit komende jaar zullen we experimentatie met typografie nog vaker tegenkomen. Het experimenteren met tekst is makkelijker in print, en dus kunnen we verwachten dat we de manier waarop tekst werd behandeld in print terug gaan zien op websites.

Een aantal samenvattende punten:

We leven in een post flat design wereld waarin websites met een veel experimentelere aanpak worden ontworpen dan voorheen. Dit jaar is vrijwel geen element van de webpagina vrij van experimenteerdrift.

(Meer inspiratie nodig? Bekijk onze 2018 webdesign guide, 2017 webdesign guide en 2016 webdesign guide).

Met extra witruimte, navigatie als belangrijk onderdeel van de website, het experimenteren met typografie en het gebruik van retro design, ziet het er naar uit dat websites dit jaar alles uit de kast trekken en geen onderdeel van de site onbenut laten.

Dit artikel is geschreven door Amber Leigh Turner van The Next Web en werd gelicentieerd door het NewsCred uitgeversnetwerk. Voor vragen mbt de licentie kunt u mailen naar legal@newscred.com.