Design Beautiful Apps: iOS App Design (UX)

Sarah Mick, Designer, Illustrator & Photographer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
4 Lessons (51m)
    • 1. Class Briefing

    • 2. Sketching and the Grid

    • 3. Picking the Best Navigation

    • 4. Design Diversity and Our Designs


Project Description

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

Intro and Downloading Assets

  1. 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? 

  2. Download resources

    Read through the resources we provided in "Additional Resources". 

    Download assets that you would like to use in your project.

  3. 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

  1. 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. 

  2. 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

  1. 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:


  2. 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

  1. 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.

  2. 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, 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.

    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! 


Student Projects

project card
Jake Cox
project card
Erin Potter
project card
Dan Leatherman
project card
Emma Holder
project card
Marika Andrews
project card
Nadia Merola
project card
Tobias Due Munk
project card
Vinton ..
project card
Ben Hsu
project card
project card
Derek Hart
project card
Alicia Li
project card
Iva Zugic
project card
Craig Parrillo
project card
Aaron Soules
project card