How to handoff to developers | Bont

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

Resources

Books & design inspiration
File downloads
Useful links

How to handoff to developers

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock