Professional website design pointers

Sunday, April 20th, 2008

I’m sitting here in front of a blank WordPad document, trying to think of an interesting blog topic. I have decided that with the professional website look there are a few prominent pieces that make it look and feel professional. In this post I’ll run through the points in successively creating a professional web design and why these points make the design come together.

Logo design/ Branding

This, in my eyes is the single most important part of designing a professional website. The logo defines the company. It must be recognizable and flexible to be placed in letter heads, business cards, emails, and websites.

David Airey Has a notable article about logo design. The four critical points in logo design are:

1. It must be describable
2. It must be memorable
3. It must be effective without color
4. It must be scalable i.e. effective when just an inch in size

Here are some recognizable logos.

Here are the same logos in gray scale.

Are they still instantly recognizable?

Navigation design and implementation

The Navigation is the next most important aspect of a professional design. The navigation menu has to be clean, visible and easy to find and click.

This familiar from Smashing Magazine navigation that illustrates the page you are presently viewing adequately.

Here is a more ordinary navigation menu from Think Vitamin that is more of a safe design.

If utilized correctly the navigation should emerge a major focus to your website. Use easily legible fonts and differing colors for the text, than you have for the navigation background.

Colors

Yet another big part of a professional design is the color scheme. The wrong colors and combinations will make the site look very unprofessional. The lighter spectrum of color combinations is more professional than the darker schemes. Although you can combine dark colors with light color schemes.

Paring a dark background with a light foreground is a good example of combining light and dark.

CSS3.info has good light colored scheme executed in an accurate approach.

Colourlovers uses the dark color combinations with the light colors in a perfect method.

Content display

The main content of the website is the main focus of any webpage, or it should be. The way this content is displayed can be done very wrong, resulting in an unprofessional look.

The sweet spot for displaying content and ads alike is about 70-30. 70% should be made for content and about 30%should be left aside for ads and other content.

Like CSS3.info

This seems to be the magic number for displaying the most important content of the website. There are wrong ways to keep focus on the important content though. Putting a bright background behind any light or thin text is an enormous mistake. Spacing the lines to far apart as well is bad for readability.

Footer

At last the footer, the bottom of the page, the end of the content. This is where a good deal of information can go, such as copyright notice and feed links. Who designed the site, who owns the site? The footer, however, can be overdone or even underdone.

Deziner Folio has a nice footer, very clean with links to social networks and ranking services as well as a link to the top of the page. They also have put in a photo stream in the footer.

Colourlovers footer is a bit more different, they have recent forum discussions, recent blog posts and an about us section. They also display copyright info, RSS feed, and a bottom navigation.

Conclusion

In conclusion having a proper logo, navigation, colors, content display and footer you can determine a successful design of a professional website that people that visit will enjoy to visit.

I hope this post has helped you with any decisions on designing for a professional website.

Posted in Web Design | 4 Comments »