Reversed Wireframe
This exercise is quite interesting since it is usually the other way around, you create a wireframe to create a prototype. This time I had to create the wireframe from the prototype.
At first, I was a little bit lost, and I got caught in small details that probably didn’t need to be on the wireframe. But as I started creating the wireframes I realized I should be doing them as simple as possible. With the right amount of information that is needed to understand the basic interaction with the wireframe.
So these were the screenshots I had to work from:
Since the app was pretty simple and straight forward I didn’t find it extremely hard to synthesize each screen on a wireframe, but still it got me thinking that I could be doing it even more simpler.
My idea was to work just with the basic Wireframe Kit but I realized it was not very complete, so I had to find/create some of the icons and elements that were needed to complete the final wireframes.
This is my final result:
I am getting better at Sketch with each exercise, and I found very useful to have a UI Kit in hand to be able to wireframe.
Also I think the UI Kit is not very complete, but I guess this is something you keep updating while working on different projects.
Thank you for reading!
