Starting with the sketch
Before we take time to design our user interface in Photoshop, it is important to sit down with a piece of paper and a pencil to sketch out the basics for how users will interact with our app. Once we set a programmer out to begin work on an application with a given interface, it can be very costly to go back and make changes later when we realize that our design has a few small problems that need to be fixed.
Luckily, a notebook and pencil are cheap tools, and we can draw out many example interfaces without ever wasting a dollar of programming time.
Getting ready
For best results, we should find a desk, a good pencil, an eraser, and a couple of pieces of paper. If available, large notepads are preferable, as the extra space will allow room for notes.
How to do it...
Before we step into Adobe Photoshop or XCode with our application design, we should begin by sketching out the idea onto paper.
Note
Photoshop is Adobe's high-profile raster image editing software. XCode is Apple's development environment for iOS and Mac applications. Both apps are essential parts of our development toolbox.
Let's take a look at some basic iOS drawing principles so that we can best prepare our sketches for the transition to pixels on an iPhone screen:
1. We should start by sketching several rough boxes that are scaled roughly to the size of an iPhone or iPad. The iPhone screen is a rectangle measuring approximately 4.5 inches by 2.5 inches. The iPad screen measures approximately 9 inches by 7 inches.
Next, we should go about designing a wire frame mock up of how we anticipate interacting with our application, so that we know exactly what we are looking for in our prototype. The following screenshot shows how a wire frame should give a visual representation of how the user will flow through the final application. In the quick wire frame of a dictionary application below, we gain a good idea as to how the user will interact with our work.
2. The paper is literally our blank canvas right now, so we should experiment with ideas and get an idea of what we want our app to look like.
Often, it's useful if large sketch paper is used when designing an interface. This allows space for notes and multiple screens to be sketched.
We'll be designing an application in either landscape or portrait view, and may want to place out multiple possible screens on our page of sketch paper to help lay out an intended application flow.
From here, we can begin to sketch out our interface on screen. Buttons, text, and other interface elements can be placed in the approximate size and position that we desire our future app to look like.
3. With our application screens laid out on paper, you begin to literally place the paper in your hand and touch it as if it were a real iOS device.
Take a quick note of the visual changes that occur when a finger is placed upon the interface. Does touching a button cause the user to place their hand over important data? Do buttons seem to be spaced far enough apart that a user could easily tap on one without errantly tapping upon another?
4. Take notes on the process of interacting with your sketched mock up application and proceed to make changes to the sketch, and then repeat the process.
Ideally, we will go through three or four revisions until we design something that we could see ourselves enjoying on our iOS device.
5. At this point, our drawings may be slightly sporadic and our notes may be messy. Since the reasoning behind our design is still fresh in our minds, now would be the best time to go back and redraw views or notes that are unclear. Once we're happy with our work, we are done sketching up our application.
How it works...
Because iOS devices require a user to physically interact with a variety of interface elements in a small amount of space, sketching up ideas can be a powerful way to test user interface design ideas. If drawn close to scale, we can simulate touch interactions and get a good idea of how our interface will look before we ever paint a pixel in Photoshop.
There's more...
Several companies provide special graph paper, stencils, and iOS applications that help make it easier to sketch application ideas. Typically these products are inexpensive and make high quality mock ups simple. Many stencil sets also come with many standard UI elements accurately sized, which will allow us to sketch with confidence and precision.
Picking up the best stencil set
Design Commission produces arguably the best interface design stencils, which can be found at http://www.uistencils.com/products/iphone-stencil-kit. For a low cost, iPhone and iPad stencils can be purchased along with appropriate device sketchpads. Design Commission also has great stencil sets for Android and Web developers, in case we're looking to design for those platforms as well.
As we can see in the following screenshot, the interface stencil contains many common pieces and can help in properly laying out elements on paper:
 |
There's an app for that
There are even several iOS applications focused around making the sketching process easier as well. Interface by Less Code LTD, iMockups for iPad by Endloop Systems, and Dapp by Kerofrog are all great applications that can make the mock up process easier. Each offers the ability to drag and drop standard interface elements around on a real iPhone or iPod touch screen, allowing us to quickly grasp the scale and feel of our desired interface on a real device.
See also
Developing a rapid prototype in this chapter
Getting our work onto a device in this chapter
