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.
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
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.
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.
Learn about a popular and free online design tool called Figma, and why we'll be using it for this course.
Learn the basics of using Figma, including creating shapes and modifying their properties.
Create a basic grid layout for Bull's Eye, in order to make the interface more consistent and easier to design.
Start your design by bringing in the raw unstyled elements such as the slider, button, and labels.
Learn how to select fonts, font sizes, font weights, and letter spacing for your app.
Give Bull's Eye a splash of color and set up your color pallette.
Iterate on the design, making visual tweaks to give it some more personality.
A review of Luke's final design and a discussion of implementation practicalities.
Review what you learned in this course, and where to go from here.