If you take a look at most two-column website layouts, you’ll notice that the wider column is often lighter in color – a tactic that creates a good contrast for the text and main content. These objects are arranged so that, despite their differences, they equalize the weight of the page.Īsymmetrical balance is used often on the web due to its versatility. Rather than mirror images on either side of the layout, asymmetrical balance involves objects of differing size, shape, tone, or placement. Note that balance is achieved through visual weight: the purple is heavier visually, but is balanced by the abundant use of the color aqua to the right. The result is a design that is creative and visually appealing. You’ll find this concept exemplified on the website for The Fashion Sketchpad shown below. Asymmetry can also represent an object that breaks a predefined pattern of symmetry, or an imbalance of design elements. Even on a static medium, rotational symmetry can convey action.Īsymmetrical balance is the lack of symmetry.

In design, it can be used to portray motion or speed. Radial Symmetry, which occurs when elements are equally spaced around a central point. Reflection symmetry can take on any direction: vertical, diagonal, and anything in between. These forms are:īilateral Symmetry, or Reflection Symmetry, exists when a composition is balanced on more than one axis. Still, each can be used in design to create strong points of interest and visual stability. Other forms of symmetry exist that aren’t readily expressed in web design but are widely popular in logo and print design. If one were to split a website along the vertical axis along the middle of the page one would find that the top and bottom halves reflect on this axis.Ĭonversely, when elements are balanced left and right of a central axis they are balanced horizontally. Vertical balance is the vertically oriented version of symmetrical design. Although some of the imagery at the bottom isn’t centered, the overall balance of the design is. This design remains centered, creating a horizontally centered look. Even when this grid is broken up, the proportions still match up to compensate for the difference. Many elements and blocks of content are centered and are evenly proportional on both sides to create bilateral symmetry, and we can see how sections of content are kept to the same size and then translated across the page. The website for Kite Experience, shown below, illustrates this concept well. Symmetrical balance, or formal balance, occurs when the elements of a composition are the same on either side of an axis line. When elements are not balanced around a vertical axis, the effect is disturbing and makes us uncomfortable. We are bilateral creatures and our sense of balance is innate. Visual balance occurs around a vertical axis our eyes require the visual weight to be equal on the two sides of the axis.

What is Balance?īalance is the equal distribution of visual weight in a design. The outcome will give you the designer the tools you need to incorporate this concept into your work. In this article I will cover the concept of balance and the factors that influence it. When applied strategically, this concept of balance can help guide the viewer’s eye to places we want in a design. You’ll see just as physical objects have weight, so do the elements of a layout. On the other end of the spectrum, asymmetry is a break in balance and can lead to visually interesting results in return. Often found in nature, the concept often yields aesthetically pleasing results that are complete in our minds. In design, balance is the notion that elements are symmetrical, which in turn creates harmony, order, and cohesion.

Webdesign concept