Part
I: Layout
The first installment focusses on the layout and structure of your page and it's importance to the user experience. Included are some sample layouts and useful design tips.
The first installment focusses on the layout and structure of your page and it's importance to the user experience. Included are some sample layouts and useful design tips.
The layout of your page, as we touched on just now,
is very important. It's a good idea to plan your
layout before you start actually populating your
page, much like someone planning a magazine layout,
as this will ensure you allow the proper amount of
space for everything.
It's important to make sure you don't overcrowd your page with heaps of text, images and assorted widgets, leaving the viewer confused, and unsure what to focus on in your jungle of content. It's better to use more space and have things neatly laid out, than to cram everything into a small space. The key is to allow lots of clear space in between things. This may seem like a waste of space initially, but in actual fact, it makes a huge difference to your page. The apple website is a textbook example of making use of white space to emphasize content, and allow plenty of room for it to breathe, allowing the user to browse the page easily and logically, without wondering where to look next. (example). This technique does not simply rely on white space however, it can utilize any colour, even black, and the effect will be the same.So it's really important to leave appropriate margins between things. Here are some guides to laying out your page, and the size of margins to leave between headings and body's of text etc... Notice the difference the extra space makes!
The title and slogan
are too close and have no space around them
The Heading and
subheading run into each other and the body text
has no margin above it. The effect is a messy and
ugly webpage.
The line height of
the body text is too close and the text is cramped.
Some users may find it hard to read.
The above image illustrates the wrong way to lay out a very simple webpage. We will go on to more complex examples in a minute, but this illustrates the importance of layout even in the most simple of designs. Below is an example of the same page with correct margins and spacing.
There is more space
around the header and slogan, giving a less
cluttered feel
Plenty of space
between the header and subheader emphasize the
importance of both and make them more clear.
A larger line height
and a margin at the top of the body text makes all
the difference and the text now seems calmer and
easier to read.
So this demonstrates the importance of layout, and
this applies both horizontally and vertically, it's
important to leave a spacious margin between the
sidebar and the main body of your content. We'll
take a look at some sample layouts on the next
page.
Fig
B
Fig
A