Wat is webdesign?

Met webdesign wordt eigenlijk het vormgeven (ontwerpen) van websites en webshops bedoeld. Maar de term webdesign wordt vaak veel breder gebruikt. Zo wordt iemand die websites bouwt ook vaak een webdesigner genoemd. Toch kunnen we hier een duidelijk onderscheid in maken. 

Iemand die websites bouwt is een ontwikkelaar, ofwel een developer. Daarbinnen maken we in het algemeen dan weer onderscheid tussen front-end developers en back-end developers. Front-end developers zetten het ontwerp van een designer om in code (HTML, CSS en Javascript). Een back-end developer is verantwoordelijk voor de achterkant van een website of webshop. Dit deel is niet zichtbaar voor de gebruiker. Een simpel voorbeeld: 

Stel, je komt bij een internetbureau om een nieuwe webshop te laten maken. Na een intake gesprek en het nodige onderzoek zal een webdesigner (of UI designer) aan de slag gaan met het vormgeven van de webshop. De front-end developer zet het ontwerp 1 op 1 over in werkende code, dit is wat bezoekers uiteindelijk te zien krijgen. En de back-end developer gaat aan de slag om te zorgen dat alle koppelingen gemaakt worden. Zo komen alle producten in een database te staan, er moeten bestellingen geplaatst kunnen worden en aan de achterkant moet de gebruiker zijn of haar website kunnen beheren. 

Wat doet een webdesigner?

Zoals je ziet werken er vaak meerdere specialisten aan één website of webshop waarbij je als webdesigner verantwoordelijk bent voor het uiterlijk van de website. Om tot een definitief, werkbaar ontwerp te komen doe je eerst onderzoek: wat is de doelgroep? Wie gaat de website gebruiken? Een website wordt immers altijd gebruikt door mensen, dus probeer je zoveel mogelijk in de huid van (toekomstige) gebruikers te kruipen om te achterhalen hoe ze denken en hoe ze door de website of applicatie heen zullen klikken.

Wireframes

Door gebruik te maken van wireframes (ik noem dit altijd het Functioneel Ontwerp) kun je in een vroeg stadium al veel problemen tackelen. Wireframes zijn eerste 'schetsen' van de website. Deze kunnen letterlijk met pen en papier gemaakt worden, maar ze worden vaak ook iets gedetailleerder uitgewerkt in bijvoorbeeld een programma als Sketch of Figma. 

Vervolgens kunnen deze wireframes klikbaar gemaakt worden in een tool als InVision. Nu kunnen testgebruikers door de wireframes heen klikken en kan gezien worden hoe ze door de website heen navigeren. Snappen ze waar ze heen moeten? Staan elementen op de juiste plek of kunnen we hier verbeteringen doorvoeren? In deze fase wordt er nog helemaal niet naar de vormgeving van de website gekeken, enkel naar de structuur (waar komt welke content en waarom?). Zoals je in het voorbeeld kunt zien worden deze wireframes gemaakt middels simpele blokken. Op deze manier kun je heel goed de hiërarchie en de flow van de content bepalen.

Visueel Ontwerp

Als het Functioneel Ontwerp is goedgekeurd gaan we over naar het Visueel Ontwerp. Wanneer er een duidelijk beeld is van de opbouw / structuur van de site, is het tijd om het geheel visueel aantrekkelijk te maken.

Hierboven zien we een voorbeeld van het Visueel Ontwerp. Afbeeldingen zijn toegevoegd, evenals kleuren, de juiste lettertypes, stijlen etc. 

Zodra het ontwerp is goedgekeurd door de opdrachtgever, kan het worden overgedragen aan de developers en kan de ontwikkeling van de website of app beginnen.