Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Part Four Design Principles: Visual Weight And Direction

Every element on a web page exerts a visual force that attracts the eye of the viewer. The greater the force, the more the eye is attracted. These forces also appear to act on other elements, imparting a visual direction to their potential movement and suggesting where you should look next.

We refer to this force as visual weight1 and to the perceived direction of visual forces as visual direction. Both are important concepts to understand if you want to create hierarchy, flow, rhythm and balance in your composition.

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

Visual Weight Link

Physical weight is a measure of the force that gravity exerts on an object, but two-dimensional objects (such as elements on a web page) don’t have mass and, therefore, don’t have any physical weight. Visual weight is a measure of the force that an element exerts to attract the eye. Two-dimensional objects can attract attention. The more an element attracts the eye, the greater its visual weight.

In the previous post in this series5 I talked about primitive features, or the intrinsic characteristics of an element, such as size, color and shape. In that post I mentioned how, through these features, you can show contrast and similarity between elements.

For example, contrasting elements by making one very big and the other very small makes it clear that the elements are different.

Controlling the combination of these features is how you control visual weight. Red tends to attract the eye more than blue, and larger elements attract the eye more than smaller ones. A large red object carries more visual weight than a small blue object.

The sum of these characteristics or primitive features is what determines an element’s visual weight. It’s not any one feature, but rather their combination that determines the visual weight of an element. Some combinations of features will attract the eye more than others. To create elements of different visual weight, you would use different combinations of primitive features.

How Do You Measure Visual Weight? Link

There’s no way I know of to precisely measure the visual weight of a design element. You use your experience and judgment to determine which elements have greater or lesser weight. Develop an eye and then trust it. The areas of a composition that attract your eye are those that have greater visual weight. Learn to trust your eye.

This doesn’t mean that you have to randomly try things and see what attracts your eye the most and the least. You can isolate each characteristic to know that something bigger weighs more than something smaller, for example. It’s in the combination of features that your eye will help.

Fortunately, others have isolated and tested these characteristics. Below are some of the characteristics you can change on any element and a description of how changing them will either increase or decrease the element’s visual weight.

Let’s start with the primitive features that I mentioned in the last post: size, color, value, position, texture, shape and orientation.

  • Size
    Large elements have more visual weight than small elements.
  • Color
    Warm colors advance into the foreground and tend to weigh more than cool colors, which recede into the background. Red is considered the heaviest color6 and yellow the lightest.
  • Value
    Dark elements have more visual weight7 than light elements.
  • Position
    Elements located higher in the composition are perceived to weigh more than elements located lower in the composition. The further from the center or dominant area of a composition, the greater the visual weight an element will carry. Elements in the foreground carry more weight than elements in the background.
  • Texture
    Textured elements appear heavier than non-textured objects. Texture makes an element appear three-dimensional, which gives the appearance of mass and physical weight.
  • Shape
    Objects with a regular shape appear heavier than objects with an irregular shape. The irregularity gives the impression that mass has been removed from a regular shape.
  • Orientation
    Vertical objects appear heavier than horizontal objects. Diagonal elements carry the most weight.

You don’t have to limit yourself to the primitive features above. You can use additional characteristics to control visual weight.

  • Density
    Packing more elements into a given space increases the visual weight of the space. The viewer will perceive a larger or darker combined element as opposed to several smaller and lighter elements.
  • Local white space
    White space appears to have no visual weight because it’s seen as empty. Any object placed within that space will seem heavier because of the space around it.
  • Intrinsic interest
    Some things are more interesting than others. The more complex or intricate an element, the more interest it will draw and the more it will attract the eye. Your own interests also play a role. If you’re more interested in cars than in planes, then an image of a car will grab your attention more than an image of a plane.
  • Depth
    A larger depth of field8 gives an element in focus increased visual weight, likely due to the contrast between the focus and unfocused areas.
  • Saturation
    Saturated colors appear heavier than desaturated colors.
  • Perceived physical weight
    We know that a house weighs more than a shoe. An image of a house will weigh more visually than an image of a shoe, because we expect the house to weigh more.

In the previous post in this series about contrast and similarity, I mentioned that contrast draws attention to an element. In other words, an element that contrasts with its surroundings will appear visually heavier than its surroundings. For example, circles usually appear heavier than rectangles on a web page because most website elements are rectangular.

