UX DesignNewInVision StudioBurning Questions

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.

On the agenda

  • 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 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 explore the same fundamental teachings one way or another, even if they’re worded a bit differently.

Principle of Design #1: Contrast

Contrast defines how easy it is to notice certain design elements.

Increasing contrast aids accessibility, i.e. it improves the user’s ability to see those elements even if they have a visual impairment. Contrast also affects the ability to understand the visual hierarchy, i.e. the order in which elements should be viewed.

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

Emphasis increases contrast, i.e. it makes elements more noticeable, whereas balance decreases it, i.e. it makes elements less noticeable. Contrast is defined by color, size, and depth, so bolder colors, for example, will add more emphasis and therefore more contrast, whereas not-so-bold colors will add more balance and therefore less contrast.

Okay, let’s dive into some examples 🙌.

Color

Consider these two examples: dark text on a dark background vs. dark text on a light background — the latter text has more emphasis and therefore has better accessibility.

Color contrast

However, as said earlier, contrast isn’t just about accessibility.

Sometimes, we might actually want to decrease contrast to reduce noticeability.

Consider a form with invalid user input — to ensure that the form data cannot be submitted until the user has fixed their mistake, we would need to disable the submit button and clearly indicate that it’s been disabled by lowering its contrast, essentially deemphasizing it so that users aren’t mistakenly drawn to it when it’s not yet clickable.

Deemphasizing the button’s color too much, or balancing it fully, would make it inaccessible. Also, even if the visual hierarchy of the button isn’t that high — i.e. not important — it still needs to be noticeable for two reasons. 1. So the user can quickly determine the component as a form, and 2. to make the user’s next move anticipatable.

Disabled submit button

Size

Enlarged elements are easier to notice. Consider this very 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.

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 create depth with drop shadows.

Depth in design

Principle of Design #2: Proportion

Proportion is like size but more in relation to other elements, and is less about accessibility, i.e. seeing the element, and more about its importance, i.e. its visual hierarchy. Proportion for instance can…help…users make…ahem…better…decisions.

Certainly you’ve seen this before…😏

Proportion in design

Awkwardly-sized elements on the other hand can disrupt the visual hierarchy and distract users from where they should be looking; although, this applies to all visual attributes — too much, too little, or incorrect use of anything can increase confusion.

Principle of Design #3: Proximity

Proximity suggests relation, for example, a choice of options. Simple!

A Beginner’s Guide to Designing Great UX, book cover

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 of the image examples in this lesson have blue buttons? In user interface design, pattern simply means to maintain 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’s learning what blue represents. As users interact with an 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 #5: Alignment

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

As an example, think about the way that we write long-ish 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.

Alignment in design

Principle of Design #6: Unity

Principle of design #6 is unity, which is how well certain elements work in unison independent of whether they’re balanced or emphasized. When unified elements are balanced, this is called harmony — i.e. none of said elements are seeking any extra attention, and they may even be near-identical. For example, a row of nav buttons.

A lack of harmony isn’t a bad thing as long as the elements still work well in unison.

Harmony in design

Designers can instil unity with complimentary colors and font combinations for example, but that aside, unity is more an embodiment of all other design principles.

Principle of Design #7: Movement

Movement encompasses everything that we know about microinteractions, which, honestly, is a very broad topic — the upshot is that movement should 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.

Movements that don’t offer any clarity, and are fancy simply for the sake of being so, are likely to confuse and distract users, resulting in frustration and fewer conversions.

Learn more in our ebook, A Beginner’s Guide to Designing Great 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.

UX DesignInVision StudioAdvanced UXUX DesignInVision StudioBurning Questions