Visual Design Tips

Note: This article is VERY old. There are much better and up-to-date tutorials available online.

The purpose of this Virtual Workshop is to illustrate some of the common ways that dynamic websites are constructed visually and to demonstrate how you can become influenced by professional design. To do this we will look at some sites and then build our own, by incorporating common elements. As I write this I am concerned that just stealing a site design is wrong and thus this is not purpose of this Workshop, but to show how different sites use similar layout and how these can influence you.

A Few Sites to Look at:

Have a browse around the following websites, looking at the position of the visual features (logos, copyright messages etc) and navigational links.

OS Commerce SIte URL:
http://www.oscommerce.com

This site is designed as a product site for an open source shopping cart system that uses php.

Hospiweb Assets site
URL:
http://hospiweb.qmuc.ac.uk/assets

Site designed by myself to archive and promote the work of the hospiweb project

IBM site URL:
http://www.ibm.com

IBM website

These sites share some common features that will influence the design of our site:

1) The main information section of the page has light background (white) and dark text (black), whereas colour is used on the pages in the navigational areas and logos.

2) The colours used in the navigational areas are differing shades of the same colour (blue/ IBM or green / Hospiweb assets).

3) The site branding is positioned to the top left of the page.

4) The overall site navigation (ie links to sections) is in a horizontal bar across the page below the logo.

5) Sectional Navigation (linking to either pages or further subsections) are usually in a column to the left (hospiweb assets uses the right - to show a different example) of the main page information.

6) The copyright, date updated and owner contact information is at the foot of the page.

7) There are additional navigation or 'things of interest' highlighted by including a nested table within the main text.

Overall Page Layout

If we put all those features into a basic table layout we have a page that looks something like this:

Page Layout

The black lines represent the borders of a table that we can use to achieve this page layout. The HTML for such a layout might be:

 <table width="720" border="0" cellspacing="0" cellpadding="0">
 <tr> 
 <td colspan="2" height="20"> </td>
 </tr>
 <tr> 
 <td width="120"> </td>
 <td> </td>
 </tr>
 </table>

Choosing A Colour Scheme

Next we need to consider a colour scheme for the navigation areas. Based on the observations above, we note that different shades of the same colour are used (and as it is mine anyway) we'll borrow the hospiweb assets colour of green and set the cell colours:

So make the second row (the links to sections area) a dark green - #006600
and the left hand column (links to pages) a lighter green - #33CC99

This gives a overall look of:

Page Layout Coloured

Making a Logo

So next we need to make a logo. If we look at two of the logos (hospiweb assets and OsCommerce), there are again similarities that we can use to influence the design of our logo.

Hospiweb Assets Logo

OS Commerce

1) A 'feature' at the top left of the logo (hospiweb - a photo and oscommerce - the spheres)

2) The text changes partway through the logo. In oscommerce the 'os' is grey and becomes a larger black typeface. In the hospiweb logo; 'hospiweb' is white and 'assets' is black.

Thus we can take these features and create a new logo (also incorporating our green colour scheme)

New Logo

This logo uses green squares as a 'feature' and uses different font weights to differentiate between the two halves of the text logo.

Making Navigation Buttons for the Sections

A typical QM webdesign student (the inspiration for this workshop) would probably be creating pages for several different modules. Assuming a masters level student this would be:

Thus let us create buttons for each of these development sections and a 'my own' button for all the photos and other nonsense that students like to put in their webspace ;-). We will also create rollover state images - see George McMurdo's material on Creating Rollovers (although I've used Dreamweaver for speed).

Normal State Example

Rollover State Example

ITI button - Normal State
ITI button - Over State

You can see that I've used the existing colours (green / white) to create the effect that the buttons are carved out.

ITIWEBDEVDDEMY OWN

Creating the Navigation within Sections

This is the 'Links to Pages' part of the page layout at the left of the design. Rather that use graphical buttons we will use Cascading Style Sheets (css) to create rollover effects on plain text. Again see George McMurdo's pages for detailed explanation of how this works.

We also want to stick to the overall design so we will include a small white square as a bullet point.

First we want to link a stylesheet to our document.

 <link rel="stylesheet" href="design.css" type="text/css">

This style will be a custom style so whereas you may choose to redefine the standard HTML tags (H1, H2....P) as well, we will create a new tag.

 .leftnav {  
	  font-family: Arial, Helvetica, sans-serif; 
	  font-size: 10px; 
	  color: #FFFFFF; 
	  text-decoration: none; 
	  padding-left: 3px; 
	  text-transform: uppercase; 
	  border-left-width: 2px;
	  font-weight: lighter
 }
Next create a style for each one of the 'a' (link) conditions.
 .leftnav a:link { 
    color: #FFFFFF;
    text-decoration: none
 }

 .leftnav a:visited { 
    color: #FFFFFF;
    text-decoration: none 
 }

 .leftnav a:hover { 
    color: #006600;
    text-decoration: none 
 }

 .leftnav a:active { 
    color: #00FFCC;
    text-decoration: none 
 }

These styles change the colour of the text, while overiding the default underlining of any link text. It is important that they are in the order LVHA (ie a:Link, a:Visited, a:Hover, a:Actiive) for the rollover effect to work. Next add a table (one column, a row for each link plus one for the title, and width = 120) to the left column cell (thus 'nesting' the table) and assign our .leftnav style to each cell:

 <table width="120" border="0" cellspacing="0" cellpadding="0">
 
 <tr>
 <td><p>Navigation</p></td>
 </tr>
 
 <tr>
 <td class="leftnav" valign="top"></td>
 </tr>
 
 <tr>
 <td class="leftnav"></td>
 </tr>

 <tr>
 <td class="leftnav"></td>
 </tr>
 
 <tr>
 <td class="leftnav"></td>
 </tr>
 
 </table>

Next add your link text (one per row, preceding each with a white square image) and thus you end up with something like this:

Navigation

# Link One
# Link Two
# Link Three
# Link Four

That is the navigation part done - of course you could easily put all the code for this table into a separate file and use Server Side Includes (SSI) or PHP to include that file dynamically.

If we put together all that we've done so far we see something like this:

Site Design so Far
Click to enlarge

I have added some filler text and headers to illustrate what the page will look like with text.

Adding the Final Features

We have two things left to add (the copyright information and a 'things of interest' nested table which we'll start with). As I have used the DTP technique of inserting filler text (Lorem ipsum), I will create a links insert that deals with that piece of text. Using the same technique as above, we'll create the link table like so:

Lorem ipsum
What it means
DW Extension
Text File
Generator

Place this table before the filler text and align it to the right:

 <table width="120" border="0" cellspacing="0" cellpadding="0" align="right">

The copyright information is easy to add below the main table. I use SSI to produce the last updated information:

Owned By: <a href="mailto:keith.brown@blueyonder.co.uk">Keith Brown</a> 
last updated: 
<!--#config timefmt="%d %b %y" -->
<!--#echo var="last_modified" -->

Thus the entire design when finished looks like this:

Final Site

A Word of Warning

This workshop has been about looking at the way that websites are designed and common features that exist on professionally designed sites. What it HAS NOT been about is designing a website for you. You should take away the methods and look around for yourself for designs that you like and what works well and not so well about them (I repeat do NOT just steal a design). Having everyone produce the same design as this workshop will certainly not help with any assignments that you undertake.

In this section

Related Reading

Related Books

The Zen of CSS Design

Related Ads