Design 101 – C.R.A.P. over Crap – Part 3

The third principle in the C.R.A.P. series is Alignment. This is such an important rule to remember when creating your layout or adding content to pages. And the good thing about it is – it’s super easy.

ALIGNMENT

Most people have an idea of what alignment means. You may think of left-alignment, center-alignment, or right-alignment. That is part of what this principle entails, but it also refers to spacing as well. You want to make sure that all the elements of your website are evenly spaced apart, and are as symmetrical as possible. This again goes back to creating a cohesive whole that is appealing to the eye. Check out the example below for an illustration of this principle.

Take a look at the example below. There are several C.R.A.P. problem areas here, but the alignment issues are particularly obvious.

1. The agent’s name and contact info are aligned sporadically within the white upper section. They should be centered, and the font size, weight and colour should be more consistent (see Part 2: Repetition for more on this). The phone numbers below are squished all the way to the right side; they should also be centered. Additionally, each line of text should be spaced evenly apart.

2. The banner itself is not filling the entire width of the layout, killing any hope of symmetry and appearing ill-fitting (something a site visitor is bound to notice). Choosing a different, wider banner is a quick fix for this.

3. The company logo has been added over top of the banner, but it hasn’t be positioned very well. It’s touching the bottom of the banner and is not quite centered. When placing logos, ensure you leave equal space around all edges. In this case, I would try to precisely center it, or align it in the right-hand corner (with appropriate padding around each edge).

4. The red border around the layout does not fit the width of the site; it does not extend to the left hand side. This is something I see a lot. It’s easily evened out by increasing the width of the Frame section in the Template/Layout area of the website editor.

5. The padding around the agent’s portrait is uneven. On the top and right sides there is more space than on the left and bottom. All sides should have the exact same amount of padding.

The above points highlight just a few ways to fix up a site that may be messy or outdated. Double-checking the alignment on your website can do wonders for the overall effect. You can change the alignment of headings and body text on your page by going to Template/Layout > Change Content Style in the website editor. Generally headings look good centered or left-aligned. Body text, however, should always be aligned to the left unless there is a specific need to align it otherwise. Try it yourself!

Next week, the conclusion of the C.R.A.P. series - Proximity.

Authored by: Tara, Client Relations