Webdesign trends in 2013

Home
blog
Webdesign trends in 2013

Webdesign trends in 2013

There are no tags 0 comments

Technische ontwikkelingen en de financiële crisis vormen nieuwe trends op het gebied van webdesign. Hieronder hebben we enkele van deze webdesigntrends voor 2013 op technisch en visueel gebied voor u opgesomd.

Technische trends

De wereld van het webdesign veranderd snel. Trends in 2013 worden vooral gedreven door nieuwe technische mogelijkheden. Technieken zoals CSS3, HTML5 en webfonts zorgen voor meer flexibiliteit en de mogelijkheid voor mooiere designs. Hierdoor was onder andere responsive design in 2012 al een opkomende trend. Ook zorgen nieuwe development methodes zoals Initializr en Bootstrap van Twitter voor meer mogelijkheden en snelheid in het maken van een website.

1. Responsive design

Dit is een trend die in 2012 al sterk is ingezet. Responsive design is gebaseerd op technieken die het mogelijk maken de website layout aan te passen aan het type device waarop een website opgevraagd wordt.

Responsive design

Bron: campusuite.com

U kunt zelf het responsive design van een pagina testen door naar de pagina te gaan en omhoog of omlaag te scrollen terwijl u de ‘ctrl’-button op uw toetsenbord ingedrukt houd. Als een design goed responsive is, dan ziet u verschuivingen in de website layout. Ook wordt het menu vaak anders weergegeven als u ver inzoomt. Het kan bijvoorbeeld voorkomen dat op mobiel het menu weergegeven wordt als dropdown box.

Bij BeeFamous passen wij deze technieken ook toe zodat uw website op desktop, tablet en mobiel altijd correct en mooi is weergegeven. Een voorbeeld hiervan is de recente case van Kleemans.

webdesign interim in de zorg

2. Web Fonts

Voorheen was het vrij lastig om een mooi lettertype op uw website te plaatsen die afwijkend was van de standaard lettertypes zoals Arial, Times New Roman of Verdana. De reden hiervoor was dat alleen lettertypen gebruiken konden worden die op de computer van de gebruiker aanwezig waren. Dit was bij de standaard lettertype altijd wel het geval. Was het lettertype echter niet op de computer van de gebruiker aanwezig, dan werd het lettertype op je website vervangen door een lettertype die wel aanwezig was op deze computer. Dit kwam vaak niet ten goede aan de uitstraling van de website.

Om destijds een afwijkend lettertype te gebruiken, moest je de tekst als afbeelding weergeven. Dit maakte het echter moeilijk leesbaar voor bijvoorbeeld de zoekmachines, waardoor men weer allerlei technieken toe moest passen zoals ‘image replacement’. Er is echter een oplossing!

Met de komst van Google Web Fonts is dit allemaal namelijk niet meer nodig. Google heeft er voor gezorgd dat lettertype online op te vragen zijn en niet op de computer van de gebruiker geïnstalleerd hoeven te zijn. Zo kan een webdesigner door middel van een relatief eenvoudige code Google Web Fonts toevoegen aan het design om het lettertype te kunnen kiezen wat bij dit design aansluit.

Google web fonts

Bron: google.com/webfonts

Ook BeeFamous heeft de kennis in huis om Google Web Fonts te gebruiken, zoals op bijvoorbeeld onze eigen website gedaan is.

4. Swipen

Met de opkomst van touch screens, niet alleen voor tablets en mobieltjes, maar ook desktop computers en laptops, wordt swipen steeds belangrijker.

Swipen ipad

Bron: vangoghvillagenuenen.nl

Tegenwoordig zijn ook steeds meer technische mogelijkheden hiervoor terug te vinden. Zo is er bijvoorbeeld een plugin voor het CMS wordpress (LINK http://www.mijnipad.net/ipad-swipe-wordpress-plugin-swipen-op-je-homepage/) die swipen door artikelen op uw website mogelijk maakt.

Ook op onze eigen website zijn dit soort functionaliteiten toegevoegd. Zo kunt u op onze homepage de galerij bovenin en door onze artikelen onderin swipen.

5. Grid layouts

Grid layouts zijn layouts die zich duidelijk in blokken afbakenen. Een voorbeeld van een dergelijk design is hieronder te zien.

Grid design

 

Dit design van W+K Amsterdam, een creatieve agency, is duidelijk opgedeeld in blokken en is volledig responsive. Het past zich uitstekend aan op diverse beeldgroottes.

Dit is een trend die zich onder andere ontwikkeld heeft door de komst van responsive design. Bij responsive design worden de blokken namelijk gerangschikt en geplaatst op basis van de grootte van het scherm.

Visuele webdesign trends

Naast trends door veranderingen op technisch gebied zullen we in 2013 een visuele trend zien ontstaan naar retro designs. Mensen lijken genoeg te hebben van de simpele, standaard designs en zien graag retro kleuren, vormen en lettertypes terug. Daarnaast gaan we onder andere grote afbeeldingen, storytelling en horizontaal scrollen in 2013 nog vaker terug zien. Het lijkt er op dat mensen tijdens de huidige crisis behoefte hebben aan verfrissing en variatie op het web.

1. Afbeeldingen in full screen

Steeds meer websites maken gebruik van de toenemende populariteit van hoge resolutie breedbeeld schermen. Hiermee hebben gebruikers de mogelijkheid om de hoge resolutie afbeeldingen van tegenwoordig goed weer te geven. Daarom zagen we in 2012 al steeds meer websites verschijnen welke gebruik maakte van full-screen afbeeldingen.

Een mooi recent voorbeeld van een dergelijke website is de promotiewebsite van Volvo voor hun XC serie.

Full screen

2. Focus op belangrijke content

Enorme hoeveelheden tekstuele informatie op bijvoorbeeld je homepage leidt de aandacht af van de meest belangrijke informatie. Zeker op het web is dit een belangrijk gegeven. Mensen lezen namelijk scannend en nemen niet snel de tijd om een lap tekst te lezen.

Hierdoor ontstaat een trend naar het tonen van slechts de meest essentiële informatie. Steekwoorden en sleutelzinnen om zo snel mogelijk je belangrijkste boodschap over te brengen is helemaal in.

Een voorbeeld van een website die mensen zo snel mogelijke probeert duidelijk te maken is het Internationale Altzheimer’s Disease platform. Geen lappen tekst met uitleg, maar een web focused design om bezoekers zo snel mogelijk te krijgen waar men ze wil hebben.

focus op belangrijke content

3. Scrollen en storytelling

Dat gebruikers niet graag scrollen is een usability gegeven dat inmiddels al lang achterhaald is. Uit recente onderzoeken blijkt dat men het niet erg vind om te scrollen om belangrijke informatie te vinden. Liever dit dan een paar keer te moeten klikken voordat ze op de juiste pagina uitgekomen zijn. Daarnaast is scrollen voor mobiele gebruikers een stuk makkelijker dan op linkjes te moeten klikken. Scrollen blijkt gebruiksvriendelijk, efficiënt en zorgt voor makkelijke navigatie door uw informatie.

Storytelling

Daarnaast gaan we parallax scrolling in 2013 vaker terug zien. Deze vorm van scrollen is ideaal voor een andere trend op het gebied van webdesign, namelijk Storytelling. Door middel van scrollen (maar soms ook door te klikken) onthul je dan het verhaal wat men op de website wil vertellen. Dit is bijvoorbeeld ideaal om je chronologische bedrijfsverhaal te vertellen. Een mooi voorbeeld hiervan is de wijze waarop Nike een nieuwe schoen, de AJ2012 presenteert.

storytelling nike

Een ander prachtig voorbeeld is de site die bedoeld is ter presentatie van de animatiefilm Paranorman.

paranorman storytelling

4. Blurren

Voor foto’s was het natuurlijk al een tijdje in, het effect wat je krijgt bij het maken van een foto met een spiegelreflexcamera. Hiermee krijg je foto’s waarmee het object waar je op scher stelt scherp wordt weergegeven en de achtergrond geblurred is. Dit gaan we ook steeds vaker terug zien bij afbeeldingen op het web.

Uit onderstaande voorbeelden wordt wel duidelijk waarom dit gedaan wordt; de belangrijke elementen lijken echt uit de pagina te komen.

blurren fat dragon

blurren pinetrail

Conclusie

Natuurlijk zullen er nog veel meer trends ontstaan in 2013 dan degene die in dit artikel genoemd zijn. In ieder geval zal het een bewogen jaar worden waarbij vooral de creatieve bedrijven deze trends niet over het hoofd mogen zien. Grote beelden, animaties, mobile- en tablet ready, readability en usability zullen in 2013 bij de websites van dit soort bedrijven een grote rol gaan spelen.

Ook voor de bedrijven waarvoor creativiteit wat minder van belang is zijn er goede mogelijkheden om hun website klaar te stomen voor de toekomst. Denk bijvoorbeeld aan de webfonts en de focus op belangrijke content. Bedrijven kunnen door middel van deze mogelijkheden sneller en efficiënter hun doel bereiken.

 

 Bronnen:

  • http://www.creativebloq.com/web-design/trends-website-design-10121055
  • http://www.marketingfacts.nl/berichten/trends-en-ontwikkelingen-in-web-design
  • http://www.frankwatching.com/archive/2012/12/19/10-webdesigntrends-voor-2013/
  • http://smashinghub.com/web-design-trends-in-2013.htm
Beefamous
Over de Auteur
Marcel van Etten heeft meer dan 10 jaar online marketing ervaring. Begonnen als webdesigner en inmiddels onder andere gespecialiseerd in online marketing. Marcel is eigenaar van Beefamous en blogt hier met regelmaat over nieuwe ontwikkelingen op webdesign en online marketing gebied.
Copyright 2016 BEEFAMOUS