UX DesignNEW InVision Studio

Getting to Grips with the 7 Principles of Design

Learn about contrast, emphasis, repetition + more — or read this article and more in our ebook: A Beginner’s Guide to Designing UX. Read offline, any time, on any device 🎉

Buy $10

Quick summary

Principles of design refer to the common understanding of basic design rules. Let's take a look at what these rules are, and why they result in much better UX.

What you'll learn

  • Contrast
  • Proximity
  • Emphasis
  • Repetition
  • Movement

What Are Design Principles?

Design principles are a standard set of rules to live by when designing layouts (in this case, user interfaces). Principles of design are sometimes taught in different ways, and talked about using different terms, however the concepts are well-known and are considered to be a “first and foremost” when it comes to learning UI design. Bearing the 7 principles of design in mind when designing UIs will help us design user interfaces that are easy to read, navigate, and understand. Let’s start with contrast.

Principle of Design #1: Contrast

Contrast is how easy it is to distinguish between two different elements of design. Applying the appropriate amount of contrast aids accessibility (i.e. improves the user’s ability to see, read, and interact, even if they have a disability), and also helps the user to understand the visual hierarchy (i.e. which elements in the current context are the most important). We can establish contrast in various ways: color, size, and depth.

Color

Consider this: dark text on a dark background vs. dark text on a white background.

We can see that the latter has better contrast, and therefore better readability.

Low contrast vs. high contrast

In this next example, it’s harder to see whether or not the color contrast is sufficient enough. Thankfully, the WCAG 2.0 (Web Content Accessibility Guidelines 2.0) outlines a standardized method that we can use to check or “measure” color contrast effectively.

We talk about this more in our accessibility article.

Check color contrast against WCAG 2.0 Guidelines

Size

Size can help to establish contrast, however, since size is also used to illustrate visual hierarchy, it can sometimes be considered a principle of design in its own right.

Consider a heading + body text combination: where modern-day users tend to read articles by quickly “scanning” through them, headings are used to summarize content because their font sizes are larger, and their fonts weights are bolder. Size conveys importance, and makes things quicker/easier to see (or read, if the element is textual).

Increase size for better contrast and readability

Depth

Depth refers to how three-dimensional or lifelike a design element appears to be, which in turn can make it look more visible, and feel more interactive. A natural use-case for this would be a button, as buttons are typically calls-to-action (CTAs) that need to be noticed (and look like they’re clickable) in order to reach conversion.

We could add drop shadows, for example, to add depth.

Introduce depth to buttons

Principle of Design #2: Proximity

Elements of design in close proximity are suggested to be related to one another, indicating that the user needs to, or can, make a choice. Proximity can be used to reduce visual clutter by grouping/organizing similar user intents, in turn reducing cognitive load and time to task completion, and also aiding reading comprehension.

By the same logic, excessive proximity indicates no/less relation.

Proximity reduces task time and cognitive load

Principle of Design #3: Emphasis

Amongst collections of related components, there are usually components that are more important than others—this is where emphasis becomes useful. In the example below, we’ve used size, color, and depth to contrast/emphasize one of the options. As you’ve probably noticed by now, the 7 principles of design are often used together.

Add emphasis for more clarity

Principle of Design #4: Harmony

Harmony (or unity, as it’s sometimes known by) simply refers to design elements that work well together. This extends to visual design (i.e. complimentary colors, font pairing, etc), layout choices (i.e. grouping related items in together), or otherwise.

Principle of Design #5: Repetition

As users explore and interact with an interface, over time they gradually learn how to use it, and what certain colors, styles, and layouts mean. By introducing repetition we can reinforce these concepts, making the visual hierarchy more understandable and reducing cognitive load to help users interact faster. Let’s take this Spotify example:

Consider repetition for added clarity

Even if the user isn’t consciously aware that green buttons represent important CTAs (and white ghost buttons = secondary CTAs), memory plays an important role in the way that users learn, and subconsciously, the user will become better and faster at using this interface over time (scroll down here to see the button designs reused).

Principle of Design #6: Alignment

Alignment is a bit similar to proximity in the sense that it helps to reinforce relativity. Think about the way that we write long-form content (i.e. we add line breaks in-between paragraphs to emphasize that we’re going to move the conversation forward, but we also use left alignment to embrace the feeling of continuity and connectivity).

On the other hand, lack of alignment can indicate disconnection.

Align elements for continuity and connectivity

Principle of Design #7: Movement

Movement is rather complex design principle and forms what we call interaction design. The foundation of this concept is that movement can indicate what’s happened, what might happen, or what’s currently happening. For example, violent shakes could indicate an error, whereas an upbeat bounce effect could indicate reward or success.

Fancy UI animations that don’t describe anything, and are fancy simply for the sake of it, are likely to confuse or distract users, resulting in frustration and fewer conversions.

Design Principles From Asana & Airbnb

Principles of design work harmoniously with one another, and form an overall design language that communicates to users, hints at reading direction, offers clarity, and reduces task time/cognitive load. They help the user reach their objective quicker.

We can also build upon these design concepts, and create our own design languages that reflect the message of our brand and the way that we want users to identify with it. If you have the time, take a look at Asana’s Design Principles and Airbnb’s Design Principles. If not, here are a few hand-chosen tidbits from their documentations:

Asana Design Principles

Interference: a user’s focus should be in their control, only distract users with changes that are personally relevant.

Clarity: within the application, it is unambiguous what is happening and why.

Consistency: be consistent, users should feel like Asana is familiar.

Airbnb Design Principles

Conversation: our use of motion breathes life into our products, and allows us to communicate with users in easily understood ways.

Iconic: our work should speak boldly and clearly.

Universal: Airbnb is used around the world by a wide global community. Our products and visual language should be welcoming and accessible.

As well as learning the 7 principles of design, reading through these documents can help us understand how top companies are forming their own design languages to create consistent, unified, well-tested experiences for their users and customers.

Learn more in our ebook, A Beginner’s Guide to Designing UX 💪.

Daniel Schwarz, author

Daniel Schwarz

Daniel Schwarz is a digital designer, web developer, and maker by background, but a writer, editor, 3x author, and teacher at heart. Currently a design blog editor at Toptal and SitePoint, writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.