Design for Developers

Learn how to make the sites you code both beautiful & user-friendly.
Overview
Lets chat about what is in this course as well as what design is and why you should learn it.
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
Learn the foundational elements of design that you will use in every design you create.
The elements of design
10 mins
The principles of design
11 mins
Design Mistakes to Avoid
Lets chat about the common mistakes that developers make when it comes to design.
Design Mistakes 1-4
7 mins
Design Mistakes 5-8
6 mins
Design Mistakes 9-12
7 mins
Planning, ideas & inspiration
Learn the methods you can use to find inspiration, spark your creativity, make connections & view ideas from fresh perspectives.
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
Learn about the theory behind colors and how to apply it directly to your projects.
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
Learn about the theory behind typography and how to apply it directly to your projects.
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
Learn the best ways to use photography in your site designs.
Working with photography
11 mins
Where to find (free) photography to use in your designs.
Working with lighting and shadows
7 mins
User experience
Learn how to create simple, easy & user-friendly experiences.
What is UX?
5 mins
How to create the perfect UX
2 mins
UX Tools (Research, testing & prototyping)
Laying out your content
Learn the techniques in laying out the content in your projects.
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
We're going to apply everything we've learned so far and create the designs for the Awesome Lawn project.
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
Learn all the tips & tricks for how to navigate your way through 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