Ironhack Challenge 2 : Wireframing
Prework UX/UI Bootcamp — Paris
For my second challenge, the goal was to create our first wireframing and to focus on the interaction design and user flow.
Wireframing is an essential step in translating an idea into reality. The purpose is to create the basic skeleton for each screen of our design, before branding, images and colors get involved. Visual clarity is of the utmost importance! The wireframe should be monochrome (without shades of grey or color), so that we can concentrate on the structure and not how it looks.
For this challenge, I chose the app “Karma”, a Swedish food-waste startup that connects restaurants, cafes and grocery stores with users eager to purchase unsold at a lower price.
I created a wireframe version of a common user flow on this app : ordering food. First, I did a low-fidelity layout of my user flow, using pencil and paper. I sketched the whole structure and identified the different UI components. Then, I choose to use Sketch to design a mid-fidelity layout.
And then, I made a simple prototype on Invision. Check this out!
Take-aways
I really enjoyed doing this “reverse”/ kind of “Back to the future” challenge! But creating monochrome wireframes is not as easy as it looks, it is hard to find the right balance to communicate ideas successfully.
“Form follows function .“
This quote from the architect Louis Sullivan sums it all up! This step is essential in UX design process.
If you create, at first, a strong basis, the whole design will be consistent and relevant. Just keep in mind these two principles to stay on the right track :
- Maintain clarity
- Simplicity is key
Thanks for reading!
