By manipulating visual weight, you can make some parts of your website stand out more than others – that is, you can create visual hierarchy. Visual hierarchy is how a web designer organizes what’s important and not as important on their website. One of the key elements they can use to create visual hierarchy is visual weight. By putting more weight on certain web elements (like fonts, headlines, and buttons) than others, it is easier to lead users’ eyes and show them where to go next.
To understand how visual weight works, we need to talk about two things: size and color.
Make Sure Important Things Are Larger in Size
When something is more important than some else, you want it to pop out to your web visitor. Increasing an element’s size is an effective way to do this. Having larger text size for important texts like headlines, for instance, makes scanning easier for users. This being said, it’s a good idea to enlarge the sizes of headlines, special promotions, sales, or anything else that you consider important for your visitors.
In addition, it also helps to add a shadow or blur effect to any important text – or to even use a color that will make it pop, which we will discuss below.
Use Color Contrast to Your Advantage
Color contrast, which is the principle of two colors being the opposite of each other – is a great way to put more importance on one web element than another. For instance, if you use a light blue background, a dark red button or headline will easily stand out. The key is to put light and dark colors together, as well as warm and cool colors together.