Alignment refers to the placement of elements on a page in such a way that a visual connection is established between them. One of the easiest and quickest ways to turn a messy unprofessional page into a designers masterpiece is to use Alignment.

 

 

 

Example 1.1

Amateur designers often insert content wherever it will fit on the page with little regard to how one element aligns with another. This approach becomes a visual distraction that results in confusion.

 

Example 1.1 illustrates this problem clearly with an actual website we discovered. Instead of the elements pulling together into a unified message, this page is a confusing mess that repels your eyes.

 

When the viewer cannot distinguish a relationship between elements, it hinders them from prioritizing information they are looking at. Content will appear cluttered and confusing. The use of alignment acts like glue that builds relationships between elements and gives the reader a way to interpret what they are seeing. Luckily, alignment is generally easy to fix.

 

In the Proximity tutorial we discuss how related elements are grouped together and unrelated elements are spaced further apart. Alignment is the principle that builds relationships between these seemingly unrelated elements, so they all function with one clear purpose. When elements are aligned correctly, an invisible connection is established between them. The reader?s eye interprets this connection to mean that although they are separated by space, they are still connected in some way.

 

Take a look at the next set of flyers arriving in your mailbox and you might see ones like the two examples below. Inexperienced designers sometimes create flyers such as these, giving little thought to alignment. This tutorial will show you how to fix this flyer so it looks professional and even gives you extra space to add more elements without looking cluttered.

 

Example 1.2 No Alignment Elements are scattered all over the page filling every space available with no thought to alignment. The result is a cluttered mess. Your eye barely has a place to start reading and cannot make sense of it.

 

Example 1.3 Ineffective Alignment Not the best fix but still an improvement over the previous example. Most of these elements are center aligned which results in a dull uninspiring flyer. Notice that the outer edge of the spotlight photo is not aligned to any other element. The title gives your eye a place to enter and start reading but then wanders all over the page trying to prioritize what is the next important element. We will show you what an effective flyer looks like at the end of this tutorial.

DVD Sale July 1st Weekend Multi-Media Magic Store 166 Forest Ave Hamilton, Ontario Phone: 905-555-0129   Music Santana Beach Boys Marvin Gaye S Club 7   Movies Spider-Man 3 Transformers 16 Blocks Take The Lead   TV Series CSI: NY Season3 21 Jump Street Crossing Jordon Rat Patrol   Documentaries Gang Wars 100 Years of Flight Mafia War Lords Victory At Sea

 

The fun of alignment is that it is a hidden principle to the untrained eye, but once you understand it, you will see it everywhere! Thankfully alignment is one of the easiest principles to apply and any alignment often pays immediate dividends.

 

 

 

This is the most common form of alignment because most people learn it in school at an early age. It is very organized and secure because it feels traditional, familiar, and comfortable for the viewer to read and understand. It is also the easiest to create because it is the default alignment in most computer programs, including Web browsers.

 

It is called 'Flush Left' alignment because the text is anchored on the left side and extends out to the right side where it is not aligned.

Example 2.1	Example 2.2
This is an example of flush left alignment on a page. The photo, however, is aligned to the right which looks a little out of place especially because the uneven text line to the left of this photo is not straight and seems to visually push it away.	Every element in this example is flush right which looks interesting but is a little more difficult to read than flush left

This is a less commonly used alignment and feels less traditional to the viewer. It can present some problems for you when you want to use bullet lists which by default are left aligned.

Center alignment is when an element on a page is visually centered in relation to another element on the page. It could be centered vertically or horizontally. It could be a photo, words, paragraphs, boxes, or lines that the elements are centered with.

 

When paragraphs are center aligned like this one, they have an invisible line down the middle and words extend out from that center point. This creates a soft edge on both the right and left sides of the paragraph because they are not as hard and straight as the edges of other alignment methods as is the case in the paragraphs further down this page.

As a result, long paragraphs with soft edges are more difficult to read.

since your eye has to keep finding it's

place in long sentences.

If however the center aligned content

is short, it can be an effective method to use.

 

Center alignment is the most common alignment beginners will use to add importance to their content because it seems like a safe method for adding style and emphasis to their designs. However, the results are often boring and amateur, looking more like a wedding invitation. Flush left and right alignments provide much stronger connections and can quickly give your page a professional looking layout.

 

NOTE: Centered alignment is not a default alignment which means that you will have to use the Center alignment icon in your SiteApex editor.

 

Example 2.3	Example 2.4
This is an example of center alignment on a page. Everything is balanced from left to right with an invisible anchor running down the center. It is difficult to read and creates a shape on the page that, if not intentional, is often a distraction.	This is an example of what happens when a photo is included in the center alignment which unintentionally splits the content in half and looks out of place.

 

Justified alignment is a combination of both left and right alignments creating a squared-box-like edge. This option looks more formal than other layouts. Newspapers and magazines will often align their content using this option.

 

