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 🙌.
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.
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.
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 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.
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…😏
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!
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.
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.
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.