Play video
UI Design for Developers
22 sections - 3 hours of video
Add to favorites
Notify me
In this course we'll learn how to use design systems, set up break points, typography, spacing, navigation, size rules for adapting to the iPad, mobile and web versions, and different techniques that translate well from design to code.
Taught by Meng To
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
22 topics
All techniques are explained step-by-step, in a beginner-friendly format so that you can easily follow in a cohesive way.
1
UI Design for Developers
Learn just enough visual design to be dangerous as a developer
3:46
2
UI Patterns and Inspiration
Design from scratch using known patterns and create wireframes
13:52
3
Colors and Branding
Create your color palette using monochromatic, analogous and complimentary colors
12:51
4
Gradients and Backgrounds
Design backgrounds from simple shapes and apply gradients from analogous colors
10:10
5
Stroke and Blobs
Customize the stroke and generate new designs with Looper
12:55
6
Illustrations and Mockups
Elevate your presentation with mockups and illustrations
9:37
7
Typography and Accessibility
Basic rules and system for type design for maximum legibility
9:18
8
Text Styles and Buttons
Set consistent font styles and create buttons with auto layout
8:57
9
Grid and Spacing
Learn about layout grid, rulers and auto layout spacing
8:46
10
Navigation and Components
Create reusable UI elements across multiple screens
10:55
11
Visual Hierarchy and Depth
Apply colors, shadows and background blur to give priority and increase clarity
12:12
12
Cards and Content
Design the content using a flexible card UI
12:54
13
Flexible List Layout
Create list rows and columns that are flexible and reusable
12:47
14
Icons and Customizations
Customize complex icons and font icons like SF Symbols
13:46
15
Vectors and Booleans
Create icons from scratch using the shape and drawing tools
15:00
16
Design Transformations
Quickly rearrange existing components into new designs
11:24
17
Forms and Modals
Design a sign up layout with inputs and a button
13:35
18
UI States and Background Blur
Design button states and error messages
15:49
19
Success Modal and Confetti
Design a floating modal with a success message and confetti
10:29
20
Redesign and Iterations
Revisiting backgrounds, content and design system
15:04
21
Organizing your Layers
Organizing your Layers
11:20
22
Pages and Nested Components
Setting components inside components and creating pages
8:45
Learn by doing
What you'll build
Redesign your existing app or start from scratch as you follow along and learn the techniques.
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
Browse all downloads
What's included?
All courses come with downloadable files to help you design, code and follow the course offline.
300+ hours of video
Subtitles in English, Chinese
Source files, ePub
UI, icons, illustrations
Premium, support chat
Source files
Design templates and source code files are included to help you learn.
ePub files
Read offline using Books for iOS, Mac or other apps that can read this format.