Webpage Design

July 15, 2015 Michael Kennon

Webpage design is something that most people just leave to the professionals to take care of for them. When you do that then you probably are just being ‘pigeon holed into whatever they have on their design shelf unless you know something about what the possibilities are.

A good designer will ask you what your desires are for various elements that make up a webpage and have the patience to wait on you to make a decision on something you probably have no experience with. They can also spend more time than they can really afford to create several demonstration designs for your evaluation hoping that you will like at least one of them or be tied up with numerous revisions because you had some afterthoughts about something.

Yes, the whole site design process can be very frustrating for both the client and designer. Good communication between the two will make things go smoother and faster. Rarely will the two be speaking the same language in the use of terminology and it is mostly up to the designer to translate their terminology into layman’s terms.

The more you know about designing your webpage, then you will be able to communicate to your designer exactly what is it you want to see and become more aware of the possibilities contained in the design they present to you.

Regardless of what platform is being used on a website, all web pages have these displayed Elements.

  1. Header or Banner
  2. Navigation Menus
  3. Main Body Content with or without Side-Bar Content
  4. Footer
  5. Page background and graphical/image effects for the first 4 elements

Element 1:

Usually the first element being displayed at the top of a web page is the Header or Banner for the website. This is usually a collection of images and text that identify the website and is usually consistent across the entire website, meaning the same on each webpage.

Depending upon the platform being used to run the website, there can be other optional elements within the Header area such as links and a site search function. The text in the Header section normally is limited to the ‘Site Name’ and a ‘Slogan’, however more can be incorporated by using a prepared graphic image containing the desired text. Text within this area can use many different fonts, styles, and colors.

The Header element should be both easily recognizable and non-distracting to the rest of the page content.

Element 2:

There are several options for your Navigation Menus. Many websites have multiple menus for navigation. Usually you will have one Main Menu that appears on every page.

This Main Menu normally appears either just above or just below the Header element and will usually be more elaborate in its graphics than just a list of links, meaning usually looks like a button image with text overlaid on the image. The button image may change colors when you move your mouse over it or click on it and it will usually be a different color button image to indicate which webpage you are currently viewing (active page vs. inactive pages).

Example Supplemental MenuEach link in this collection of your Main Menu can have a drop down list of additional links activated when you mouse over the button image. This drop down list may or may not be as elaborate graphically as the main level of links.

In addition to your Main Menu, you may have other supplemental menus for navigation appearing on a site. These will usually appear some place in the Main Body Content element; refer to that section for more information of placement.

These supplemental menus can have their own set of links different from the Main Menu. They will usually be formatted as simple vertical lists of the links in them. Some platforms may allow for more elaborate graphical designs in these lists. Also may allow for sub-menu links to be attached to the main level list the same as in the Main Menu. (see example menu above)

Each supplemental menu will have its own purpose ranging from a duplicate of the Main Menu to visitor registration and login. There are many different reasons for having these supplemental menus. One of the main reasons is to facilitate site visitor convenience to reach specific content that you want them to visit instead of having to navigate their way through your Main Menu to find it.

There is one more location you need to have a supplemental navigation menu. That is in your Footer element. This Footer menu is usually a collection of only your most important links including one to reach your Home page.

The main reason for the Footer menu is that many times a webpage can be rather long vertically and it is an issue of site visitor convenience to access your site’s navigation menu quickly instead of having scroll all the way back to the top of the page. More about this is in the section discussing the Footer element.

Element 3:

The Main Body Content element is the meat and bones of your website, what site visitors come to your site to see.

main body layoutThis area can be thought of as a spreadsheet in layout terms. You can have anywhere from only one to multiple columns and an almost unlimited number of rows where to display the page content. Pictured at left is a typical three column layout.

Each column width can be identical or set individually. You can also set the entire element width to either a ‘static’ width or to be a ‘dynamic’ width that varies depending upon the visitor’s browser window width (being a percentage of that window). Usually the dynamic width option includes a minimum and maximum set width, but will otherwise adjust its width to the visitor’s browser window width.

