10 Web Design Tips - Part 2

Tuesday, October 9th, 2007

Categories: Web Design

This is Part 2 of the short series on Web Design Quick Tips. You can find Part 1 by clicking here. In Part 1, the 10th tip suggested following the basic principles of design to strengthen your work. I’ll go into each of those in-depth. Each of these features can unconsciously make a design good. We’ve all met people that know good design when they see it and can’t exactly pinpoint why. The basic principles of design pretty much take care of that.

1 - Contrast

If you observe any design principle and completely forget about the others, observe contrast. Contrast is, in my opinion, the most noticeable. Contrast is the difference between two elements; the more difference there is, the more contrast there is. Here are some elements you can use to boost contrast:

Big elements and small elements
Light colors and dark colors
Serif (Times New Roman, Georgia) and Sans-serif (Arial, Verdana) typefaces
Thick and thin (bold and normal, thick lines and thin lines)

2 - Negative Space
It’s not uncommon for amateurs or clients to want to fill up the space on a design. They often see negative (or white) space as unused potential. You need to explain to them that viewers need space to breathe to not feel over-burdened when looking at your website.

Good places to throw in negative space include thick margin, bigger spaces between headers, and space around your wordmark (logo) for it to breathe.

3 - Balance
Balance is how your website tends to feel when someone looks at it. That’s probably not the best explanation. How about looking at your design and thinking about whether it feels lop-sided? One thing to note is that you can have an asymmetrical design and still have balance, occasionally, it depends on your content or navigation on the right side to balance out heavy graphics on the left.

Some things you can do to help balance your website are to determine how you’ll be aligning images in your content section and to center your website horizontally on the page.

4 - Repetition
Repetition can be used to describe the repetition of design elements. This can be through the repetition of specific graphics, line widths, general shapes, etc. It’s also worth noting that Repetition and Contrast need to be balanced effectively to truly have a great design.

5 - Proximity
Proximity refers to the distance between design elements. One of my teachers said it best when she said: “If you’re going to move it there, either don’t do it at all, or go all the way”. If design elements (or anything for that matter) are too close together, it creates a “tension spot” that makes it unconsciously uncomfortable to look at. Allow me to illustrate my example. You have the following 3 images, each with 2 elements.

Proximity Web Design Example 1 Proximity Web Design Example 2 Proximity Web Design Example 3

One of these is uncomfortable to look at. Can you guess which one? If you guessed the first one, you’re right. The tight spots between the objects and the border create tension for the viewer.

Proximity Web Design Example Why It’s Bad

6 - Unity
Unity is how well your website appears as a single unit. With Content Management Systems (CMS) being the new hot web item, it’s not uncommon to exercise unity across your website or on a single page.

A good guideline to follow is that if you can slice through your website (anywhere) and both results look entirely different from each other, you might have a problem worth addressing.

7 - Focal Point
Your website needs a focal point just as much as a print ad needs one. When a newcomer looks at your website and has a feeling that he’s direction-less, chances are, he’ll be navigating to a different site where he’ll have visual direction.

Contrast plays a big role in creating a focal point through the use of big images and big headers. Also, this is harder to explain, but if your line flow generally points to the same element on your website, that helps in creating a focal point. Here are some visual examples that help illustrate what I mean:

Web Design Focal Point 1 Web Design Focal Point 2

That’s all for applying design principles to web design. But here are 3 additional tips.

8 - Originality
There’s something to be said about originality, you will get noticed. By no means do I mean you should blatantly avoid design principles because you want to be a pioneer, but try to design something new, something original. If that doesn’t work out, the most you’ll have lost is your time, but if it does work out, it can me a whole lot more website visitors or a whole lot more clients.

9 - Love what you do
Like any other job or hobby, you need to truly love what it is you do. If you don’t have a passion for web design, it’ll show in your work. If you simply don’t care what the client thinks or wants, it’ll show in your work.

10 - Never Stop Learning
Web Design, like many other types of design, has fads. You may be the type of person that wouldn’t touch a fad with a ten foot pole, but even if you won’t do that, you still need to understand why it’s a fad and why it’s working for a lot of people right now.