Site Design – Simple Web Design Tips

Template

Once your CMS is installed on your web server, the next task is to design your website’s template, also called theme. Instead of attempting to improve upon the default template, my advice is that you find a professional looking template that closely fits your purposes, and then modify it according to your visitors’ needs. This will simplify your design work immensely. If WordPress is your CMS of choice, then you can find a quality template at WordPress’s own theme directory. Or you can get a premium theme from WooThemes.

Even with a well-designed template as your starting point, a significant amount of work and technical know-how is required to create a template that stands out while at the same time being everything your visitors need. I recommend that you invest some time in learning the skills of a web programmer – namely HTML, CSS, JavaScript and PHP. Knowing these languages will allow you to modify your site’s template yourself. Alternatively, you can delegate this whole task to a professional web designer and developer. Either way, be sure to design your site from the visitors’ perspective more than from your own.

What Makes a Good Web Design

A professional web design is one that is both elegant and has a high usability. It needs to be attractive to look at while at the same time helping visitors to find what they are looking for – the content, product or service. It is essential to maximize both qualities. Anything less than a professional design will make your site seem small and unreliable.

Elegance

An elegant design is one where the page elements are balanced, flow well together and have matching style, color and lines. This elegance translates into credibility and will make your site more likeable. Some generic design guidelines to follow include:

  • Font – Use an easy to read font such as Verdana, Arial or Times in a standard size.
  • Colors – Usually, two main colors from which you can go with several nuances are enough. The two colors should be similar and not be too subtle or vibrant.
  • Background – Avoid the temptation to add a background image. In general, background images are a distraction for the visitor. A solid color background matching your site’s color theme appears more professional and lends your site more credibility.
  • Background color – For readability’s sake, the background should be bright and the text black.
  • Whitespace – Whitespace is essential to keep the layout from appearing cluttered.

We all know good design when we see it. Therefore, I am not going to bore you too much with design theory. Instead, I advise you to gather inspiration from well-designed sites, such as the majority of the largest sites on the web.

Layout

Most successful websites have very similar layouts. Usually, they are made up of two or three columns – a wider content column and one or two navigational columns. The main navigation menu is in the left column or horizontally across the top of the page. The content is in the wider middle column as the focal point of the page. Sub-navigation and additional reading related to the content is in the right column. The site or company logo appears at the top left or center of the header, and at the bottom of the page is a footer showing where the web page ends.

The design needs to have balance in its layout. What this means is that the elements need to be balanced across either side of the centerline, so that the design appears even. For example, a large element on the right side may be balanced by a similar element on the left. It can also be balanced through several smaller elements on the left or by placing one smaller element further out to the left.

You may want to organize and balance the page elements offline first, as simple boxes in a grid system, before you modify your site template accordingly.

Layout grid example
Example of a layout grid.

Usability

Usability represents the ease-of-use inherent in your site’s design, navigation and functionality. The idea behind the practice is to make your site so intuitive that the visitor can use it without expending any effort thinking about how to use it.

Following standards that web users are already familiar with improves the usability of your site – for example, having a left side navigational menu. Another important usability guideline is to have a consistent look and feel on each page.

A good book on how to design your own WordPress theme:
Allan Cole - Build Your Own Wicked Wordpress Themes