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 tutorials:

  1. An Introduction to Color Theory for Web Designers

    An Introduction to Color Theory for Web Designers

    Tutorial Beginner

    Today we're going to learn the importance of color in Web Design and how to choose a pleasing color scheme. This article is part of our Basix series, which...

  2. Emulating Microsoft's Metro Design Language

    Emulating Microsoft's Metro Design Language

    Tutorial Beginner

    Over the past few years, Microsoft has adopted its incumbent design language to a significant extent. Metro is the aesthetic basis of Windows 8; Microsoft's...

  3. Skeuomorphism in Interface Design

    Skeuomorphism in Interface Design

    Tutorial Beginner

    That's right, Skeuomorphism. Let's take a look at what this bizarre term means, when you should use it in interface design and what can happen when it goes...

  4. Employing AIDA Principles in Web Design

    Employing AIDA Principles in Web Design

    Tutorial Beginner

    In this article we'll discuss how we can use design to implement the principles laid out by AIDA (the marketing acronym, not the Italian opera) and help...

  5. Applying Fitts’ Law To Mobile Interface Design

    Applying Fitts’ Law To Mobile Interface Design

    Tutorial Beginner

    Fitts' Law is an essential principle of Human-Computer Interaction theory that was formulated almost 60 years ago. It's critical to UX design for the desktop...

  6. Visual Direction in Web Design

    Visual Direction in Web Design

    Tutorial Beginner

    One of the big secrets of design is learning how to guide the visual direction of viewers; This principle is often overlooked by even the most experienced...

  7. Understanding the F-Layout in Web Design

    Understanding the F-Layout in Web Design

    Tutorial Beginner

    Today we're going to examine the "F Pattern Layout". Rather than trying to force the viewer's visual flow, the F-Layout gives in to the natural behaviors of...

  8. Less is More: Fundamentals of Minimalist Web Design

    Less is More: Fundamentals of Minimalist Web Design

    Tutorial Beginner

    Fighting the battle against clutter is something every designer undertakes, whether it's on their own site or when designing for a client. Your web site’s...

  9. What We Can Learn From Google's New UI

    What We Can Learn From Google's New UI

    Tutorial Beginner

    One of the most notable changes to the web in 2011 was the roll out of Google's new UI across a range of its products. In this article I'm going to look at...

  10. Using Metaphors in Web Design

    Using Metaphors in Web Design

    Tutorial Beginner

    The word metaphor is probably most likened to a piece of writing, when it is used as a literary figure of speech for descriptive effect. However, today,...

  11. How Clean is Your Web Design?

    How Clean is Your Web Design?

    Tutorial Beginner

    Clean. A term often used to describe a website design, but what does it mean? How do you define it? I’m fairly sure that it doesn’t mean that the whitespace...

  12. 5 Traits of a Successful Icon Designer

    5 Traits of a Successful Icon Designer

    Tutorial Beginner

    What makes a successful icon designer? Is it their skills in digital rendering, the clever ideas they have, or is it something else? The truth is, it's...