Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Part Five Design Principles: Dominance, Focal Points And Hierarchy

Has a client ever asked you to make the logo bigger1? Maybe they asked that just after you completed their request to make a heading bigger. The new heading stands out, but now the logo is too small in comparison and isn’t getting noticed. The clients wants to make the logo bigger.

Of course, now that the logo and heading are bigger, both are going to attract more attention than the main call-to-action button, which will need to be made bigger. And once the button is bigger, the heading is going to start looking small again.

You can’t emphasize everything. It defeats the point. When you try to do that, all of your design elements compete for attention and nothing stands out. They’re all yelling at the same time. Everything is louder, but still nothing is heard.

Emphasis is relative. For one element to stand out, another has to serve as the background from which the first is to stand out. Some elements need to dominate2 others in order for your design to display any sort of visual hierarchy.

Note: This is the fifth post in a series on design principles. You can find the first four posts in the series here:

Dominance Link

Compare any two elements in a design. Either the elements will be equal in every way or one will exert some level of dominance over the other. The more dominant element will attract the eye and get noticed first. It might even appear to exhibit some sort of control over the less dominant element.

The more dominant element likely has greater visual weight than the elements it dominates. It will seem to exert force on what’s around it.

01-dominance-opt-small7

The circle exerts dominance over the square due to their relative sizes. (View large version8)

As you develop a composition, you’ll see numerous elements exerting dominance over each other. Some elements will dominate, and some will be subordinate. Without conscious control, you’d just hope that things all work out and that the important information will attract attention. Fortunately, you do have control.

How to Establish Dominance Link

You design one element to have more dominance than another by giving it more visual weight. The greater its visual weight, the more an element will attract the eye and exhibit dominance.

You create dominance through contrast, emphasis and relative visual weight. Identical items can’t dominate each other. To exert dominance, an element has to look different from the elements it’s meant to dominate.

Your goal is to create elements with noticeable differences in visual weight.

You can vary the same characteristics that we talked about in the last couple of articles in this series. As a reminder, here are the most common characteristics you can vary to set different visual weights:

  • size,
  • shape,
  • color,
  • value,
  • depth,
  • texture,
  • density,
  • saturation,
  • orientation,
  • local white space,
  • intrinsic interest,
  • perceived physical weight,

You can create dominance through visual direction as well. For example, you might surround an element with arrows all pointing to that element. If there are enough directional cues, the element could become dominant even if it’s of lesser visual weight than other elements on the page.

You can also have co-dominance, where two dominant elements exist within a composition. However, both will compete for attention and could ultimately be distracting without the right overall balance in your competition.

Ideally, you want a single dominant element.

The Dominant Element Link

The dominant element in a design is the one with the greatest visual weight (or the one that everything else points to). It’s the element that attracts the eye first, more than anything else on the page.

Be careful not to make the element so dominant that it completely obscures everything else, but do make it stand out in the design.

Your dominant element is the starting point for the story you’re telling. It’s the entry point into your design. It should attract visitors to the first place you want them to look.

This is how you start a conversation with visitors. The dominant element is noticed first and sets the context for what’s seen next. It’s at the top of the hierarchy. It should emphasize your most important information, because it might be the only thing anyone will see. Whatever message you want people to take away should be clearly communicated in or near your dominant element.

Without an entry point, viewers will have to work harder to find their way into your design. They’ll have to pause and think where to look first and think about what’s truly important on the page. A lack of entry point will increase the cognitive load on visitors. Don’t make them think. Provide an entry point into your design.

Focal Points Link

Focal points are also elements or areas of dominance, just not to the same degree as your one dominant element, which could be defined as your most dominant focal point. Focal points are areas of interest, emphasis or difference within a composition that capture and hold the viewer’s attention.

The focal points in your design should stand out but should be noticed after the element with the most dominance. The graphic below shows a lone circle amid a sea of mostly gray squares. The circle is not only a different shape, but is larger and bright red. It’s likely the first thing your eye notices in the graphic.

Three of the four squares are also reddish in color, though not as bright as the circle. They’re the same size as the other squares in the image, but they do stand out from the gray squares due to their color.

The circle and the three reddish squares are all focal points because they stand out from the majority of other elements in the graphic. They contrast with the mass of gray squares. The large bright red circle stands out the most. It’s the dominant focal point, or the dominant element in this image.

focal-points-opt9

The red circle and squares are focal points. The circle is the dominant element or dominant focal point. (View large version10)

As with the dominant element, you can create focal points by giving them more visual weight than everything except the dominant element — which, again, is your most dominant focal point. You can also create visual direction that leads to different focal points.

