iPhone App Interface Design 101

Download these Resources:

Design Templates for iPhone & iPhone Retina Screens
Screen Specs for iPhone
Screen Specs for iPhone4

Lessons include:

Lesson 1 – The Importance of Visual Metaphors in App Design
Lesson 2 – How to Define Visual Metaphors for your App
Lesson 3 – Course Example App: Roookies
Lesson 4 – Creating the Wireframes/Prototypes for your App
Lesson 5 – iPhone App Interaction Design
Lesson 6 – Setting up Your Photoshop File
Lesson 7 – Creating Shape Layers
Lesson 8 – Selecting a Color Palette
Lesson 9 – How to use the iPhone Photoshop Template
Lesson 10 – Roookies Functionality Overview
Lesson 11 – How To Design Custom Backgrounds
Lesson 12 – How to Design a Navigation Bar
Lesson 13 – Establishing your Grid Layout
Lesson 14 – Designing Contextual Menus
Lesson 15 – Labeling Your Navigation
Lesson 16 – Layout out Crisp Text
Lesson 17 – Laying out Dynamic Text
Lesson 18 – Customizing Nav Bar Colors
Lesson 19 – Customizing Tab Bars
Lesson 20 – Designing List Views
Lesson 21 – Testing Your App Design
Lesson 22 – Creating Button States
Lesson 23 – Slicing Images
Lesson 24 – Slicing Buttons or Icons
Lesson 25 – Slicing Retina Buttons & Icons
Lesson 26 – Final Files to Deliver to your Developer
Lesson 27 – iPhone App Icon Specifications
Lesson 28 – Creating a Layered Interface
Lesson 29 – Why Do you Export Graphics as Transparent .PNGs?
Lesson 30 – Slicing Animated UI Elements
Bonus – How did they do that? Jamie Oliver App
Bonus – How did they do that? AllRecipes Pro

Discussion

6 COMMENTS / LEAVE A COMMENT

Dustin Tanner
November 23, 2011 @ 5:00 pm

Excellent course! Even having previos iPhone app design experience, I still learned a lot! The tips and suggestions are worth the price of admission alone. Thank you!

Reply
satya
December 14, 2011 @ 4:37 pm

Excellent course………………….WOW

Reply
Irene Demetri
December 23, 2011 @ 2:34 pm

Hi Jen, I just finished the course, I really enjoyed it. It was easy to follow (with many short videos) and with many clear points and advice.
If you’re thinking on adding something extra, I would be interested in hearing your thoughts on choosing a name for an app and weather there are some tactics in doing so. Also should the name appear on the icons we create?

Thanks again!

Reply
- Jen
  December 23, 2011 @ 2:43 pm
  
  Hey Irene those are great ideas. I actually cover “app naming” in the iTunes SEO course, but I think having a lesson associated with this class makes sense too.
  
  As far as putting the name of your app on the icon, typically it is not advised to put any kind of text on an icon (even though you see it done a lot.) The idea behind that is the imagery in the icon itself is supposed to communicate what words can’t.
  
  Reply
Kyle Stewart
December 23, 2011 @ 11:38 pm

I’m an iOS and Android developer trying to get a handle on design. This is exactly what I needed to take my apps to the next level.

Reply
Elaine Rettger
March 30, 2012 @ 11:47 pm

Hi Jen,

Really enjoying the tutorials. One suggestion is to have the links to the lessons change color after you have viewed the lesson. Helps the user keep track of where they are if they stop watching for a few days.

Reply