In the previous chapter, we concentrated on planning our screens at a very high level by creating things such as screen maps and flowcharts. In this chapter, we'll move on from high-level planning to start designing the screens that'll make up our app.
During the screen designing process, you'll usually complete the following steps:
First draft wireframing: This is where you begin to layout your screens by making quick sketches with paper and pencils. A wireframe is a low-fidelity, visual representation of your app's layout; sometimes, it is referred to as a skeleton, outline, page schematic, or screen blueprint. To help you focus on each screen's layout, functionality, and usability, wireframes are usually stripped of all look and feel elements, and at least initially, most content and text.
Digital wireframe: Once you're happy with your pencil-and-paper wireframes, it's time to refine these first drafts using digital software. This...