Our iOS Design course teaches you everything you need to know to be a UI/UX designer. Along the journey, you will learn the principles of UI/UX design, the fundamentals of typography, color, shapes and space, and how to make it all a reality in Sketch.
Why use Sketch over the Adobe’s Creative Cloud (Photoshop, Illustrator)? Get in depth reasons from some of the industry’s leading designers: Meng To and Khoi Vinh.
By the end of the course you will be able to design your own iOS app from scratch. That includes icons, splash pages, and UI components that conform to the Apple UX guidelines.
Topics covered:
• Sketch: Getting started with this revolutionary design tool
• Learn commands and workflow enhancing techniques
• Understand the value of plugins
• Design by mimicking: popular icons and full applications
• Design by innovating: from conception, to wireframing, to finalizing your design
• Understand how to export and use SketchMirror to test your designs on other displays
• Understand color theory and typography and their importance in UI design
• Apple UX guidelines
• And so much more
Why take this course and how much time does it take to complete?
UI/UX designers are in high demand in the tech industry. Glassdoor estimates the average salary for a UI/UX designer to be $90,000/year. Getting one of these jobs is usually based solely on portfolio projects (which you will get in this course) rather than which prestigious school you went to and what your GPA was.
Our course includes over 30 hours of video plus exercises for you to complete on your own. Most people take between one and two months to finish the course if they work consistently. However, you have lifetime access so you can move at your own pace.
Do I have to purchase Sketch?
Sketch 3 comes with a 2 week free trial period, however, it costs $99 for lifetime access (as opposed to the Adobe Creative Cloud which costs upwards of $20/month). If you are serious about designing your own interfaces or becoming a professional designer, we think the $99 investment is more than fair.
What are the technical requirements to take the course?
Sketch 3 requires OS X 10.8+.
Do I need any previous design experience?
No design experience is needed. You don’t even have to be artistic. We’ll teach you everything you need to know to get you designing your own apps.
Khari is a graphic artist and designer from Boston, MA. After completing his degree in Sociology at Wesleyan University he moved his life to Paris where he continues to live. A degree candidate for the MFA Design and Technology at Parsons The New School, Khari maintains a firm connection with both tactile and digital media, constantly experimenting and pushing the limits of UI/UX design.
Artist profile: www.kh4ri.com
Instagram: @slghtr
|
Welcome! (01:23)
|
|
Get Sketch (01:00)
|
|
Why Sketch? (02:00)
|
|
Why Design? (02:42)
|
|
A Brief History of Graphic Design (07:44)
|
|
Toolbar (02:49)
|
|
The Left Bar: Layers and Tags
 (10:58) |
|
Group Elements (04:43)
|
|
Merging Shapes: Union, Subtract, Intersect, Difference (07:06)
|
|
Symbols (01:24)
|
|
Mockup Introduction (05:29)
|
|
Creating a Symbol
(02:55) |
|
From Text to Outline
(04:07) |
|
Text Converted to Outlines : Modifying Individual Colors (01:11)
|
|
Text Styles (08:52)
|
|
Shared Shape Styles (06:37)
|
|
Resizing Pixel by Pixel (03:43)
|
|
Reshaping/Resizing Using the Space Bar (03:31)
|
|
Balancing Elements' Visual Weights (06:12)
|
|
Mail Icon: Quick Exercise (02:52)
|
|
Shape and Form (08:34)
|
|
Pictographs (02:00)
|
|
What is Gestalt Psychology? (04:05)
|
|
Importing an Image (01:13)
|
|
Generate Art Boards (02:34)
|
|
Adding Shapes (03:04)
|
|
Groups and Shape Properties (03:05)
|
|
Adding Text (03:30)
|
|
Exploring Some Property Tools (02:43)
|
|
Golden Ratio Grid
(04:28) |
|
Golden Ratio Exercise
|
|
Color Lesson intro
(00:29) |
|
Color Lesson Categories (03:40)
|
|
Color Lesson Hue, Chroma, and Values (03:01)
|
|
Color Lesson Further Considerations (03:38)
|
|
Color Exercise
|
|
Weather Icon: Part 1 (06:56)
|
|
Weather Icon: Part 2 (07:05)
|
|
Weather Icon: Part 3 (06:02)
|
|
Photo Icon
(05:11) |
|
Designing a Color Palette (03:23)
|
|
A Different Approach to Color Palette Creation: 3x3 Color Palette
(07:19) |
|
Evernote Logo
(09:16) |
|
ALTERNATIVE SOLUTION : Evernote Logo with Vectors and Bezier Curves
(08:57) |
|
3D Shapes without Modeling
(14:32) |
|
Typography Intro
(01:04) |
|
Typography Initial Terminology (04:49)
|
|
Typography Space between characters (06:57)
|
|
Typography Organizing Text
(04:34) |
|
Typography In Application Exercise
|
|
Apple Developer Tips
(18:46) |
|
Our first App (01:29)
|
|
Brainstorming (05:48)
|
|
Let's start with the Logo! (03:19)
|
|
Building a Screen (02:49)
|
|
Modifying the Main Control Bar
(03:11) |
|
Wireframing: Friends Screen (08:02)
|
|
Wireframing: Stats Screen (05:17)
|
|
Wireframing: Check-In Screen (13:37)
|
|
Wireframing: Profile Screen (07:05)
|
|
Get This Plug In! (01:02)
|
|
Adding Some Realistic Visual Information (04:41)
|
|
Professional Manners: Keeping Our Elements Organized (07:37)
|
|
Noke Stats Screen Update (05:53)
|
|
Noke Check-In Screen Redesign (13:51)
|
|
Noke Profile Screen Update (08:26)
|
|
Noke Check-In Notification Screen Update (05:24)
|
|
Creating a Parameters Icon for the Noke App (07:55)
|
|
File Crash: Recovering From A Potentially Devastating Experience (03:46)
|
|
Let's Redesign Our Icons! (15:57)
|
|
Creating a Consistent Visual Vocabulary (11:14)
|
|
Lost in Your Document? Center the Canvas! (01:25)
|
|
Updating the Noke Icon (11:45)
|
|
Creating a Launch Screen
(01:04) |
|
Exporting our Art boards (05:14)
|
|
Exporting Individual Elements (04:47)
|
|
Slices (03:39)
|
|
Exporting Slices (05:36)
|
|
Exporting in Batches of Different Sizes
(12:57) |
|
Design iOS: Part 1 (07:13)
|
|
Design iOS: Part 2 (17:51)
|
|
Looking into iOS App Anatomy (04:48)
|
|
Logo Design: How to Begin (05:28)
|
|
When Considering the Typeface (02:26)
|
|
Making Intelligent Use of White Space / Don't Over-do It / Make It Active (05:40)
|
|
Logos and Colors (15:40)
|
|
Complementary Colors (04:49)
|
|
Flexible Use of Color In Logos (02:56)
|
|
iPhone 6 / iOS 8 Resource (01:29)
|
|
Twitter Exercise
(01:10) |
|
Noke App Assignment (04:20)
|
|
Noke App Assignment Tips / Things to Consider (05:07)
|
|
Noke Personal Results
(03:33) |
|
Noke Results: Icons and Launch Screen (04:28)
|
|
Noke Results: Add Multiple Friends Page (03:17)
|
|
Noke Results: Friends Page (06:18)
|
|
Noke Results: Find Friends Page (01:47)
|
|
Noke Results: Graphs Tutorial I (06:01)
|
|
Noke Results: Graphs Tutorial II (06:12)
|
|
Noke Results: Circular Graphs (03:13)
|
|
Noke Results: Donut Graphs (07:32)
|
|
Noke Results: Check-In Page
(07:47) |
|
Noke Results: Edit Profile Screen (10:22)
|
|
Noke Results: Maps (09:17)
|
|
Noke Results: Grey Version (03:04)
|
|
Settings Icon: Part 1
(05:55) |
|
Settings Icon: Part 2 (09:04)
|
|
Settings Icon: Part 3 (15:48)
|
|
Settings Icon: Part 4 - Alternative Solution (03:20)
|
|
Adding Assets from Sketch into Xcode 6 (01:04)
|
|
Facebook App Introduction (01:18)
|
|
Facebook App: Document Setup / Observations (02:23)
|
|
News Feed: Introduction (01:12)
|
|
News Feed: Creating the Frame for Posts (04:00)
|
|
News Feed: Like / Comment / Share Buttons (06:48)
|
|
News Feed: Status / Photo / Check In Buttons (06:34)
|
|
News Feed: Tab Bar Icons (10:06)
|
|
News Feed: Replicating Text (06:41)
|
|
News Feed: Making Our Icons Into Symbols (How to add your own shortcuts!) (03:40)
|
|
News Feed: Placing Items / Finishing Screen (03:16)
|
|
News Feed: Second Screen (06:31)
|
|
Why People Use Facebook (04:11)
|
|
News Feed: Ideas / Workflow (04:12)
|
|
News Feed: Editing the Drop Down Menu (06:01)
|
|
News Feed: Adding Notifications (01:13)
|
|
News Feed: Left Tray Menu (05:39)
|
|
News Feed Exercise
(02:09) |
|
Notifications Explanation (03:59)
|
|
Notifications Exercise
(02:31) |
|
Profile Page Explanation (03:02)
|
|
Profile Exercise
(00:28) |
|
Requests Exercise
(01:19) |
|
Facebook Parting Thoughts
(02:07) |
|
Section Introduction (01:46)
|
|
User Centered Design (03:36)
|
|
The Process
(04:30) |
|
Sketching (06:32)
|
|
Wireframing (03:22)
|
|
Mock-up (02:51)
|
|
Prototyping (03:49)
|
|
Getting Started
(01:17) |
|
The Idea : Research Is Key (02:16)
|
|
Toilet Finder : The App We Will Be Working On (08:34)
|
|
Make Lists (08:04)
|
|
Information Architecture (04:10)
|
|
More Lists before Drawing (02:51)
|
|
My Sketches
(05:50) |
|
Wireframing in Sketch : Part 1 (06:43)
|
|
Wireframing in Sketch : Part 2 (05:01)
|
|
Wireframing in Sketch : Part 3 (07:39)
|
|
Wireframing in Sketch : Part 4 (02:03)
|
|
Wireframing in Sketch : Part 5 (02:10)
|
|
Wireframing in Sketch : Part 6 (09:21)
|
|
Wireframing in Sketch : Part 7 (05:31)
|
|
iPhone Wireframe UI Kit (01:13)
|
|
Sketch Toolbox (02:13)
|
|
iPhoneMockup (04:52)
|
|
Introduction : Starting With Existing Screens
(01:52) |
|
First Screen: Gmail Inbox (01:40)
|
|
Gmail Inbox: Getting the Basic Screen (09:40)
|
|
Gmail Inbox : The Tray (08:27)
|
|
Gmail Inbox : Discussing The Screens (02:50)
|
|
Gmail Inbox : Making Some Changes (08:49)
|
|
Gmail Inbox : Further Revisions
(01:08) |
|
Next Victim : Photo App (01:56)
|
|
Photo App : Make A Cool Camera Icon (05:08)
|
|
Photo App : Using Blur Effects and Laying Out the Screen (04:40)
|
|
Photo App : Adding Icons and Content
(06:11) |
|
Exercise : Starting With Existing Screens
(02:07) |
|
Introduction : Assessing Where We Are! (02:38)
|
|
Mock-up : Working on Proportions (01:03)
|
|
Mock-up : Moving Away from the Wireframe (03:20)
|
|
File Explanation/Notes : Part 1
(05:34) |
|
File Explanation/Notes : Part 2 (04:03)
|
|
File Explanation/Notes : Part 3 (03:03)
|
|
File Explanation/Notes : Part 4 (03:41)
|
|
Get Sketch Mirror! (03:45)
|
|
Making Edits in Sketch Mirror (08:48)
|
|
First Version of the Mock-up : After Some Revisions
(05:42) |
|
Designing a Logo (04:04)
|
|
Preliminary Sketches for the Logo (00:19)
|
|
Add New Toilet Screen (01:23)
|
|
Edit Map View Screen (02:40)
|
|
About the Updated List View (+More with Sketch Mirror!) (04:40)
|
|
How To : Creating an Icon Using the Grid Tool (05:15)
|
|
How To : Using the Layout Tool (04:36)
|
|
How To : Using Shadows for the "Go" Button (03:40)
|
|
Brand Identity and Coherence :The "Go" Button (01:07)
|
|
Making Color Decisions : Map / List Toggle (02:26)
|
|
Thought Process : The "Edit" Button (07:17)
|
|
More Color Revisions : Creating Consistent Visual Appeal (01:12)
|
|
Changes to The Edit List View : Don't Disorient the User! (05:20)
|
|
More Color Revisions : The Star Rating System (03:51)
|
|
Re-evaluating the "Edit" Button : Consistency is Key! (01:04)
|
|
Re-evaluating Color Choices : The Stars (01:12)
|
|
Considering a Gesture Instead of a Button : A Usability Standpoint (02:02)
|
|
Revisions to the the List View (05:20)
|
|
Icon Design : Creating Some Simple Map Markers (07:14)
|
|
More Revisions : Considering Shadows (01:22)
|
|
An Important Decision : Why I Chose a Portrait-Only View (01:13)
|
|
Creating a Gesture for the "Go" Function (03:59)
|
|
Showcasing Gestures for Easy User Comprehension (07:08)
|
|
Creating a Comment Screen (03:44)
|
|
We May Need a Quick Notification Screen! / Deciding on a Name for the App! (02:16)
|
|
File Organization : Pulling it Together (06:57)
|
|
Conclusion : Look At What We've Accomplished!
(02:47) |
|
Creating an Icon Alternative : The Map / List Toggles (05:20)
|
|
Introduction to iPad
(03:37) |
|
Designing for iPad vs iPhone (05:12)
|
|
iPad as a Social Experience (01:53)
|
|
iPad Screen Real Estate (02:49)
|
|
Introduction to Flat Design (02:50)
|
|
Skeuomorphism : What is it? (08:19)
|
|
Design Today : How to Adapt? (07:28)
|
|
Flat Design : Just a Trend? (05:11)
|
|
What will we do in this section? (01:37)
|
|
What is Spotify? (02:58)
|
|
The First Couple of Screens (08:40)
|
|
Continuing the Design : Working with Text (03:47)
|
|
Designing Icons : Top Lists / New Releases / Discover (04:46)
|
|
Designing Icons : Play Functions (03:35)
|
|
Wrapping up : Designing the Remaining Screens (01:49)
|
|
A Walk Through the Spotify iPhone Design Techniques (11:33)
|
|
iPad Wireframe Introduction (00:12)
|
|
Orientation : About the Document (01:35)
|
|
Walkthrough the Multiplatform Spotify Application (05:39)
|
|
What to Consider When Designing in Landscape (04:18)
|
|
Design Choices : The Importance of Clarity (08:31)
|
|
Beginning the Wireframes : iPad Retina Format (01:46)
|
|
Wireframing : Starting with the Basic Screen Division (01:31)
|
|
How to : Vector Lines with Rounded Ends (02:31)
|
|
Wireframing : Adding Song Control Icons (01:12)
|
|
Wireframing : Volume Settings Icon (04:33)
|
|
Wireframing : Finishing the Play Bar (01:54)
|
|
Wireframing : First Column View (02:16)
|
|
Wireframing : About the Text (02:34)
|
|
Wireframing : Some Elements are Sized Identically (02:24)
|
|
Making Spotify Icons Introduction (00:21)
|
|
Search Icon : Lesson about Borders (04:56)
|
|
Browse Icon (04:09)
|
|
Activity Icon (03:35)
|
|
Radio Icon (02:53)
|
|
Your Music Icon (01:58)
|
|
Settings Icon (02:58)
|
|
Inbox Icon : Alternative Solution Using Vectors (04:56)
|
|
Wireframing : Finishing Left Bar and Portait Screen (03:40)
|
|
Wireframing : Left bar in the Landscape Orientation (01:28)
|
|
Wireframing : Completing the Landscape View of our First Screen (08:08)
|
|
We'll Need A Couple More Icons : Songs / Albums (03:37)
|
|
Icon Design : Artists (04:14)
|
|
Icon Design : Local Files (03:25)
|
|
Wireframing : Finishing the First Two Screens (04:00)
|
|
Wireframing : Browse View Portrait (07:47)
|
|
Wireframing : Browse View Landscape (04:14)
|
|
Wireframing : Breezing through the Last Two Screens (02:18)
|
|
Intrdouction : More Complex Icons for the Browse Screen (01:40)
|
|
Mood Icon (08:39)
|
|
Party Icon (10:45)
|
|
Pop Icon (07:42)
|
|
Workout Icon (06:50)
|
|
Focus Icon (06:40)
|
|
Latino Icon (05:30)
|
|
Introduction : Adding Color to the Spotify App (00:25)
|
|
First Screen : Adding Color / Images (03:01)
|
|
First Screen : Buttons / Text (09:45)
|
|
First Screen : Finishing Up (05:47)
|
|
Second Screen : Cutting Some Corners (02:58)
|
|
Getting Some Album Art in the Mix (05:36)
|
|
Continuing to Develop the Screens (03:13)
|
|
Browse Screen : Manipulating Photos and Icons (10:43)
|
|
Creating Tray (Image fade to black) (03:10)
|
|
Finishing the Tray (03:29)
|
|
Adding Visual Interest to the Play Screen (05:16)
|
|
A Final Look At What We've Done
(03:24) |
|
Introduction : Creating the Spotify Logo (02:39)
|
|
Making the Beams (04:25)
|
|
Putting the Beams in Context (02:23)
|
|
From Existing Font to Custom Font (13:11)
|
|
Spotify Logo : Finishing Up (04:04)
|
|
Assignment : Spotify for iPad (02:39)
|
|
Assignment : Testing Usability Issues / Improving the App (06:58)
|
|
Section Introduction : Stuff You May Not Have Known (02:48)
|
|
Color Blending : Using The Slack Icon as an Exmaple (04:18)
|
|
Image Masking : Finishing the Slack Icon (05:06)
|
|
Ignore Underlying Mask : Those Bullet Points in the Layers List (01:27)
|
|
More Color Blending Options (04:22)
|
|
Exercise : Color Blending (01:00)
|
|
Creating Polygons (02:35)
|
|
Exercise : Creating a Cohesive Icon Pack
(04:10) |
|
Rounding Points (02:42)
|
|
Playing with Stars (01:16)
|
|
Flip Tool : Making Patterns (04:29)
|
|
Border Control (02:29)
|
|
Creating False Depth
(07:25) |
.jpg)