Contrast is a good way to create focal points, because contrast calls attention to itself for being different. Anything that can be contrasted and anything that can affect visual weight or direction can be used to create a focal point, in the same way that it can be used to create a dominant element. The difference is simply of degree.

Levels Of Dominance Link

If you create focal points and make one of those points the dominant element, then you’re starting to create different levels of dominance. The dominant element will sit on one level and will be noticed before all others. The remaining focal points will sit on another level. How many levels of dominance can you realistically have in a design?

Three is a good number. As a general rule, people can perceive three levels of dominance. They notice what’s most dominant, what’s least dominant and then everything else. There needs to be enough difference between these levels for people to distinguish one from the next. You want to create distinct levels, not a continuum.

You could create more than three levels of dominance, but each additional level will reduce the contrast between neighboring levels. Unless you’re sure you can contrast each level well enough, stick with three.

  • Dominant
    This is the level with the most visual weight and the one that gets the most emphasis. Your dominant level will usually consist of a single element in the foreground.
  • Sub-dominant
    This is the level of focal points, with the exception of the dominant element or dominant focal point. It gets secondary emphasis. Elements on this level get less emphasis than the dominant level but more than the subordinate level.
  • Subordinate
    This is this level with the least visual weight. It should recede into background to some degree. This level will usually contain your body of text.

It’s possible for different people to look at a composition and think that different elements are focal points or even the dominant element. Remember to go big enough with your differences in visual weight to make clear which level is more dominant. You want your dominant element and focal points to be as obvious as possible.

Visual Hierarchy Link

As you design distinct levels of dominance, you create visual hierarchy in the design11. Ideally, this visual hierarchy will match the conceptual hierarchy of your content. If an article’s heading is more important than a caption in the article, then the heading should be more visually dominant.

Base your visual hierarchy on the actual priorities of the information being presented. First, prioritize everything that will go on the page, and once it’s set, design a visual hierarchy to follow that prioritization.

Visual hierarchy enables visitors to scan information. It helps you communicate a message quickly and effectively. The top of the hierarchy (the dominant element) should help to answer questions a visitor might immediately have upon landing on the page.

Within seconds, visitors should be able to pick up the key points and main message of the page. They can do this if you make the most important information the most visually prominent.

People who stick around longer than a few seconds should be able to scan through the focal points in your design to gain the next most important message(s) that you want to communicate, and so on with the rest of your information.

The Inverted Pyramid of Writing Link

Establishing hierarchy in a design is similar to the way journalists use the inverted pyramid of writing. The most important news is all in the first paragraph or two. The lead covers the who, what, where, when, why and how. It tells you everything you need to know.

03-inverted-pyramid-opt-small12

The inverted pyramid of writing (Image: Wikipedia13) (View large version14)

The lead is followed by important details that fill out the story. They’re details that provide context or help you understand the story in greater depth. Toward the end of the article is the general and background information that’s nice to know but not necessary to understand what’s going on.

If someone reads only a sentence or two, they should come away with the most important information. The longer they stick around and the more they consume, the more details they’ll get.

Visual hierarchy works the same way, except that it doesn’t have to flow linearly from the top of the page. You get to control where people look first, second and so on

Again, three level of dominance or hierarchy are recommended, although four or five are still possible.

Gestalt Principles And Visual Hierarchy Link

One of the reasons I started this series with an article about gestalt principles was to show how they lead to many of the design principles we work with.

Visual hierarchy evolves out of gestalt. Focal points are one of the gestalt principles. Your dominant element is an extreme focal point. Both use contrast to stand out. The other side of the coin is similarity, which helps us to see things as the same. Similarity and contrast are necessary ingredients in hierarchy.

Such laws as the ones of prägnanz and symmetry are about creating order and making things simpler and clearer. That’s exactly what you’re doing when you build hierarchy in a design. You’re organizing design elements to establish a sense of order.

The dominant element is likely seen as the figure. The least dominant elements are likely seen as the ground. Really, any principle related to connection or separation can be applied to dominance and hierarchy.

Examples Link

As I’ve done throughout this series, I’ve collected screenshots from a few websites, to share what I see as being the dominant elements, focal points and hierarchy.

This is my opinion. You may see the designs differently and that’s fine. Thinking critically about the designs is more important than agreeing on what we think.

An Event Apart Link

The dominant element on the home page of An Event Apart1715 is the image at the top. It’s the largest element. It’s also an image of people, which we’re typically drawn to. The large white text across the image offers contrast with the image, calling your attention to it.

