Design With SwiftUI: iOS, watchOS, and visionOS

Course Curriculum

Chapter 1: Design in Swift

Lecture 1: How to convert SF Symbols to a shape path for animation

Lecture 2: How to create a 3 x 3 Mesh Gradient

Lecture 3: How to Mix Colors in SwiftUI

Lecture 4: How to mix colors in a Mesh Gradient View

Chapter 2: SwiftUI Views

Lecture 1: How to draw rectangular shapes

Lecture 2: How to draw circular shapes

Lecture 3: How to draw a button with uneven corners

Lecture 4: Six ways to use SwiftUI's Label View

Lecture 5: Display dates, time, and timers in SwiftUI

Chapter 3: Learn SwiftUI and visionOS

Lecture 1: How to add the built-in video player to your project

Lecture 2: Add a timer to your app with a single line of code

Lecture 3: Adding a glass background material behind views

Lecture 4: How to reference an image stored in the assets catalog in SwiftUI

Lecture 5: Create your first SwiftUI and visionOS project

Lecture 6: How to specify initial window size and add hover effect to views in visionOS

Lecture 7: How to run your existing iOS or iPadOS app on visionOS

Lecture 8: How to embed 3D objects into visionOS windows

Lecture 9: Make a visionOS Drawing App

Chapter 4: SwiftUI and Apple Frameworks

Lecture 1: Make and Receive Phone Calls With CallKit and SwiftUI

Chapter 5: Composition and Visual Effects

Lecture 1: Compose the Mickey Mouse illustration for SwiftUI animation

Lecture 2: Using .compositingGroup to apply visual effects to parent views

Chapter 6: NOTE: The content below were created for Xcode 14, iOS 16 and below

Lecture 1: Introduction

Lecture 2: Make a collapsible list header

Lecture 3: Create a sheet presentation with sequence of heights

Lecture 4: Create a blank SwiftUI project

Lecture 5: Change the device screen color

Lecture 6: Use XCode Shortcuts

Lecture 7: Build SwiftUI views visually

Lecture 8: Use dark mode, light mode, landscape and portrait orientations

Lecture 9: Create menus and submenus

Lecture 10: Use foreground color, foreground style and tint color

Chapter 7: The SwiftUI Layout System

Lecture 1: What is a VStack?

Lecture 2: What is an HStack?

Lecture 3: What is a ZStack?

Lecture 4: Using ZStack: How to draw the Siri icon

Lecture 5: What is an Overlay?

Lecture 6: What is a Background View?

Lecture 7: What is a Spacer?

Lecture 8: What is Spacing?

Lecture 9: Using spacing and spacer in HStack and VStack

Lecture 10: What is a Padding?

Lecture 11: What is Layout Priority?

Lecture 12: Using container views: ZStack, VStack and HStack

Lecture 13: Designing Alarm Screen: Understanding Spacing, Spacer and Padding

Lecture 14: Design a responsive layout using spacing and spacer

Lecture 15: How to pad the edges of a view differently

Chapter 8: SwiftUI Core Concepts

Lecture 1: Design adaptive interfaces with minimum and maximum frame sizing

Lecture 2: Using the visual color picker to color your designs

Lecture 3: Using the visual imager picker to replace images

Lecture 4: Differentiate between stroke and stroke border

Chapter 9: ChatGPT and SwiftUI

Lecture 1: ChatGPT: Get Gradients from Figma or Sketch into SwiftUI in Just a Few Clicks

Lecture 2: ChatGPT: Convert Swift (UIKit) Code to SwiftUI Code

Lecture 3: How to Give Instructions to ChatGPT to Build SwiftUI Interfaces

Lecture 4: Create an Alarm Settings Screen with ChatGPT

Lecture 5: Build SwiftUI interfaces and animations using ChatGPT

Lecture 6: Using ChatGPT: How to Convert CSS Gradients to SwiftUI Gradients

Lecture 7: Using ChatGPT: How to Create a Rainbow Gradient Spinner with SwiftUI

Lecture 8: Using ChatGPT: Create and Modify SwiftUI Animations

Lecture 9: Use ChatGPT to Fix Errors in SwiftUI

Chapter 10: What Does This Truly, Really Do in SwiftUI?

Lecture 1: Menu: What does it do?

Lecture 2: Design a Tab Bar

Lecture 3: What do the iOS toolbar navigation slots do in SwiftUI?

Lecture 4: zIndex: What does it actually do?

Lecture 5: What do ToolbarItem and ToolbarItemGroup really do?

Lecture 6: Vertical Spacing in a list: .listRowSpacing and .listSectionSpacing

Chapter 11: Designing Visual Forms and Effects

Lecture 1: Hot to draw a rectangle or shapes with different corner radii for each corner

Lecture 2: How to create diffused shadows

Lecture 3: Adding badges to draw users' attention

Lecture 4: Changing the appearance of a list

Chapter 12: Designing Video Experiences

Lecture 1: Add a video and create full screen experience

Chapter 13: SwiftUI Compositor

Lecture 1: Composing the Apple TV Remote

Chapter 14: Clipping and Masking

Lecture 1: Draw the original Apple logo using a mask

Lecture 2: How to apply a circular clipping shape to an image view

Lecture 3: How to apply a gradient to a text view using masking

Lecture 4: Using Mask Parent View: How to add a gradient to an SF Symbol.

Lecture 5: How to add a gradient to a shape view using a mask

Chapter 15: Using SwiftUI as a Design Tool

Lecture 1: How to draw an Apple HomePod

Lecture 2: Hue Rotation: How to distribute different colors to rotated copies from 1 color

Lecture 3: Draw a dashed semi circle

Lecture 4: How to flip views vertically

Lecture 5: How to draw circular dashes

Lecture 6: How to apply a gradient to views

Lecture 7: How to rotate and distribute views around a circle

Lecture 8: Rotate copies: How to rotate views around a point

Chapter 16: Interaction Mapping