UX DesignNewInVision StudioBurning Questions

Summary

Principles of design are fundamental design rules that apply to all types of design. Let's take a look at what these rules are and how they impact our designs.

Agenda

  • Pattern and unity
  • Movement and color
  • Contrast and emphasis
  • Proportion and balance
  • Proximity and alignment

What Are Design Principles?

Principles of design are rules that apply to all types of design, and when it comes to interfaces, these rules can make websites and apps more usable and more accessible.

But, how many rules are there exactly? 🤔

Perhaps you’ve heard of the 5 Principles of Design, the 7 Principles of Design, or maybe even the 12 Principles of Design — don’t worry, they all address the same fundamental teachings one way or another, even if they’re worded a bit differently.

Principle of Design #1: Contrast

Contrast is the amount of inequality between two design elements, where more inequality means that the two design elements can be more easily differentiated.

Increasing contrast aids accessibility, i.e. it improves the user’s ability to see these elements even if they have a visual impairment. Contrast can also influence the visual hierarchy, i.e. the order in which various elements are viewed due to their noticeability.

And then there’s emphasis and balance, two terms you’ve likely heard of before.

Emphasis is the amount of contrast, whereas balance means zero contrast or total equality. Examples of balance between two elements include being the exact same color or having the exact same font size. As a result, they’re depicted as being equally important as neither of the two are more emphasized than the other. Neither are more noticeable than the other too, and so they’re on the same level in the visual hierarchy.

And yes, that does mean that emphasis and contrast are the same thing, almost.

Okay, let’s dive into some examples 🙌.

Color

Consider these examples: dark text on a dark background vs. dark text on a light background — the latter example is more emphasized due to having higher color contrast, and as a result, the text is easier to read and is therefore more accessible.

However, with the former example, not only is the text deemphasized due to having reduced color contrast, but the colors are near-balanced, making the text unreadable.

Principles of design: contrast example

Although, as said earlier, contrast isn’t just about accessibility. It’s also about visual hierarchy, i.e. the order in which we notice various design elements and the level of importance that they convey. Sometimes, we might want to reduce this importance.

Consider a form with invalid user input — to ensure that the form data cannot be submitted until the user has fixed their error, we might want to disable the submit button and clearly indicate its disability by lowering its color contrast, essentially deemphasizing it so that users aren’t drawn to it when it’s not yet submittable.

Principles of design: emphasis example

Size

Enlarged elements are easier to notice. Consider this article, which consists of numerous sections divided by headings — the increased font size of these headings makes them more noticeable, which is ideal because headings are known to improve the scannability of content, i.e. how fast users can digest content using summaries.

Another example? 🧐 Have a look at these button elements:

Principles of design: balance example

Depth

Depth is how 3D an element is, where more depth equals more emphasis. Depth also suggests that the element may be interactive. We can add depth using drop shadows.

Principles of design: depth example

Principle of Design #2: Proportion

Proportion is the size of an element in relation to other, nearby elements, where the biggest element is seen to be the most important and will therefore be noticed first — again, this is another way that the 7 Principles of Design can alter the visual hierarchy.

Proportion in UI design

Principle of Design #3: Proximity

Elements that are close to one another, for example a row of choices, are seen as related. Alternatively, elements not close to one another may be seen as unrelated.

Principle of Design #4: Alignment

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

As an example, think about the way that we write long-form content, i.e. we use line breaks to move onto new topics, but also left text alignment to embrace the feeling of connectivity and continuity. Adversely, a lack of alignment would indicate detachment.

Principles of design: alignment example

Principle of Design #5: Pattern

Pattern, as one of the 7 Principles of Design, refers to the fact that repetition can reduce task time and cognitive load. For instance, did you notice that all of the image examples in this lesson use blue buttons? In user interface design, pattern simply means to maintain consistency through repetition, either visually or conceptually.

Every time we see this blue button, our brain recognizes it a little faster each time because we’re learning what blue represents. As users interact with a user interface, over time they learn how to operate 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 #6: Unity

Principle of design #6 is unity, which is how well various elements work in unison independent of whether or not they’re balanced, and even if one or some of them are emphasized. We can instil unity using complimentary colors, font combinations that complement each other, or simply by designing related elements with consistency.

When unified elements are balanced, this is called harmony.

Principles of design: unity example

Principle of Design #7: Movement

Generally speaking, the rule that is during an interaction, movement should indicate what would happen, what’s currently happening, or what’s already happened. As an example, a violent shake could indicate error, whereas a bounce could indicate success.

Movements that don’t offer any clarity or animate in a natural way are likely to confuse.

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

Daniel Schwarz, author

Daniel Schwarz

Daniel is a UX/UI designer, web developer, and maker by background, but a teacher at heart. After years of writing for magazines and design blogs, as well as being an editor at both SitePoint and Toptal, Daniel now creates content for brands like InVision, UXPin, and Adobe while traveling and working remotely.

UX DesignInVision StudioAdvanced UXUX DesignInVision StudioBurning Questions