04-an-event-apart-opt-small16

Screenshot of the top of the home page of An Event Apart1715 (View large version18)

The text “The design conference for people who make websites” is probably the most important information that anyone landing on the page needs to know. It’s a very clear statement about what An Event Apart is and who the website is for. It’s arguably the first thing someone new to the website should see.

Focal points include the website’s logo, the dark background behind “Upcoming Events” and the testimonial set as a large bold heading.

If you scroll down the page, you’ll notice that the design mainly uses size and color to create additional focal points and visual hierarchy. Important information is larger. It’s bold. It might be red. Occasionally an image draws the eye.

If you were to visit the page and merely scan it, you would still come away knowing what the website is about, knowing whether any conferences are coming to your area, and having been convinced by the abundance of testimonials.

The dominant element on Paid to Exist2119’s home page is the graphic of the backpack at the top of the page. It’s an image and larger than everything else around it. It contrasts with its surroundings because it is a graphic with intrinsic interest and a different shape.

05-paid-to-exist-opt-small20

Screenshot of the top of the home page of Paid to Exist2119 (View large version22)

Focal points include the website’s name, some of the text to the right of the graphic, and the big green “Download” button. The social sharing buttons are another focal point.

Looking at the section of content just below, you’ll see three large numbered circles, which serve as focal points and lead you to their accompanying content.

You’re meant to read the information. Notice how the heading above each paragraph reflects the color of its accompanying circle, to draw you in.

Think about the circles and text in terms of visual hierarchy. The big colorful circle (which is one level in the hierarchy) gets your attention and leads you to information that sits on another level of the hierarchy.

Mandy Sims Link

Mandy Sims2523 has a single-page website. The very top (not shown in the screenshot) includes an image of Mandy, which for me is the dominant element. Mandy’s name is also displayed as the largest text.

However, I want to draw your attention to a section further down the page. As you might expect, the section’s heading is the largest text there, so it becomes a focal point.

06-mandy-sims-coaching-opt-small24

Screenshot of a section of Mandy Sims2523’ single-page website (View large version26)

Focal points are also the testimonials down the right side. Notice how the background color of the testimonials is the same as the background color of the active link in the menu.

Without reading the text in this section, you can still clearly see that Mandy offers coaching services to happy clients, because one level of the hierarchy communicates just that.

Vanseo Design Link

This last example is from my own website27. It’s a blog post I wrote a couple of years ago. Forgive the indulgence, but unlike the other examples, I know exactly why every element on the page looks the way it does. Whether or not I’ve succeeded is another matter, but I’m certain of the intent.

07-vanseo-design-opt-small28

Screenshot of the top of an article from Vanseo Design29 (View large version30)

The page’s main heading is meant to be the dominant element. This is a blog post that I want people to read, but I want to give people a sense of what the article is about before they have to invest their time reading.

The partial image also draws the eye, and you might think it more dominant, but an image like this isn’t necessarily visible at the top of every post on the website.

The logo in the top-left and the RSS icon in the top-right are meant to stand out a little more than the other text, and so both are red. Both would stand out more with a brighter red, but I didn’t want people to be distracted by them. The same red is also used in headings throughout.

The meta information on the left is meant to stand out from the main text. Here, I used local white space to increase the visual weight of plain text. Ideally, someone would glance at it and get information about me and the category and tags for the post.

One thing I decided to do with the design was make links in the body less visible than on most websites. I want people to be able to find them, but I don’t want them to pull you out of the content. I used a blue, which doesn’t stand out much from the black text, and I chose italics instead of bold. The links are not meant to be focal points, so I de-emphasized them visually.

My hope is that someone landing on this or another post on the website will be able to very quickly tell what the article is about and discover some basic information about me, such as my name or the name of the website, before hopefully reading the post.

Summary Link

You can’t emphasize everything. In order for some elements in a design to stand out, other elements must fade into the background.

By varying the visual weight of some elements and the visual direction of others, you can establish different levels of dominance. Three levels is ideal; they’re all that most people can discern.

On one level will sit your dominant element. It’s an entry point into your design, and it should be or be near the most important information on the page. A second level of focal points can draw attention to the next most important information visitors should see. Your third level holds everything else. Most of your content will be on this level.

Designing different levels of emphasis or dominance will create a visual hierarchy in your design, with more important information being more visually prominent. It will help you communicate with visitors quickly and efficiently.

We’re getting close to the end of this series. Next time, we’ll look at compositional flow, movement and rhythm. I’ll talk about leading visitors through a design so that they’re more likely to find information in the order you want them to see it.

Additional Resources Link

(il, al)

Footnotes Link

  1. 1 https://www.youtube.com/watch?v=1yNWO-2shQ8
  2. 2 http://www.vanseodesign.com/web-design/dominance/
  3. 3 https://www.smashingmagazine.com/2014/03/28/design-principles-visual-perception-and-the-principles-of-gestalt/
  4. 4 https://www.smashingmagazine.com/2014/05/16/design-principles-space-figure-ground-relationship/
  5. 5 https://www.smashingmagazine.com/2014/09/22/design-principles-connecting-and-separating-elements-through-contrast-and-similarity/
  6. 6 https://www.smashingmagazine.com/2014/12/12/design-principles-visual-weight-direction/
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2015/01/01-dominance-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2015/01/01-dominance-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/02/focal-points-large-preview-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2015/02/focal-points-large-preview-opt.png
  11. 11 http://www.vanseodesign.com/web-design/visual-hierarchy/
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2015/01/03-inverted-pyramid-opt.png
  13. 13 http://en.wikipedia.org/wiki/File:Inverted_pyramid_2.svg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2015/01/03-inverted-pyramid-opt.png
  15. 15 http://aneventapart.com/
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2015/01/04-an-event-apart-opt.jpg
  17. 17 http://aneventapart.com/
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/01/04-an-event-apart-opt.jpg
  19. 19 http://paidtoexist.com/
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/01/05-paid-to-exist-opt.jpg
  21. 21 http://paidtoexist.com/
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2015/01/05-paid-to-exist-opt.jpg
  23. 23 http://www.mandysims.com/
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2015/01/06-mandy-sims-coaching-opt.jpg
  25. 25 http://www.mandysims.com/
  26. 26 //www.smashingmagazine.com/wp-content/uploads/2015/01/06-mandy-sims-coaching-opt.jpg
  27. 27 http://www.vanseodesign.com/web-design/constraints-concept-unity/
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2015/01/07-vanseo-design-opt.jpg
  29. 29 http://www.vanseodesign.com/web-design/constraints-concept-unity/
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2015/01/07-vanseo-design-opt.jpg
  31. 31 http://605.wikispaces.com/Emphasis+or+Focal+Point
  32. 32 http://daphne.palomar.edu/design/emphasis.html
  33. 33 http://tympanus.net/codrops/2011/09/30/developing-emphasis-in-web-design/
  34. 34 http://dresdencodak.tumblr.com/post/833149000/primary-secondary-a-tale-of-two-focal-points
  35. 35 http://vimeo.com/30689436
  36. 36 http://makingamark.blogspot.com/2008/01/composition-and-design-finding-and.html
  37. 37 http://homeguides.sfgate.com/create-focal-point-designing-room-51512.html
  38. 38 http://www.gardeningknowhow.com/garden-how-to/info/creating-a-focal-point.htm
  39. 39 http://www.sophia.org/tutorials/design-in-art-emphasis-variety-and-unity
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Steven Bradley is the author of Design Fundamentals: Elements, Attributes, & Principles and CSS Animations and Transitions for the Modern Web. When not writing books he can be found writing for his blog at Vanseo Design or on his small business forum.

  1. 1

    Very insightful. I learned new things and point about designing especially for clients. Thanks for this post!

    4
  2. 3

    John Mindiola III

    February 27, 2015 5:48 pm

    Great article. It’s fundamental, but it’s always worth revisiting. I use a band or team sports analogy with my students. You can only have one or two stars. Everybody else is absolutely necessary, but generally only in their specific roles.

    2
    • 4

      Steven Bradley

      March 3, 2015 4:57 pm

      I think the fundamentals are always worth revisiting. I also suspect a lot of active web designers didn’t learn the fundamentals before getting started. I know I didn’t. Hopefully this series helps some want to learn more about the building blocks of graphic design.

      1
  3. 5

    Design fundamentals explained plain and simple! Can be very useful for clients’ education sessions.
    Thank you, Steven!

    0
    • 6

      Steven Bradley

      March 3, 2015 4:58 pm

      Thanks Sasha. You know I wasn’t thinking about clients when writing this, but that is a good use for the information.

      0
  4. 7

    Thanks for the post! I really like this kind of things. I miss this in school where they only teach me to handle PS and not the design principles and the fundamentals.

    0
    • 8

      Steven Bradley

      March 3, 2015 4:59 pm

      Thanks Johan. I didn’t learn any of this in school either, though in fairness to schools, I didn’t decide I wanted to learn about design until later in life.

      1
  5. 9

    Great article! Once aware of that, you really start thinking differently about your designs.

    In the second section “How to establish dominance” you list some key words about properties you can change to make elements stand out visually. I don’t understand all of them. Can you point me to some resources where I can read more about these?

    0
  6. 11

    I’m surprised you didn’t bring out this internet gem:

    http://www.makemylogobiggercream.com/

    0
  7. 13

    After reading your article, I have learned three major factors of design principles. They are dominance, focal points and hierarchy. When you are designing, you cannot emphasize everything. Emphasis is relative. For one element to stand out, another has to serve as the background from which the first is to stand out. Some elements need to dominate others in order for your design to display any sort of visual hierarchy. The dominant element in a design is the one with the greatest visual weight. It’s the element that attracts the eye first, more than anything else on the page. Focal points are also elements or areas of dominance, just not to the same degree as your one dominant element, which could be defined as your most dominant focal point. The focal points in your design should stand out but should be noticed after the element with the most dominance. As you design distinct levels of dominance, you create visual hierarchy in the design. Visual hierarchy enables visitors to scan information. It helps you communicate a message quickly and effectively. These principles are very useful when we are designing. Thank you for sharing.

    1
    • 14

      Steven Bradley

      March 3, 2015 5:04 pm

      Thanks Sam. Good summary. I was happy to share and I’m glad you enjoyed the article.

      0
  8. 15

    I learned a lot of good things from the article. One thing is that not everything can be EMPHASIZED. Something has to be in the small font or not be so important. Organizing things in a hierarchy way is a great way to organize a ton of information. It makes it easier for the consumer/ reader to get through the information. The best way is to design it in a 3 levels of depth. From most important to semi important to just plain old further information. Keeping the attention of the readers is hard but can be accomplished using these techniques. By organizing and making some things a larger and smaller font makes the passage and or advertisement easier to get through. This article has helped me tremendously and I look forward to using this in the work place.

    0
    • 16

      Steven Bradley

      March 3, 2015 5:05 pm

      Thanks Christina. Hierarchy will definitely help organize your elements and information in a way that lets others find what they want.

      0
  9. 17

    Thanks for this great article, Steven! I cannot agree more about visual hierarchy matching the conceptual hierarchy of the content. I’ve always prefer using some content instead of Lorem Ipsums because I always end up changing the design based on the content. When the client doesn’t have content, I would do my best to suggest some to show how the visuals will support what the client is trying to accomplish.

    2
  10. 18

    Elisabetta Bruno

    March 3, 2015 5:48 pm

    Yes. This hits the nail on the head. You have no idea how many times I have been asked to “make everything bigger for more impact.”

    I keep trying to explain the relativity of things, but sometimes it feels like people think I am Einstein.

    0
  11. 19

    It is always good to get back to the very principlesof design.

    -1
  12. 20

    MF Simchock

    March 4, 2015 3:00 pm

    This is all well and good but trying telling this to a client who lacks empathy for their target audience. It’s *impossible* to have a list of ten must communicates (so to speak). It’s *impossible* to “shout” when everything is shouting. It’s *impossible* to speak to everyone all the time in the same (design) breath.

    Hierarchy is the by-product of priority. And until priorities are defined and understood there can be no effective hierarchy – only pointless shouting and UI / UX chaos.

    1
  13. 21

    #overthinkingit

    -2
  14. 22

    Kristinahughes

    March 11, 2015 12:42 pm

    Thanks! Really comprehensive walk through. I can’t wait to play around with this.

    0
  15. 23

    Great article! But please, can you just make the logo bigger? ;)

    0
  16. 24

    Aleksandra Cataruzolo

    March 31, 2015 7:54 am

    This post is very insightful and it would definitely help with print advertising. It’s important to find, as you stated, dominance within the picture or ad and to concentrate on that. Often advertisers try to do too much with a photo and have so much going on that the focal point is often lost and the photo have too many dominant elements. The inverted pyramid is a form of writing that I use in journalism but it makes a lot of sense that it could be applied to creating an ad or attracting customers. When there is even less room for text heavy areas and the main point needs to be expressed in one quick sentence combining the who, what, where, when, and how to really give the image the most impact and to make sure the words compliment the image. It was interesting to me how many different ways dominance within the photo could be expressed. I didn’t know color, text, etc. were all ways to create dominance within the image.

    0
  17. 25

    Was expecting to see a link to this gem: youtube.com/watch?v=5AxwaszFbDw

    0

↑ Back to top