• $495
  • 3 payments of $175

Design for Developers

    Learn how to make the sites you code both beautiful & user-friendly.

    Let's be honest... Design is really hard!

    Have you ever found yourself wondering:
    • What colors should I use for this project? 
    • Is this font a good choice? 
    • Does this layout make sense? 
    • How do I make this site unique and not look like yet another bootstrap site?
    • And the list goes on and on...
    Throughout the Design for Developers course, you'll learn everything you need to create beautiful & user-friendly sites through a mixture of design theory and practice.

    We will start with the design theory

    In the first half of Design for Developers, you'll learn the theory of design and get all your questions answered.

    We'll cover:
    • The foundations of design
    • Design mistakes to avoid
    • Planning your projects
    • How to come up with ideas and where to find inspiration
    • The theory & psychology of color
    • The principles & anatomy of typography
    • Working with Photography
    • User experience

    Then we will apply the theory to a real project

    We'll take the knowledge you learn from the first half of the course (the theory) and apply it to a real design for a fictional company called Awesome Lawn Co. 

    Throughout this project we'll:
    • Write a design brief
    • Create a mood board & style guide
    • Choose colors & fonts
    • Create userflow wireframes*
    • Create low & mid-fidelity wireframes*
    • Design desktop & mobile UI

    * Userflow & wireframe kit included with this course so you can follow along.

    Contents

    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
    • 219 MB
    Preview
    What is design?
    • 4 mins
    • 378 MB
    Preview
    UI vs UX
    • 3 mins
    • 238 MB
    Preview
    Sketch vs Photoshop
    • 3 mins
    • 297 MB
    Preview
    Enjoy the Journey
    • 2 mins
    • 141 MB
    Preview

    The Foundations

    Learn the foundational elements of design that you will use in every design you create.
    The elements of design
    • 10 mins
    • 1000 MB
    Preview
    The principles of design
    • 11 mins
    • 1.09 GB
    Preview

    Design Mistakes to Avoid

    Lets chat about the common mistakes that developers make when it comes to design.
    Design Mistakes 1-4
    • 7 mins
    • 722 MB
    Preview
    Design Mistakes 5-8
    • 6 mins
    • 614 MB
    Preview
    Design Mistakes 9-12
    • 7 mins
    • 680 MB
    Preview

    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
    • 501 MB
    Awesome Lawn Design Brief
    • 4 mins
    • 385 MB
    Design Brief Template
    • 24.7 KB
    Mind Mapping
    • 7 mins
    • 515 MB
    Mind Mapping Tools & Resources
      Awesome Lawn Mind Map
      • 94.1 KB
      Mood Boards
      • 5 mins
      • 417 MB
      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
          • 1.09 GB
          Psychology of color
          • 9 mins
          • 919 MB
          How I choose colors
          • 5 mins
          • 504 MB
          Style Guide Template
          • 200 KB
          Choosing colors for Awesome Lawn
          • 10 mins
          • 671 MB
          Tips on working with colors
          • 4 mins
          • 361 MB
          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
            • 1000 MB
            Anatomy of a typeface
            • 5 mins
            • 517 MB
            Choosing fonts for Awesome Lawn
            • 9 mins
            • 623 MB
            Working with type
            • 7 mins
            • 701 MB
            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
              • 1.1 GB
              Where to find (free) photography to use in your designs.
                Working with lighting and shadows
                • 7 mins
                • 569 MB

                User experience

                Learn how to create simple, easy & user-friendly experiences.
                What is UX?
                • 5 mins
                • 479 MB
                How to create the perfect UX
                • 2 mins
                • 168 MB
                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
                  • 409 MB
                  All about wireframing
                  • 5 mins
                  • 530 MB
                  Grids, visual hierarchy and spacing
                  • 4 mins
                  • 356 MB
                  Wireframe & Userflow UI Kit Bundle
                  • 75.2 MB
                  Awesome Lawn userflow wireframes
                  • 12 mins
                  • 604 MB
                  Awesome Lawn Homepage Wireframes
                  • 14 mins
                  • 1.42 GB
                  Sign In & Up Wireframes
                  • 12 mins
                  • 1.2 GB
                  Dashboard wireframes
                  • 11 mins
                  • 1000 MB
                  Account page wireframes
                  • 6 mins
                  • 557 MB
                  New services wireframes
                  • 7 mins
                  • 638 MB
                  Contact page wireframes
                  • 4 mins
                  • 243 MB

                  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
                  • 1.47 GB
                  Homepage part 2
                  • 19 mins
                  • 887 MB
                  Sign in page
                  • 9 mins
                  • 607 MB
                  Sign up page
                  • 19 mins
                  • 932 MB
                  Dashboard page
                  • 25 mins
                  • 1 GB
                  Accounts Page
                  • 15 mins
                  • 610 MB
                  New services overlay
                  • 12 mins
                  • 561 MB
                  Contact page
                  • 8 mins
                  • 502 MB
                  Mobile homepage
                  • 14 mins
                  • 703 MB
                  Mobile sign in page
                  • 8 mins
                  • 337 MB
                  Mobile sign up page
                  • 9 mins
                  • 397 MB
                  Mobile dashboard
                  • 14 mins
                  • 583 MB
                  Mobile accounts page
                  • 6 mins
                  • 324 MB
                  Mobile new services overlay
                  • 5 mins
                  • 269 MB
                  Mobile contact page
                  • 4 mins
                  • 143 MB

                  Navigating Sketch

                  Learn all the tips & tricks for how to navigate your way through Sketch
                  Sketch overview
                  • 6 mins
                  • 334 MB
                  Artboards
                  • 5 mins
                  • 326 MB
                  Pages
                  • 3 mins
                  • 159 MB
                  The inspector
                  • 9 mins
                  • 460 MB
                  The layers panel
                  • 5 mins
                  • 206 MB
                  Working with shapes
                  • 7 mins
                  • 274 MB
                  Working with type
                  • 7 mins
                  • 365 MB
                  Grids, layouts & guides
                  • 6 mins
                  • 294 MB
                  Masks
                  • 3 mins
                  • 132 MB
                  Alignment & distribution
                  • 4 mins
                  • 173 MB
                  Symbols
                  • 6 mins
                  • 218 MB
                  Exporting assets
                  • 4 mins
                  • 212 MB

                  Navigating Photoshop

                  Overview
                  • 3 mins
                  • 155 MB
                  Document types
                  • 5 mins
                  • 218 MB
                  The layers panel
                  • 6 mins
                  • 255 MB

                  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

                  FAQ

                  Can developers actually become good designers?

                  Yes, absolutely. Design is a skill that can be learned just like learning to code. You did not know how to code when you were born. You picked it up through practice, trial & error. Design is the same way. You are in luck though because you do not have to go through the trial & error like I did. This is THE course for developers who want to become confident designers. After going through the Design for Developers course, you will have the knowledge to design beautiful & user-friendly websites.

                  Who is this course for?

                  This course is for you if 1) You want to become a confident designer. 2) You are tired of relying on bootstrap for your UI. 3) You want to set your site design apart from everyone else. 4) You want to improve the design of the sites you are building without needing to hire a designer. 5) You do not want to waste time searching through the sea of information out there. 6) You want a structured, concise, and value-packed course to guide you.

                  I'm a total beginner, is this course for me?

                  Yep, this course assumes you have no prior knowledge of design. No previous experience required.

                  How long do I have access?

                  Forever. Seriously. After you sign up you will be able to access the course lessons whenever you like and across any device you own.

                  I don't know how to use Sketch or Photoshop. Will I still be able to go through this course?

                  Yes. Design is more than just knowing how to use the tools. But do not worry, I teach you how to use both Photoshop & Sketch in this course too :)

                  What if I hate it?

                  Whoa now, hate is a pretty strong word! But if you are unhappy with the course just contact me within 30 days of your purchase and I will refund your money. Simple as that :)