[Back to the Website Design Process Page]

There are actually a limited number of basic design styles for a business website. Our streamlined web design service takes a basic template and adapts it to your needs.

You can choose:

1. The websafe font family you wish to use for your site.[Here are the available options].
   Tip: Websafe fonts are print styles that most computers already have. If you use a font that is not listed here on your website and a customer views your site who doesn’t have that font on their own computer, your website will not display that font properly.
2. The colour scheme. A good way to pick which colour scheme you want to use is to start with your logo or business identity’s colours and pick colours that complement it. To do this we will need the computer colour value of your logo colours (hex, rgb, pantone etc…) or if you don’t have that, just provide us with an electronic copy of your logo and we will determine it for you. Based on that colour we will supply you with a list of colour codes to choose from for various section of your site, or if you wish, we can make these choices for you.
3. The target audience: What demographic information do you have about your ideal clients or web visitors? For example, older adults will prefer a larger font size and straightforward navigation. In general, women will prefer different graphics than men. Engineers will prefer different graphics than design professionals.

Anatomy of a website:

Even websites that don’t seem to have square edges will actually have a ’skeleton’ made of the following square shapes. Rounded looks are achieved using background images.  To set up your template, we will need to select a colour, width, height, border and optionally an image for each of the following areas. All websites you see, no matter how different they look will almost certainly have most or all of the features listed below.

1. The background and container: In order to design for hundreds of browser and screen resolution combinations, the most common style for a website is a band of text and information down the centre of the page, with a background image or colour to the left and right. The background image can be a single image repeated, or one large image that covers the entire background.
2. The header: This is typically where you will see the company’s logo, either alone or combined with other images.
3. The navigation: This is an easy to find series of buttons or text that show the pages you want your customers to go to first or which they will generally expect to see. Common pages are: About, Contact, Products, Services, News.  The navigation doesn’t normally contain all the pages on the site, unless you only have a few.
4. The body: This is where you have the text. Generally we want this area to be white or light coloured and have no background image. This is because you want the text to be readable – that’s why the visitor is there. If the text is hard to read, the web visitor will give up and go somewhere else in a hurry.  Unless the page is devoted to a detailed subject, the web visitor will also be unlikely to scroll down, so we will make sure that the most important information is at the top where a person doesn’t need to scroll to see it. If more detailed information is available, it can be put on sub-pages with links on the main page for the topic. You will also probably want to have pictures mixed in with the text.
   

   MSN website screen capture - you can see it has all of these elements.

5. The footer: This is typically where the copyright message is for the site, and the basic contact information. Also there is sometimes a text-only version of the navigation bar, to make it easier for visitors who have turned off the images on their browser.
6. The sidebar: This is a column to the left or right (sometimes both) of the main body of the website. It usually has another copy of the navigation information, plus information you would like to feature on each page, such as your Facebook or Twitter information, news, promotions, or donation button. It also commonly has a search box to help people find what they are looking for on your site.

All of the above six items are present in the basic template shown here. You can pick the colours and border style and thickness for each of the above six elements.