This alignment works by adding additional spacing between words, and sometimes letters, to stretch the text from side to side. As a result, this alignment requires extra planning because areas that are too narrow for the text may cause large gaps between words making it appear disjointed.

 

You can try using it, but depending on the margin width, font size, and length of words, you may need to use another alignment.

NOTE: Justified is not a default alignment which means that you will have to use the Justified icon in your SiteApex editor.

 

 

 
When elements on a page are not aligned properly, the reader's eyes will instinctively see a problem even if not immediately recognized. In Example 3.1 some elements of the business card are flush left, some are flush right, and some are centered, however, not one element is visually aligned to any other. As a result, the text placement looks unplanned and disjointed.

 

In Example 3.2 the difference is quite amazing. By simply aligning the text, we can make it look so much better. Instead of the text looking like it was thrown on the card, it now looks well laid out. This may not be the nicest looking card, but it is a big improvement over Example 3.1 next to it.

 

 

Of course, Example 3.2 is not a great looking business card, but it shows you how alignment can help it look better. The company name font was enlarged so it is now justified on both the left and right side of the card. This visually completes the connection between elements that are above and below it.

 

 

 

Center alignment is more difficult to master but is effective when used properly. When centering text you will be tempted to keep the lines balanced in length so the left and right edges are as straight as possible, however, this is the wrong approach as you will see in the following examples. The key to using center alignment is to make it obvious. Emphasize the alignment and experiment with colour, font, style, and graphics.

 

Example 4.1   Ineffective Centering This is a center aligned announcement that is dull and ineffective because nothing stands out. It is hard to tell if the alignment is in fact centered or is not quite left or right aligned.	Example 4.2   More Effective Centering By deliberately making it look centered, you improve the effect and now important text such as '50%' and 'Sale!' stand out a little clearer.
You can now save 50% during our Autumn Sale!	You can now save 50% during our Autumn Sale!

 

Example 4.3   Effective Centering By changing the font style and size of these two words the centering has a lot more visual impact.	Example 4.4   Effective Centering Using color enhances the centering effect on the words 'SAVE 50%' because now it looks more obvious that it is centered both vertically and horizontally.
You can now save 50% during our Autumn Sale!	You can now SAVE 50% during our Autumn Sale!

 

Example 4.5   Ineffective Centering You have to be careful when adding a border to prevent the text from looking trapped like it does here.	Example 4.6   Effective Centering Enlarging the border to create more space inside is more pleasing to the eye.
You can now save 50% during our Autumn Sale!	You can now save 50% during our Autumn Sale!

 

Example 4.7   Effective Centering If you want to use narrow margins, create more space between the lines and deliberately make it look long to compliment the width. Do not try to make it look wider too.	Example 4.8   Effective Centering Center alignment is also helpful when trying to emphasize a wide design. Try experimenting with other ways to make center aligned text more exciting and dramatic.
You can now save   50%   during our Autumn   Sale!	Save 50% During Our Autumn Sale!

 

The 3 most important words we focused on in the previous examples were; Save, 50%, and Sale.

 

 

 

Experiment with using both flush left and flush right alignments on the same page. It can be a difficult principle to apply so the page looks balanced, but it is often worth the effort to add interest. If you cannot find a way to connect your elements, it is better not to use both alignments on the same page to avoid a disjointed look.

 

 

Example 5.1   In this example, most elements are not aligned with each other. The top and bottom elements are aligned with the edge of the page but not aligned with any other photo or text element.   The authors names are left aligned to the photo but not aligned with any other element, and therefore look out of place. They are also not aligned with either the top or bottom of the photo which would have helped.   Another problem is the brown box which cuts the page in half instead of framing the words.

Ineffective Alignment Backyard Gardens Ideas Hidden From View Written By Lily Flourbed and Phil Whole     Discover the hidden ideas people have designed in their private backyards which provide them with an oasis of relaxation

 

Example 5.2   In this example, left and right alignment is used more effectively.   Notice too that the top and bottom edge of the photo is lined up with the top and bottom edges of the title and slogan.   With the vertical brown box on the left, it anchors vertical alignment and differentiates the text on either side. The right side text is only about the article itself.

Effective Alignment                         Written By Lily Flourbed and Phil Whole   Backyard Gardens Ideas Hidden From View                       Discover the hidden ideas people have designed in their private backyards which provide them with an oasis of relaxation

 

Example 5.1   In this example, most elements are left aligned except down the center of the page.   The brown boxes now frame the page and add emphasis to the descriptive text in the middle.   The authors names are actually right aligned, while the other elements are left aligned.

Effective Alignment Backyard Gardens   Ideas Hidden From View     Discover the hidden ideas people have designed in their private backyards which provide them with an oasis of relaxation         Written By Lily Flourbed and Phil Whole