Planning    Technical    Style and Format    Checklist    Recommended Links


Style and Format 

As well as the technical aspects of the web site, there are also stylistic and more aesthetic factors to consider in your web site.


Factor to Consider : Aptitude
  • Media - When we live in a world where information is passed through a variety of methods from web sites and printed media, to hand written letters, one has to consider whether the end product can realistically be produced in the media you choose. For instance, information which is technical or mainly illustrative would be less apt for hand written snail mail.


Factors to Consider : Style
  • Colour Scheme - Know your audience and decide what sort of theme, and colour schemes on your site best suits the contents you would like to put in your web site.

    For instance, the colour scheme of this site is grey, gold, steel blue and white. Choose three or four colours which you will use mainly throughout your site. Also plan what each colour would be used for, and try to stick to it as much as possible.

    Example : This site uses the following colour schemes and font weights -

    Grey : Used for background highlighting
    Gold : Links and Major titles
    Steel Blue : Major highlighting
    White : Main bodies of text

    Bold : Titles and minor highlighting


    The colour scheme and other sections of your site need not be planned to the finest detail, but it is definitely a good idea to have an image of what you would like and where. Colour schemes create a more pleasing settled uniformity to a web site.

  • Image and Impression - The style in which you present your site directly affects how much your visitor will remember you. Your site's identity is paramount, as in real life it is on the internet, on one idea there aretens of sites offering similar services, be it eBay or eBid. Accompany your content with a bit of style. A few suggestions would be to:

    1. Accompany your colour scheme with a distinctive logo (which you plug and display as much as is discreetly possible!)

    2. Consider that as well as your web site, and how it looks, the language you use in your web site also creates an impression. Will you be using slang and the venacular to appear more "friendly" or "hip"? Will you be dotting every i (not dotting perhaps being impossible..), to project a serious and perhaps corporate look?

    3. Make sure that the above point also is compatible with the tangible, i.e. what your site looks like. Having black backgrounds with dark images of blood and death, then having the opening text reading "Heeeeeeeeeey people! I'm Bob, how's it hangin'?" strikes the visitor as at least odd, more likely morbid in this case.


Factors to Consider : Format
  • Clarity - Having a clean looking, uncluttered site is key to aiding your visitors and creating a good impression. A few suggestions would be to :

    1. Label illustrative Diagrams

    2. Keep large images or pieces of information tidily compartmentalised, so your visitors see what they need to see, without any unwanted clutter.

    3. If you are a site with a lot of content, keep your page hierarchy slimmer and deeper, rather than wider and shallower, i.e. categorise your information in smaller chunks, as not to put off visitors, and attept to avoid pages which are offputtingly long.

    4. Keep the site organised with a logical navigation system, so the visitor is never disorientated at any time.

    5. Assure your information is easy to read. See Font tip in the technical section.


  • Uniformity - This gives a settled look to your web site, helps your visitors navigate easier and makes sure that proper highlighting stands out more. This also helps with clarity and helps the visitor to focus on the right sections of your web site.

  • Focus - A website should have a focal point, somewhere to look first. If the entire website is flat, you're not guiding your visitors to the content or making it even easier for them. - massive blinking text in red and caps is not a good idea.


Factors to Consider : Outpost10F Web Sites
  • Standard Formatting - As web sites affiliated to the outpost usually have a Star Trek or Star Wars theme, it is usual to find that certain looks are considered the standard. These are documented below with their coding.

    Star Trek :
    • Black background (#000000)
    • White text (#ffffff)
    • Gold active links (#ffd700)
    • Golden rod visited links (#daa520)

    <body bgcolor="#000000" text="#ffffff" link="#ffd700" alink="#ffd700" vlink="#daa520">

    • Title Font - Swiss911
    • Standard Font - Verdana,Arial
    • Highlighting Titles - Bold without underlining
    • Images - Title Bar


      Right click on the above image and select "Save Image As" or "Save Picture As"

    Star Wars :
    • Black background (#000000)
    • White text (#ffffff)
    • Teal active links (#008080)
    • Teal visited links (#008080)

    <body bgcolor="#000000" text="#ffffff" link="#008080" alink="#008080" vlink="#008080">

    • Standard Font - Arial
    • Highlighting Titles - Bold without underlining
    • Images - Title Bar


      Right click on the above image and select "Save Image As" or "Save Picture As"

  • Quick Fix - If you are pressed for time, these couple small stylesheets can provide some loose formatting for those under pressure. It can be applied by copying the following coding into each header section. Use sparingly!

    Star Trek :
    <link rel="stylesheet" href="http://www.outpost10f.com
    /doc/webauthoring/st.css">

    Star Wars :
    <link rel="stylesheet" href="http://www.outpost10f.com
    /doc/webauthoring/sw.css">






Other Suggestions :
  1. Research and look around, for instance at webreference.com's web site thesis.

  2. Note down what you liked about different sites, and try to collate these examples into your own style.

  3. Refer to the flowchart on page 5 of Website Design Methodology, with the Content Flowchart.

  4. Draw different styles using the Planning Sheets and hone in on the best design, considering technical and aesthetic aspects. Also refer to page 6 of Website Design Methodology, on the Storyboard, providing the necessary details of each screen.




Click here to continue to Step Four




This is an Internal Development Project for outpost10f.com.



Created by Captain Jayneway on 26th November 2000.
Last updated on 29th November 2000 by Captain Jayneway.


 Quick Links