Design‎ > ‎

Screen Page Design

Important things to keep in mind about your screen designs for the Splash screen and the Home screen

It's very important as you work on your designs to keep in mind the size and ratio of the actual iPhone screen. Otherwise, your designs won't fit the screen properly and we'll have to squish it in a way that might make the design less attractive or the information hard to understand.

The splash screen and the home screen with the buttons of different categories need to be vertical at a 2:3 ratio. Apple expects the splash screen to match the same orientation (upright, or sideways) as the main section of the app. Since the app works vertically in a portrait orientation for everything except the photo gallery and the augmented reality view, we need to keep the splash and home screens the same way. Imagine if you were to keep turning your phone around as you used the app - it could get quite annoying. Some apps rotate their user interface (also known as the UI) as the phone is twisted around in your hand. We don't do that for this app to keep things a bit simpler.

Click the image below to download a full size page template to print out.

iPhone Application Sketch Template v1.3

Designed by Oliver Waters. Freely distributed by d3i under the 
Creative Commons Attribution-Non-Commercial licence.

Because printers can do unexpected things to reduce the physical measurements of an page to be printable right to the edges, it would be best to get out a ruler to check that the printed image is still 2:3 ratio. ie. divide the width of the iPhone screen in 2 to get x cm (or inches) and divide the height of the iPhone screen by 3 to get y cm (or inches). x cm will equal y cm if the image has been printed out correctly without distortion by the printer. If it's not exactly the same (maybe off by 2 or 3mm), that's ok. If it's off by a cm or half an inch, please adjust your printer software until it's correctly printed. Remember to measure the iPhone screen section on the printout, NOT the whole iPhone. If you wish to work on a larger image than the one printed out, just enlarge it on a photocopier - if you keep it A4 or Letter size (the US uses Letter and most other countries use A4), then it'll be easy to scan for the final work.

1. Splash page - can it have an image on it?  If so, what size should that image be?

The splash screen is a full size image saved in the PNG format. On the iPhone 4, it's 640x960 and on older iPhones without the Retina display, it's half the size at 320x480. (The super high quality "retina" screen on the iPhone 4s have pixels that are half as big as the older iPhones - hence the images are more realistic because the dots are physically much smaller at 326 dots per inch.)

Here are some bits of general info about the pixel sizes of various elements within an iPhone app.

Class 62 can make the splash screen show whatever they like, within Apple's rules for the App Store. It can incorporate text, or a hand drawn picture, or a photographic montage or whatever.

2.  Button design - How should we proceed with button design?

Again, this is just a screen - it's a bit shorter than the splash because we're including the 20 pixel high status bar at the top (40 pixels for Retina), so the image is 640x920 (not 640x960). Class 62 can download this helpful iPhone template to print out and scribble sketches over to experiment with layout and design. In the software world, you are doing what we call "user interface design or UI design" and "usability experience (or commonly known as UX) design". You've all used gadgets or toys that are unnecessarily complicated - bad UX. Or apps that are badly organized with funny options hidden in unexpected places - bad UI. UI and UX design requires you to put yourself in someone else shoes - imagine how *they* will use your app. Think about how much they DON'T know about how to use your app and try to make it obvious in your design choices for them. Buttons that are tappable should look different to just graphics. Otherwise, people will feel dumb when they tap what they think is a button and nothing happens. Then they think it's a dumb app.

Apple also has a set of guidelines called the Human Interface Guidelines or the HIG. For this app, you don't need to worry too much about the HIG except for one important concept. When you make a button, it has to be big enough for most people to tap. Apple considers this size to be at least 44 pixels on the older screens, and 88 pixels on the retina displays. So any button you make HAS to be at least 88x88 pixels square on a Retina screen.

There are some ways we can cheat though. :D

If you look at the Watch Us Grow interface screen, you can see some smaller icons. This is really just one image where we lay out invisible buttons (or tappable "hot" areas) over the top. So your images for the buttons can be a little bit smaller, but the hot areas are bigger than the actual visible icons.

3. Is there a template for the text, as some students are ready to begin this step?

There is a content management system (CMS) setup for this. Click here for more details.

Ian Chia,
17 May 2011, 05:56
Ian Chia,
3 Jun 2011, 18:29