Design for Developers
Buy now
Learn more
Overview
What is this course all about?
What is design?
UI vs UX
Sketch vs Photoshop
Enjoy the Journey
The Foundations
The elements of design
The principles of design
Design Mistakes to Avoid
Design Mistakes 1-4
Design Mistakes 5-8
Design Mistakes 9-12
Planning, ideas & inspiration
The Design Brief
Awesome Lawn Design Brief
Design Brief Template
Mind Mapping
Mind Mapping Tools & Resources
Awesome Lawn Mind Map
Mood Boards
Mood Board Tools & Resources
My favorite places to find inspiration
Choosing Colors
Color Theory
Psychology of color
How I choose colors
Style Guide Template
Choosing colors for Awesome Lawn
Tips on working with colors
Where to find color inspiration
Choosing Typography
Principles of typography
Anatomy of a typeface
Choosing fonts for Awesome Lawn
Working with type
My favorite fonts + where to find fon...
Photography, lighting and shadows
Working with photography
Where to find (free) photography to u...
Working with lighting and shadows
User experience
What is UX?
How to create the perfect UX
UX Tools (Research, testing & prototy...
Laying out your content
Laying out your content
All about wireframing
Grids, visual hierarchy and spacing
Wireframe & Userflow UI Kit Bundle
Awesome Lawn userflow wireframes
Awesome Lawn Homepage Wireframes
Sign In & Up Wireframes
Dashboard wireframes
Account page wireframes
New services wireframes
Contact page wireframes
Designing the Awesome Lawn Site
Homepage part 1
Homepage part 2
Sign in page
Sign up page
Dashboard page
Accounts Page
New services overlay
Contact page
Mobile homepage
Mobile sign in page
Mobile sign up page
Mobile dashboard
Mobile accounts page
Mobile new services overlay
Mobile contact page
Navigating Sketch
Sketch overview
Artboards
Pages
The inspector
The layers panel
Working with shapes
Working with type
Grids, layouts & guides
Masks
Alignment & distribution
Symbols
Exporting assets
Navigating Photoshop
Overview
Document types
The layers panel
Resources
Awesome Lawn Design (Sketch)
Awesome Lawn Style Guide (Sketch)
Awesome Lawn Photography
Wireframing Kit
Starter style guide template (Sketch)
Starter style guide template (PSD)
Products
Course
Design for Developers
Design for Developers
Design for Developers
Buy now
Learn more
Overview
What is this course all about?
What is design?
UI vs UX
Sketch vs Photoshop
Enjoy the Journey
The Foundations
The elements of design
The principles of design
Design Mistakes to Avoid
Design Mistakes 1-4
Design Mistakes 5-8
Design Mistakes 9-12
Planning, ideas & inspiration
The Design Brief
Awesome Lawn Design Brief
Design Brief Template
Mind Mapping
Mind Mapping Tools & Resources
Awesome Lawn Mind Map
Mood Boards
Mood Board Tools & Resources
My favorite places to find inspiration
Choosing Colors
Color Theory
Psychology of color
How I choose colors
Style Guide Template
Choosing colors for Awesome Lawn
Tips on working with colors
Where to find color inspiration
Choosing Typography
Principles of typography
Anatomy of a typeface
Choosing fonts for Awesome Lawn
Working with type
My favorite fonts + where to find fon...
Photography, lighting and shadows
Working with photography
Where to find (free) photography to u...
Working with lighting and shadows
User experience
What is UX?
How to create the perfect UX
UX Tools (Research, testing & prototy...
Laying out your content
Laying out your content
All about wireframing
Grids, visual hierarchy and spacing
Wireframe & Userflow UI Kit Bundle
Awesome Lawn userflow wireframes
Awesome Lawn Homepage Wireframes
Sign In & Up Wireframes
Dashboard wireframes
Account page wireframes
New services wireframes
Contact page wireframes
Designing the Awesome Lawn Site
Homepage part 1
Homepage part 2
Sign in page
Sign up page
Dashboard page
Accounts Page
New services overlay
Contact page
Mobile homepage
Mobile sign in page
Mobile sign up page
Mobile dashboard
Mobile accounts page
Mobile new services overlay
Mobile contact page
Navigating Sketch
Sketch overview
Artboards
Pages
The inspector
The layers panel
Working with shapes
Working with type
Grids, layouts & guides
Masks
Alignment & distribution
Symbols
Exporting assets
Navigating Photoshop
Overview
Document types
The layers panel
Resources
Awesome Lawn Design (Sketch)
Awesome Lawn Style Guide (Sketch)
Awesome Lawn Photography
Wireframing Kit
Starter style guide template (Sketch)
Starter style guide template (PSD)
Learn more
Buy now
Learn how to make the sites you code both beautiful & user-friendly.
Choosing Typography
5 Lessons
Principles of typography
Anatomy of a typeface
Choosing fonts for Awesome Lawn
Working with type
My favorite fonts + where to find fon...