Webdesign in 2012: Hoe doen we dat?

13 augustus 2012 | Ivo de Vink

Webdesign is met de komst van smartphones en tablets een steeds complexer specialisme geworden. De gemiddelde schermresolutie wordt daarnaast ook nog eens steeds groter en we krijgen te maken met beeldschermen waar de pixels nog amper op te zien zijn (retina-schermen, zoals Apple het noemt). Een goed webdesign is meer dan een plat grafisch ontwerp, maar is een doordacht interactief ontwerp.

Voordat ik aan de slag ga met een ontwerp is het daarom belangrijk om goed na te denken over de structuur en functionaliteit. Een uitgewerkt wireframe of interactie ontwerp van de website zet de basis van het uiteindelijke ontwerp. Dit is een schetsontwerp waar al wordt nagedacht over de plaatsing van buttons, tekst en afbeeldingen. Op de homepage moet een gebruiker meteen zijn weg kunnen vinden en alles moet zoveel mogelijk ‘logisch’ aanvoelen. Een in het oog springende call-to-action button bijvoorbeeld maakt het de gebruiker gemakkelijk om meteen tot actie over te gaan.

Fluid webdesign

Een interactie ontwerp hoort natuurlijk hand in hand te gaan met een aantrekkelijk ontwerp. Op basis van het wireframe, en na voldoende research te hebben gedaan naar stijl en uitstraling, ga ik vervolgens aan de slag met het design. Het ontwerpen gebeurd op een grid, zodat alles in balans is en op een logische plek komt te staan.

Vroeger was dit een grid van 960 pixels breed, tegenwoordig maak ik liever gebruik van een eigengemaakte grid van 1200 pixels breed, omdat de meeste schermen tegenwoordig minstens 1280 pixels breed zijn. Zo blijft de website in de breedte beter benut. Bij het ontwerpen hou ik er tegenwoordig altijd rekening mee dat het zowel op een kleiner als een groter scherm goed uit blijft zien. Al mijn huidige webdesigns zijn daarom standaard fluid. Dit betekent dat de website geschikt is voor zowel grotere als kleinere schermen van zo’n 1200 pixels breed. Wanneer bijvoorbeeld het scherm kleiner is dan 1200 pixels verspringt de website automatisch naar 960 pixels breed.

fluid-design

Responsive webdesign

ipad-iphoneRegelmatig ontwerp ik ook een responsive website. Dit betekent dat de website zich compleet aanpast aan kleinere schermen van bijvoorbeeld tablets of mobiele telefoons. Het is dus geen aparte mobiele website meer, maar een flexibele website. De gebruiker hoeft niet meer op kleine priegelige knopjes te klikken of in te zoomen op teksten, maar kan zonder extra inspanningen lezen en navigeren. Ook deze website is responsive, bekijk ‘m maar eens op je mobiel of tablet!

Touchscreens

In het ontwerpproces moet er ook rekening gehouden worden met touchscreens. Links en buttons moeten gemakkelijk aanklikbaar zijn: niet te klein en niet te dicht op elkaar. Ook aan andere extra functionaliteiten kan gedacht worden. Van slideshows wordt bijvoorbeeld verwacht dat je deze kunt ‘sliden’ met je vinger op touchscreens.

‘Retina’-schermen

Met de opkomst van retina-schermen, schermen met pixels die bijna niet meer met het blote oog te zien zijn, moeten we straks ook steeds meer rekening houden met hoge resolutie afbeeldingen. Ook nu houden we daar al rekening mee in de manier waarop we websites ontwerpen en implementeren.

Klaar voor de toekomst

We vinden het belangrijk dat de websites ontworpen door Simplefly klaar zijn voor de toekomst. Is uw website niet meer up-to-date of klaar voor de toekomst? We gaan graag met u in gesprek.