Virtual Workshops

Part of keithjbrown.co.uk

Main Menu

• Server Environment
• MySQL
• PHP Databases
• Web Design
• Excel

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.

URL: http://www.oscommerce.com This site is designed as a product site for an open source shopping cart system that uses php.

URL: http://hospiweb.qmuc.ac.uk/assets Site designed by myself to archive and promote the work of the hospiweb project

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:

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:

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.

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)

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:

• IT and the Internet (ITI)
• Website Development (WebDev)
• Database Design and Evaluation (DDE)

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

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

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:

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:

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.

Lastest 10 Threads - view all

---

Post a Comment or Question

Name

Email

URL (optional)

Title of Comment

Comment
HTML Allowed:
a,code,strong,em

I would like to be e-mailed any response to my comment.

In this section

• Visual Design Tips
• Replacing Tables with CSS
• A Brief Guide to CSS
• A Brief Guide to HTML

Related Reading

• CSS Zen Garden

Related Books

Related Ads