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

      6:10
    • 2. Sketching and the Grid

      15:33
    • 3. Picking the Best Navigation

      18:54
    • 4. Design Diversity and Our Designs

      10:34

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:

    81d7ab5d

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:

    2e0c3a08

  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:

    1751584b

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 :)

    2424a944

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

    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

Student Projects

project card
Jake Cox
8 comments
project card
Erin Potter
9 comments
project card
Dan Leatherman
3 comments
project card
Emma Holder
8 comments
project card
Marika Andrews
7 comments
project card
Nadia Merola
4 comments
project card
Tobias Due Munk
8 comments
project card
Vinton ..
4 comments
project card
Ben Hsu
13 comments
project card
3 comments
project card
Derek Hart
7 comments
project card
Alicia Li
project card
Iva Zugic
project card
Craig Parrillo
2 comments
project card
Aaron Soules
3 comments
project card
3 comments