Wireframe naar design

Workshop : Prototyping

Aanleiding

De guidelines staat vast, het wireframe is goedbevonden door de experts. Het is nu te kijken of met visuele elemten het wireframe naar het volgende niveau getild kan worden.

Onderzoeksvraag:
Hoe bouw je een Koffiekaartje op vanuit een design pattern research en guidelines?

Doelen

  • Wireframe visueler maken
  • Feedback doorvoeren van de experrs
  • Basis leggen voor andere Horekaartje concepten
  • Visueel de hoofdrol laten spelen

Resultaten

In het eerste ontwerp is besloten om de beste selectie verder van het wireframe-stadium te ontwikkelen en van daaruit de optimalisatie verder door te zetten. Eerst is de feedback van experts ge├»mplementeerd in de wireframes. Daarna ben ik begonnen het wireframe stap voor stap visueler te maken. Ik ben gaan puzzelen hoe ik de wireframes met design kan versterken. Dit gebeurt op basis van de guidelines. In onderstaand prototype zie je mijn doorontwikkeling om de uiteindelijke huisstijl en pagina te ontwikkelen. Bij het ontwerp van alle schermen is er bewust voor gekozen om de kleuren, lettertypen en bedrijfsfoto’s de sfeer te laten bepalen. Op deze manier hoop ik de stijl van elk Horekaartje concept eigen te kunnen maken door de kleuren en lettertypen te veranderen. In de screenshots zie je een overzicht van alle ontwerpen die nodig zijn om tot het eindresultaat te komen.

 

Foto: Design iteraties homepagina

Na het bovenstaande proces meerdere keren door lopen te hebben zijn dit de uiteindelijke ontwerpen geworden.

Foto: Uiteindelijke ontwerp

 

Conclusie

Door uren ontwerpen en vele iteraties is er een compleet nieuwe huisstijl ontstaan voor het Koffiekaartje die een perfecte basis legt voor toekomstige Horekaartje concepten. Het is een stuk meer eigen, overzichtelijker en gebruiksvriendelijk.

Foto: Homepagina, een van de meerdere pagina’s