Bel direct Ontdek moddit
MENU
Mijn Moddit

Design

Top 10 webdesigntrends van 2017

18 sep 2017 8 min. leestijd Daniel Pattiasina

Komt ie dan he! De top 10 webdesign trends van 2017 tot nu toe en een kijkje in de nabije toekomst… Wat zien we steeds vaker? Wat verdwijnt? Wat maakt zijn comeback? Ik struinde de digitale snelweg af om te kijken wat er hot is in de supersnelle, veranderende wereld van het internet!

Als webdesigner heb ik zowel een grafische als een technische achtergrond. Het is voor mij belangrijk om op de hoogte te blijven van de nieuwste technische ontwikkelingen op gebied van front-end, maar ook alle trends op gebied van webdesign. Ik neem een lading websites onder de loep die ik ben tegengekomen bij populaire website-ere-gallerijen zoals CSS Winner en Awwwards. Ik leg je precies uit wat deze websites zo speciaal maakt!

01. Subtiele achtergrondvideo’s

Een foto zegt meer dan 1000 woorden. Nou, een video nog meer. Pakweg een jaar geleden zagen we bij veel moderne websites de video header. Je komt een website binnen en BAM! Een video wordt full-screen afgespeeld op de achtergrond met wat subtiele titels die over het beeld verschijnen.

We zien video’s dus steeds vaker, maar hij hoeft niet meer alleen full-screen bovenaan de website getoond te worden. En we hebben het niet persé meer over video’s met een soort uitleg of instructie of überhaupt met geluid. Nee, het komt juist steeds vaker voor dat we door websites scrollen en halverwege de pagina een video subtiel op de achtergrond zien afspelen. Geen geluid, geen drukke beelden, geen poespas, maar gewoon ondersteunende beelden die half transparant op de achtergrond liggen. Vaak in combinatie met grote koppen, een klein stukje uitleg en wat conversie knoppen.

En het werkt! We zien korte, eenvoudige beelden die een heel specifieke sfeer neerzetten. We lezen relatief weinig tekst en we hebben een duidelijke call-to-action.

A Digital Volcano

02. No-hero header

Nog populairder dan de video-header is de bijna altijd aanwezige hero-header. Altijd aanwezig bovenaan iedere pagina; een foto over de hele breedte van je scherm. Vaak op de home-pagina iets groter dan op de vervolgpagina’s. Het zet gelijk de toon en de sfeer van de website neer, maar toch zien we de hero-header steeds vaker verdwijnen.

Tegenwoordig willen we allemaal beter gevonden worden in Google en als er iets is waar Google gek op is, zijn het snelle website. Foto’s nemen veruit het meeste ruimte in beslag en een grote hero-header helpt nou niet bepaald mee voor snelle pagina’s. Door de bekende hero-header weg te halen, worden pagina’s aanzienlijk sneller geladen.

Maar het heeft nog een functie: rust. Wie zegt dat je geen goede eerste indruk kunt achterlaten met een korte of krachtige tagline of payoff? Steeds meer websites openen met een paar woorden in plaats van grote beelden en die hero-header of een soortgelijke grote sfeerbeeld wordt later op de pagina gezet.

03. Flat Design 2.0

Flat design is al een tijdje populair. Herkenbaar aan het “platgeslagen” design. Geen drop-shadows of inner-shadows, weinig diepte of verloop, maar zachte kleuren en cartoonachtige visuals. Toch is het absolute flat-design zoals we deze in de hippe beginfase zagen subtiel veranderd. Het probleem met flat-design is namelijk dat het vaak niet duidelijk is waar op geklikt moet worden. Als alles is platgedrukt, vallen conversieknoppen nou eenmaal niet meer op.

De oplossing? Kleine subtiele aanpassingen die zorgen voor iets meer diepte. Subtiele schaduwen, highlights, een kleine gradient, licht contrast in kleuren en diepteverschil creëeren door op speelse wijze met de voor- en achtergrond te werken. Flat Design 2.0 is nog steeds flat, maar iets speelser.

04. Geometrische vormen

Geometrische vormen hebben harde hoeken, strakke lijnen. Ze suggereren beweging, kracht en energie. Een goede keuze dus voor bedrijven of producten die dat willen uitstralen. We zien dat polygonen vaak worden weergegeven in een klein kleurenpalet. Er wordt gespeeld met diepte en schaduwen en de illusie wordt gewekt dat een illustratie driedimensionaal is. Aan de andere kant kunnen geometrische vormen ook eenvoudig in een herhaald patroon worden gebruikt. Door het op die manier toe te passen, ontstaat er orde en krijgt de website juist een rustige uitstraling. Geometrische vormen zijn in dat opzicht dus letterlijk en figuurlijk veelzijdig!

