Design 2-3 beautiful and simple screens of an iOS app

Intro and Downloading Assets

Consider design elements
Choose your favorite apps and consider what you like about their design elements. What sticks out to you? How would you design them differently?
Download resources
Read through the resources we provided in "Additional Resources".

Download assets that you would like to use in your project.
Sketch your app
Create basic sketches of your app. They don't have to be complicated or too detailed. Share the ideas you have for this app on your project page.

Bartholomew Fish shares their app sketch:

Sketching and Working the Grid

Create a wish list
Create a list of how you would like your app to function. Create another list of features your app can be without.
Use the grid
Download and use the branding toolbox and the teehan+lax GUI components. Apply them to the gridded canvas to begin designing the main screen of your app.

Choosing Navigation

Create app navigation
You should show that you've started to think about your navigation. Demonstrate how users will navigate through your apps various functions. (See handout in Addition Resources for example)

Renee Hawthorne demonstrates intuitive navigation by "pulling" back a curtain to display the weather:
Share your mock-up
Create a mock-up of what your app's overall look and feel. Share your app on your project page.

For example, check out Nadia Merola's wireframe:

Designing the App

Share your work
Post everything you've done thus far, from sketching to the final presentations screens. At the very least you should post the final screens for everyone to take a look at. Engage your fellow classmates on their projects.
Curate your best screens
Optional: make a Dribbble shot of your favorite portion of your work from this class and post it if you have an account. If you don't, then Tweet it! Be proud of what you're working on and spread it around :)

(Ryan Wood's app design)

Additional Resources

Unit 1 Links & Reading Materials... and Downloads for the Class:
- PSD Branding "Toolbox"
- Fonts for the Project
- Simple Gridded PSD Canvas
Find the PDF Lecture Notes and a few of our preliminary sketch examples attached below.

Additional Resources

Tapworthy by Josh Clark

A great starter book that almost all app designers have read. Though a bit outdated now, it's got all of the basics to get you started if you want to go above and beyond and launch your app designing career. Most of the book content is the foundation that today's apps are based on, and while the technology updates and changes, they are still building on this foundation. Buy this guy off Amazon. It's only about $25 used.

The Real Guide to iOS Application Design

Not to confuse you, but...to confuse you, I recently came across this article that was written earlier this year. I found it really interesting, as it calls many of the aforementioned principles into question. Not a necessary read, but there are some great visuals that explain the previously mentioned book and Apple's standards and also explain why they may not be the best way of doing things. Check out the full post as well! (thanks to David Silva for finding this!)

One last thing: a fun new PSD wireframing kit to check out, just posted to Dribbble!
- Our Navigation Choice PSDs (wireframes)
- PDF Lecture Notes
- Navigation Examples Handout
- I mention Loren Brichter as "pull-to-refresh-guy" and can't remember his name in the video (smack on the head). Well, that's his name and he's a good guy to follow on Twitter for cool info and links and such.
Download: Lecture Temp Screen Presentation. A brief final PDF "lecture" on placing your final designs into the below optional assets.
- JPG of our final app design
- PSD files of our final designs
- PDF lecture notes and additional thoughts
Feel free to use these or others that you already have if you choose to. As always, if you need additional help, feel free to post in the project section with questions!

ADDITIONAL RESOURCES
- Cool tool for placing your screenshots into realistic photo settings
- A black and white iPhone 5 for placing your final screens in
- A great free download of a black and white 3/4 view of the iPhone 5
- Apple Marketing Guidelines

Dan Leatherman

Partner / Designer @ Permalight

72

143

Company

Community

Teaching

Mobile

Company

Community

Teaching