continued...

 

 

 

 

Define the relationship of every element

Look again at Example 1.2 near the beginning of this tutorial. The most obvious problem is a complete lack of alignment resulting in a page that looks like every word has been thrown on the page. The designer did not create any strong visual alignment. As a result, the page looks confusing and amateur. Elements should never be placed on a page arbitrarily. If there are several blocks of text, align either their left or right edges. If you have pictures or other graphic elements, align those with the text or page edges. If you have more than one graphic, try aligning them with each other.

 

Another advantage of alignment that is evident in the example above, involves grouping. If you want to free up more space to add more elements, alignment can be used to do just that. Take another look at Example 1.2 and Example 6.1 and count the number of titles offered. You will notice that the unaligned flyer has 8 and looks crowded. The aligned flyer has 16 and doesn't look crowded. Actually, it still has space above 'Documentaries' to put more. Amazing, isn't it!

 

 

 

Take a look at the next two examples. Which example gives a cleaner and more professional appearance upon a first glance?

 

Example 7.1

Example 7.2

Backyard Gardens Ideas Hidden From View City Backyards You will find many elaborate havens in the backyards of those living in the city. They bought the larger home to have space and stayed in the city for convenience but one thing still lacks; the relaxing attributes of nature.     Condo Backyards Some condos have gardens on their terrace or if at ground level, a small area in the back. These can be made into an oasis of nature but it may require vertical planting up fences and walls. Don't forget the medium sized water fountain and pond that sits on the ground. Fill it with some fish and enjoy. Townhouse Backyards Those in a small townhouse will often have a little more room than a condo to plant gardens and install small ponds. You will still need to consider planting vertical. Country Backyards These backyards offer the most space but due to the work of cutting large areas of lawn, they are often neglected. Consider using more perennial plants and build a shallow creek running into a small pond.

Backyard Gardens Ideas Hidden From View City Backyards You will find many elaborate havens in the backyards of those living in the city. They bought the larger home to have space and stayed in the city for convenience but one thing still lacks; the relaxing attributes of nature.     Condo Backyards Some condos have gardens on their terrace or if at ground level, a small area in the back. These can be made into an oasis of nature but it may require vertical planting up fences and walls. Don't forget the medium sized water fountain and pond that sits on the ground. Fill it with some fish and enjoy. Townhouse Backyards Those in a townhouse will often have a little more room than a condo to plant gardens and install small ponds. You will also have to consider planting vertical.     Country Backyards These backyards offer the most space but due to the work of cutting large areas of lawn, they are often neglected. Consider using more perennial plants and build a shallow creek running into a small pond.

Example 7.1 is a typical design that ignores the rules of alignment. Some elements are centered, and others are not. As a result, few connections are visible and the page looks disjointed. Be careful of unwanted 'rogue' lines. The red line at left illustrates an unwanted line being created in the newsletter above. The blue rogue line illustrates a second line that jumps out due to the strong fonts and the fact both are the letter 'B'. These lines create a disjointed look for the reader and should be avoided.

 

Example 7.2 adheres strongly to the principle of alignment. All text, headings, and the photo are now flush left. The overall look of the updated newsletter is cleaner and more professional looking.

 

When using flush left alignment, especially in a narrow column, try to make the right edge of your text as smooth as possible. Taking a few minutes to alter your wording can make a big difference as shown in these two examples. Example 7.3 has a very uneven right edge. By altering the wording just slightly as in Example 7.4 the paragraph takes up less space and the right edge is now straighter.

 

If space is a premium and extra line spacing is not an option, you can distinguish new paragraphs with a small indent, but only use two spaces and not five. Paragraphs under titles do not need to be indented.

 

Example 7.3 illustrates the incorrect method for indenting and the effect it has on the look of the paragraph. Example 7.4 is easier on the eyes to read.

 

 

 

 

 

 

There are two approaches when combining text and photos. The one you use depends on the relationship between them. If the text beside the photo is describing the photo then it is often better to align the words along the hard edge of the photo, such as Example 8.2 illustrates. If the relationship is not as close, you can use the method that Example 8.1 illustrates.

 

Avoid trapped space

When text is not aligned with the edge of a photo a visual conflict called 'trapped space' is created between them. Look again at Example 8.1 and you will notice that the ending of each text line is staggered on the right side. That space makes it clear to a reader's eye there is not enough room to finish each line. As a result, both elements are pushed apart instead of pulling together. If in Example 8.1 you wondered if the text was talking about the photo, in Example 8.2 there is no doubt it is.

 

 

Take another look at Example 8.2 and notice that the use of alignment created blank space in the top left corner. Don't be afraid of extra blank space and instead use it to give your viewer a place to enter into your content. If this space was filled with more content, it will make it more difficult for the viewer to see a natural opening. In Example 8.1 the space is 'trapped' between the title and photo so it does not have the same effect.

 

 

 

Learn from other quality designed print material such as magazines, books, advertisements.

 

 

 

Every element on a page must be deliberately placed so that it has a visual connection with other elements on the page. No matter what style you want to achieve, alignment is vital to creating a professional look. When all the elements on a page are visually connected the page looks unified.

 

Alignment is the key to organization and creating a page that is interrelated, connected, and unified. A well aligned page takes away the viewer?s uneasy feeling when reading your page. A unified page is appealing to viewers and draws them into reading your content.

 

You much consciously place every element on your page. Always find something else on the page that it will be connected to before you place each element. Create strong invisible lines between different elements of your content. Remember that even elements that are far away can be aligned to each other.