Balance: as all things should be
We crave and expect balance in every aspect of our lives because we associate balance with a better life. Our brains are wired in such a way that we expect balance in everything we see and interact with.
✨ What is balance in design?
Balance, in our context, refers to the way objects and elements in a design are arranged in a design. It refers to the distribution of elements in a design. This can refer to visual elements or even text. To better understand balance, we’ll have to understand 2 concepts which contribute to a balanced design:
- Visual Weight
- Visual Direction
1️⃣ Visual Weight
Visual Weight refers to the way we perceive an imaginary weight for the elements in a design and measure the force that an element exerts to attract the attention of our eyes. There are a few cues which we use subconsciously to assign weight to every element.
- Size: We perceive larger objects to be heavier.
- Colour: We perceive some colours to be heavier than others. For example, we perceive red to be heavier than yellow.
- Contrast: We perceive objects with a higher contrast ratio to be heavier.
- Complex: The more complex a visual is, the more weight we assign to it.
- Density: The more elements there are grouped together, we perceive the group to be heavier.
2️⃣ Visual Direction
Whereas visual weight is about attracting the users’ attention, visual direction is about leading the users’ attention to the next important thing. Here are some of the cues we subconsciously use to understand visual direction:
- Layout: We usually perceive two flows in a direction, top to bottom and left to right.
- Shape: The axis of a shape can convey a certain direction.
- Position: The position of your elements has an effect on the direction users move.
✨ Why does balance hold such importance?
Having a good balance makes the user experience more comfortable and pleasant for the users. In a balanced design, elements with varying weight are distributed strategically such that every element has a role to play, they not only get the proper amount of attention they need to get but also compliment other elements in the design for a cohesive experience.
In an unbalanced design, the users might miss the main goal or the focal point of the design or product and emphasize some other element. This creates hurdles for the user in accomplishing their goal.
✨Types of Balance in Design
Balance doesn't only come in one flavour, we can portray balance in designs using various ways.
1️⃣ Symmetrical Balance
Symmetry is what we assume when we talk about balance. This is the simplest to implement in design as both sides of the design are balanced using objects with equal visual weight.
The above example is symmetrically balanced. To maintain symmetrical balance, we deal only with visual weight and not visual direction. Hence, you must balance all aspects of visual weight between all the objects in reference.
2️⃣ Asymmetrical Balance
Asymmetrical balance is somewhat difficult to understand. Many times, people confuse it with a complete lack of balance. However, that’s not the case.
In asymmetrical balance, both sides of the axis have similar visual weight. While one side has a more focused element with a heavier visual weight, the other side is balanced with a group of smaller elements that have an aggregated visual weight similar to that of the bigger element.
Every individual element on one side of the axis has a fraction of the visual weight of the larger element, but the aggregated visual weight of the smaller elements is similar to the larger element.
3️⃣ Radial Balance
Whereas in the previous types of balance we only had 1 or 2 axes, radial balance can have way more axes, the number of axes is unique and depends on every layout and design. In radial balance, visual elements radiate from a centre point to all directions.
Here, elements on the same axis have the same weight. But in some cases, the weight of elements might differ from axis to axis but the weight of all the elements on any particular axis remains the same.
4️⃣ Off-Balance
Yes, as much as I’ve said about keeping a design balanced, making the design off-balanced can help us bring attention to a certain element. It’s effective only when used properly, and it should be used sparingly throughout a design else it’ll just be chaotic.
✨ Ways to balance your design
In the above illustrations, we only saw maintaining visual balance using the size, but as we saw in the section where we discussed about visual weight, we can use factors other than scale to achieve balance in our designs.
- Colour
- Shape
- Position
- Texture
- Size (of course)
✨ TL;DR
Balance, in design, refers to the way different elements are arranged in a design. Two important concepts to keep in mind when talking about balance are visual weight and visual direction.
Visual weight deals with the attention a particular element gets. Visual direction, on the other hand, deals with taking the users to the next most important element in the design.
3 most common types of balance in a design are:
- Symmetrical Balance
- Asymmetrical Balance
- Radial Balance
- Off-Balance
There are lesser-known types of balance that you can explore like Discordant Balance (similar to off-balance) and Mosaic or Crystallographic Balance that you can read about.
One important thing to note is that balance doesn’t only correlate to the scale of your elements; but also the colour, shape, position, texture, etc.
✨ Thank You and Social Links
Thank you for reading this article, it means a lot to me and I hope you found this article helpful. If you liked this article, I’d appreciate a clap or two and just a humble request to follow me on other platforms as I share some short-form content frequently there.
