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

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

Dec 17 2020 · Video Course (1 hr, 16 mins) · Beginner

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

4.6/5 9 Ratings

Version

  • Figma -

iOS App Design

Introduction

3:00 Free

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.

1

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

2

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

3

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

4

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

5

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

6

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

7

Typography

6:45

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

8

Color

13:38

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

9

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

10

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

11

Conclusion

1:43

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

12

Next course in this Learning 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

Contributors

Comments