CONTACT US          •          ABOUT THE HUB

Hub Studio

  /  Blog   /  Graphic Design 101: Balance and Alignment

Graphic Design 101: Balance and Alignment

By Danielle Provencher, Graphics & Web TFEE Student with the Hub

I want you to think back to when you were a child: you drew, laugh, played and coloured on the walls without hindrance – you were just a creative being full of limitless imaginative ideas. There’s no chance that a child questions their “creative ability” or thought-process, they are entirely lost in the process without second-guessing their ability. I truly believe we are all creative beings.

If you follow the basic rules, I promise you will be on your way to becoming a great designer in and out of the classroom.

Alignment

Alignment is very important to keeping your documents and overall design pieces clear and cohesive. Without proper alignment, elements and your overall piece can appear disorganized and disarrayed. It is so important to understand how you can properly align elements so that everything appears cohesive.

When elements are aligned, composition looks elegant and trustworthy. Good alignment is invisible. When elements are out of line, it is noticeable.

I want you to imagine this: every time you are observing, studying or viewing a new piece of design (whether you are critiquing others or your own), imagine invisible lines running across the page around every element. If you were to align the “margin” of the page with a ruler – do elements line up accordingly? This is a great way to tell if proper alignment is being used.

Good alignment is invisible: It’s what makes everything look cohesive and interconnected. You can tell when a “grid” is being used even if the lines aren’t apparent: everything lines up and all of the elements are placed in a fashion that is appealing to the eye.

You can actually use grids, as well as lines to ensure proper alignment. The next time you are working in PowerPoint or InDesign – simply drag lines from the “ruler” surrounding the edges of the document to ensure proper alignment. It can’t be emphasized enough how critical it is to understand and use a design grid – it ensures that everything is emphasized properly. Working with a grid ensures that every little thing on the page is put in relation to something else to produce logical and visual harmony.

As you can see, grids are very important to ensuring that alignment is properly used for visual clarity.

Having said that, you don’t have to use grids every time you create something. However, it benefits you a lot if you understand how and why grids are used, particularly when typography is involved. Sometimes breaking the grid is a good thing, it can look free, intentional & playful. A good rule of thumb is to always make sure you distinguish your most important piece of information.

For example, this column has a title that fits nicely into two columns, there are two nice columns and all 3 are well-aligned. This is an example of how you can use alignment in practical design. This is an example of how you can use alignment in abstract design. It is aligned in a way that dynamism is created. The title is aligned to the top, the column titles define the width. It explores vertical and horizontal movement in a creative way.

Balance

Balance is another very important principle to keep in mind when designing because it adds stability, structure and creates emphasis on important pieces of your design. Balance can create a good arrangement as well as achieve a certain look or feel.

First, we will look at symmetrical balance. Symmetrical balance is when there is a mirror balance image: if you were to draw a line down the center, all of the elements reflect on both sides. It creates a strong sense of structure:

Symmetrical balance: all of the elements on one side of the page visually “balances” out with the other side of the page.

To use symmetrical balance, make sure all of the elements are of equal weight on both sides of the screen. Use symmetrical balance when you want to create a sense of structure, stability and strong balance.

Secondly, we will look at asymmetrical balance which is very different.  Asymmetrical balance happens when smaller visual elements are balanced by larger visual elements on the opposite side of the screen. There is typically no structure in asymmetrical balance on either side, it happens when a smaller element “visually balances” out a larger element on another side.

Asymmetrical balance: when smaller elements on one side of the page balances out with larger elements on the other side of the page.

Asymmetrical balance can be used when you want to create a more casual look. It creates visual tension, dynamism and captures the visual attention.

Understanding both of these types of balance will help us to understand when to use the correct type in different circumstances.

Thanks for reading!

Was this article helpful?

Share this:
Post a Comment