Interface Design


[Home] [Design Goals] [Content] [Interface Design] [Interactivity] [Cost] [Site Map]

Name three memorable and noteworthy Web sites (from a design point of view) you have visited.

URL 1 http://www.storiesfromtheweb.org/ "STORIES ON THE WEB"

URL 2 http://www.eddept.wa.edu.au/centoff/cmis/eval/fiction/index.htm " FOCUS ON FICTION"

URL 3

 

What are some of their color, typeface, layout, and movement characteristics?  (You may want to refer back to them while answering these questions.)   

Use of color (describe):

Attractive white background ; Use of bright primary Colours;

Use of type (describe):  

Simple, clear

Layout (describe):   

Consistency in layout across the site; Presence of interactivity which is engaging for a primary audience; playful elements ; attractive animated graphics

 

What  are the age and sex characteristics of the Web site visitors you want your Web site to attract? 

   Male   Female Both 

What age groups predominate?

 8-12 years   ( Stage 2 & 3 Primary students)

 

What are the characteristics of the Web site visitors you want to attract? 

  • essentially egocentric
  • like colour
  • a sense of fun;
  • like reading
  • risktakers
  • motivated to use technology
  • desire interactivity
  • short attention span

 

 

 

What are the implications for site construction ?

  • The site should have a playful appearance
  • The pages should generally be short and snappy - not too much scrolling!
  • Page layout and Navigation should be simple and consistent throughout the site.
  • Language should be simple and uncomplicated.
  • Content should include graphics which are illustrative of content
  • Content should be written in a non- didactic supportive tone.
  • The site should have a degree of interactivity to keep users coming back.
  • The site should provide opportunities for publishing student responses.

 

What will be the basic page design and layout features?

The layout will be developed in Dreamwaever using tables, with most pages developed using the framework illustrated below. Borders are set to zero so they appear invisible in the Browser.

 
Page Banner
MAIN NAVIGATION -----Wacky Text Rollover Buttons

SIDEBAR NAVIGATION

Glassy Rollover Buttons

 

Main Body Text
MAIN NAVIGATION ----------TEXT at bottom of page

 

 

What colors are you considering using in your Web site?  

BACKGROUND: mainly White - to make text easy to read
Titles and headlines:  Something fun and eyecatching

 

TEXT:  Simple to read; typeface not too small; Font = VERDANA, ARIAL, HELVETICA, SANS SERIF which will ensure a consistent look for different users

Body Text. Royal Blue #0000CC;

 

Paragraph Headings colour coded according to section as follows

Choosing Books - GREEN #339933
Fiction Favourites- PURPLE #6633CC
Book Week-AQUA #0099CC
Puzzle Playground-FUSCIA PINK #CC00CC
Teacher Zone- RED
What's New?-NAVY

LINKS:

Links: Black #000000

Active link: Red #CC0000

Visited links: Green #00FF00
(Colour coded as per paragraph/ side button navigation per section)

 

How do you plan to use color to unify or code the different sections of your Web site?

Background

It is proposed to utilise the same simple background used in the original MS Frontpage site - a simple pale blue sidebar which blends into a white page.

 

Page Banners

Several designs were trialled.

Style 1

Style 2

Style 3

Page banners (Style3) will be constructed using Typestyler 3.2. Banner backgrounds - black rounded rectangles with dropshadow; features multicoloured text in HOBO font; bevelled effect ; size 48.

The banners add an element of fun and repeat the colours featured in the "Read at the Library" Logo Graphic which is positioned in the top left corner of each page.

 

Navigation links

MAIN NAVIGATION -

Style 1 _ SPLASH PAGE

These buttons were created in Adobe Photoshop using a black background to match page background colour. Pairs of buttons were created for rollover effects

Style 2 - Main Navigation- WACKY TEXT ROLL OVER BUTTONS

Graphic Text Roll over Buttons created in "Typestyler 3.2"will appear at top of each, beneath the page banner.

Buttons are created on a white background so they will sit on white page background. The effects utilised are :

Multi Text effect (letter by letter) changing on rollover to Multi Text effect (word by Word)

These buttons will appear on each page throughout the whole site.

 

SECTION NAVIGATION

Style 1

Style 2

- Glass Sidebar Buttons (Style2) will be created in "E-Click" and colour coded by section as per Headline text. The

Choosing Books - GREEN; White text rolls over to Red
Fiction Favourites - PURPLE White text rolls over to Green
Book Week - AQUA White text rolls over to Orange
PuzzlePlayground -FUSCIA PINK White text rolls over to Aqua
Teacher Zone- RED White text rolls over to Aqua
What's new? - NAVY

eg

Headline and title text 

Paragraph Headings are colour coded according to section as follows

Choosing Books - GREEN
Fiction Favourites- PURPLE
Book Week-AQUA
Puzzle Playground-FUSCIA PINK
Teacher Zone- RED
What's New?-NAVY

What typefaces are you considering using for graphic type?

Simple to read; typeface not too small;

Font = VERDANA, ARIAL, HELVETICA, SANS SERIF which will ensure a consistent look for different users

Body Text. Royal Blue #0000CC;

 

How will you align the various text elements of page architecture?

Invisible tables will facilitate layout 

___Centered 

___Flush-left/ragged-right 

___Random

 

How will you emphasize subheads?  

___Contrasting type face - n/a

__Contrasting type size and colour

__Contrasting type style - n/a

__Placement (describe or illustrate below) - n/a

 

Where will you place navigation links?  

___Top of each page  - GRAPHIC ROLLOVER TEXT

___Bottom of each page  - SIMPLE TEXT

___Left side of each page  - BUTTONS

___Right side of each page - NONE

 

Adapted from "Worksheets and checklists for web site publishing and evaluation" by Roger C Parker (online) http://www.newentrepreneur.com/Resources/Worksheets/Web_design_Wk_Sht/web_design_wk_sht.html . Accessed 12 September, 2001.


[Home] [Design Goals] [Content] [Interface Design] [Interactivity] [Cost] [Site Map]