Your main column where your page specific content appears (articles and postings) will normally be much wider than any other column. The additional columns are usually referred to as ‘side bars’ and is where you would normally place additional features such as supplemental menus, advertising displays, or other optional features. Some additional features are best located in your main column in a location below or above the page’s specific main content depending upon feature display width requirements and priority status compared to other side-bar features.

The number of rows is virtually unlimited; though you really do not want this as endless vertically scrolling up and down is a big turn off to site visitors. It is highly recommended that in your articles/postings you use the ‘Read More’ and ‘Pagination’ options available in some platforms to reduce overall vertical page height – this is where only a portion of the article/posting is displayed on the current webpage and the visitor then clicks on the Read More link to display the entire article/post or Next Page link to continue.

You can think of the rows within each column as ‘blocks’. Each block can be used for specific content such as multiple articles/posts, various supplemental menus and other features.

Each block will have its own ‘address’ identification when using some platforms – this is used when you are assigning a feature to a location on a webpage. Some Blocks can have multiple features assigned to them. If no feature is assigned to them then the block just doesn’t appear on the page but remains in the page template for possible future use – only blocks with ‘Active’ features will be displayed when the page is assembled for viewing in any CMS (Content Management System) platform.

Depending upon the platform being used on your site, in your main column you can have it divided into multiple sub-columns as an option see the BLOCK example in the image above.

Element 4:

The Footer element is a place for most of your ‘legal’ and ‘disclaimer’ statements or links to other pages containing them. Most information in this section is placed in the form of text links though you can also use graphical images as the links. This element will almost always be placed at the bottom of every page of your website, hence the name ‘Footer’.

The information most typically included in this element is of course your copyright claim to the website and its contents. Another important link to include here is one to reach your Home page as mentioned previously so that site visitors can have a safe and easy way of returning to the gateway page of your site. A link to your Contact information page is recommended as well as links to your Privacy Policy and any Disclaimer statements.

It is also a courtesy to include links to your site’s hosting service and site designer/developer as an endorsement of the services they have provided to you.

If you have used any development work of others not directly connected to your site or images belonging to someone besides yourself or your organization, you might need to include a link to their sites as part of your re-use agreement to use their materials.

Element 5:

Page background and graphical/image effects for the first 4 elements is not the least of the design elements. It is what sets your site apart from all others making it uniquely yours. This is where you can be creative graphically with virtually endless variations. Within your site’s Template or Theme you can design in subtle effects to the various elements to make it less boring to view.

With that said, a word of caution would be wise to consider. You do not want your creative efforts in this element to be too distracting from your site’s content and message – meaning you do not want people paying more attention to the effects and secondary images/graphics than what they do to the articles and postings of your website. People should be able to admire the imagery of your web pages without it becoming more important than the message.

‘Special’ effects are great when you need to be able to draw attention to something you want your visitors to notice above all else, but don’t overdo it – too many attention getters just become confusing.

Starting with your background image, you can select an actual picture of some sort that either fills the entire screen either by having one that is as large as most browser windows, by stretching it to fill the browser window, or by tiling (repeats itself both vertically and horizontally). You can also set the image to move with the content as one would scroll up or down on the page or to have it stay in one place as the content is scrolled up or down.

You can also select a textured image in place of an actual picture with the same options as described above. Color selection is also almost unlimited for the texture or you can use only the color itself without any texture.

Moving on to other elements; the edges around your Header, Main Body Content, and Footer can have subtle effects applied. Ranging from borders, 3-D/drop-shadow, and glowing effects are easy to add without becoming overwhelming to the elements they surround. These elements can also have their own background images, colors, and textures within their borders.

Spacing and margins between these various elements and blocks can also be adjusted from zero to something more appropriate for clarity and separation.

You can also set the transparency of these elements to let the background imagery ‘bleed’ through. Just remember to keep the transparency percentage low enough so the content is still easily readable.

Also remember to choose colors that complement each other and fit well with your overall theme style for your website. A conflict here will just be too distracting to most site visitors.