Interaction design: hoe een idee tot leven komt

Door Lieve Sonke, art director
12 mei 2014 - 1652 x bekeken - Categorieën: Kennis

Een goed design begint met een goed idee. Een oplossing voor een probleem. Waarbij het draait om optimale functionaliteit, het weergeven van het juiste gevoel, de onderliggende gedachte en uiteraard de gewenste uitstraling. Een idee ontstaat vaak al in onze gedachten en het is de kunst om dit idee te vertalen naar een fysiek design. En daarbij rekening te houden met alle bovengenoemde aspecten. Ik geef je hierbij een kijkje in de designkeuken van E-sites.

In the beginning, there was… nothing

Na de brainstormsessies met de klant en het team wordt de scope van het project gedefinieerd, met behulp van user stories, persona's en een backlog. Dit wordt ook wel Sprint 0 genoemd. Hier begint het meest uitdagende proces voor ons creatievelingen. We weten de kaders waarbinnen we kunnen gaan werken. Wie de doelgroep is. En we weten wat de site of app moet gaan doen. We kunnen los! En dat begint vaak met schetsen, krabbelen, vliegtuigjes vouwen, wandelen, koffie drinken, of wat dan ook. Alles om de creatieve juices te laten flowen. De schetsen hieronder zijn gemaakt voor diverse E-sites projecten.

De gebruikerservaring

Zodra de schets klaar is en aansluit bij de gedefinieerde kaders en wensen gaan we door met de verdieping. De functionaliteit, de interactie. Samen met de doelgroep, stakeholders en vastgestelde doelen van het project vormt dit het userexperience design. Wat gebeurt er als de gebruiker daarop klikt? Waar moet dat formulier naartoe worden gestuurd? Allemaal vragen die moeten worden beantwoord in het interaction design. Tijdens dit proces worden alle views uitgewerkt in wireframes. Dit zijn blauwdrukken die precies illustreren waar alle elementen moeten worden geplaatst en waarom. Daarnaast wordt er nagedacht over de structuur van het project en de technische flows. En ook vind er overleg plaatst met front-end en back-end developers, zodat de technische laag van de applicatie goed bepaald kan worden. Wireframes zien er bijvoorbeeld zo uit:

Let's add some color!

De laatste fase van het design (en voor de pixelfreaks onder ons de leukste): het visual design. Op basis van de wireframes worden alle schermen nu grafisch uitgewerkt. De juiste kleuren worden gedefinieerd, bijpassende iconen worden vormgegeven en de stijl voor de typografie wordt bepaald. Zodra dit allemaal voldoet aan de wensen van de doelgroep en de klant, maar uiteraard ook de designer zelf, hebben we ons doel bereikt. Hierna wordt het geheel overgedragen aan de front-end developers. En komt het idee echt tot leven. 

 

Bekijk hieronder een video van het hele proces:

Tof, zo'n Domain Model

Door E-sites

Voor eenvoudige problemen zijn er eenvoudige oplossingen. Maar als het probleem complexer wordt, hoeft dat nog niet te gelden voor de oplossing. - Lees meer

Lees verder