Van begin tot eind – Project foodcourt
Wireframes – Foodcourt
Wireframes voor het project Foodcourt
Voor het project Foodcourt kregen we de opdracht om drie verschillende wireframes te maken. Het doel hiervan was om te experimenteren met verschillende lay-outs en stijlen, en te onderzoeken wat het beste zou werken voor de uiteindelijke app of website.
Door meerdere ontwerpen te maken, kon ik testen welke elementen goed samenwerkten, of alles logisch geplaatst was, en waar eventueel ruimte was voor animaties of interactieve onderdelen. Deze wireframes hielpen mij om een beter beeld te krijgen van de gebruikerservaring en de visuele opbouw.
Hier zie je mijn drie schetsen. Uiteindelijk heb ik gekozen voor het derde en laatste ontwerp (de grootste afbeelding). Dit ontwerp sprak mij het meest aan omdat het het beste aansluit bij de sfeer van het project en omdat de indeling overzichtelijk en gebruiksvriendelijk is.
Micro interactie
Micro-interactie voor de Foodcourt Figma-app
Voor deze opdracht moesten we een micro-interactie ontwerpen en voorbereiden voor onze Foodcourt-app in Figma. Het doel van een micro-interactie is om de gebruikerservaring te verbeteren door middel van kleine, subtiele animaties die de interface levendiger en gebruiksvriendelijker maken.
Uiteindelijk heb ik ervoor gekozen om twee micro-interacties toe te voegen:
Ingrediënten vergroten bij selectie – Wanneer je een ingrediënt selecteert, wordt deze iets groter. Dit geeft directe visuele feedback en maakt het duidelijk welke keuzes de gebruiker maakt.
Glinsterend logo bij opstarten – Het startlogo van de app laat ik kort glimmen wanneer de app wordt geopend. Het idee hierachter is om de aandacht van de gebruiker te trekken en een gevoel van interesse en nieuwsgierigheid op te wekken. Hierdoor wordt de gebruiker op een subtiele manier gestimuleerd om verder te gaan met het bestelproces.
Deze kleine animaties dragen bij aan een aantrekkelijker en interactiever ontwerp, zonder dat ze de gebruikservaring verstoren.
Styleboard
Styleboard voor het Foodcourt-project
Dit is mijn styleboard voor het Foodcourt-project. Hierin zie je in principe alle visuele elementen die ik in mijn app heb gebruikt. Denk hierbij aan de kleuren, typografie, iconen, illustraties en algemene vormgeving. Het styleboard geeft een duidelijk overzicht van de sfeer en stijl die ik in het ontwerp wil overbrengen.
De onderdelen zoals de app-layout en het algemene design zijn hier al zichtbaar, met uitzondering van de interactieve elementen zoals de knoppen. Deze zijn apart verder uitgewerkt in de app zelf.
Het styleboard dient als visuele leidraad tijdens het ontwerpproces en zorgt ervoor dat alles consistent blijft qua uitstraling en gebruikservaring.