Web Site Design Layout - Five Common Elements
Your web site design layout largely depends on the type of website you're building. A
sales page, for example, has different requirements than a landing page, and a landing page
has different requirements than a niche web page. For our purposes, however, we're going to
address a generic web site. This is a website that has multiple pages, with each page both
leading to other pages on the site and also standing on its own.
Your layout will most often contain a header, a navigation menu, a text or content area,
a footer, and a place beneath the footer for links to your less visited but always necessary
pages. Let's take a look at these one at a time.
For the vast majority of sites, the header is an image that spans the full width of your
web page and provides the visitor with a quick, at-a-glance grasp of what your website is all
about. The width of your website can run anywhere from 600 pixels to the full width of the
visitor's screen, though most often it will be between 750 and 800 pixels. This is a width
that visitors generally find comfortable and has proven to be effective in the past.
With this in mind, your header will most often fall between that same 750 and 800 pixel
range. It should contain an image that reflects the purpose of your website and is simple yet
attractive. It should also include the title of the web site.
The Navigation Menu
If you have more than a single page, your visitor's need a way to find their way around
your site, and this is where your navigation menu comes into play. It usually consists of a
list of menu items in their own column, either to the left or the right of the primary text
area. For a small site, each menu item will link directly to a corresponding page and you'll
only have a single navigation menu. For a large site, each menu item will lead to another page,
which has a different navigation menu that leads to additional pages within that topic.
For example, if you have a large site on alternative medicine, your primary menu may
include an item or link to a page about yoga. On the yoga page, the navigation menu might then
lead to a variety of yoga disciplines and techniques, with a page for each of those. Yoga would
be considered a general category, while a discipline of yoga would be considered a sub-category.
The Text Area
Content drives the Internet, and it should be the primary focus of your web pages as
well. Black text on a white background should always be your first choice. It makes reading
easy on the eyes. Depending on how much of your width you dedicated to your navigation (generally
around 20-25% of the total width), the remaining area is dedicated to your text.
Your title should be at the top of the area and generally be contained within an h1 header
tag. Avoid using fancy fonts. Stick with something basic such as Arial, and try to stay to
two or three fonts maximum on a page. In addition, allow for plenty of white space. Don't try
to cram text into small areas that make it difficult to read. Keep your content clean, pleasing
to the eye, and easy to read.
The footer is often a reflection of the header. It's there primary to graphically enclose
your content area and to give your web page a sense of completion. It'll often be a third of
the height of your header, though there are no hard and fast rules that set a footer's height.
Whatever you find graphically pleasing should be fine. Though you will want to use the same
colors and general layout as your header.
Beneath the footer, you'll want to include those links to pages that are necessary for
legal and credibility reasons but are rarely clicked on by your visitors. Examples include
There it is ... a basic web site design layout. It doesn't have to include bells and
whistles and flashing images. It simply has to provide a pleasing format in which to present
your content. Don't over think it. Always keep this in mind: simple and straightforward is
always better than complex and confusing.
There's a simple and straightforward software program that takes all the frustrating
coding out of the process and let's you concentrate on the fun part of building a website -
the design. Learn all about it here: internetweapons.com [parked domain].