Your First iOS and SwiftUI App: Designing the App [OPTIONAL]

Learn how to start with nothing but an app idea, and take it all the way to a beautiful visual design made in Figma. By Luke Freeman & Ray Wenderlich.

4.6 (13) · 2 Reviews

Save for later
Share

Learning path

This is part of the iOS and SwiftUI for Beginners learning path. View Path.

Who is this for?

Total beginners — no prior UI / UX design knowledge required! This course walks you through designing an app from scratch.

You'll start by creating a low-fidelity (paper) wireframe for your app. You'll then create a full high-fidlity wireframe using a popular and free design tool called Figma, learning about design basics like layout, typography, and color along the way.

This course is a sister course to Your First iOS and SwiftUI App: An App From Scratch. You can watch this course before, after, or not at all (it's optional)!

Covered concepts

  • Low-fidelity wifeframes
  • High-fidelity wireframes
  • Figma basics
  • Grid layouts
  • Typography
  • Color
  • Design iteration

Part 1: iOS App Design

1
Toggle description

Learn about the app you'll be designing - a simple but fun game called Bull's Eye - and get a preview of all the things you'll learn throughout this part.

Toggle description

Create a low fidelity wireframe for Bull's Eye, which is a bare-bones visual depiction of what the app should look like.

Practice creating a low fidelity wireframe by creating a sketch for what Bull's Eye should look like in portrait mode.

Toggle description

Learn about a popular and free online design tool called Figma, and why we'll be using it for this course.

Toggle description

Learn the basics of using Figma, including creating shapes and modifying their properties.

Toggle description

Create a basic grid layout for Bull's Eye, in order to make the interface more consistent and easier to design.

Toggle description

Start your design by bringing in the raw unstyled elements such as the slider, button, and labels.

Typography 6:45
Toggle description

Learn how to select fonts, font sizes, font weights, and letter spacing for your app.

Color 13:38
Toggle description

Give Bull's Eye a splash of color and set up your color pallette.

Toggle description

Iterate on the design, making visual tweaks to give it some more personality.

Toggle description

A review of Luke's final design and a discussion of implementation practicalities.

Conclusion 1:43
Toggle description

Review what you learned in this course, and where to go from here.