9 stappen om je webdesigntraject optimaal voor te bereiden
Een website laten ontwerpen kan een spannend en leuk proces zijn. Hoe bereid je dat voor zodat je een zo goed als mogelijk ontwerp kan laten realiseren?
Sinds het ontstaan van grafische interfaces wordt er gebruik gemaakt van het zogenaamde ‘Skeuomorphism’. Skeuomorphism is iets ontwerpen wat ook bestaat in de fysieke wereld. Denk bijvoorbeeld aan de prullenbak in Windows. Er zit natuurlijk geen echte prullenbak in je computer, maar je weet wel wat er gebeurt als je iets in de prullenbak gooit. Dan moet het weg. Op deze manier kunnen ontwerpers snel iets duidelijk maken aan de gebruiker.
Microsoft en Apple hebben deze manier van ontwerpen groot gemaakt, maar je ziet nu dat er langzaam een verschuiving komt naar ‘Flat design’. Deze nieuwe manier van ontwerpen wordt in gang gezet doordat dingen soms niet meer logisch zijn. Denk bijvoorbeeld aan het ‘opslaan’ icoontje. Dit is een floppy disk, maar een kind jonger dan twaalf heeft waarschijnlijk nog nooit een floppy gezien (hoewel dit volgens Connor Tomas O’ Brian eigenlijk geen probleem is).
Maar het is ook een esthetische kwestie. Het Skeumorphism heeft er ook voor gezorgd dat er veel gebruik gemaakt wordt van schaduwtjes en menu balken die bol lijken. Deze trend lijkt voorbij. In sommige gevallen kan het nog steeds mooi of functioneel zijn, maar over het algemeen worden de websites in 2013 platter. De verschillen tussen deze twee design principes zijn goed terug te zien in de onderstaande screenshots.
Het Skeuomorphism van Windows 7
Het Flat design van Windows 8
Het is al weer een tijd geleden dat piepkleine lettertjes (8 of 9 pixels) op een website cool en hip waren. Maar toch is op veel websites 12 pixels inmiddels een gangbaar formaat, zo ook op onze eigen website. Dat terwijl browsers 16 pixels als standaard hanteren. We doen er dus moeite voor (via CSS styling) om het font kleiner te tonen, voornamelijk omdat het er dan mooier en minder lomp uit ziet. Dat het wat minder leesbaar is nemen we dan voor lief. In principe een onlogisch standpunt, want de tekst op je website is er om gelezen te worden. Je ziet daarom ook een tegenbeweging, waarbij de tekst extreem groot wordt weergegeven.
Deze trend heeft een versnelling gekregen met de opkomst van responsive webdesign. Het wordt als snel duidelijk dat een letter van 12 pixels vrij slecht te lezen is op je mobieltje. Aan de andere kant worden de schermen waarop websites bekeken worden groter. Zo zijn er steeds meer mensen die hun televisie gebruiken om te surfen en dan is een tekst van 12 pixels niet te lezen vanaf je bank. Hieronder een goed voorbeeld van de website van Jeffrey Zeldman - ook wel de vader van het web genoemd - waarop hij experimenteert met belachelijk grote letters. Op de screenshots hieronder kun je zien hoeveel er kan veranderen in tien jaar.
Een screenshot van de website van Jeffrey Zeldman in 2003
Dezelfde website in 2013
Maar niet alleen tekst wordt groter. Ook afbeeldingen, logo’s, formulieren, etc. worden flink opgeblazen. Een recent gelanceerd redesign van de game blog Kotaku toont beeldvullende afbeeldingen. Hieronder heb ik een screenshot gemaakt van een artikel. Ik moest zelfs scrollen om wat tekst in beeld te krijgen.
En daarmee bedoel ik niet dat de kwaliteit minder wordt. Integendeel, er wordt juist heel veel aandacht besteed aan kwalitatieve content. Deze content moet zo goed mogelijk in beeld gebracht worden. Dat betekent dat er minder ruis op de pagina mag en moet zijn. Alles wat er op een pagina getoond wordt moet een relatie hebben tot de content die getoond wordt. Dus geen verdwaald ‘laatste nieuws’ blokje, wat op elke pagina van een website getoond wordt.
Op de hoogte blijven van webdesign trends? Meld je aan op onze nieuwsbrief
Deze trend is in gang gezet door het ‘Mobile First’ principe. Dat betekent dat je een website eerst gaat optimaliseren voor gebruik op een mobiele telefoon. Dit houdt in dat je veel minder ruimte hebt, omdat een mobiele telefoon nu eenmaal een kleiner scherm heeft. Je moet dan goed nadenken over welke content je op een pagina wil laten zien. En met name de volgorde van de content is belangrijk. Als je bijvoorbeeld in de linkerbalk van je website een blokje met aankomende evenementen toont, dan zal deze op een mobiele pagina op elke telefoon nog voor de content verschijnen. Dat is onlogisch en irritant voor de gebruiker, omdat deze dan op zijn mobiel moet gaan zoeken naar de content. Op dat moment kun je je ook gaan afvragen of dit evenementen blokje wel op elke pagina van belang is. En dan ga je eens kritisch kijken naar het blokje. Is het blokje überhaupt wel nodig? Eén voor één ga je alle stukjes content onder de loep nemen en uiteindelijk hou je veel minder over. Dit betekent echter niet dat je deze content voor een mobiele telefoon gaat verbergen. Want waarom zou je een gebruiker op een tabletscherm (of groter) vermoeien met content die blijkbaar toch niet belangrijk is? Het Mobile First principe zorgt er uiteindelijk voor dat je een slankere en betere website krijgt, die voor de bezoekers een stuk prettiger is om te gebruiken.
Heb je zelf een webdesign trend ontdekt? Deel deze dan met mij in het commentaar!
Wij delen graag de kennis die we in huis hebben
Goed artikel, Robert. Vooral de voorbeelden erbij maken veel duidelijk. Nog een tip: op mobiele telefoons staat het ene plaatje niet 'links' of 'rechts', maar staan ze onder elkaar. Dit kan verwarrend werken. Ook in het schrijven van de tekst moet je dus rekening houden met het responsive design. Misschien zou je het plaatje / afb. 1 en 2 kunnen noemen?
Bedankt voor je opmerking. Ik heb het aangepast zodat de plaatjes nu een caption hebben.
Mobile first zie ik ook terug in webdesign goed geschreven