Patrick Samphire (psamphire) wrote,
Patrick Samphire
psamphire

Websites for Writers: Principles of Web Design - Part 2

Principles of Web Design - Part 2

Okay, continuing on talking about some principles of website design. In the last entry, I talked about Contrast and Repetition. Now I'm going to talk about Alignment and Proximity.

As always, all the previous entries in this series are here: http://psamphire.livejournal.com/tag/websites+for+writers.

Alignment

At its simplest, alignment is just lining things up.

When you're putting elements on a page, you should never simply place them arbitrarily. You should be trying to create visual connections with the other elements on the page to produce a feeling of unity.

One way you can do this is by aligning the elements. Look at this website: http://www.wakeinteractive.com/. It's a fairly simple design, just three columns, but every element is lined up with other elements. Even where elements are indented within the columns, they are lined up too. It produces a coherent and clean effect.

This site, too, uses three columns, but of different widths: http://www.designingthenews.com/, and lines up the content in a similar way. In both cases, the structure of the page is clearly demarcated by the way they elements are lined up. They are very easy to scan quickly.

Elements don't have to be physically next to each other in order for you to align them. And, in fact, it's a good idea to try to align elements that are some distance apart. Remember, the idea is to unify the entire page.

A more sophisticated way of achieving alignment is through use of a grid. A grid basically consists of blocks of a certain size, say 40 pixels wide, possibly with a small gap (say 10 pixels) between each block. You then try to fit each element into a certain number of blocks. Some elements might be three blocks wide, others two, others five. Whatever. By mixing these up slightly, you get a less 'columnar' look to the site, but you still obtain strong alignment and the sense of unity and structure that comes with it.

Here are some sites that make use of grid layouts, at least in part:

To see a particular, currently-popular grid scheme in action and to see how it works, look at 960.gs.

Of course, if you stick too rigidly to any grid or columnar layout, you can risk making the site blocky, square and over-formal. It's easy to compensate for that, though, by 'breaking out' of the grid or columns. Look at this site: http://theresumegirl.com/. It's got a strict three-column layout, but the angled photo in the middle and the sticker in the top left break out of the rigid lines and soften it.

Text Alignment

Whatever goes for elements of the web page goes for the text in it, of course. You want to line up your text with the edges of other elements. However, with text, you should only align one edge of the text.

Choose whether the left or the right side of your text will be flush with a straight edge. In other words, whether it should be left- or right-aligned. Normally, you will choose left-aligned, because that works more naturally when reading from left to right.

You should normally avoid aligning some text on the left and some on the right, as this tends to look messy, although a good designer can manager it if done carefully.

You should certainly never 'justify' text (have it lined up on the left and right in a rectangular block). This works fine in print, where the space between letters can be adjusted. But on the web, it is ugly and very hard to read.

Likewise, centring text doesn't work well on the web. Not only can't you align it with any other element, but having two ragged edges is difficult to read for any prolonged period.

The exception to the centring guideline is for very short bits of text, such as headlines or brief quotes. But be careful even then, because they won't be aligned with anything, and they may not seem to fit with the rest of the page.

Remember, aligning elements on a page gives it unity, clarity and ease of use.

Proximity

Proximity in design is a fairly simple concept. If two elements are related, put them close together. If they aren't, separate them.

This gives an immediate visual clue as to how everything fits together.

If you put unrelated elements together, it can be confusing, as can separating elements that are supposed to be linked. Making everything the same distance apart is the worst of both worlds, as the page is then an intimidating, undifferentiated mess.

Look at the way the titles and subtitles are grouped together on this site: http://mattbrett.com/. There is no doubt that they belong together.

You don't have to be as extreme as that, as this site demonstrates: http://www.dakeat.com/pages/services.php. Here, although the headings are slightly further from the text, it is still clear how it fits together. The same is not true, however, on another page on the same site: http://www.dakeat.com/pages/work.php. It is not immediately obvious here which images go with which titles. Closer proximity of the related elements and more space between the different examples might have made it clearer.

Summary

There are plenty of other design principles, and plenty of ways of looking at websites. Far too many to cover here, in fact. However, these four basic principles: Contrast, Repetition, Alignment and Proximity can be used to assess how well a website design works. Any of these principles can be violated to achieve desired effects. But if you ignore all these principles, your site will be a mess.

In the next entry, I'm going to talk in detail about a few specific design elements and choices that are either good or bad ideas. See you then.
Tags: web design, websites for writers
Subscribe

  • 5 cool things

    Friday is the day in which everyone posts five cool things, right? (Okay, I know that's completely untrue, but you gotta start somehow...) 1. Steph…

  • Clarion West Write-a-thon

    So, I have, after some peer pressure, signed up for this year's Clarion West write-a-thon. Many (most? all?) of you know about this, because plenty…

  • Update, and new website!

    Patrick, I hear you ask, what have you been up to recently? Well, since you ask, I shall tell you. One thing I haven't been doing, obviously, is…

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 2 comments