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 🙌.
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.
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.
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:
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.
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.
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.
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.
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.