Onboarding
Add to favorites
Learn to design meaningful experiences with clear onboarding flows and patterns
![icon](http://images.ctfassets.net/ooa29xqb8tix/7fK97kiaDjcIiUYlFmYa1n/1c6c4dc4e927614da0a149d9e0ed2b28/Logo_iOS14.png?w=400&q=50)
iOS Design Handbook
1
Intro to iOS 14 Design
4:13
2
iOS Colors
5:28
3
Typography and Dynamic Type
5:33
4
Background Blur and Gradients
4:19
5
Adaptive Layout
4:19
6
Do's and Don'ts
6:52
7
Design for Touch
7:46
8
iOS Native UI Elements
8:10
9
iOS Icons
3:44
10
Design for iPad
8:11
11
Design the Sidebar
7:16
12
Design Widgets
6:31
13
Animations
5:23
14
App Clips
7:05
15
Design for Apple Watch
6:16
16
Modals
6:17
17
Onboarding
6:51
18
Launch Screen
5:35
19
Design for Accessibility
4:12
20
Design for macOS Big Sur
6:31
Onboarding experiences
When it comes to onboarding experiences, there are few types of patterns, and you have to pick the one that suits your app the best as it helps you solve potential questions in the minds of users right at the start. Here are the most common onboarding experience patterns:
Guided Tours
As the name suggests, guided walkthroughs give a quick tutorial on the app's essentials to lower entry barriers by familiarizing the user with the interface and easing the learning curve. But it's important not to go overboard with this. Know where the users might need help and focus on educating them about that.
Walkthroughs
At times people may be more familiar with how your app's functionality is, so in this case, walkthroughs can be the best. This gives users quick insight into some of your app's key features without getting into the nitty-gritty.
Personalization
People enjoy tuning the experience as to what they prefer right from the start, and providing them a way to personalize upfront on the onboarding experience engages the users more. Doing this right is important. Aim to complete the personalization with as few steps as possible.
Don't Demand
Avoid asking to setup/provide too much information right up at the onboarding unless your app doesn't work without it. If possible, try to provide a choice to skip and start using the app directly as that's what users desire. Give the ability to setup/alter information later in the settings.
Always have an option to skip and not bore with too much questions.
Delight Users
Anything that requires a bit of effort but that is rewarding or beneficial to the user. Meaning make your onboarding experience enjoyable even from the smallest part. For example, Keep your copy humorous and have animations and illustrations instead of screenshots; simple things like this interest users.
Less is better
Keep it simple, short, and to the point. Onboarding experiences should not be long-drawn as it is a way to make the new users familiar with your app as quickly as possible and make them start using the app right away. The information you will put has to be valuable for the user.
Clarity
Make things obvious. Buttons should be self-explanatory and typography should be big and readable at a comfortable distance. Your content should clearly indicate what your app is about. For example, if it's a coffee app, then you should be reminded of the coffee beans, espresso, and brown colors of coffee.
Learn with videos and source files. Available to Pro subscribers only.
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
ios-design-handbook-onboarding
1
Intro to iOS 14 Design
A complete guide to designing for iOS 14 with videos, examples and design files
4:13
2
iOS Colors
Learn how to work with colors in iOS 14
5:28
3
Typography and Dynamic Type
Learn to make the content clear and readable
5:33
4
Background Blur and Gradients
Creating contrast between contents using blurs and apply gradients from analogous colors
4:19
5
Adaptive Layout
Learn to make your designs adaptive to different device screen sizes and orientation
4:19
6
Do's and Don'ts
Things to keep in mind while designing for iOS
6:52
7
Design for Touch
Keeping your content reachable using different touch techniques
7:46
8
iOS Native UI Elements
Learn and benefit from using Apple's UI resources
8:10
9
iOS Icons
Learn how to find great icons and customize them
3:44
10
Design for iPad
How bigger screens affect your design
8:11
11
Design the Sidebar
How to design a sidebar for iPad
7:16
12
Design Widgets
Displaying important and useful information using widgets for quick glances
6:31
13
Animations
Good animations enhance, bad animations distract
5:23
14
App Clips
Make use of a specific feature in your app through app clips
7:05
15
Design for Apple Watch
Designing for people on the go
6:16
16
Modals
Provide more focused experience by presenting your content in a temporary modal view
6:17
17
Onboarding
Learn to design meaningful experiences with clear onboarding flows and patterns
6:51
18
Launch Screen
Hint users about loading content through launch screens
5:35
19
Design for Accessibility
Basic rules and system to improve app accessibility
4:12
20
Design for macOS Big Sur
Designing an app with translucency and sidebar layout for macOS Big Sur
6:31
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Surya Anand
Designer
Curious about learning to design
3 courses - 10 hours
![course logo](http://images.ctfassets.net/ooa29xqb8tix/7fK97kiaDjcIiUYlFmYa1n/1c6c4dc4e927614da0a149d9e0ed2b28/Logo_iOS14.png?w=400&q=50?fm=jpg&q=50)
iOS Design Handbook
A complete guide to designing for iOS 14 with videos, examples and design files
2 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/mTZWH1XgUw19Ugg2Ul3i0/bdca1f9dbb6ef3c80de5010fb97de4fd/ui-logo.png?w=400&q=50?fm=jpg&q=50)
UI Design Handbook
A comprehensive guide to the best tips and tricks for UI design. Free tutorials for learning user interface design.
2 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/6ml4Ii6ZJ3CSnDM5boThH6/3b2551cdf07316c9c82f09b83b2f64b8/figma-logo.png?w=400&q=50?fm=jpg&q=50)
Figma Handbook
A comprehensive guide to the best tips and tricks in Figma
6 hrs