Website Design : User Interface Design - Part 3

Go back to Website Design : User Interface Design - Part 2

Graphic Design Principles

 
Websites are for the most part built using a “grid system” layout strategy. A grid system carves up the page into orderly columns and rows. Very rarely will you see a web page that throws a bunch of content haphazardly on the page (as in above), or that has content lined up diagonally. Not only does the very nature of HTML and CSS favor a structured grid, we naturally do too. We like a structure offered by grids - it helps us decipher the page, know where to focus, and remember where to find things.

Establishing a visual hierarchy

Of paramount importance is establishing a clear visual priority so that users know where to start. A page where everything is given the same relative importance forces the user to default to scanning the page himself, from top to bottom and left to right (for western cultures). Compare the two diagrams in below.

 
Both figures have the same number of elements, but the one on the right visually guides users where to focus/start. It also groups the page into three main regions of focus. By breaking up the page into three regions - a large one, a medium one, and a small one - even a page with lots of content suddenly becomes much easier to digest. I call this the “big, medium, small” strategy.

If you go to Apple.com, you’ll see the big, medium, small strategy illustrated perfectly and consistently. Grouping and nesting content together go a long way towards enhancing the usability of a page.

Grouping and nesting

Not only does breaking up the page into regions in which you can group content make it more legible,
grouping and nesting content and interactive elements can give strong clues for their functionality.

For example, as above illustrates, just grouping a series of plain but similar-looking interface elements together in one graphical unit can give them a clickable appearance, even if the individual graphics within the group don’t look clickable. Above also shows that you can show relationships by nesting content. Because Shoes and Socks are indented under Products, you know they are subsections of Products and not other top-level sections.

Use of color

Many companies already have a brand style guide that can inform the color choices you make on their website. Even so, here are a few guidelines to keep in mind when designing your user interface:

• Lights and darks.
Pages that are too washed out or too dark are hard to read on a computer screen, and some PC monitors will display pages much darker than you designed them. While dark backgrounds with light text have a dramatic effect, this approach is only good when you have a limited amount of text because reversed-out text is hard on vision. If you have a lot of content, it’s best to stick with a light colored background and choose a dark color for the text.

• Saturation.
Saturation is how rich and bright a color is. If you’ve ever used Micosoft Excel, the default colors to choose from are all very saturated. Avoid using saturated colors for either your backgrounds or for your text. Saturated colors have a tendency to “buzz” on a computer screen, making the page not only uncomfortable to look at, but hard to read.

• Text color.
I never use pure black and rarely pure white for long copy blocks. Instead, I’ll choose a dark gray or an off white to soften the appearance of the text, making it easier on the eye.

Use of fonts

Fonts have a lot of personality, and you need to be careful choosing the right fonts for your site. Just as you choose an appropriate color scheme, you should also apply circumspection to fonts. Try using a few different fonts to give your site some extra vibrancy, but not so many that the site looks schizophrenic.

As above shows, use one font for headlines, another for captions, and yet another for the body text. Above also displays a good mix of lights and darks, making the page easy to read and neatly presented.

Go back to Website Design : User Interface Design - Part 1