Skip links

Visual Balance and Focal Points: Moving the Viewer’s Eye Around the Page

Getting viewers to focus on your most important information and visuals involves a working relationship between the elements of balance, visual weight and focal points. Balance is the equal distribution of weight or force among visual units and is created by a variety of design elements working together. These elements can create:

  • symmetrical balance-  when a design is equally weighted on both sides (like a mirrored image)
  • asymmetrical balance- which involves design that appears balanced even though elements are varied
  • radial- an all over pattern which exists when there’s no one focal point (like a mosaic)

Visual weight refers to the measure of how much anything on the page attracts the eye or the importance or attention drawn to an area and how shapes can create a sinking or floating effect (i.e. visual weight at the bottom of a composition will draw the eye down and create a sinking effect). Darker values, heavy proximity of lines, larger objects, and the color red are a few examples of items that create stronger visual weight and they will steal attention from other, less weighted, elements in your design.  Focal points are aspects that lead the viewer’s attention throughout a page and towards a point. They can balance a visual composition or website by moving the eye around the visual space into different areas of visual weight.Focal points are emphasized by differences in contrast, color, value, size, texture and form. Isolation and objects or elements that do not resemble the rest/pattern will also highlight a focal point and placement is easily one of the easiest ways to create a focal point (i.e. center placement will naturally create a focal point, but off-center focal points are most aesthetically pleasing).

Your focal points should be working for you to draw the viewer’s eye to your most important imagery or text first. Make sure insignificant areas aren’t more visually weighted and stealing or pulling the viewer’s eye away from these focal points. Focal points are also balancing agents to visual weight. For example, when looking above the fold on a website, if the website is white, but there’s a large bar of black at the bottom of the visual space (around the fold), the viewer’s eye will be drawn to the bottom of the page first where the visual weight exists. However, bringing something with black (a logo or significant text) back to the top left and maybe middle right creates new focal points that balance the large section of black at the bottom and move the viewer’s eye around your page.