7 Steps to Design an iPhone App User Interface (UI)

By John Houghton on January 4, 2014

So your company is involved in an iPhone application development project and you need to have an iPhone app user interface  (UI) designed by next week.  Rest assured, you can complete the assignment in time if you focus.  This kind of last minute assignment happens at many companies, especially here in the San Francisco Bay Area where mobile development is so popular.  Assuming you have your branding and the rest of your creative aspects in order, if you’re new to designing mobile apps, here’s what I would recommend:

1. Read the Apple iOS Human Interface Guidelines.  I would give you the link, but due to Apple’s non-disclosure agreements with developers, you have to have a developer account and be logged in to see the document.  It’s pretty easy to find once you’ve joined the developer program.  This document is the absolute bible for designing an iPhone, iPad, or iPod touch application.  It’s over 200 pages, and most people can’t read it in one sitting – it takes a while to absorb.  Apple spends a lot of resources on this document and they update it frequently, so it’s definitely worth reading and re-reading.

2. Look at Apple’s Apps.  Learn their conventions.  A lot of first-time app designers develop their own mobile navigation and user interface conventions.  This is a recipe for failure because it likely will not be intuitive to your users.  Apple has already built these mobile conventions for you, and you should use them.  Don’t look at Android apps, and don’t attempt to straddle between the two.  The iOS and Android design languages are totally different, so you need to design iOS and Android versions separately.  If you’re doing a tablet app, that also has different conventions, a split screen on the iPad being a big one.

3. Look At Your Competition.  Yes, take a close look, but think before you copy them.  Without even considering copyright, there are a lot of mobile apps, some quite popular, that nevertheless have a poor user interface and user experience (UI/UX).  There are a variety of reasons an app with bad design can make it to the top, but just because it made it doesn’t mean it’s correct or well-designed.  You are going to have a hard enough time getting your app out there and you don’t want to be handicapped by improper UI conventions.  That’s why I want you to review and understand Apple’s sample apps first.

4. Sketch your design.  There are a lot of tools out there that can help you, and unless you are going to be designing apps every day, these are more trouble than they’re worth.  I suggest paper and pencil.  Go into a medium level of detail, but don’t try to draw all of the details.  It shows not only the screens, but the flow from screen to screen.  These are your wireframes.  Hand your sketch to a Photoshop person (maybe that’s you).

5. Lay out your design.  Most app graphics are designed in Photoshop.  You can also do your original art in Illustrator.  This is not a bad idea, especially if you’re going to scale it for other interfaces and uses, however most designers finish their work in Photoshop, and keep everything in separate layers.  The iPhone 5’s retina screen size is 640 pixels wide by 1136 pixels tall, so you want to set your work area for that size.  If you’re also releasing for iPhone 4, the size is 640 x 960, and yes, this will be a different Photoshop file, and more work for your developers.  For your design elements I suggest using a GUI (Graphical User Interface) template.  Query this in your favorite search engine:  iOS 7 GUI Template.  Pull the elements you want from your template file to your app design file.  As far as other Apple phones are concerned, many developers don’t develop for iPhone 3 any longer unless they are really going for maximum market penetration (and have the money to spend on it).

6. Finalize Your Design.  The best developers I work with want the design and graphics finalized before they start.  I’ve done it in situations where you create the graphics as you go, which tends to cause rework and confusion.  Once you have your design finalized, you are going to need to isolate each element, crop them out, and export each element as a PNG.  A basic iPhone 5 app will have about 80 separate graphics, all in the PNG format.  Make sure you have it “pixel perfect.”  If you don’t, no problem, but you’ll cause extra cycles for the developer when they send it back to you for correction, and this will cost extra money.  Okay, your first version is done, and now user interface/user experience testing is a good next step.

7. User Interface Testing.  You can do some of this by showing sketches and documents around, but you really need to have a working app to give to a user.  Watch closely what they do with it!  If they tap around randomly at first, that’s a sign that you need to streamline and rethink, so go back to step 1 and work your way down in order to evaluate how you can make the app more intuitive.

There you have it!  With projects that have more resources there are more steps, such as a creative brief, more time on the user experience (UX), and so on, but these are the basics.  We didn’t talk about the App icon, which is the most important graphic, but we’ll cover it in a future posting.  If you’re interested in Android, please see our article on Designing an Android UI.

Posted in Enterprise Mobile Apps, iOS Apps, iPhone Apps, Mobile Apps

Comments

Comments