How to use balance in web design

Default avatar.
October 30, 2015
How to use balance in web design.
Achieving balance in web design takes some thinking, effort and skill, but it’s absolutely worth it. The great thing about balance, which can be applied to the broader category of design as a whole, is that it keeps what you create from being an excessive, overloaded mess that fails to serve the user experience. In other words, balance in web design makes sure that you as a designer just hit that sweet spot of moderation. Not too much, but not too little. Not too noisy, but not too subtle. It keeps your entire design in harmony while still hitting all of the usability goals of your clients. Now that’s a skill to definitely put into your designer’s toolbox! In this article, we’ll look at how you can incorporate good balance into your clients’ websites.

Symmetrical balance

One of the most common examples of balance that you come across when browsing websites is symmetry, though you may not realize it, because it’s so seamlessly presented. Symmetry is innately pleasing to the eye, and creates a design that’s aesthetically well-organized and harmonious. Symmetrical balance is defined by placing elements equally on either side of a horizontal or vertical central axis. In other words, both sides of an imaginary diving line across the middle of the page are essentially mirror images of each other. While some critics may write off this type of balance as boring or predictable, it has nonetheless stood the test of time and remains one of the best ways to show balance in web design. cisco Cisco’s site has opted to go for this tried, tested and true approach to design. Note how the site is perfectly balanced across its vertical axis. If you took an imaginary line and divided it right down the middle of Cisco’s homepage, you’d notice the following:
  • The same number of elements in the navigation bar (including search icon) on both sides
  • The headline and subheadline are equally long on both sides
  • The call to action button is perfectly centered
  • The same number of elements under the “Quick Tasks” heading on both sides
While the site may not be the most terribly exciting site ever, it doesn’t have to be since the company sells networking equipment. Plus, the site is usable and functional, both attributes that its customers can appreciate. Let’s look at two other examples of symmetry: iwc IWC Schaffhausen, the Swiss watchmaker, has a site that features horizontal, symmetrical balance. If we divide the page across a central axis down the middle, both sides have symmetry. beanstalk Same thing goes for the Beanstalk App website. Featuring a simple, minimal design, its central axis goes down the middle of the homepage, which leaves the two halves of the page with horizontal, symmetrical balance.

Asymmetrical balance

The polar opposite of symmetry, asymmetrical balance is possible too. Don’t be fooled by the fact that asymmetry means a lack of equivalence between parts! As you’ll soon see, asymmetrical balance achieves a system of counterweights in design as well… just not in ways you might expect. Asymmetry can be represented in a number of ways on a webpage. For instance, one half of the screen, vertically or horizontally, could boast a more intense element while the other half could have subtler elements. In spite of this inequality, both in strength and numbers, balance is created by the juxtaposition of the contradicting elements. In this way, asymmetry can be truly beautiful, perhaps more so than straightforward symmetry, because it plays on the concept of dissimilarity to create balance. That’s a design paradox, but one that works so well on any site. Asymmetrical balance is therefore more interesting and thought-provoking than predictable symmetry. It evokes themes of modernism, energy and wonder. Designers should take note, however, that creating asymmetry on a page requires more work than regular symmetry. After all, you’re having to represent relationships between design elements that are more complicated. honda Honda gives us a crystal clear example of asymmetry in web design. Below the fold, on its homepage, the company uses a card-based design, but this produces a somewhat disorganized look that, while visually appealing and colorful, creates a lack of equality on either side of a vertical or horizontal central axis. For one thing, the cards themselves are always different lengths, horizontally, and fail to always be stacked in any uniform column or row. This creates major asymmetry that’s very interesting to look at. It’s almost like a small maze on the homepage of the car company! There are also other interesting examples: typographisme Typographisme is a picture-perfect case of asymmetry in web design. Its site features two elements that are lopsided. Both the TG logo and the green stamp in the right, upper corner create asymmetry. duplos Duplos’ asymmetry is starker. Its site boasts a floating-elements design that won’t line up consistently with the other half, whether the central axis is vertical or horizontal. Overall, it produces an eye-catching appearance that’s interesting to take in.

Radial balance

Radial balance is pretty straightforward. As the name implies, radial balance occurs when all the design elements on a page emanate in equidistant points from a unifying, central point. So if you’d divide the page either vertically or horizontally along a central axis, both sides’ elements would be equally as far or near from the central point. Some of the most basic examples of radial balance are things like rays of sunlight coming from a central point or a pond that has a bunch of ripples on its surface. What makes this form of balance more special is that the radiating effect goes both ways: Just as the attention leads away from the central point, it also leads back to it due to the common center. Because of this, keeping a focal point is easy. vlog The best example of radial balance — which is quite rare on websites, especially homepages — is Vlog. It is the epitome of radial balance, as everything radiates outward from the central point of the white type of “Vlog.it”.

All kinds of balance

By now, it should be pretty obvious that all types of balance have some common bonds. There are uniform factors that consistently appear in any design that features attractive and interesting balance. Balance in web design is all around you. Chances are that you’ve neglected to appreciate it on all the different sites you’ve ever browsed throughout your life; but that’s only because balance isn’t really the first thing you think of when you navigate any site. Nonetheless, balance is important to site design. It doesn’t only provide aesthetic touches that are interesting from a visual standpoint. It also can help the user experience by making the visual information on a site easier to absorb, which is to say nothing of improving site navigation, too. Designers can strive to include better balance in their web design by paying extra close attention to harmony, counterweights and equidistance. The end result of good balance pays untold dividends for your clients and the user experience.

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at thegloriouscompanyltd.com.

Read Next

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…