A guide to easy web design

Building your own web page has never been easier, there are hundreds of free publishing platforms available and all of them offer an intuitive, easy-to-use interface. As a result, there are people who are not skilled in design and use these web builders to create distinctly average sites and in some cases, unusable sites. In this guide, we'll look at some of the best ways to improve your user experience through good web design.

Form and function

There are many guides which cover the technical aspects of how to get your own website up and running, but few consider the implications for the user. For most people, who are not professional web designers, the simplest route to achieving a look which matches the branding of their company or personal aesthetics is to use a template. Often, people choose a template which matches the same colours, even though it may not be suitable. The most important aspect of a website is usability, do not worry about appearance as this can easily be changed with a little knowledge of style sheets, often known as CSS. The first stage to good web design is to sit down without the computer. Plan out the layout of your pages and think about how your customers can navigate the site with the fewest mouse clicks possible. Important features should be given prominence either in a sidebar or the header. Look at some of your favourite websites for inspiration, you will find that they have very similar layouts and key information is very easy to access. When you have done this, find a template which matches your desired layout as closely as possible. Do not worry about colours and fonts, simply look at the layout of the site.

Customising the site

Once you have downloaded and installed the theme into your particular CMS system, you can begin to customise the theme to match your particular branding needs. This is often the stage which intimidates many novice web designers. Luckily, there are free tools that can help you. If you haven't already, download and install the Firefox web browser and add the "Web Developer" and "FireBug" plug-ins. These two upgrades allow you to make sense of the theme's style sheet and pinpoint exactly which lines of code need changing to achieve your desired look. Start with the background, in Firefox, right click and select "inspect element". From this command, you are presented with the relevant lines of CSS in a pop-up window. Experiment with new colour codes until you get the right look. This can be repeated for all elements of your page. When you have found the code, change the CSS and you're finished.