Balance: the Basic Principles of Design GA S REGULAR Menu Lifewire Tech for Humans Newsletter! Search Close GO Software & Apps > Design 94 94 people found this article helpful

Balance: the Basic Principles of Design

By Jennifer Kyrnin Jennifer Kyrnin Freelance Contributor University of California University of Washington Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. lifewire's editorial guidelines Updated on March 23, 2021 Reviewed by Lisa Mildon Reviewed by Lisa Mildon Southern New Hampshire University Lisa Mildon is a Lifewire writer and an IT professional with 30 years of experience. Her writing has appeared in Geekisphere and other publications. lifewire's editorial guidelines Tweet Share Email Tweet Share Email Design Graphic Design Photoshop Animation & Video 3D Design Balance in design is the distribution of elements of the design. Balance is a visual interpretation of gravity in the design. Large, dense elements appear to be heavier while smaller elements appear to be lighter. You can balance designs in three ways: symmetrical balanceasymmetrical balancediscordant or off-balance Dimitri Otis / Getty Images

Use of Balance in Design

Balance in web design is found in the layout. The position of elements on the page determines how balanced the page appears. One big challenge to achieving visual balance in web design is the fold. You may design a layout that is perfectly balanced in the initial view, but when the reader scrolls the page, it can come out of balance.

How to Include Balance in Web Designs

The most common way to incorporate balance into web designs is in the layout. But you can also use the float style property to position elements and balance them across the page. A very common way to balance a layout symmetrically is to center the text or other elements on the page. Most web pages are built on a grid system, and this creates a form of balance for the page right away. Customers can see the grid, even if there aren't any visible lines. Web pages are well suited to grid designs because of the square nature of web shapes.

Symmetrical Balance

Symmetrical balance is achieved by placing elements in a very even fashion in the design. If you have a large, heavy element on the right side, you'll have a matching heavy element on the left. Centering is the easiest way to get a symmetrically balanced page. But be careful, as it can be difficult to create a centered design that doesn't look flat or boring. If you want a symmetrically balanced design, it's better to create the balance with different elements - such as an image on the left and a large block of heavier text to the right of it.

Asymmetrical Balance

Asymmetrically balanced pages can be more challenging to design - as they don't have elements matched across the centerline of the design. For example, you might have a large element placed very close to the centerline of the design. To balance it asymmetrically, you might have a small element farther away from the centerline. If you think of your design as being on a teeter-totter or seesaw, a lighter element can balance a heavier one by being further away from the center of gravity. You can also use color or texture to balance an asymmetrical design.

Discordant or Off-Balance

Sometimes the purpose of the design makes an off-balance or discordant design work well. Designs that are off-balance suggest motion and action. They make people uncomfortable or uneasy. If the content of your design is also intended to be uncomfortable or make people think, a discordantly balanced design can work well. Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Subscribe Tell us why! Other Not enough details Hard to understand Submit More from Lifewire Direction: Basic Element of Design 9 Best Free HTML Editors for Windows for 2022 Viewing the HTML Source Code in Safari How to Use Canva A Guide to Asymmetrical Balance in Graphic Design The 9 Best Wired Earbuds of 2022 How to View the HTML Source in Google Chrome Add More Features by Turning on Safari's Develop Menu The Top 10 Personalized Start Pages for Your Web Browser How to Use Opera Mini for iPad, iPhone, and iPod Touch The Elements and Principles of Graphic Design ASPX File (What It Is and How to Open One) How to Save Web Pages in Internet Explorer 11 How to Use the PS4 Web Browser How to Use Basic Shapes in Graphic Design How to Make a Greeting Card on Your Computer Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookies Settings Accept All Cookies