Not all characteristics contribute equally to visual weight. Most people will notice the color of an element before its shape, which suggests that color contributes more to visual weight. You also have to consider the uniqueness of a given composition, because contrasting elements appear weightier than the elements they contrast with. The specifics of your composition will determine what contrasts and what doesn’t.

Remember that visual weight is a combination of the above attributes. While big carries more visual weight than small, a small dark circle surrounded by a generous amount of white space and located at the top of the page will likely appear to weigh more than a larger yet irregularly shaped object of a cool light color at the bottom of the page.

Visual Weight and Gestalt Link

One of the ideas behind this series is to point out how much gestalt principles contribute to design principles.

  • Figure-ground
    Visual weights can be used to separate the two by giving the figure more weight than the background.
  • Proximity
    The space between elements leads to different amounts of local white space and different densities of the objects within the space.
  • Similarity and contrast
    You can use visual weight to signal either. Contrast will lead to greater visual weight in the contrasting element. Elements with similar visual weight will naturally exhibit similarity.
  • Focal point (the next topic in the series)
    Points of attraction in a composition are focal points, and they carry more visual weight than other elements.
  • Past experience
    The viewer’s experience will contribute to how much intrinsic interest they think an element holds.

Visual Direction Link

If visual weight is about attracting the eye to a particular location, then visual direction is about leading the eye to the next location. Visual direction is the perceived direction of visual forces. Think of it as the direction you would expect an element to move if it were in motion.

Visual direction serves a similar function to visual weight in that it’s trying to get you to notice certain parts of the composition. Whereas visual weight is shouting “Look at me!,” visual direction is saying “Look over there!”

As with visual weight, you can modify the characteristics of an element to suggest different directions, although fewer characteristics are at your disposal than with weight.

  • Shape of element
    An element’s shape might create an axis through it and this axis can suggest a direction. The prime axis is typically seen as running parallel to an element’s visual direction.
  • Location of elements
    Visual weight is a force that can appear to attract or repel a neighboring element. This force will move in a direction that connects both elements.
  • Subject matter of element
    An arrow, a pointing finger, or the gaze of the eye all suggest looking in a certain direction.
  • Movement
    An element could literally move through your design, and its movement will have a direction.
  • Structural skeleton
    Every composition has a structural skeleton, with forces that naturally run along and through different axes. This probably needs a little more explanation.

Structural Skeletons Link

In his book Art and Visual Perception: A Psychology of the Creative Eye9, Rudolf Arnheim10 proposed the idea of a structural skeleton behind every canvas.

The idea is that every canvas has a structural network of forces running through it. Even if no elements are inside the canvas, our eye will be drawn to certain parts of the canvas because of this network of forces seen in the image below.


Rudolf Arnheim’s structural net

The center and the four corners of a rectangular canvas act like magnets to the eye. The strongest magnet is in the center, though not the geometric center of the canvas. Rather, the center that attracts the eye is the optical center, and it sits just above the true geometric center.

The axes run from corner to corner, and the points along these axes that are midway between center and corner also attract attention. These midway points can, then, be connected with vertical and horizontal lines, which create additional axes of visual force.

We’ll come back to this idea when we get to the post in the series about compositional flow. For now, consider that, in the absence of design, a viewer’s eye will be attracted to certain points in Arnheim’s structural skeleton, and the eye will move from point to point by following the directions of the different axes.

You can make use of the structural net by placing elements where they would naturally attract the eye, thereby increasing their attractive force.

Visual Direction and Gestalt Link

You can think of direction as real or imaginary lines that point from one element to another or that connect different elements. The lines don’t need to be visible.

  • Uniform connectedness
    The lines connecting elements have direction. An eye gaze creates an imaginary line between the eye and whatever the eye is gazing at.
  • Continuation
    This principle relates to elements arranged along a line or curve, as though they are moving in the direction of the line or curve.
  • Common fate
    Elements seen as having a common fate are those that move or appear to move in the same direction.
  • Parallelism
    In order for elements to be seen as parallel, their internal axes (the same ones that impart direction) must be established.

The Overall Direction Of A Composition Link

One more concept of visual direction is that every composition will be seen to have a dominant direction, whether horizontal, vertical or diagonal.

  • A horizontal direction makes the composition appear calm and stable.
  • A vertical direction adds a sense of formality, alertness and balance.
  • A diagonal direction suggests movement and action.

The dominant direction of a composition will be established by the direction of the majority of elements or perhaps a few key elements. The direction will help set a general mood according to the general meaning ascribed to different types of lines12.

