Learn Design Theory

Learn the fundamental principles of design, including color theory, visual hierarchy, and more. Then use them to create effective and beautiful web designs.
  1. How to Set Up Grids in Affinity Designer

    How to Set Up Grids in Affinity Designer

    Tutorial Beginner

    In this video, you'll learn how to set up grids in Affinity Designer. Learn to master the key features of both the standard grid and the isometric grid.

  2. 10 Remedial Design Pointers for Developers

    10 Remedial Design Pointers for Developers

    Tutorial Beginner

    Here’s a situation which may be familiar to you: you’re a developer and you build a prototype to demonstrate something. It works just as you mean it to, but...

  3. Understanding Design Conventions

    Understanding Design Conventions

    Tutorial Beginner

    Why following patterns and design guidelines makes sense for your user and makes for a better design.

  4. Exploring Creative Web Design Patterns

    Exploring Creative Web Design Patterns

    Course Beginner

    Web design patterns are solutions to common design problems, and in the majority of cases these patterns are implemented in the same way. However, nothing is...

  5. UX Design Process: Understanding Design Fundamentals

    UX Design Process: Understanding Design Fundamentals

    Tutorial Beginner

    In this article you’ll learn about design fundamentals. We’ll talk about what a designer might want to express, and the visual decisions made to communicate...

  6. The Significance of Visual Context in Web Design

    The Significance of Visual Context in Web Design

    Tutorial Beginner

    Let’s take a look at visual context in web design; what it is, how it’s achieved effectively, and what benefits it gives users and product owners.

  7. Quick Tip: How to Build a Blog Layout With Bulma

    Quick Tip: How to Build a Blog Layout With Bulma

    Tutorial Intermediate

    In this quick tip, we’re going to use Bulma, a popular Flexbox-based CSS framework by Jeremy Thomas, to build a responsive blog layout.

  8. Why You Should Be Using Rem-Based Layouts

    Why You Should Be Using Rem-Based Layouts

    Tutorial Beginner

    The rem unit is used to define fonts in relative terms rather than with an absolute size in pixels. But did you know that this unit is useful for layouts as...

  9. Explaining the Importance of Whitespace to Clients

    Explaining the Importance of Whitespace to Clients

    Course Beginner

    If you ever have trouble with clients wanting to fill their sites with clutter then this Coffee Break Course is for you. I’ll help you better explain to your...

  10. Invisible Forces: Spacing and Shape

    Invisible Forces: Spacing and Shape

    Tutorial Beginner

    In the previous article, we learned about how sizing and scaling can be used to make your designs harmonious and clear. In this, our final article on...

  11. Invisible Forces: Size, Contrast, and Balance

    Invisible Forces: Size, Contrast, and Balance

    Tutorial Beginner

    This is the second of a three-part series of articles about “invisible forces” in design. In this article we’ll look at size, contrast, and balance.

  12. Invisible Forces: Alignment, Direction, and Focus

    Invisible Forces: Alignment, Direction, and Focus

    Tutorial Beginner

    This is the first in a three-part series about these forces, so let’s begin with alignment, direction, and focus.