Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Web Design Master Class
Introduction & orientation
Introduction & orientation to the WDMC - Start here (24:35)
About your instructor (2:01)
Stage 01: Position yourself
Focus (34:58)
Productize, price & sell your services (47:13)
Stage 02: Get work
How to get projects & clients (39:48)
Mastering sales (42:08)
Stage 03: Creative & Art Direction
Defining Creative & Art Direction (7:37)
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)
Creative & Art Direction exercise
Stage 03: Typography
How to tame a typeface (29:45)
Typography exercise Nº1 - Typeface taming
How to create the perfect typographic system (15:07)
Typography exercise Nº2 - Typography system
Typography operations (all you can do with type) (21:14)
How to decide what typography operations to use (3:37)
Typography exercise Nº3 - Spot the mistakes in the type operations
Typography exercise Nº4 - Typography operations
Typologies of information - How to go from boring briefs to interesting type compositions (18:08)
Typography exercise Nº5 - Typologies of information
Typographic alignments (7:18)
How to combine typefaces (12:17)
How to choose variants (12:04)
How to chose typography alignments (9:36)
Types of letter cases and how to choose them (4:05)
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 articulate the importance of a typography system (2:55)
Typography - Feedback session 1 (164:27)
Typography - Feedback session 2 (139:40)
Typography - Feedback session 3 (111:01)
Stage 03: 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)
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)
Grids & composition exercise
Stage 03: Colors
6 methods for creating color palettes (22:45)
How to use color palettes (and how not to) (22:14)
Color exercise
Color - Feedback session (116:47)
Stage 03: Design systems
What is a design system (9:58)
Atomic design (18:01)
Design systems exercise Nº1 - Spot the mistakes in the atomic design example
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)
Design systems exercise Nº2 - Creating a design system
Design systems - Feedback session 1 (82:51)
Design systems - Feedback session 2 (109:00)
Stage 03: Motion design
Animating with Figma + Principle (54:56)
How to ideate interactions & animations (45:50)
How to define the choreography (15:14)
12 principles of motion design (by Disney) (23:56)
How to quickly mock up animations in Figma (7:14)
Motion design exercise Nº1 - Researching ideas
Motion design exercise Nº2 - Animating an interface
Stage 03: Design process
Process overview (33:54)
Step 01 - Strategy (2:39)
Step 02 - Creative & Art Direction (3:21)
Step 03 - Design & Development (9:09)
How to avoid late client revisions (7:24)
Stage 04: Maximize your potential
Multiply your income 1.0 (26:09)
Transition to full-time freelance 1.0 (3:16)
Design your career (30:17)
How to set goals (14:57)
How to get promoted faster (19:40)
The 3 models of conflict resolution (14:14)
3-step formula to resolve a conflict at work (22:58)
7 assertive techniques (13:59)
Conflict resolution exercise
How to present your work to clients (12:28)
How to conduct meetings (14:13)
How to handle client feedback (15:13)
How to handoff to developers (28:40)
Stage 05: Leave a legacy
The 3 hard truths of being in a leadership role (7:39)
How to delegate (39:29)
How to give effective feedback to other designers (18:13)
How to manage the wise, the foolish & the evil (21:16)
FAQ
How to overcome a creative block (8:59)
How to deal with clients micromanaging you (18:03)
How to deal with clients asking to change a type size (4:20)
How to free your agenda from unnecessary meetings (6:35)
How to prioritize what books to read first (3:00)
BONT Club Sessions
1 Mar 2023 (68:48)
22 Feb 2023 (50:50)
15 Feb 2023 (85:03)
1 Feb 2023 (101:08)
25 Jan 2023 (43:30)
18 Jan 2023 (107:28)
11 Jan 2023 (80:54)
4 Jan 2023 (57:55)
28 Dec 2022 (72:31)
21 Dec 2022 (67:12)
14 Dec 2022 (70:38)
7 Dec 2022 (65:51)
2 Dec 2022 (66:07)
24 Nov 2022 (55:11)
17 Nov 2022 (50:36)
10 Nov 2022 (62:10)
3 Nov 2022 (49:20)
Resources
Books, design inspiration & file downloads
Useful links
How to decide what typography operations to use
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock