Visual weight reinforces a page or screen’s visual hierarchy by contrasting the size, color and/or position of elements in the design. By adding visual weight to elements that are of primary importance and reducing the visual weight on elements of less importance you help guide the user and strengthen the overall design of the page or screen.
Just as you would consider each and every word as you write a story, you should consider each element in your design with the understanding that you are crafting a visual narrative. Each decision you make has a measurable impact on the overall flow and coherence of the page. Something as seemingly insignificant as line-height can have a dramatic impact on how the user understands the screen they are looking at.
For example, by not allowing enough space between lines of text, you can unintentionally create a section that is visually dense and often more difficult to read and distracting from the established VH of the page. By employing proper line-heights, you allow the text to breathe and the surrounding headings, images and other text to retain their priority and balance in relationship to the text.
Color is another key in establishing Visual Weight and is often utilized to draw attention to actions that can be taken on the screen. Take the well-established practice of using the color blue for links; when scanning a page, the use of blue links within the sea of grey text becomes an clear signal for action. A call-to-action will often employ the combination of size and color to emphasize this primary action on the screen.
Visual weight, just like visual hierarchy is an important tool in conveying and establishing the order of importance on the page. Mistakenly applied, it can cause confusion and frustration to the user—but when done correctly—can provide a visual framework for the user to navigate and successfully use your product.
