Sketch App Screens

Once you have completed the flowchart that fully documents what the app does functionally, the next step if to capture what the app “looks” like when used and what the user sees and does when he or she interacts with the app. For an iPhone app, this usually consists of screen sketches of the displays; the information presented, the user options (menus, buttons), and so on.

There was a reason for doing the functional diagram (the flowchart) of the program first. It tells you what the app is doing and what it needs to display to the user and what inputs it needs from the user. This knowledge is enormously helpful in creating comprehensive sketches of the app screens and displays. Without the flowchart, it would be easy to forget options or buttons that need to be included.

create comprehensive sketches of the app screen

Make early screen sketches fast and simple, since they are likely to change

It is best, however, to do at least two versions of the screenshot sketches. The first will be a rough version that is quickly drawn, not perfectly proportional, easy to erase/redraw, and so on. It is probably going to take a few tries to get a screen sketch right, so there is little use in spending an enormous amount of time making a perfect, proportional sketch that you might just end up erasing or discarding. So start with rough sketches that you will rework into more polished and proportional drawings later when you think you have things figured out (the 2nd version).

Sketch the App from a User Perspective

Just like the flowchart, the best place to start with your screen sketch is the beginning. What will the screen look like when the app starts? From there you will follow the flowchart; creating a sketch whenever the display changes. If part of the screen remains consistent while another part of the screen changes for several of the app functions, consider making copies of a template sketch of the stable display section leaving the active section blank. It can save a lot of duplicated effort-especially if there are multiple screens to draw.

You should also take time to periodically review the concept from the user perspective; what they see and what they need to do. Of course, the goal for any app is to be intuitive and user-friendly as well as highly functional and useful. Reaching these goals will result in high customer satisfaction, which in turn leads to good ratings and positive comments that can drive or improve sales.

Detailed Sketches

As part of the final concept design or later on as part of the app specification you provide to the selected developer, you will need to create more detailed, final sketches of the screen displays, including thorough descriptions, clear labels, defined colors, and even font types and sizes. This is not something you want to leave up to a developer.

Create Detailed Sketches of the Screen
An iPhone stencil can simplify creating detailed screen sketches.

There a plenty of tools to help you create these detailed sketches if you are a little unsure of your drawing ability. If you would like to make pencil sketches there are stencils that make drawing a perfect, proportional screen sketch a snap. There are also PC and Mac template tools for creating app screen designs, but many of those tools are geared toward app programmers. So make sure the template meets your needs befor investing your development funds in them.

Incorporate User Gestures

Incorporate User screen gestures.
Users interact with apps using screen gestures

Something to note while developing the detailed screen sketches is how exactly the user interacts with the app. As anyone who has used an iPhone or iPad knows, the screen is capable of interpreting a number of user gestures. The screen sketch can include the user gesture needed to accomplish some task, or how the app will interpret certain gestures. Developers will certainly need to know this information, and it should be part of the concept design.

Words From Our Happy Clients

Get Your Free Quote

Let’s Build Your App


USA Office

Space-O Infoweb Inc, Suite 100-B 8585 E. Bell Road
Scottsdale, Arizona 85260
+1 (650) 666-3071

Canada Office

2 County Court Blvd., Suite 400, Brampton, Ontario L6W 3W8
+1 (437) 488-7337

India Office

1005, 10th Floor, Abhishree Adroit, Mansi Circle,Beside Gwalia Sweet, Ahmedabad, Gujarat 380015
Sales: +91 7069268048
HR (Landline): +91 79 40084018
(M): 9601433998 / 9316757277