|
Web Site Design Layout
Five Common Elements
By: Rick Mann
|
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. |
|
The HeaderFor 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 MenuIf 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 AreaContent 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 FooterThe 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.Important LinksBeneath 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 links to your contact page, to your privacy policy, to your terms of use policy, and to your disclaimers.
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: [http://www.internetweapons.com/90second/]web site design software. |
|
|
