What should your website look like?

Information we need to plan the web design and web development includes:

colour including icons and graphics

estimated website size

A simple way to determine the size and therefore the complexity of your website is to count the number of pages it will contain. By page I mean a separately choosable website page such as:

home - the first page of your website
product main page - the main page for your products, if not on the home page
services main page - the main page for your services, if not on the home page
about - a page that says something about your company
contact form - an online form enabling customers to write to you online
any number of product or services sub pages
FAQ - frequently asked questions and their answers

The words on your website are known as the copy.
These have to perfectly and succinctly get your message across with the minimum of fuss.
As you can see from this attempt, some copy is better than others.
Good pictures are also essential.

pictures

A picture can be worth a thousand words, but only if it is put in the correct context.

Photos or images are used to make your website more pleasing to the eye.

Their size, position and colour are as important as the message they convey.

You may already have photos and images that you want to use on your site. Or you may want to choose images from an enormous collection of stock photos.
... searching on http://www.istockphoto.com for 'bobbing' will give you over 12 thousand results
... but this picture is not one of those listed.

colour including icons and graphics

You can choose from the full spectrum of colours for your website. Using a limited set of colours from a particular scheme works best. There are tools and rules to help you choose.

The colour scheme for this website was chosen by a colour schemer tool working from a base colour of
#e2b735

See http://www.colorschemer.com/online.html

Colours are used for foreground text, background colours, background images and icons

text style

Text can be styled in a variety of ways:

font decides the shape of the characters
size suggests how large or small it should appear
weight indicates degrees of boldness or lightness
text can be italicized or normal
and many other transformations

Normally heading information is larger than paragraphs under the headings

Then you have the whitespace between different blocks of text: margins, padding, linesize, etc

When all these are put together you have definied your website's typography.

layout

The overall look and feel of your website is given by your page layout

The standard areas of a page are:

header - where you might have your logo
navigation menus
body
sidebars
footer

Page layouts can be:

Fixed (aka grid) - they don't change much when the window is sized.
Floating - allowing areas of text to reflow when the window is sized
Hybrid - containg a mixture of fixed and floating

Pages may appear in multiple columns: 1, 2, 3, etc

The Bobbing Wide website has a multi-column fixed format

navigation

To get from one part of your website to another we provide navigational links.

These may be styled to appear as menus, buttons or textual links.

You can choose how you present the choices to your customers:

horizontal menu below the header
simpler version of the menu in the footer
dynamic menus which show more options as you hover over them
vertical lists acting as menus
call to action buttons or links

Links can also control how information is ordered on a page

You can choose to make the navigation simple or complex

For a very small website you may only need a horizontal menu below the header.

Bobbing Wideweb design - web development