Blog

4 trends in hedendaags webdesign


Webdesign is heel erg onderhevig aan trends. Herinner je je nog de bewegende GIF’s uit de jaren negentig? Vandaag zien websites er veel strakker uit, met frisse kleuren, mooie fotografie, paginabrede foto’s en heldere typografie.

Hieronder zetten we enkele van de meest opvallende website trends voor dit en volgend jaar even op een rijtje.

1.Lange pagina’s

Dankzij de opkomst van smartphones hebben websitebezoekers geen bezwaar meer tegen lange pagina’s. Onmiddellijk naar beneden scrollen bij het openen van een website is een soort van automatisme geworden.

Vroeger was de “vouwlijn” van een webpagina van groot belang. Dat is de lijn waarboven alle inhoud op één scherm te zien is, zonder scrollen. Bij een scherm met een resolutie van 1024 x 768 pixels ligt die lijn op 570 pixels van de bovenrand. Boven deze denkbeeldige vouwlijn moest dus de belangrijkste informatie komen te staan. Tegenwoordig surft de meerderheid van de bezoekers op een scherm met een betere resolutie. Zij zullen wat onder de vormlijn staat ook al deels te zien krijgen.

Aangezien surfers vandaag vaker scrollen, is het belang van de vouwlijn sterk afgenomen. Maar om de vouwlijn volledig af te schrijven als voltooid verleden tijd, is voorbarig. Het soort website speelt hierbij een grote rol: voor bekende webshops of online kranten is paginalengte helemaal niet van belang. Maar een doorsnee bedrijf of organisatie plaatst zijn belangrijkste informatie best wél nog boven de vouwlijn, en plaatsen minder belangrijke informatie zoals nieuws en evenementen wat lager op de pagina.

Los daarvan bieden lange pagina’s best wel wat voordelen, zoals:

  • Geeft mogelijkheden voor verhaalopbouw met mooie visuals
  • Draagt bij aan eenvoudige navigatie
  • Stimuleert interactiviteit

Een nadeel van lange pagina’s kan zijn dat je bezoeker minder makkelijk de info vindt die hij zoekt.

Of je dus gaat voor een lange of een korte pagina hangt in de eerste plaats af van de doelstellingen van je website. Wil je vooral het verhaal van je brand vertellen en je bezoeker overtuigen van je merk, dan zijn lange pagina’s een goede optie. Ligt de nadruk op eenvoud en wil je de bezoeker zo snel mogelijk de juiste informatie bezorgen, dan hou je het best bij een korte pagina met duidelijke navigatie.

De homepage van G-zien is een voorbeeld van lange pagina’s.

De homepage van delice-waregem.be/ (design door G-zien) is een voorbeeld van een korte pagina.

2. Minimalisme of “Flat design”

Misschien heb je al wel gehoord van de term ‘flat design’. Kort gezegd is flat design een websitetrend die gebaseerd is op een minimalistische manier van ontwerpen.

Kenmerken zijn:

  • eenvoudige templates
  • tekst geplaatst op de ‘negatieve ruimte’ in een foto:

manon

www.esthetiekmanon.be/, design: G-zien

  • heldere, vlakke kleuren
  • gebruik van logo’s

slagerij lieven

www.slagerijlieven.be/, design: G-zien

  • eenvoudige lettertypes zonder schreef

Bij flat design ligt de nadruk vooral op de boodschap en minder op het beeld.

Designers houden van flat design omdat het mogelijkheden biedt om snel informatie mee te geven aan de bezoeker op een manier die nog steeds visueel aantrekkelijk is. Doordat flat design veelvuldig gebruik maakt van eenvoudige, vectoriële elementen kunnen webpagina’s makkelijk “responsive” gemaakt worden: de pagina past zich aan de grootte van het scherm aan en de weergave blijft helder en scherp.

Daarom wordt vaak gezegd dat flat design nog wel enkele jaren zal blijven bestaan.

“Material design” is een nieuwe opkomende webdesigntrend, recent geïntroduceerd door Google. Het bouwt voort op de principes van flat design, maar herintroduceert enkele ingewikkeldere grafische elementen. Zo werkt material design op basis van gelaagde beelden, een principe dat je ook in beeldbewerkingssoftware terugvindt. Er wordt veelvuldig gebruik gemaakt van ingebouwde animaties en schaduweffecten. Material design is 3D-gebaseerd en richt zich in de eerste plaats op mobiele schermen.

3. Belang van fotografie

Moderne webpagina’s maken steevast gebruik van krachtige, paginabrede beelden die de bezoeker als het ware in de website meezuigen. Die beelden worden ook wel ‘hero images’ genoemd. Vaak begint een pagina met zo’n prachtig hogeresolutiebeeld en volgen daarna enkele kleinere beelden, georganiseerd in twee of meerdere kolommen of in een kaartlayout.

Wat beelden betreft, wordt er tegenwoordig ook minder gebruik gemaakt van stockfotografie. Eigen beelden krijgen de voorkeur.

zuidplant

www.zuidplant.be, design G-zien

Websitebezoekers zijn meer geneigd om beelden te bekijken dan tekst te lezen. Daarom worden andere elementen zoals menu-knoppen tegenwoordig voorzien van beelden die aanspreken.

manon

www.esthetiekmanon.be/, design G-zien

4. Animaties

Webanimatie is een breed begrip. Het omvat alles wat een suggestie van leven of beweging kan geven op een website: van een knop die van kleurtint verandert bij hoveren tot paginabrede achtergrondvideo’s. Animaties kunnen zeer subtiel zijn en het valt je als bezoeker meestal zelfs niet op dat je er mee te maken krijgt.

Deze websitetrend is te verklaren doordat de computertaal CSS3, die deze animaties mogelijk maakt, door meer en meer browsers ondersteund wordt. Het is sinds de opkomst van flat design ook een welgekomen manier om een minimalistische website net dat tikkeltje extra te geven.

Met animaties maak je je website levendiger, overzichtelijker en vriendelijker. Een belangrijke voorwaarde hiervoor is echter dat je ze subtiel gebruikt. Als je teveel verschillende animaties door elkaar toepast op één pagina, wordt het al snel chaos.

Enkele voorbeelden van animaties zijn:

  1. Vertraging: een knop verschijnt pas een seconde na de rest van de pagina. Zo geef je hem extra aandacht.
  2. Effecten bij hoveren: als je over een beeld beweegt met je muis, verschijnt of verdwijnt een lay-over, schuift er tekst over het beeld, keert het beeld om, zoomt het beeld in…

Naamloos

www.delice-waregem.be/, design: G-zien

  1. Parallax scrolling: tekst en beeldelementen schuiven met verschillende snelheden over het beeld tijdens het scrollen.
  2. Galerijen en slideshows: een uitstekende manier om meerdere beelden te tonen zonder de layout van je pagina te overbelasten.
  3. Achtergrondanimaties en video’s: deze kunnen snel overweldigend zijn, subtiliteit is hier van groot belang.

Conclusie

Zoals met elke trend moet je met websitetrends voorzichtig zijn: het is niet omdat ze populair zijn dat je ze zeker moet gebruiken. Ze kunnen wel een goede leidraad bieden en je helpen om je website een voorsprong te geven op die van de concurrentie.

G-zien heeft een ruime ervaring met modern webdesign. Op basis van je briefing werken we een website uit die echt aanspreekt. Laat een berichtje na en we contacteren je zo snel mogelijk.

GRATIS EBOOK!

Ontvang nu 10 gratis tips voor een succesvolle website!