Autoplay
Autocomplete
Previous Lecture
Complete and Continue
Digital Design Masterclass
Introduction
✅ About your instructor (2:01)
✅ Career Goals & Painpoints (54:07)
Design process
✅ Process overview (33:54)
✅ Step 01 - Strategy (2:39)
✅ Step 02 - Creative & Art Direction (3:21)
✅ Step 03 - Design & Development (9:09)
✅ Digital Creative & Art Direction
✅ Defining Creative & Art Direction (7:37)
✅ The 3 hard truths of being in a leadership role (7:39)
✅ The Creative Direction process for interfaces (14:41)
✅ How to come up with a concept (10:02)
✅ The Art Direction process for interfaces (19:01)
✅ The most important habit of an Art Director (4:17)
✅ Walking you through how I create a graphic universe (20:04)
✅ How to create visual metaphors that support the message (4:27)
✅ How to set trends & become an industry leader (21:49)
✅ How to justify your aesthetic decisions (3:19)
✅ How to dose the amount of visual metaphors & concepts you use (17:38)
✅ How to come up with different directions for the same project (12:23)
✅ Where to look for references (5:07)
✅ How to find references of a specific style (1:20)
✅ Grids & composition
✅ The Nº1 law of composition (6:32)
✅ Introduction to Grids (1:00)
✅ The importance of structure (1:15)
✅ Benefits of using grids (1:28)
✅ Anatomy of a grid (3:15)
✅ Setting up multi-column grids (5:24)
✅ Setting up modular grids (3:45)
✅ How to decide what type of grid to use (2:15)
✅ The 6 alignments & their combinations (1:19)
✅ The 3 structures for UI elements (2:55)
✅ Applying alignments and structures in Sketch (9:54)
✅ Principles of grid usage (12:32)
✅ Designing with the Golden Canon Grid - Part I (23:15)
✅ Designing with the Golden Canon Grid - Part II (27:52)
✅ Designing with the Golden Canon Grid - Part III (12:00)
✅ Designing with a multi-column grid - Part I (25:00)
✅ Designing with a multi-column grid - Part II (29:38)
✅ Designing with a multi-column grid - Part III (36:36)
✅ Common myths about grids (1:45)
✅ Using text & images (3:04)
✅ Using shapes (1:48)
✅ Using color (3:18)
✅ Using white space (4:31)
✅ Natural design (12:35)
✅ Visual balance (26:10)
✅ Visual direction (9:17)
✅ Visual rhythm (8:33)
✅ Gestalt laws of perception (30:30)
✅ Optical adjustments with shapes & typography (3:59)
✅ 7 tips to compose landing pages (11:32)
✅ 6 tips to compose web apps (9:37)
✅ 10 tips to compose navigations (14:13)
✅ 3 spacing methods to compose UI elements (10:24)
✅ Dealing with different types of image assets (7:03)
✅ Responsive design (27:23)
✅ Typography
✅ Anatomy of a typeface (3:43)
✅ Typeface classification (5:48)
✅ Types of letter cases and how to choose them (4:05)
✅ Typographic alignments (7:18)
✅ How to chose typography alignments (9:36)
✅ How to adjust (or tame) a typeface (29:45)
✅ How to create the perfect typographic system (15:07)
✅ How to use a typographic system in product design (with little space) (1:51)
✅ How to articulate the importance of a typography system (2:55)
✅ Why I think Google uses a type scale instead of a type system (2:54)
✅ How to deal with a brand that has a messy typography system (1:13)
✅ How to choose variants (12:04)
✅ Typography operations (all you can do with type) (21:14)
✅ How to decide what typography operations to use (3:37)
✅ How to combine typefaces (12:17)
✅ How to go from boring briefs to interesting type compositions (typologies of information) (18:08)
Colors
How to create color palettes
Rules for systematic coloring
Percentage of colors on page
✅ Design systems
✅ What is a design system (9:58)
✅ Atomic design (18:01)
✅ The 6 stages of creating a design system (20:36)
✅ How to sell a design system to your boss (8:54)
✅ How to create and apply a color system in Figma (11:26)
✅ How to create and apply a typography system in Figma (5:42)
✅ How to create and apply a grid system in Figma (11:57)
✅ How to create and apply a component system (like buttons) in Figma (18:26)
✅ Nesting symbols (8:26)
✅ When and how to re use design systems from previous projects (5:07)
Motion design
Animation best practices
Principles of animation for Digital Design
How to quickly mock up animations in Figma
Animating with Figma & Principle
General soft skills
✅ The 3 models of conflict resolution (14:14)
✅ 7 assertive techniques (13:59)
✅ 3-step formula to resolve a conflict at work (22:58)
✅ How to deal with clients micromanaging you (18:03)
✅ How to deal with clients asking to change a type size (4:20)
✅ How to overcome a creative block (8:59)
How to present the work
How to handoff to developers
How to plan your career
Soft skills for designers at companies
How to get promoted
How to get a pay raise
How to delegate
How to give effective feedback to other designers
Soft skills for freelance designers
How to transition from a full-time job to being independent
How to get new clients
How to price your work
Resources
✅ Books, design inspiration & file downloads
✅ How to prioritize what books to read first (3:00)
✅ Useful links
Exercises & bonus videos
✅ Typography exercise Nº1 - Typeface taming exercise
✅ Typography exercise Nº2 - Typography system exercise
✅ Typography exercise Nº3 - Spot the mistakes in the type operations
✅ Typography exercise Nº4 - Typography operations exercise
✅ Typography exercise Nº5 - Typologies of information exercise
✅ Typography - Feedback session 1 (164:27)
✅ Typography - Feedback session 2 (139:40)
✅ Typography - Feedback session 3 (111:01)
✅ Design systems exercise Nº1 - Spot the mistakes in the atomic design example
✅ Design systems - Feedback session 1 (82:51)
✅ Design systems - Feedback session 2 (109:00)
✅ Typographic alignments
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock