Providing a design that meets the needs of your users is always the goal of UX design. One way that you can ensure that your users understand and find the important areas of your design is by using emphasis. Emphasis means that an object or element is attracting attention. When part of a design has emphasis, the user’s eye is drawn there when they look at an app screen or webpage. There are several ways to add emphasis to your designs.
Implementing changes to the size of elements in your designs is an easy way to provide emphasis for users by drawing their attention to larger objects while simultaneously conveying that one object is more important than another.
A great example of size is the visible text within an app’s design. Using a larger size for the title of the page, like “watermelon” in the image below, helps to orient the user. That page name should be bigger or bolder than the rest of the text on that page to show the importance of that specific text.
Contrast is the creation of opposing visual elements to convey emphasis or comparison. Contrast is a great way to draw emphasis to elements in a design that are different or important. In the image below, the checkout cart and “order” buttons are colored bright red and purple which contrasts with the otherwise white and gray app.
You can also provide contrast by changing the look of text. There are a few ways to add contrast to text, like bolding, adding color, underlining, italicizing, and highlighting important information that the user should take note of.
Texture is the elements within an object that add depth or a pattern to an object. Texture can make an object stand out from other objects within a design and should be used sparingly to draw the user’s gaze.
One way to create emphasis using texture is to place lines or shapes over an image that is used repeatedly. Adding texture provides a break in the pattern of the same image and it gives users something to interact with. For example, if you are designing a page to show users information about your brand, like in the image of an app below, adding texture is a great way to add emphasis and draw the user’s eyes to a part of the design. In the graphic, the “80% of our shoppers” is represented by the polka dotted section of the pie chart. In other words, the most important section of the chart is emphasized with texture.
Emphasis in the real world
Check out this example of design from the Google’s About page, which demonstrates the effective use of emphasis. Google’s mission statement uses color contrast to grab the user’s attention and emphasize the main points of the company’s mission at a glance.
The design of the page helps the user identify two important things simultaneously:
- Understand the importance of Google’s mission statement with black, easy-to-read font on a white background that doesn’t distract the reader from their interaction with the page.
- Color contrast highlights Google’s brand pillars, the most important areas within the mission statement.
These design choices add emphasis and help guide the user’s attention to a specific area on the page.
As you design, consider why a user would come to your website or use your app. By adding emphasis to a certain place on the page or screen, the user doesn’t have to work as hard to find what they need. And that helps users have a better experience interacting with your design.
Adding emphasis helps make your designs visually attractive and more functional for users — and that’s a win-win! Check out the resources below to learn more about incorporating emphasis in your designs.
- To dive into more ways that you can add emphasis to your designs, read Emphasis: Setting up the focal point of your design, by Interaction Design Foundation. It looks at the mechanic of creating visual focal points within your designs.
- The principles of design are going to be the toolbox that you use throughout your career as a UX designer. The article Breaking Down the Principles of Design, by Toptal, references many different types of design principles to keep in mind.