Emphasis is a strategy that aims to draw the viewer’s attention to a specific design element through visual reinforcement. That could be to an area of content, to an image, to a link, or to a button, etc. The aim is to create a focal point in the design: an eye-catching part that stands out, distinct from the rest of the design elements. Lines, shapes, colors, textures, size, as well as many other elements, may be used to create emphasis. Most often, we use emphasis to drive a call to action (e.g., a sign-up, purchase, or login button, etc.).
Source: Interaction Design Foundation; The Elements and Principles of Visual Design Wiki
Example from original source:
Example from different source:
Source: Viget
Real life example:
Cindy, your definition hits on all the main elements of “Emphasis”! Great job on the examples as well. I think Apple does one of the best jobs in the industry using Emphasis as a design principle. Coupled with Jonatan’s comments about using white space, Apple is a master at getting users to focus on a certain point.
Here’s another example on Emphasis that is pretty powerful. Star Wars opening crawl.
https://upload.wikimedia.org/wikipedia/en/0/0c/Opening_crawl.jpg
Thank you so much, Amit! Yes, judicious use of white space can give a page a classic, elegant, or rich appearance, and upscale brands like Apple often use ad layouts with little text and a lot of white space. There’s a balance to be made between positive (or non-white) and the use of negative spaces for aesthetic composition though. Inexpert use of white space can make a page appear incomplete, but in Apple’s case, it firmly emphasizes their product at hand. The Star Wars opening crawl is another good example!
Cindy. This is awesome stuff, I was doing some reading on Emphasis on Interaction-Design but it seems that a lot of citations comes from there. Another design principle that no one covered but also helps with Emphasy is our old friend “White Space”. We can call attention to an area, object, or thing and it will stand out and create the emphasis referring here. Of course the empty space doesn’t have to be white, but rather whitespace refers to the available open space available in the design that makes that artifact, color or thing stand out. 1b499bc7c4e1c72ff972e11ac50609bc
Thanks, Jonatan! It’s a really good point you made that white space enhances this principle by drawing the viewer’s attention to a specific design element through a visual reinforcement that is essentially excess space. It’s the exact opposite of the “Where’s Waldo?” effect, in which the lack of open space makes it difficult to find the character, even with his distinctive identifiable clothing—a lack of emphasis in that regard.