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?
|
||||||||
|
What are the implications for site construction ?
|
||||||||
|
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.
|
||||||||
|
What colors are you considering using in your Web site? BACKGROUND:
mainly White - to make text easy to read
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 LINKS: Links: Black #000000 Active link: Red #CC0000 Visited
links: Green #00FF00
|
||||||||
|
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 :
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 eg Headline and title text Paragraph Headings are colour coded according to section as follows Choosing
Books - GREEN |
||||||||
|
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]