Autoplay
Autocomplete
Previous Lesson
Complete and Continue
BONT Blueprint V1
START HERE
Step 1: Introduction & orientation (24:35)
Step 2: The 4 fundamentals of a successful Web Design career (27:13)
Stage 01: Position yourself
Step 1: Focus
Step 2: Productize, price & sell your services
Stage 02: Get work
Step 1: How to get work 1.1
Step 2: Mastering sales 1.0
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 03: Creative & Art Direction
Defining Creative & Art Direction
The Creative Direction process for interfaces
How to come up with a concept
The Art Direction process for interfaces
The most important habit of an Art Director
Walking you through how I create a graphic universe
How to create visual metaphors that support the message
How to set trends & become an industry leader
How to justify your aesthetic decisions
How to dose the amount of visual metaphors & concepts you use
How to come up with different directions for the same project
Where to look for references
How to find references of a specific style
Creative & Art Direction exercise
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 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: Typography
Anatomy of a typeface
Typeface classification
How to tame a typeface
Typography exercise Nº1 - Typeface taming
How to create the perfect typographic system
Typography exercise Nº2 - Typography system
Typography operations (all you can do with type)
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
Typography exercise Nº5 - Typologies of information
Typography alignments
How to choose typography alignments
How to combine typefaces
How to choose variants
Types of letter cases and how to choose them
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
How to articulate the importance of a typography system
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
7 tips to compose landing pages (11:32)
10 tips to compose navigations (14:13)
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 in Web Design (30:30)
Optical adjustments with shapes & typography (3:59)
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: Motion design
The 3 fundamentals of animation in Web Design (16:41)
How to ideate interactions & animations (28:57)
How to reflect the brand's character (15:23)
12 principles of motion design (by Disney) (23:56)
How to define the choreography (15:14)
Animating with Figma + Principle (54: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 04: Maximize your potential
Step 1: Multiply your income 1.0
Step 2: Transition to full-time freelance 1.0
Design your career (30:17)
How to set goals (14:57)
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)
BONT Club Sessions
24 Jan 2024 (69:47)
11 Jan 2024 (94:05)
03 Jan 2024 (75:07)
27 Dec 2023 (99:10)
21 Dec 2023 (106:35)
14 Dec 2023 (56:48)
29 Nov 2023 (36:03)
15 Nov 2023 (65:10)
8 Nov 2023 (95:56)
1 Nov 2023 (98:08)
25 Oct 2023 (84:15)
18 Oct 2023 (51:29)
11 Oct 2023 (83:58)
4 Oct 2023 (53:14)
27 Sep 2023 (57:59)
19 Sep 2023 (45:41)
13 Sep 2023 (97:28)
6 Sep 2023 (76:02)
30 Aug 2023 (67:34)
23 Aug 2023 (13:53)
16 Aug 2023
9 Aug 2023 (65:42)
2 Aug 2023 (58:45)
26 Jul 2023 (71:04)
12 Jul 2023 (33:05)
6 Jul 2023 (58:33)
22 Jun 2023 (83:33)
14 Jun 2023 (52:50)
7 Jun 2023 (89:57)
31 May 2023 (81:31)
24 May 2023 (81:33)
17 May 2023 (45:41)
10 May 2023 (94:22)
3 May 2023 (85:25)
26 Apr 2023 (104:43)
19 Apr 2023 (78:39)
12 Apr 2023 (81:08)
29 Mar 2023 (22:32)
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
Animating with Figma + Principle
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock