iOS 12 & Swift 5 - App Design, UI/UX plus Development
4.7 (681 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,419 students enrolled

iOS 12 & Swift 5 - App Design, UI/UX plus Development

The three-in-one course that teaches app design, UI/UX and iOS development. Includes Sketch and Figma.
Bestseller
4.7 (681 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,418 students enrolled
Created by Gwinyai Nyatsoka
Last updated 7/2019
English
English [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 80 hours on-demand video
  • 9 articles
  • 67 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Design app assets, icons and logos from scratch.
  • Design wireframes, mockups and prototypes.
  • Build aesthetic, clean and beautiful iOS apps that stand out on the app store.
  • Apply animation and motion based design to bring interactivity to your app.
  • Become an all-in-one UI/UX designer and iOS developer.
  • Understand the thinking and principles behind great user experience and app design.
  • Create custom controls that supercharge your UI.
  • Learn how to build custom UI components and never rely on overused libraries.
Course content
Expand all 492 lectures 80:32:19
+ -----------------PART 1: App Design and UI/UX--------------
2 lectures 04:35
Welcome to App Design and UI/UX
01:12
Design Inspiration
03:23
+ Sketch Basics
5 lectures 42:34

In this lecture, we will be discussing how to install Sketch.

Why Sketch
04:38
Understanding the Sketch Interface: Part 1
16:43
Boolean Operations
08:17
Getting Apple Design Resources
02:23
Understanding the Sketch Interface: Part 2
10:33
Challenge
4 questions
+ App Asset and Icon Design
12 lectures 01:28:51

Let's create our very first app icon with Sketch! In this lecture we will create a settings icon.

Creating a Settings Icon
11:02

For our second icon, we will learn how to create the home icon which is usually found in the tab bar area of most iOS apps.

Creating a Home Icon
09:24

When we combine shapes together to create icons we still have access to the individual shapes. In this lecture, we will learn how to reduce those shapes into a single path.

Flattening Icons
08:05

We will now create an add icon which lets users know they can add something to the user interface.

Creating an Add Icon
03:30

Making our icons pixel perfect will be important if we want to be sure they don't appear poor quality when we export them into our apps. In this lecture, we will learn how to do that.

Making Icons Pixel Perfect
08:18
Rulers and Grids
07:36

We continue practising how to create icons by learning how to create a profile icon.

Creating a Profile Icon
13:09

In this lecture we will create a friends icon and also learn a few more tricks in Sketch such as converting to outlines.

Creating a Friends Icon
10:04

In this lecture we practise making our final icon. By now, you should have the confidence to combine shapes together to make app icons. This will be a primary skill before you use the vector tool to create more sophisticated app icons.

Creating a Refresh Icon
06:25

Our icons are cluttered! In this lecture, we will put everything in order.

Symbols
03:35
Artboards
05:45
Points and Pixels - The Reason We Need @2x and @3x Icons
01:58

This challenge concludes everything we have learnt about creating app assets and icons.

Challenge
5 questions
+ Foundational Design Principles
9 lectures 01:02:01

Despite often being referred to together, UI and UX are actually distinct processes that contribute to app design. In this lecture, we will attempt to understand what both mean.

UI vs UX Design: What is the Difference?
07:08

Design methods have evolved over time to favour more minimalistic user interfaces. This lecture is dedicated to examining this trend and exploring some of the tried and tested concepts we can use in our own apps.

Design Methods
10:53

We will be exploring Apple's iOS Design Theme which should be the guiding principle behind our app design.

iOS Design Themes and Principles
11:58

In this lecture, we will get to know about the colour wheel which is a visual tool that helps in finding the right colours for your app.

Choosing a Color Scheme: Part 1
07:22

Let us finally use the color wheel to find an appropriate color rule to use in our app.

Choosing a Color Scheme: Part 2
06:17
iOS Color Systems: Understanding RGBA, HSB, HEX, CYMK and GrayScale
05:04
The Importance of Color Spaces and Gamut
02:52

Typography is how you use words to convey meaning. We will be looking at the strategies you can use to effectively use type in your app.

Typography
08:42
How to Install a Custom Font in XCode
01:44
Challenge
5 questions
+ App Logo Design and The Vector Tool
5 lectures 48:05
Introducing the Vector Tool
09:15
[OPTIONAL] The Origins of the Bezier Curve
01:47
Vector Tool Practice
11:23
Creating a Weather App Logo
09:13
Importing our App Logo into Xcode
16:27
Challenge
3 questions
+ Low Fidelity Wireframing (Lo-Fi)
7 lectures 55:54

We examine the theory behind wireframes answering questions such as, "What are wireframes?", "Why are they important to app design?" and "How are they developed?".

Introduction to Wireframes and Mockups
04:44

We look at the app concept and strategise how we will build our wireframe. Our focus in this and the next few lectures is to create the wireframe for a Bitcoin app.

Planning the Wireframe
07:38

We create the tab bar of our wireframe and also get to practice using Sketch's templates.

Planning the Screens
05:24

We will now create symbols for our wireframe's tab bar to make it easy to reflect changes across our art boards.

The Home Screen Wireframe
11:43

We turn our attention to the home screen of our wireframe.

Symbolising the Tab Bar
02:51

We will now create the transfers screen. We are aiming to create a screen that shows a history the friends we have paid and a list of the friends we currently have.

The Friends Screen Wireframe
12:21

This is our final wireframe. Here we will create a screen that displays news on Bitcoin.

The Profile Screen Wireframe
11:13
Challenge
4 questions
+ High Fidelity Wireframing (Hi-Fi) and Atomic Design
10 lectures 01:41:11

In this lecture we discuss what low and high fidelity wireframes are. The principles we learn here also apply to mockups.

Atomic Design and Colour Palette
11:36

We add more fidelity to our wireframe by adding tab bar icons.

Story Post Atomic UI - Part 1
12:42

We finally move on to create our first mockup building on what we have learnt from wireframes. This is part 1 of our home screen mockup.

Creating the Heart Icon
08:19

We complete our home screen mockup.

Story Post Atomic UI - Part 2
05:40
Creating the GPS Icon
06:52
Story Post Atomic UI - Part 3
09:07
The Home Screen Wireframe
10:04
The Friends Screen Wireframe
05:09
Friends Post Atomic UI
11:07
The Profile Screen Wireframe
20:35
Challenge
3 questions
+ Mockups
5 lectures 01:03:25
Mockup Design Strategy
08:51
Home Screen Mockup Part 1
16:25
Home Screen Mockup Part 2
15:03
Friends Screen Mockup
11:55
Profile Screen Mockup
11:11
Challenge
3 questions
+ Foundational User Experience (UX) Principles
5 lectures 44:27
A Practical Understanding of User Experience
06:39
The 4 Key Elements of User Experience
13:05
Iteration and the App Design Process
11:08
The 5 Stages of the Design Thinking Process
04:22
5 Essential UX Design Patterns
09:13

This challenge concludes everything we have learnt about user experience principles.

Challenge
5 questions
Requirements
  • No previous coding or design knowledge is needed.
  • An Apple MacBook laptop or iMac.
  • Sketch (optional). If you can't get Sketch we use Figma as an alternative because it's free.
Description

Welcome to the course that will take you from app design to code. This is a three-in-one course aimed at helping you master app design, UI/UX and iOS app development from absolute beginner to advanced professional.

The top iOS apps clearly set themselves apart from all the rest with amazing user interfaces and modern user experience design. We see them featured on the iOS App Store and as winners of Apple's Design Awards. This simply means that app design and UI/UX are key factors for successful apps. But surprisingly, traditional iOS courses only go as far as teaching you how to build apps with nothing on app design and UI/UX. This course is different in that it goes well beyond just teaching you how to code.This course includes app design and UI/UX to help you build the kind of apps that stand out on the App Store.

We will cover how to use app design tools like Sketch and Figma to create app assets, icons, logos, wireframes, mockups and prototypes. We will learn essential UI/UX principles such as usability testing, user journey mapping, motion design, micro-interactions, typography and much more. We will also master iOS development to bring our app design to code and build over 20 different apps along the way.

What kind of improvements to your app can you expect by the end of this course? A recent study by Forrester Research concluded a well designed user interface could raise conversion rates by up to 200% and a better UX design could raise conversion rates up to 400%. Clearly, learning app design and UI/UX is well worth the effort. It just might be what makes or breaks your app.

This course is perfect for app designers who would like to learn how to code and app developers who would like to learn how to design. If you are an absolute beginner in both design and code you are still in the right place. This course starts by assuming you have never designed or coded before and builds up at a comfortable pace before getting into more advanced topics.

The trick to really mastering design or code is practice and this course recognises that. All our app designs will be created from scratch and our apps will be coded line by line without any help from libraries. Plus, there are dozens of quizzes and challenges to reinforce everything we learn. For more enthusiastic learners, there are further reading topics and bonus articles to help you go beyond this course's main curriculum.

All the tools we use in this course are free. Sketch is the only exception to this because Sketch requires a paid license to use. If you cannot afford Sketch then that's no problem! This course includes Figma as an alternative to Sketch and Figma is free. We will cover the same topics in Figma as we do Sketch so there's nothing you will miss. If you are feeling like taking on an extra challenge, you are more than welcome to master both Sketch and Figma!

I certainly hope to see you around in this course where we have quite the journey ahead of us. Let's get started with mastering app design, UI/UX and iOS development!

Who this course is for:
  • iOS developers who would like to learn how to both design and code.
  • Graphic or UI/UX designers who would like to learn how to bring their app designs to code.
  • iOS developers looking to learn how to design great looking apps that also deliver incredible user experience.