Have you ever heard of wireframes? They are simple visual representations of applications that help developers and designers to get the big picture about what this or that app is supposed to do. Wireframes are very simple sketches, empty of design elements, that provide a way for the members of a team to communicate and share their ideas.
Figure 1. Contact us wireframe
Figure 2. Result search wireframe
Wireframes are mainly used to…
- Represent an app’s information structure
- Visualize the navigation
- Identify the functional part of a given app
Mockups are the next step in the design cycle of an application. They are visual design drafts representing the application with a higher level of detail than wireframes. Having said that, let’s put things into perspective. Now we are showing a number of mockups of our picture to pdf converter. (From now on we’ll call this Android app PicsPDFun.)
Figure 3. PicsPDFun’s main activity
Figure 4. When the user clicks on the Format button they are shown a screen like this
Figure 5. Specifically, users will be displayed this slider so that they can comfortably select a paper format
Figure 6. Similarly, when the user clicks on the Location button he/she is redirected to a layout like this
Figure 7. But to be exact, the application displays this slider for the user to easily select an image location
Figure 8. Zoom button
Figure 9. The user will be shown this slider to pick their desired zoom level
Do you agree with the saying that a picture is worth a thousand words? The mockups above should be clear enough about the functional requirements of this simple image to PDF converter. We’ll soon continue with our app development. Don’t miss the coming articles!