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.

All Design Theory content:

  1. 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.

  2. 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.

  3. 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...

  4. 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.

  5. 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.

  6. Color in 60 Seconds: Triadic Colors

    Color in 60 Seconds: Triadic Colors

    Tutorial Beginner

    A “triadic” color scheme uses three colors equally spaced around the color wheel. Here’s more about them, in sixty seconds!

  7. Color in 60 Seconds: Analogous Colors

    Color in 60 Seconds: Analogous Colors

    Tutorial Beginner

    Analogous colors sit next to one another on the color wheel. Learn more about them in sixty seconds!

  8. Color in 60 Seconds: Complementary Colors

    Color in 60 Seconds: Complementary Colors

    Tutorial Beginner

    The term “complementary colors” refers to a pair of colors which are opposite one another on the color wheel. Let’s take a look, in sixty seconds!

  9. Big Picture: The State of Web Design in Africa

    Big Picture: The State of Web Design in Africa

    Tutorial Beginner

    As part of our ongoing Web Design Across the World series, this article looks at one of the broadest and far-reaching topics yet: web design in Africa. We’ll...

  10. A Comprehensive Guide to Typography Basics

    A Comprehensive Guide to Typography Basics

    Tutorial Beginner

    If you’re learning web design from zero and want to significantly improve your typography chops, then this article is written for you. We will cover...

  11. Land of Opposites: State of the Web Industry in South Africa

    Land of Opposites: State of the Web Industry in South Africa

    Tutorial Beginner

    In this article we take a detailed look into the current digital state of affairs in South Africa. From startup culture to mobile data, we’ll cover it all.

  12. A Comprehensive Introduction to Grids in Web Design

    A Comprehensive Introduction to Grids in Web Design

    Tutorial Beginner

    If you’ve never dabbled with using grids in your designs, this article is written for you. In it you’ll learn the basic lingo, theory, and will see through...