I’ve been working in the UX field since I was sixteen and have since familiarized myself with many of its terms. Design emphasis is a basic concept that every designer picks up rather quickly and intuitively, but it wasn’t until I started getting properly educated in UI/UX design that I learned the terminology for it.
You’ve probably encountered design emphasis too, without a name to put to the concept. Let’s break down design emphasis and explore its uses so you can be intentional employing it in your designs.
Design emphasis is as described in the name: emphasizing certain aspects of the design to control how the user interacts with it. In layman’s terms, it means using various aspects of the design such as color, white space, and typography to make it easier for the user to navigate the design.
Funny enough, while I was writing this very introduction I came across this post on Instagram:
It’s immediately clear what’s wrong with this sign. It’s impossible to read it. The texts are all the same size, various words are colored at random, the typography is all the same, and the colors clash, making it hard to know what to focus on and how to read the sign.
That’s where design emphasis comes in — by controlling the different aspects of this sign, it could not only make it more pleasing to the eye, but also easier to read and more informative. I hope to provide you with some insight into how to appropriately use design emphasis to further improve your designs, thereby increasing not only your skills, but your overall worth as a designer. Now, let’s get into it!
While there are dozens of principles to create design emphasis, here are a couple to keep in mind as a beginner and even as you advance on your design journey.
The first (and arguably the most important) design principle to take into account as a designer is the color composition of your design. Colors serve a multitude of functions, including creating a visual hierarchy in the design as well as giving a specific emotion or atmosphere to the design.
Having learned a lot about color theory in order to increase the effectiveness of my designs, I could go on all day about the importance of choosing a different color palette, when to use monochrome or complementary colors, and the difference between analogous and triadic colors. Instead, I will discuss the basics that stuck with me to this day.
The most important thing I learned as a beginner was the 60-30-10 rule. Once you’re able to recognize which colors fit to what design, you still need to know how to effectively use all the colors in your palette.
Before learning this rule, I had no concept of how to use my colors properly. I knew that as a beginner, sticking to three colors was best, but I’d often neglect one of the colors or use the front colors in the wrong place. All in all, my first couple designs were absolutely terrible, so let’s make sure the same doesn’t happen to you guys!
The rule is simple. You have three colors to start with: your primary, secondary, and accent color. The primary color, a more inclusive color such as white or blue, will take up 60 percent of the design. The primary is more neutral and takes in all the content; it’s often used as a background color.
The secondary color falls on top of the primary one, makes up 30 percent of the design and serves as support. Colors such as black and dark blue often serve as the secondary and are used for things such as text and icons.
The last but equally important color is the accent color. While this color only takes up 10 percent of the design, it holds the important job of creating emphasis on things you want to pay attention to within your design. This is especially important for things like call-to-action buttons, such as the contact button or sign-up button. Colors such as orange or red serve as good accent colors because they quickly grab your attention.
With the plethora of tools out there to help you choose a color palette, it’s become a lot easier to find palettes that will evoke the emotion or atmosphere you are looking for. Through effective use of the 60-30-10 rule, you will be able to not only create a hierarchy to your design, but properly emphasize important information within the design while still making it look great.
Another principle of design emphasis is typography. Typography aims to make sure that all the information your design is trying to convey is easy to read, properly stands out, and fits in with the message you are trying to convey. At its base, there are four basic elements of typography: fonts; typefaces; line spacing; and font weight, size, and height. Only when these elements are properly manipulated do you have effective typography.
Anyone that’s used a Google or Word document (if you haven’t, I’m genuinely impressed), you know what fonts are. What you might not know, however, is that the font displayed on your Word document is actually a typeface. A typeface is a family of fonts such as Times New Roman, Helvetica, and others.
Fonts, on the other hand, are the different variations in the same font. Times New Roman has four fonts: regular, italic, bold, and bold italic.
Letter and line spacing speaks for itself, and font weight, size and height is about how heavy the font is as well as the size of the font. For example, a title font will be bigger and heavier whereas the subtitle will be smaller and lighter in order to create a visual hierarchy.
Through the proper manipulation of these factors, not only will the design look nice, but it will make it easier to read for everyone as well as keep things consistent. That starts with choosing the right font. A website about buying Barbies would look unusual if you used a heavy typeface like Impact, whereas a website about buying high-end cars would look weird if you used a curly font like Leroy.
Another thing to take into account is uniformity. Stick to one typeface and it makes it confusing to read if there are too many elements. The human mind loves patterns; too much variety can create chaos.
While this is true, varying the weight, size, height, and font can create visual hierarchy as well as emphasis. If all your text is in the regular font, text in the bold font will stand out, and the bigger the text, the more attention it draws. This is why titles tend to be bigger and texts get progressively smaller the less important it is, while the font of smaller text changes when important information should still be emphasized.
While there are many other principles you should take into account when trying to effectively use design emphasis, once you’ve mastered those two, you can then begin to learn more complex techniques for creating emphasis. Let’s take a look at these techniques.
Negative spaces are the areas in the design that don’t have anything in them, such as a little bit of space around a button or a line of space underneath some text. If you’ve ever read a long document, it becomes hard to read after a while if there’s not enough space between the design elements. This can create a strain on your eyes and is quite unpleasant.
As a law student, the most annoying part of university wasn’t the boring lectures (and boring they were), but instead the long hard to read legal texts I had to study daily — they still haunt me. Which is why I quickly understood that creating space in your design is important.
Furthermore, the more space around a design element, the more it isolates it, creating emphasis in the design. Apart from that, creating more space in the design makes it look less saturated and more professional, and while there are situations in which having less space can be a conscious design choice, effectively using negative space as a beginner can elevate your design.
Another high-level technique to learn is the use of visual cues. I didn’t learn this till way later in my career, and it’s had a great impact on my designs ever since.
Visual cues are design elements that create cues for the user to follow. This can be as simple as an arrow pointing toward the next page, an icon that outlines the content of text you’ll read, or even a small animation when you click on a button showing you that it has been successfully clicked.
These cues draw your attention and make you interact with the design more. As an ex-Apple user, nothing was more satisfying than the woosh sound when an email was sent.While this is an auditory cue and not a visual one, it still proves my point: something as simple as an arrow pointing toward the sign-up form can create emphasis on the form and lead to action from the user.
While all these principles and techniques are important to know, and the more time and energy you put into design the more of them you’ll learn, all of that isn’t important if you don’t know how to properly apply them.
Once you move away from treating design as a hobby and more toward creating a career out of it, the concept of the user becomes very important. This is what differentiates UI and UX: UI will focus on what looks nice while UX will focus on what looks nice for the consumer.
Depending on who the target audience is, the user will change. If you’re selling Barbies, the user is likely a girl ages 7–12 (what is it with me and Barbies today?). If you’re selling high-end cars, the user is likely an older gentleman (or woman) that can afford to buy such a product.
Once you’ve established the user, that will give you an idea of what you need to put emphasis on, and change which colors, typography, and visual cues you use. Understanding the user and researching their goals and needs can tell you what to prioritize in the design and how to effectively use design emphasis to achieve said goals.
Once you’ve got a good idea of what the user wants and needs, you can implement it and test out the various parts of your design to see if your design is a successful one. Through testing and getting feedback, you’ll see if your design elements work in order to achieve your aims. A good way of doing so is using the A/B testing method on a variety of design cues and seeing what works.
In conclusion, the best designers start with the basics. Once colors and typography have been mastered to a certain extent, increasing the number of design techniques you can use will ultimately lead to better designing.
There are many principles and techniques to design emphasis, but as long as you have a couple under your belt that you use effectively, you will always create great designs that effectively use design emphasis and ultimately improve as a designer.
Header image source: IconScout
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
When every UI element screams for attention, nothing really stands out. But with the Von Restorff effect guiding your design decisions, you can amplify user recall. More on that in this blog.
Designing digital products isn’t just about pretty interfaces. It takes a blend of creativity, research, and iterative design. More on that in this blog.
There are five different types of grids at your disposal as a UX designer. In this blog, I talk about which grid works best for which use case, so you can find the best one for your next design project to be intuitive and functional.
Nobody wants their design to confuse users. Running a UX audit will uncover all the “oops” moments in your UI and help fix what’s broken and craft UX that “wow”s users.
Learn more →