It is possible for a composition to have no dominant direction. The number of horizontal and number of vertical elements might be equal, for example. In this case, the viewer could decide which direction is dominant.

Examples Link

For the following examples, I’ve grabbed some screenshots of pages and will share some thoughts on how I see visual weight distributed in each. You might see it differently, and that’s OK.

Different eyes are attracted to different things. Again, I’m aware of no way to measure how much visual weight an element carries. Besides, two people could easily look to different areas of a composition because of their different interests. A bit of subjectivity is to be expected.

An easy way to tell which elements have the most weight is to use the squint test. Close your eyes a little until some elements fade away. Those that remain have more visual weight than those that disappear.

Bureau Link

Note: The screenshot for Bureau was captured with my browser set wider than 1280 pixels. Anything less and the design would collapse to a single column, instead of the two seen here.

Screenshot of article from Bureau website13

Screenshot of article from Bureau’s website

The article from Bureau shown above14 is nearly all text. The main heading carries the most visual weight. It’s the largest piece of text, and it has some local white space around it as well. It’s arguably the most important information that someone who lands on the page should see, so it makes sense for it to be visually weighty.

Links gain some weight through their contrast with the surrounding text, although the cool color lessens the gain in my opinion.

The element with the least visual weight is the text in the right column. This makes sense because focus is most likely meant to be given to the article and not what’s in the sidebar.

Notice the small bit of red text at the top of the right column. It’s a link to the home page of the website. As small as it is, the red gives the text some additional weight, helping it to stand out from the other text in the column. Everything in the image appears larger when you’re viewing the website directly, so the small red text isn’t quite as small as it is here.

When you apply the squint test, the whole right column disappears, and you’re left with the main heading above the article and a large block of text below it.

The main direction of the composition is vertical because it’s two long columns down the page. The difference in background color between the columns creates a vertical line leading you down the page and adding to the vertical direction of the composition.

Create Digital Media Link

When the home page for Create Digital Media15 loads, the colorful elements animate into place, calling a lot of attention to themselves. Even if you miss the animation, you likely see these elements as carrying the most weight, due to the saturated pink, yellow and blue. These elements also occupy the same space, creating a dense area in the middle of empty space.

Note: Between the writing and publication of this post, Create Digital Media has closed its doors. Visit its home page if you’d like to know why.

Screenshot of Create Digital Media's home page16

Screenshot of Create Digital Media’s home page

The graphics at the bottom are the next weightiest for me. They’re dark, large and complex in shape. They pull you to each of the three sections, which contain the next most visually prominent elements, the section headings.

The main headline on the page is large and dark; compare it to the text directly below it. Other items that stand out for me, due to their higher visual weight, are the company’s name at the top and the logo at the bottom.

With the squint test, the colored shapes and text and the graphics at the bottom remain after most of the elements have faded away. The main headline fades for me, although I can still tell it’s there. I also somewhat notice the logo in the lower-left corner, although it fades much more quickly than the graphic near it.

Here, I think the main direction is horizontal. The lines run horizontally, as does the main heading and the navigation. Another of the more visually prominent elements, the highlighted text, is also horizontal.

The three gears could be regarded as a single triangular, albeit curvy, shape, thus establishing diagonal directions. They don’t run long, though, and they’re the only diagonals on the page.

Javier Marta Link

Three elements compete to be the visually weightiest on Javier Marta’s home page17. The graphics, the green separators between sections, and the menu items at the top all call for attention.

Screenshot of Javier Marta's home page18

Screenshot of Javier Marta’s home page
  • Graphics
    These are large, dark and surrounded by white space. Each graphic intrinsically hold its own interest.
  • Green separators
    These have color, are larger and, like the graphics, are surrounded by white space
  • Menu items
    These are dark, large and, once again, surrounded by white space.

Javier’s logo carries a little less visual weight for me than the menu items around it, although it’s still very prominent among them. It does carry more weight than the text, but not as much as the menu items in my mind. You may disagree.

The squint test causes the menu items and logo to blend into a single unit. The graphics and separators are still visually prominent, and the text remains visible as large blocks. You can still see everything while squinting, even if you can’t make out what any of it says.

On my screen, only the header and the “El evento” section are visible, giving the page a horizontal direction. However, four sections in total are on the page. When the sections are viewed all at once, the alignment of the green separators gives the composition a vertical direction. And, of course, seeing the whole page at once changes the canvas from horizontal to vertical.

I wonder if the two graphics shown in the screenshot above would have been better on opposite sides. In the top graphic, the camera points right, which is where my eye follows. Better would be to guide the eye to the text.

In the bottom graphic, the woman’s umbrella does point right, but she’s walking left, which is where I then tend to look. Both graphics might work better if their direction led back into the text instead of away from it.

Stanford Arts Link

The image at the top of Stanford Arts19’ home page carries the most visual weight. It’s the largest element on the page and, being an image, has a lot of intrinsic interest. It’s also located at the top of the composition. In truth, it takes up most of my screen.

Screenshot of Stanford Arts home page20

Screenshot of Stanford Arts home page

Note: This website rotates images at the top of the page, and the images that rotate change over time. You probably won’t see this particular image if you visit the website and, because of that, you might assess the visual weights in the design differently than I do here.

I think the triangular images against the angular containers are the next weightiest elements. After that are the large red blocks that make up the header and footer.

When I perform the squint test, all of the elements are visible longer than I’d expect. The elements have a good deal of both light and dark contrast, which helps them stand out.

Eventually, the only things that remain are the images, although in less than full detail. I can make out the large image at the top but only the shapes of the triangular images below.

The design is also interesting for its visual direction. Diagonals dominate, and because most web pages are not dominated by diagonal directions, they capture more attention here. They subvert your expectation.

The particular photograph that I captured in the screenshot above also offers something of a diagonal, albeit a bit curved in parts and created by a moving line of people in others.

Both the woman (in the rightmost triangular image) and the photographer (in the center triangle) have a direction leading to the right. Better might have been to reverse the woman to face inward and move the camera to the left block to points inward, too.

Granted, the images change when you hover over any of the links in the blocks. Still, the images tend to lead outward instead of inward.

Summary Link

The visual weight of an element is a measure of how much the element attracts the eye of the viewer. A visually heavy element will attract the eye to it.

Visual direction is the perceived direction of forces acting on and exerted by elements. The direction is a cue to the viewer’s eye to move elsewhere.

Many intrinsic characteristics can be modified to make an element visually weightier or lighter. A few can be used to establish an element’s visual direction, as can the canvas itself.

Over the remaining posts in this series, we’ll see how visual weight and visual direction lead to principles like dominance and hierarchy, flow and rhythm and, ultimately, compositional balance.

(il, al)

Front page image credit: Opensource21.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21

