Jun
7

Basic Principles of Web Design

Posted in Design by Lesley | No Comments

Give your site some love!
Your website is one of the key places to connect to you user, so it’s important to do what you can to capture, and keep, their attention. Below are some basic ideas that can help do that. Like putting together a puzzle, all the pieces need to fit together just right to make it work.

Most of these examples are homepages, often the starting point for most users, and the best place to establish a positive connection and sense of branding to your user.

Clear Messaging

Short and clear brand messaging, right up front. What does the company do? Why should someone look around more? Say it in one short sentence. Direct copy that incorporates words for SEO will increase the odds that the site will show up in search results.

Box.net conveys what it does in two short lines. I love the friendly illustration that reinforces the core business concept.

Visual Hierarchy

Make the prioritization clear on the page. Lead your visitors to core concepts and calls-to-action with contrast in color and copy size and a good use of whitespace.

37 Signals starts with their overall company statement in front and their core brands secondary, but clearly high in priority.

Concentrate Calls-to-Action

What is the single most important click you want your user to make? The 2nd most? Highlight calls to action in order of importance. Too many similarly weighted links all over the page causes unecessary hunting for important content. Help your users out and they’ll stay longer.

Keeping the page simple, typekit directs you to the main areas that they want you to head over to… ‘try it for free’. I wonder if they’ll change their button to red.

Grouping Content

Grouping similar content makes for faster page comprehension. And remember white space is good. Use it to focus attention in certain areas and add visual breathing space on the page.

If you can get past the amazing photography, natgeo does a great job of grouping it’s content simply but effectively. The yellow blocks by the headlines makes for an easily scannable page.

Clear Navigation

A few navigational items with short, clear names are more useful than long and hard to understand ones. Make sure the wording is clear to the user, not ambiguous industry terms or phrasing that is cute but unclear. Anticipate content your users may expect to see.

Rosettta Stone based their navigation on how their product is to used. Using clear words, the user can tell where to go based on their usage of the product and it allows Rosetta Stone to target messaging to that user type.

Simplicity

Make sure everything on the page, including all copy, has a purpose. Pages with excessive copy or distracting design elements are not helpful to the user. Like watching a typical hollywood movie, nothing happens without a reason, make it so.

Papernstitch simply states what they do at the top, clear navigation to reinforce the concept and get user to areas they are looking for. The rest of the page simply displays great products, which is what the site is about.