What is project Foodcourt?
The product that we needed to deliver at the end of the project was a high fidelity wireframe of a ordering system made for instore use. This would be a restaurant selling the food of your choice.
The styleboard needed to be associated with the country of origin.
Process
Mindmap
I started this project by making a mind map, as i explained in Foodcourt this is a method that helps me come up with ideas and gives me a better understanding of the subject.
Collages
After making the mindmap we made three collages based on the country or origin, each of them capturing a different aspect of that country.
We did this by cutting up old magazines and sticking the pieces on a paper. I really enjoyed doing this! Making collages by cutting and glueing without a specific outcome in mind is something that really keeps me entertained.
Ingredients sketch
Instead of choosing an illustraion style right away I made a LOT of different ones, some based on the collages, and others improvised.
I chose one of the improvised styles, this because I found it more fitting for a website and it really captured the feeling I was going for.
Low fidelity wireframe
I made multiple low fidelity sketches, this is the one I chose to develop into a high fidelity!
Realization
Ingredients
These are my finished ingredients! I kept the organic forms and used desaturated colours to keep that friendly, inviting, rural vibe that i incorporated in to the rest of my high fidelity wireframe.
✷ Illustrator
Logo
This logo is very minimalistic, the typeface I used is Aesthet Nova, this is a serif typeface with round edges, this captures the classy-ness of france but keeps de friendly inviting feel.
✷ Illustrator
Logo animated
I animated my logo, I did this to grab and hold people’s attention.
✷ After Effects, Illustrator
Styleboard
This is the styleboard for my wireframe. A guide that represents the important elements and overall theme of my wire frame. That way if other people work on the project with me, it would be easier for them to understand the vision.
✷ InDesign
High Fidelity Wireframe
This is my high fidelity wireframe all tied together. The video does not display all the clickable elements but does give you an example of what is possible.
✷ XD, Illustrator