jump to navigation

webdesign

9 Essential Principles in web design

Web design can be deceptively difficult, as it involves achieving a design that is both usable and pleasing, delivers information and builds brand, is technically sound and visually coherent.

Add to this the fact that many Web designers (myself included) are self-taught, that Web design is still novel enough to be only a side subject in many design institutions, and that the medium changes as frequently as the underlying technology does.

Today we may put together 9 principles for a good Web design. These are taken from alot of reading resources. Obviously, we have lots of disclaimers: rules are made to be broken, different types of design work differently, and we don’t always live up to our own advice. So please read these as they are intended–just some observations we share.

1. Precedence (Guiding the Eye)

Good Web design, perhaps even more than other type of design, is about information. One of the biggest tools in your arsenal to do this is precedence. When navigating a good design, the user should be led around the screen by the designer. I call this precedence, and it’s about how much visual weight different parts of your design have.

A simple example of precedence is that in most sites, the first thing you see is the logo. This is often because it’s large and set at what has been shown in studies to be the first place people look (the top left). his is a good thing since you probably want a user to immediately know what site they are viewing.

But precedence should go much further. You should direct the user’s eyes through a sequence of steps. For example, you might want your user to go from logo/brand to a primary positioning statement, next to a punchy image (to give the site personality), then to the main body text, with navigation and a sidebar taking a secondary position in the sequence.

What your user should be looking at is up to you, the Web designer, to figure out.

To achieve precedence you have many tools at your disposal:
Position — Where something is on a page clearly influences in what order the user sees it.
Color — Using bold and subtle colors is a simple way to tell your user where to look.
Contrast — Being different makes things stand out, while being the same makes them secondary.
Size — Big takes precedence over little (unless everything is big, in which case little might stand out thanks to Contrast)
Design Elements — if there is a gigantic arrow pointing at something, guess where the user will look?

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: