Plan Your Website Design
Know your business
It sounds a bit obvious, but if you are not clear on what you are creating a website on, then it is going to make life very tough! Write down your main business aspects, i.e. what you sell, your main services, operating hours, points of difference from competition, etc. Put yourself in your customers shoes and include any information that you think they will be searching your site for.
** Remember, web sites are normally created for others to view, so what you like is not always what others will like.**
Golden Point Cafe...
The Golden Point Cafe is located in Ballarat across from the popular tourist attraction Soverign Hill. It operates from 7am until 4pm and concentrates on serving breakfast and lunch as well as coffee and cake. They provide catering for functions and there is also fresh coffee ground on-site. The main aspects of the business to promote on the web site will be an up-to-date breakfast and lunch menu, information on how to purchase the fresh coffee and a section on catering.
Creating goals for your Website
Deciding what your site goals are should be the first step you take when creating a web site. Ask yourself (or your client) what is it you hope to accomplish by having a web site. Write down your goals so that you remember them as you go through the design process. Goals help you focus and target your web site to your particular needs.
A website that provides news about a specific subject should have different goals than a web site that sells products, therefore it will have a different look and feel. Following is an example of some common web site goals:
- Provide current or potential customers with information
- Promote a business and their products/services
- Generate new leads
- Sell products
- Provide information to the public
Golden Point Cafe...
The goals of the Golden Point Cafe are:
- Provide their menu online to increase phone orders for breakfast and lunch
- Increase sales and awareness of their freshly ground coffee
- Increase catering sales
Target audience
"My target audience is everyone with a computer..", "we don't have a target audience, every customer is as important as the last/next.." Ok let me stop you there. While these comments might be relevant to an extent, they are not addressing 'target audience'. While your business might have customers/visitors from all backgrounds, you should still know who your target audience is, the cream of the crop. Now it's not always about who spends the most or who causes the least problems., it could be who gets the best value out of your product or service, who will return and who will refer more business onto you. Your target audience may not even be a customer, they might not spend a cent, but if they refer 10 people on who do, then it's a good chance they should be your target audience.
80/20 Rule
Ahh, the old 80/20 rule. Well here it is again, 80% of your business will come from 20% of your visitors/customers. So if you can identify who that 20% is, and market your website to that audience, you will find that the demographic of visitors to your website will change and you will have a higher percentace of visitors who are classed in your target audience category.
Organizing the Website structure
Organising your site carefully from the start can save you frustration and time later on. The best way to organise a site structure is to sketch out a tree diagram. At the top will be your home page. From the home page shoud branch your main categories which will be your main sub pages. As a rule, you should have no more than 7 links in your main navigation. Therefore, your first level in your diagram should only have upto 7 pages. For the website I will building along the way as a case study, I have sketched the following site plan.
Golden Point Cafe...
With the above in mind, I have decided on the following site structure for the Golden Point Cafe website:
Creating your design layout look
You can save a lot of time later if you plan your design and layout by creating a mock-up drawing on paper of how you want the site layout to look and then follow it as you build your site. A good place to start is to browse the web and find 3 - 4 web sites you like. This will give you some ideas of colour themes you like and different layouts. If you already have a logo or corporate colours for your business/organisation, then you should stick to those colours. More detail on colour below.
The mock-up drawing doesn't need to be in too much detail, it is only an outline as to where the different elements will go (i.e. logo, navigation, content, advertisements, etc.) If you have downloaded and familiarised yourself with Artisteer in School Supplies - Artisteer Resources, you would have noticed the layout options available. When planning your layout, to be compatible with Artisteer you should choose one combination of layout style and number of columns from below: (Note: Layout goes on top, columns below)

Golden Point Cafe...
Following is the site layout of the Golden Point Cafe. I have decided on a basic layout with the logo and header to go at the top. Under this will be an area for the navigation. Below this will be a second menu to the left and the main content area to the right where I will have all the information about the Golden Point Cafe.
The reason for choosing such a basic design is that I want to keep a clean, modern look and let the imagry/centent do the talking. There will be no flashy annimation or un-needed distractions. I want the user to be able to vist the site and quickly find what they need.
Choosing your website colours
As mentioned above, if you already have a logo or corporate colours for your business/organisation, then you should stick to those colours. If not, search the web for websites in your genre and see what colour schemes they are using, and which colour schemes you like as well as the ones you feel are most effective so that your website will achieve the goals you listed above.
Generally speaking, you don't want the colour to be too overbearing or overpowering. For example, bright red would be a bad choice for a background colour as there is no way people could stay on your site and read the information for an extended period of time. Also think of contrast. Yellow writing on a white background is very hard to read, so that too would be a bad choice. In Grade 1 - Convert your paper website design, you will be able to test different combination's of colour using the design program Artisteer. But it is always good to have an idea of what you want to achieve before just setting out and designing ad hoc.
Golden Point Cafe...
Following is the the Golden Point Cafe logo. As black is such a strong colour and can make a website look dull, I am going to predominately use White for the background with Black and Blue elements.
Choosing your website fonts
The importance of the choice of font for your web site should not be over looked. At the end of the day, your visitors need to be able to read your content. It is a well known fact that people can not read as much or as long off a screen as they can an paper. Therefore, we need to do everything possible to make it as easy as possible for them to read our content.
No as a basic rule the easiest fonts to read on a screen are sans-serif fonts (the fonts with out the curly bits). For example, Times New Roman is a serif font, where as Arial is a sans serif font, as is Centuary Gothic (the font used on this website).
Now that you know the difference between the main two types of fonts, you need to know which fonts are regarded as 'Web Safe Fonts'. A font is deemed to be web safe when it can be viewed on different operating system platforms. If you use a font that can not be viewed on all operating systems, your browser will try and choose a substitute font which can break your design look. Using the example above, if you design a site using the Arial font and Times New Roman was displayed instead, the look would change dramatically. Therefore, to eliminate this risk, i have prepared a table below showing the fonts that are generally considered web safe. The more ticks, the safer the font for the web.
| Generic | Font | Windows 9x/2K/XP | Windows Vista | Mac Classic | Mac OS X | Linux Unix |
|---|---|---|---|---|---|---|
| serif | Cambria | ![]() |
||||
| Constantia | ![]() |
|||||
| Times New Roman | ![]() |
![]() |
![]() |
![]() |
![]() |
|
| Times | ![]() |
![]() |
![]() |
|||
| Georgia | ![]() |
![]() |
![]() |
![]() |
![]() |
|
| sans-serif | Andale Mono | ![]() |
![]() |
![]() |
![]() |
![]() |
| Arial | ![]() |
![]() |
![]() |
![]() |
![]() |
|
| Arial Black | ![]() |
![]() |
![]() |
![]() |
![]() |
|
| Calibri | ![]() |
|||||
| Candara | ![]() |
|||||
| Century Gothic | ![]() |
![]() |
![]() |
![]() |
![]() |
|
| Corbel | ![]() |
|||||
| Helvetica | ![]() |
![]() |
![]() |
|||
| Impact | ![]() |
![]() |
![]() |
![]() |
![]() |
|
| Trebuchet MS | ![]() |
![]() |
![]() |
![]() |
![]() |
|
| Verdana | ![]() |
![]() |
![]() |
![]() |
![]() |
|
| Cursive | Comic Sans MS | ![]() |
![]() |
![]() |
![]() |
![]() |
| Monospace | Consolas | ![]() |
||||
| Courier New | ![]() |
![]() |
![]() |
![]() |
![]() |
|
| Courier | ![]() |
![]() |
![]() |
*The green ticks show very common fonts, the blue ticks show not so common, but all are generally accepted as web safe.
Golden Point Cafe...
For the Golden Point Cafe logo above, the designers have used a font called Goudy Old Style for the Cafe text and DIN for the "Golden Point" text. As neither of these are web safe fonts, I am going to substitute them for similar fonts that are web safe so I can be sure that my design will look the same no matter where it is viewed from. So, I am going to use Times New Roman as a substitute for the Cafe text (this will be my font for my main headings), and I will use Arial Black as a substitute for the Golden Point font (which I will use for sub headings). Following is how the text looks with the new web fonts, pretty close to the logo..
cafe - Times New Roman
GOLDEN POINT - Arial Black
That's it for the plan your web site design lesson, next we look planning your website content.










