UX DesignNewInVision StudioBurning Questions

5



reads remaining



Want to read more? Get the ebook. Includes online access.


Buy $10

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 laws that apply to all types of design, and when it comes to interfaces, these laws can make websites and apps more usable and more accessible.

But, how many laws 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 all do so a little 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 contrast and emphasis are the almost same thing.

Let’s dive into some examples 🙌.

Color

Consider this example: 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 decreased 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 each convey. Sometimes, we might want to reduce 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 = more emphasis. Also, depth suggests that the element might be interactive. We can add depth by using 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 largest element is seen to be the most important because it’s typically noticed first — again, this is another way that the 7 Principles of Design can alter the visual hierarchy.

Principles of design: Proportion example

Principle of Design #3: Proximity

Elements that are close to one another (like in the example above) are construed as related. We can leverage this to signal that a choice needs to be made, or to help users understand and recognize the relationship between individual snippets of information.

As an example, if the three elements above were spaced out, then users might not recognize that they’re within a component and also that they need to make a choice.

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 and concepts but also text alignment to indicate both connectivity and continuity. Misalignment, on the other hand, suggests disconnectivity.

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 chapter 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 by using complimentary colors, font combinations that complement each other, or simply by maintaining visual consistency when necessary.

When unified elements are balanced, this is called harmony, i.e. they’re near-identical.

Principles of design: unity example

Principle of Design #7: Movement

Generally speaking, the rule is that 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.

Got feedback? Questions about the chapter? Just want to say hi? Let us know.

Daniel Schwarz, author

Daniel Schwarz

Daniel is a UX and UI designer, web developer, and maker by background, but an educator 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 Design
InVision Studio
Product Design
Advanced UX
UX DesignInVision StudioBurning Questions