Design for Developers

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