Essential Principles for a Well-Designed Website

Written by: Beth Machek (Sr. Designer at Clickbooth.com)

Good design is where form meets function. It’s a fine line, but a well designed website is one that is both visually interesting and user-friendly. So with that being said, I have put together a few principles that should help guide you in the right direction when designing your next website.

Know Your Audience
What’s the purpose of your website? Is it to let people know how to contact you? Is it a place to showcase samples of your work? Are you selling a product or service online? Once you know what your website is going to do, you have to pinpoint your target demographic. Who’s your ideal audience? A little research goes a long way. Determine what your visitor is looking for and tailor your site to them. Graphics that will appeal to your audience, content that will speak to them, and colors that will attract them are all very important factors to consider before you begin to design your site. The closer you are to keeping everything ‘on target’, the better the chances of achieving your site’s goal.

Since their target audience is children, Toys R Us incorporates a very colorful and vibrant color scheme with playful typography.

Lead The Eye
You can lead the user around your web page to the most important messages with the use of a variety of tools, such as whitespace, position, color, contrast, size and graphical elements. Let’s use logo placement as an example. On most websites, the logo appears in the upper left corner of the page. It also is usually the first thing people see. Why? Because people read from top to bottom and left to right. The eye naturally follows a ‘Z’ pattern. Thus the upper left corner is the first place a person will look. Another example would be the use of contrasting colors to draw the eye to important information. For instance if you choose a light subdued color palette for your web page, you can grab the user’s attention by using a bright bold color like red for the call to action or headings. This will draw a person’s eye right to that element.

OnWired.com uses blocks of color to guide your eye through sections of information from top to bottom.

White Space is Your Friend
White space isn’t necessarily white. It is any empty space within your layout. It is the absence of text and images. White space gives balance, proportion and contrast to a page.

We seem to have this innate impulse to fill every inch of available space. We don’t want to waste any empty space. The most crucial advice I can give you is to fight that urge with every ounce of will power that you possess! When you cram everything but the kitchen sink into your web page, the most important elements of your message get lost. You end up overwhelming and confusing your visitors.

Proper use of white space provides visual breathing room for the eye and breaks up text and graphics. White space also includes line space and the space around elements.

This site uses a light background, wide leading and plenty of space between the main elements like the side navigation links, text, and graphics to help guide your eye through page. Even the logo is a perfect example of white space with the wide letter spacing.

Typography
Most people don’t read every line of text on a web page. They scan from one point to another searching for the most important information. By creating typographic contrast and flow, you can emphasize certain text and guide the reader’s eye to the important points of your message.

Here are a few methods you could use to make your message pop:

• Size: Important text, like headings, should be a larger font. Less important content can be smaller, but be sure that the text size is large enough to read.

• Color: Bright colors on a light background create emphasis and lighter or faded colors minimize less important text. You can also use color to distinguish between navigation, headings, links, and body text.

• Space: Proper use of space (i.e., margins, padding, letter-spacing, line height, etc.) creates flow and tells the reader where to start, when to pause and where to end.

• Font: Don’t get crazy with your font selection. Readability is the key. Use a simple web safe serif or san-serif font such as Times New Roman or Arial for your body text. You can use something with a bit more personality for larger, more significant text. However if it is not a web safe font, save the text as an image.

• Weight: You can emphasize text by making it heavier weight (bold). Use this sparingly though, or the contrast of the text will be lost.

• Style: Avoid using all caps in the body or a large block of text because it will reduce readability. Another faux pas to steer clear of is underlining text in order to emphasize it. Most readers will often mistake it for a link.

The large size and contrasting color of the text in the middle of the page creates emphasis and immediately draws your eye. The designer also used light colored text on a dark background to achieve readability and a larger font size for headings to create contrast and flow.

Color
Different people and different demographics are drawn to a variety of colors, so select a color scheme that appeals to your target audience. For example if you are marketing your website to men, then it is safe to say pink is probably not the best color choice for your site. Color is not just a marketing tool. It is also an important element in creating a sense of order and balance and can navigate people through your site to the most important messages. Colors, if properly utilized, actually make it easier for visitors to quickly scan for the information they need. Essentially contrast is the key when you want something to stand out. For instance, black is the most readable color text when using a light background and light text creates contrast on a dark background. Strong colors and stark contrasts in web design help ensure the viewer doesn’t have to work too hard to read or find what they are looking for.

Pixelmator.com utilizes bright bold colors on a dark background to grab the viewer’s attention and draw their eye to important information. They also use light colored text to create contrast, and colorful icons to help the viewer scan the page quickly to pinpoint the information they need.

Consistency
The human mind is programmed to seek out patterns. If we don’t find a pattern, we instinctively want to move on. When designing a website you want to create patterns by using consistency in your headings, color choice, links, layout, fonts, style and mouse over effects. Being consistent in your design choices is yet another way to create organization and balance within your website. Consistency reduces the audience’s need to think. Time is money, right? So get your visitors to the most important messages and get them there fast. If they cannot surf through your site and quickly locate the information they need, your audience will lose interest and move on to the next website. Inconsistent design only slows people down.

Apple is a great example of consistency. All the links and buttons have the same treatment, all headlines are bold black text, and the same font is used throughout. To organize the page further, boxes with rounded corners and a drop shadow are used repeatedly to separate different elements.

Keep it Simple
Think about it. The most successful websites like Google, Apple and Twitter are all very minimal and simple in terms of design. Don’t add a ton of elements or features your target audience doesn’t need. Always keep in mind the visitor’s needs when adding any new feature. Content is another area that should be scaled down and speak directly to your audience. Make sure your message is concise, convincing and laid out effectively.

Everything from the color scheme to the content on this website is minimal. The use of white space, limited design elements, and short subheading text ensures that the message is concise and straight to the point.

Call to Action
The purpose of a website is to motivate a response from your visitor. So be specific about what exactly you want your visitor to do next. Make it clear that they should call, signup for your newsletter, register for your program, fill out a form, or take some type of action.

The headline, ‘Upgrade to a Better Browser,’ makes it perfectly clear what the visitor should do next.Plus the large button strategically placed below the headline in the middle of the page says ‘Free Download’. It’s practically screaming at you to download the latest version of Firefox

.

Test, Test, Test (…and then test some more!)
The good thing about the web is that it’s easy to fix your mistakes. You can
make your corrections and launch them within a matter of seconds. The bad thing is that those mistakes, while they are live, can cost you.

The best rule of thumb is to start with spell check. It can be your best friend! You want to make sure your content is free of any typographical and grammatical errors, which can actually diminish the integrity of your site. The next line of defense is to check that all links are working, all forms are functional and there are no JavaScript errors. And last but not least, be sure to test your site on all major web browsers and platforms to make sure it displays properly across the board. Otherwise, you may end up with a page that visitors using a different browser cannot properly view.