Getting Started

There are several steps to that I'll walk you through to help with getting started on the design of your website:

General layout, menu, and color scheme

Layout

Typical layout components

Header

This is usually where your logo goes and marketing tag line

Footer

Often used for copyright information and common page links

Columns

One Column

Used for the simplest of sites, perhaps 1 to 3 pages

Two or Three column

One or two columns for information you want to see on each page, such as the menu, street address, or advertising. And one column for the main content of the page

Example Layouts

Click on the sample layouts link in the menu to see examples of these layouts on a full page.

One Column

Header & menu

Page Content

Footer

 

Two Column

Header
Menu Address	Page Content
Footer

 

Three Column

Header
Menu Address	Page Content	Advertising
Footer

 

Note: this site uses a three column layout.

 

Page Widths

With such an array of today's computer monitors, the old way of "one-size fits all" does not always work. If you make the site too narrow, there will be lots of blank space on the screen. If you allow the site to fill the screen, it can become hard to read on wide monitors that are set to a high resolution. Here are two options.

Flexible Width (recommended)

The width of your website will adjust depending the screen size and resolution of your visitors. Generally, a flexible width is set to 80% of the visitor's screen width with a minimum and maximum width so the site does not appear too narrow or too wide. This site uses a flexible width. To see the full effect, you can change the resolution of your monitor and see how the site still fits in about the same physical space on the screen.

Fixed width

Older websites were often designed to fit a monitor with 800 x 600 pixel resolution. They are very easy to spot, because the only take up half the width of the screen on many current monitors. You can choose any width, but if you have decided on a fixed width, I suggest 1000 pixels. You may have your own reasons for wanting a fixed width, but there are some good design reasons for it as well. For instance, if you choose a menu style that uses graphic buttons, you may not want the width of the menu to be reduced on a smaller resolution monitor. The same applies if your pages have larger (width) images.

Color Scheme

Color is very subjective. If you have already determined the colors to use, then you just pass that information along. If I am trying to create a good color scheme for you, I will start with the colors used in your logo. From there I will find complementary colors and look for a combination that has a soft neutral color for the page background, and one or two bolder colors to use for accenting. If creativity is a strong suit of your business, then there would be more emphasis on bolder colors. I would not typically use a dark background for the page, but that is yet another option for those more creative based sites.