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.
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.
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.
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.
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.
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.
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.
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.
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.