↑ Back to top Tweet itShare on Facebook

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

    Great stuff. It’s hard to believe there are still popular websites that haven’t figured this stuff out yet. I hope all their designers, if they have any, read this and make consuming content easier for the rest of us.

    Can’t wait for the follow up articles.

    • 2

      Steven Bradley

      December 12, 2014 9:46 pm

      Thanks Scott. I know what you mean. With some sites you wonder what was the thinking behind it, because it doesn’t look like there was any thinking at all. Looking back a dozen or so years, the web looks much better now. There are definitely poorly designed websites today, but there are a lot more well designed sites that there used to be.

  2. 3

    thank you for your great article!! agree at very first word “every elements attack eye attention”. But some designer have tendency to add visual element in his design, which make more visual noise more than let the user focus on his current task which it’s a pity. I understand the motivation that he want to make the design more beautiful and more fun, hopefully that they can read and understand this article.

    • 4

      Steven Bradley

      December 13, 2014 4:35 am

      Thanks takeshi. Good point about visual noise. There’s nothing wrong with adding a beautiful aesthetic as long as it’s on top of a solid foundation. Some people forget the foundation.

      As I said in a comment above I think there are more web designers now who do understand the basics than there was a few years ago, which is a good thing.

  3. 5

    Forgive me as this comment is not about content per se but rather about form. For last few days I’m trying to understand html5 a little bit more than I used to and I came to smashing magazine to check how they handle different new tags.
    In the text above I see that all images are wrapped in “figure” tag. Which I always understood as a tag that stores the item whichis related to the main flow, but its position is independent of the main flow. And here we have such a situation (quoting:) “to certain parts of the canvas because of this network of forces seen in the image below.”. Image below means it’s not independent – if we would move this image somewhere else then this statement wouldn’t make sense.

    Maybe someone would be able to explain me why are tags used instead of just pure/naked – is it for SEO reasons? I mean what are advantages of using solution if it’s not improving user experiences?

    (for me it makes sense to add “check this on image below” text as in the example I gave – but from tag and html concept point of view it shouldn’t happend because then image looses it’s autonomy)

    • 6

      Steven Bradley

      January 9, 2015 12:16 am

      I wish I could give you an answer, but I don’t the what and why of the decisions made in regards to the way the site was coded.

      Writing image below is just a habit of mine, that I know I need to break. I realize the image may or may not be below all the time. A better way to refer to the image is to say something like see Figure x.x.

      You’re right about how the figure element should be used. My bad for saying below, though I expect I’ll say it again in the future.

  4. 7

    Great read! I always recommend this book for people just starting their design career:

    It’s a great foundation to stand on when designing!

    • 8

      Steven Bradley

      January 9, 2015 12:17 am

      That’s one of the first books I read about design and it’s still one of my favorites.

  5. 9

    “You can use visual weight to signal either. “

  6. 11


    December 15, 2014 11:34 pm

    I got this website from my friend who shared with me regarding this web page and at the moment this time I am browsing this web site and reading very informative posts at this place.

  7. 12

    Visual weight? You must have told the advertisers on this site before… Boooold DARK boxes screaming at me whilst the rest of the content seems quite lightweight. Always draws my focus when only reading the teaser. And I know these ads already in and out!

    • 13

      The article(s) itself give(s) so many insights. I however disagree that there isn’t any way to measure weight. The article even names many components. But the sheer possibility of combinations makes it harder to name a clear direction there.

      It’s a bit like judging a painting: you will see it differently, if you know it’s a van Gogh copy. Great structure, great balance, but different stroke to the original. And yet it is still only one flavour of great. Our mind is a fool sometimes.

      • 14

        Steven Bradley

        January 9, 2015 12:21 am

        How would you place an absolute measurement on the visual weight of element? I don’t think there’s anything to helps us decide that text with a font-size of 36px is a specific visual weight while another piece of text that’s 12px, but red and bold is another specific visual weight.

        We could look at both and decide one has more visual weight than the other, but I don’t know you’d say one has a visual weight of x why another has a visual weight of y.

        Maybe I’m just missing how it could be done, but I have a hard time seeing it.

    • 15

      Steven Bradley

      January 9, 2015 12:24 am

      You do realize that I, as the author of this article, have nothing to do with how the site is built. I can’t speak for Vitally, but advertising is part of how this site earns revenue. Advertisers want their ads to be seen so ads usually get a lot of visual weight.

      The alternative is possibly putting the site behind a paywall. Which is more preferable? Seeing ads or paying for access to the content?

  8. 16

    This principles and direction are good and useful.

  9. 17

    Wow, my jaw dropped as I noticed you have Arnheim as a reference. Just saw his name for the first time while not reading on film. Thank you for the great article!

    • 18

      Steven Bradley

      January 9, 2015 12:27 am

      Thanks Ciprian.

      I read Art and Visual Perception a few years ago. It’s one of those books I think every designer should read. It’s not written as a design book, but so much of what we do comes directly form the book.

  10. 19

    Elsie Goldblatt

    December 20, 2014 1:47 am

    This will be the proper blog for anyone who desires to be familiar with this subject. You recognize a terrific deal of its practically not easy to argue on hand (not too I actually would want

  11. 20

    Hi, love the series. I found a little continuity error. Normally I wouldn’t bother but well.. this is Smashing Magazine!

    The alternativeHeadline span element ( “cahe” class) in the archive overview doesn’t say “part four” in blue text, but I think it should given that the other 3 parts in the series do.

    Cheers, Bram

  12. 21

    Brian R Lindsay

    December 26, 2014 12:45 am

    In my Thoughts about art the “value the weight” you give to the object is the intrinsic distinction of the object, get the point, linguistics analysis is part of the equation.

  13. 22

    Raul Parada Castellano

    March 11, 2015 10:57 am

    Dear Steven,
    I have already published an article about visual weight online in Color Research and Applications:

    I think that it could be interesting for you.
    Best regards

  14. 23

    Agreed! Design should be simple and focused. Nice Article

  15. 24

    Rafael de Belen

    July 26, 2015 7:57 am

    can you make an article that shows how the design principles are applied to UI App design :)

  16. 25

    Lester Montilla

    August 4, 2015 7:28 pm

    Is very excellent article.

    Thanks for sharing your ciency, knowledge and intelligence.

    Grace and Peace.


↑ Back to top