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 fonts to use + font tools

Photography, lighting and shadows

• Working with photography

• Where to find (free) photography to use in your designs.

• Working with lighting and shadows

User experience

• What is UX?

• How to create the perfect UX

• UX Tools (Research, testing & prototyping)

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)