InVision StudioNEW UX Design

Getting to Grips With the 7 Principles of Design

Scroll down to learn about color, size, unity, contrast, alignment, and more or download our UX Design ebook 🎉

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 how they result in much better UX.

What you’ll learn

  • Contrast and color
  • Proximity and unity
  • Proportion and size
  • Pattern and alignment
  • Repetition and movement

What Are Design Principles?

Principles of design are rules that apply to all fields of design.

When it comes to UI design, obeying these rules improves usability and accessibility.

But how many rules are there exactly?

Perhaps you’ve heard of the 5 Principles of Design, the 9 Principles of Design, or even the 12 Principles of Design — the fact of the matter is, they all teach the same rules some way or another, even if they’re structured differently or use varying terminology.

We’ll be structuring them as the 7 Principles of Design.

What Are the 7 Principles of Design?

Emphasis, balance, color, size, and depth are best described as a subset of contrast, since fundamentally, they’re all attributes that can be adjusted to refine contrast. We could also say the same for harmony, which could be construed as a subset of unity, and this is why I think calling them the 7 Principles of Design makes the most sense.

So, without further ado…

  1. Contrast
  2. Proportion
  3. Proximity
  4. Pattern
  5. Alignment
  6. Unity
  7. Movement

Principle of Design #1: Contrast

Contrast dictates how easy it is to distinguish between various design elements.

Optimizing contrast aids accessibility (i.e. improves the user’s ability to see, read, or interact, even if they have a disability), and also helps the user better understand the visual hierarchy (i.e. the importance of each object on the screen in the current context).

Emphasis increases contrast (i.e. makes an element stand out), whereas balance lowers contrast (i.e. makes an element blend in more because it’s not as important).

Emphasis and balance are controlled with color, size, and depth — all of which can be debatably added to the 7 Principles of Design to make 12, but this is fairly subjective.

Color

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

Color contrast

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

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

Analyzing color contrast

But as described earlier, contrast isn’t just about accessibility.

Sometimes, we might actually want to lower contrast to reduce focus on an element, for example when “disabling” a submit button when a form has errors that need to be fixed — this doesn’t mean lowering the contrast so much that the button is hard to see, but lowering it enough that the user isn’t distracted by something that’s not clickable.

Deemphasized and balanced elements should still meet the minimum contrast requirements as defined by the WCAG, because even though they don’t require as much attention, they still need to be accessible, especially for those with disabilities.

Disabled submit button

Size

Enlarged elements are easier to notice. Consider this very article, which consists of multiple sections, each of which is summarized in a heading — the increased font size of the headings makes them more noticable, which is useful because headings improve the scannability of content (i.e. the ability to digest content quickly via summarizing).

Depth

Depth refers to how 3D an element of design appears to be, where more depth can make an element feel more interactive. A natural use-case for this would be a button, as buttons are often calls-to-action (CTAs) that need to be noticed — and look like they’re clickable — in order to reach conversion. Shadows, for example, add depth.

Depth in design

Principle of Design #2: Proportion

Proportion is like size, but in relation to other elements. Proportion is less about accessibility (being able to see an element) and more about conveying its importance compared to other elements. Proportion can sway users to make a choice, for example.

Proportion in design

Principle of Design #3: Proximity

Elements of design that are in close proximity are seen to be related to one another, indicating that the user needs to make a choice. Proximity can be used to reduce visual clutter by organizing similar user intents, in turn reducing cognitive load and time to task completion. In the image above, the user intent is to make a choice, hence the three options are in close proximity so that the user can compare them comfortably.

Principle of Design #4: Pattern

Pattern, as one of the 7 Principles of Design, refers to the fact that repetition can reduce task time and cognitive load. For example, did you notice that all the buttons in the examples so far have been blue? In the context of user interface design, pattern simply means to instil consistency through repetition, either visually or conceptually.

Every time you see this blue button, your brain realizes that it’s a button faster and faster each time, because it has learnt what blue means. As users interact with an interface, over time they learn how to use it — they learn where things are, what certain colors mean, and they learn how to complete tasks even if they’ve never done so before, simply because they’ve completed a similar task. Patterns help users learn faster, think less, and overall they increase user retention while decreasing frustration.

Principle of Design #5: Alignment

Alignment is similar to proximity in the sense that it helps to reinforce relativity.

For example, think about the way that we write long-form content (i.e. we add line breaks in-between paragraphs to move the conversation onto a new point, but we also use left text alignment to embrace the feeling of continuity and connectivity). On the other hand, a lack of alignment can indicate detachment, separation and disconnection.

Alignment in design

Principle of Design #6: Unity

Principle of design #6 is unity, which defines how well various design elements work together, regardless of whether there’s balance or emphasis. Harmony is when unified elements are balanced (because there’s calmness; none of them are seeking attention).

Designers can make use of unity in various ways:

Principle of Design #7: Movement

Movement summarizes everything that we know about interaction design, which honestly, is a very broad topic. The low-down is that movement can indicate what might happen, what’s currently happening, or what’s already happened. For example, violent shakes could indicate an error, whereas a bounce effect could indicate success.

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

Fundamentals are important, and there’s nothing more fundamental than the 7 Principles of Design. Next: why they’re so important for usability and accessibility.

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

Daniel Schwarz, author

Daniel Schwarz

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