Building wireframes from high-fidelity mockup screens
The exercise I performed today was building a wireframe by reverse engineering an app mockup.
The biggest challenge was deciding which elements of the final product to reproduce with a higher level of accuracy and which ones could be designed roughly.
Certain texts where absolutely necessary to make the app functionalities clear to a potential client, other ones could be replaced by lines, by mock text, or by a label when it’s clear that it’s just a placeholder.
Here are the app mockups and further down my wireframes:
A good wireframes must be quick to sketch and simple. The elements used don’t need to be refined and it doesn’t need to be pixel perfect but the flow of the user’s interactions must be clear.