05. Gradients!

De gradients hebben helemaal een comeback gemaakt! De kleurverlopen worden op allerlei manieren toegepast. In conversie knoppen, als achtergrond van teksten, als een overlay van afbeeldingen of gewoon als achtergrond van de pagina.

Gradients bestaat vaak uit twee kleuren, maar ook de regenbooggradient, waarbij er drie of zelfs meerdere kleuren worden gebruikt, zien we steeds voorbij komen. Je ziet het op verschillende manieren terugkomen. De gekozen kleuren in het verloop liggen soms dicht bij elkaar, waardoor de gradient subtiel is, zoals donker en lichtgroen. Een andere veel voorkomende gradient is er één met kleuren die in contrast staan met elkaar, zoals rood en blauw.

06. Snel en simpel, minimalistisch en uitgekleed

Less is more. En in dit geval is less vooral sneller. Minimalistische designs zijn flink in opkomst. Zwart-witte websites met weinig fotografie. Weinig lange teksten, maar meer gebruik van korte kreten en heldere conversies. In deze kunst van het weglaten zien we websites waarin veel witruimte is terug te vinden. Doordat er relatief weinig elementen op de pagina aanwezig zijn is er ook weinig verschil tussen de desktop-versie en de mobiele versie.

 

 

Wat we ook vaak zien in combinatie met minimalistische designs, is dat elementen het standaard stramien van de website doorbreken. Willekeurige zwevende foto’s en alinea’s zorgen voor een wat meer magazine-achtige look. Op deze manier wordt de minimale content verdeeld over de pagina voor meer opvulling.

07. Big typography

Het is geen geheim dat bezoekers geen trek hebben in het lezen van lange lappen tekst. Hoe kunnen we er dan toch voor zorgen dat onze boodschap overkomt bij de eindgebruiker? Ze moeten toch weten wat we doen? Vaak zijn een paar woorden al genoeg, dus wat doen we? We houden het kort en we blazen te tekstgrootte even flink op. Simpel. Snel. Duidelijk.

 

08. Foto maskers

Een combinatie van grote typografie of grote vormen en een grote afbeelding die beperkt wordt weergegeven. We zien deze visueel sterke trend steeds vaker. Een bedrijfsnaam of de slogan in grote, vette letters dat een masker vormt van een sfeerfoto die op subtiele wijze achter de tekst wordt geplaatst. Een origineel alternatief op de hero-header of zelfs de video-header. Het komt namelijk ook nog wel eens voor dat er een video achter het masker schuilt!

Hier wordt een foto achter een vorm gemaskeerd

09. On the side

Weg met die sidebar! Als je website niet responsive is, doe je niet meer mee. En waarom die sidebar naar onderen schuiven op kleine schermen als hij ook op de grote schermen over breedte gevuld kan worden? Deze oplossing wordt steeds vaker gebruikt. Om ruimte te besparen wordt de content die vaak in sidebars staat ook nog wel eens verborgen achter een popup, een accordeon of een ander vergelijkbaar uitklapmenu. Zo zien we steeds vaker filters bij webwinkels over de breedte boven de producten staan in plaats van aan de zijkant.

Uitgeklapte filters op Weber.com

10. Monotone en duotone websites

Soms komen we websites tegen die een duidelijke stijl hebben met een eenvoudig kleurenpalet. Een monotone website maakt gebruik van slechts een enkele kleurtint en voert dit overal door, met name in de afbeeldingen. Een duotone website gebruikt twee kleurtinten. In beide gevallen straalt het ontwerp vaak rust uit. De nadruk wordt gelegd op tekstuele elementen en beeldmateriaal verliest diepte, waardoor het makkelijker in de achtergrond opgaat.

Conclusie

De rode draad die we terug zien komen in de meeste trends? Snelheid. Minimalistische designs, grote typografie met korte teksten, simpele en subtiele animaties en effecten en kleine en eenvoudige afbeeldingen. Indirect zijn het allemaal voorbeelden om pagina’s sneller te maken. En dat is niet alleen leuk voor de bezoeker, maar ook voor Google.

We zien daarnaast dat de content veel gerichter is. Geen lange uitleg meer, maar kort en to the point. Lange teksten worden ingekort tot korte, bondige slogans. We zien steeds vaker de kunst van het weglaten, want: less is more.

Meer weten? Neem contact op met de auteur:

Daniel Pattiasina - Webdesigner

0548 612 805 - daniel@moddit.nl

Samen het verschil maken?

  • Vind ons
  • Marie Curiestraat 2
    7442 DP Nijverdal
Uw browser is niet meer van deze tijd!

Update uw browser om optimaal van deze website (en vele anderen) te genieten Nu updaten!

×