Autoplay
Autocomplete
Previous Lecture
Complete and Continue
Digital Design Masterclass
Introduction
About your instructor (2:01)
Career Goals & Painpoints (54:07)
Join the BONT® Club on Facebook
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)
Digital 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)
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
6 methods for creating color palettes (22:45)
How to use color palettes (and how not to) (22:14)
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
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)
Soft skills
Design your career (30:17)
How to set goals (14:57)
How to get noticed by big companies (the introverted way) (28:44)
The 3 hard truths of being in a leadership role (7:39)
How to get promoted faster (19:40)
How to delegate (39:29)
How to give effective feedback to other designers (18:13)
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 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)
How to manage the wise, the foolish & the evil (21:16)
Resources
Books, design inspiration & file downloads
How to prioritize what books to read first (3:00)
Useful links
Exercises
Creative & Art Direction
Typography exercise Nº1 - Typeface taming
Typography exercise Nº2 - Typography system
Typography exercise Nº3 - Spot the mistakes in the type operations
Typography exercise Nº4 - Typography operations
Typography exercise Nº5 - Typologies of information
Design systems exercise Nº1 - Spot the mistakes in the atomic design example
Design systems exercise Nº2 - Creating a design system
Color exercise
Conflict resolution exercise
Motion design exercise Nº1 - Researching ideas
Motion design exercise Nº2 - Animating an interface
Feedback sessions
Typography - Feedback session 1 (164:27)
Typography - Feedback session 2 (139:40)
Typography - Feedback session 3 (111:01)
Design systems - Feedback session 1 (82:51)
Design systems - Feedback session 2 (109:00)
Color - Feedback session (116:47)
Bonus videos
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)
Typographic alignments
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock