Using the grid to achieve balance

- [Instructor] Have you ever noticed how some designs seem almost perfectly balanced, as if they were created following some kind of underlying system of some kind? The next principle of design we'll explore is balance. In digital design, a balanced composition, whether symmetrical or not, is simply more aesthetically pleasing to look at. Thus, we can say that balance happens in a design when the elements, as a whole, have a feeling of equality of weight, attention, or attraction. In other words, you can enhance the balance in a design by paying attention to the alignment, distribution, and placement of various shaped, colored, and sized objects. To illustrate this idea, let me tell you a personal story. I once had a design student share a simple website mockup with several objects and text sort of scattered randomly in the center above the scroll. So here's a rough depiction of that layout. The design clearly needed some help with typography, spacing, and alignment. When I asked the student if they had used some kind of logic to consider the placement and arrangement of those elements, they replied, "No, I just put them there." And then there was an awkward pause, so they followed up with another question. "Why, and does it matter?" "Yes, of course it matters, (laughing)" I replied. "It matters very much." To achieve balance in a design, one must consider the placement, alignment, spacing, and distribution of every single object, including text, photos, illustrations, patterns, backgrounds, buttons, menus, decorative elements, everything. Often, people think of balance as being perfectly symmetrical, where two same-sized elements are placed equidistantly from each other within a defined space. Contrary to popular belief, balance does not mean the same thing as symmetry. Rather, symmetry may be a component of balance, but balance can also be asymmetrical with objects in dissimilar sizes, shapes, and colors. In fact, what you want to attempt to achieve with balance is an overall sense of formal harmony. Conceptually, it might help to think of balance in terms of physics. Consider a seesaw with two equally sized people on either side. That is one kind of balance. But you may also have balance with two smaller people on one side and one larger person on the other. You can even have balance with one small and one large person on either side, so long as the larger person is closer to the middle to create an equal distribution of weight within the composition. Balance is actually easier to achieve in a design when you use whitespace with intention. Try not to feel compelled to fill all the spaces with information. Leave some breathing room. Squint and see if the composition looks balanced. If not, keep moving or resizing your design's elements, paying attention to the shape of the gaps, until your layout is balanced. Now, depending on how you found your way into the world of digital design, you may or may not be familiar with the concept of designing with an underlying grid system. A grid system makes it easier to create a balanced layout, regardless of the number of columns there are in any one row. UI/UX designers often work with a 12-, eight-, or six-column grid, depending on the company standards and preferred application, of course. When using a grid, the gutter space between each column can be set to be unified across the entire grid, whether you have one 12-column section, a three-column module, or some other asymmetrical layout row by row. This helps keep everything within the grid well balanced and neatly organized. Now, this isn't to say that you must strictly follow the grid system to achieve balance in your web layouts. On the contrary, there are so many ways to make a balanced layout, like working with the golden ratio, the rule of thirds, linear perspective, and proportion. What about your menus and your web navigation? Are you paying attention to the balance there too? Is your alignment consistent? Do you prefer menu text that is uniformly center-aligned, left- or right-aligned to the parent container? Befriend the align and distribution tools in your software programs, and use an underlying grid to ensure your menus and navigation are balanced with intentional alignment. Balance also involves even and deliberate measurements and distribution of shapes within a layout. Consider symmetry and asymmetry. Symmetry helps keep good balance, but it's not necessarily the best solution for all designs. Remember too that dark can be balanced with light, and asymmetrical balance creates an interesting tension that draws the viewer into a design. Darker shapes tend to appear heavier than lighter shapes, which will impact the placement of objects as you strive for balance in your own designs. How will you apply balance in your next design? Using size, distance, and shape intentionally helps you establish order and symmetry. And by carefully aligning and distributing elements in your digital layouts, you too can create beautifully balanced designs.