iOS Design II: Creating Visual Designs & Delightful Interactions

Kara Hodecker, Product Design Leader

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (60m)
    • 1. Intro & Class Project

    • 2. Understanding iOS 8 Design Principles

    • 3. iOS Visual Design Language

    • 4. iOS UI Components

    • 5. Defining a Visual Language

    • 6. Photoshop Setup

    • 7. UI Templates & Best Practices

    • 8. Applying Visual Design

    • 9. Gestures & Transitions


About This Class

Welcome to the second lesson in this three part series of iOS design classes. Throughout this series we’ll cover the basics of user experience design, interaction and visual design, prototyping, and user testing, all as they pertain to designing for mobile. We’ll pay particularly close attention to the user’s journey through the app you design to ensure a clear, focused experience and finish with delightful interactions and a beautiful, intuitive design. At the end of the series, you should feel confident in your iOS design skills with the tools and techniques you’ve learned.

This class is great for designers of any skill level. The first class starts with the basics of UX and only a few tools are required. The second and third classes of the series do require some basic knowledge of Photoshop. 


What You’ll Learn

In this second class, I’ll provide you with an explanation of the design principles and patterns that are an integral part of iOS design. We’ll cover creating mood boards, how to define your own visual language for your app, how to structure your Photoshop files for iOS, and an overview of gestures, transitions and interactions. Topics we will cover include: 

  • An overview of iOS design principles. You’ll gain an understanding of the themes that iOS8 embodies and how to apply these principles to your own designs. I’ll share examples of Apple’s built-in apps to demonstrate each principle. 
  • iOS user interface components. I’ll walk you through the anatomy of iOS apps, when it makes sense to use particular UI components, and what’s open to your imagination.
  • Mood boards and style guides. We’ll cover why it’s beneficial to create a mood board before beginning visual design, what to include in one, and how to craft a style guide. 
  • Photoshop setup and templates. In this Photoshop demo, I’ll show you how to set up your files with dimensions, resolutions, text sizes, and more. I’ll share tips and examples for efficiency and ease. 
  • Applying visual design. I will walk you through designing the example project, while highlighting the design principles and patterns we've covered so far. I’ll also share best practices for design and user experience. 
  • Gestures, transitions and interactions. Finally, we’ll cover the iOS standards and how you can apply these to your own app to make it feel right at home on IOS.

What You’ll Make

This project for the entire series will be to create your own travel app or rethink an existing one. For this second class, your deliverable will be visual designs for a few key screens of your iPhone app. You’ll share your design progress as you go.

Other Classes in this Series

Check back soon to find out when the third class will be available!