1. Designing a site (2/4) Conceptual Design – 1h

2. Lazar’s Development Lifecycle
Define the
mission &
target users
Collect
user
requirements
Create and
Modify
Conceptual
design
Perform
usability testing
Create and modify
physical design
Evaluate and
improve the website
Implement and
market the website

3. Conceptual Design Navigation, Information Architecture Page Design
Designing for Multiple Browsers (?)

4. Navigation, Information Architecture (1/2)
Organizational Structure of the Home Page
Topic grouping
Audience splitting
Metaphors
Amazon.com
Information Architecture
Tree structure: broad and shallow vs narrow and deep
Three clicks and you’re in
Chunking information: 7±2

5. Navigation, Information Architecture (2/2)
Where, Oh Where, Oh Where
Topical sections
Path Analysis
Multiple routes
Technology
Screen layout

6. Lost in Hyperspace? Where am I? How did I get here?
What can I do here?
Where can I get to?
How do I go there?
What have I seen so far?
Where else is there for me to see?

7. Page Design (1/2) Technical Considerations Design Considerations
Download
Plug-ins
Animation
Feature creep
Design Considerations
Information overload
Backgrounds
Colour palettes
Text
Styles

8. Page Design (2/2) Content Considerations Layout considerations Quality
Positioning
Resizing/Scaling

9. Design Challenges Designing for Accessibility The Browser Challenge
Legislation
Web Accessibility Initiative
The Browser Challenge
Explorer v Netscape v Opera etc.
Define a baseline specification or create alternatives ?
Currently much less of an issue with the dominance of Internet Explorer
But what does Firefox introduce?
Older incompatibility problems e.g. <object> vs <embed>, scripting languages, layers.
Standardization
Markup languages get stricter (html  xhtml  xml)
de facto standards vs W3C
Need for Testing
Early & Often

10. Requirements Specification
Mission Statement
Aims of Application
Target User Analysis
Contents
Screen Layout Guidelines
Navigation Guidelines
Technical Requirements

11. Navigation Maps
Linear
Hierarchical
Non-linear
Composite

12. Linear

13. Hierarchical

14. Non-linear

15. Composite

16. In-Out Structure History 2 Equipment 3 Home Page 1 Team 4 Simulation 5
Museum Exhibits 6

17. Storyboarding A storyboard starts as a diagram.
It is a design, not a screen-shot
Shows where blocks of content go
Shows where local and global links are grouped
Labelled to show the result of clicking on links and multimedia
Label OFF the diagram! (Draw lines linking label to feature).
Labels tell what the multimedia does.
First draft drawn in schematic form by hand or drawing package (e.g. MS Word, PowerPoint, Dreamweaver).
Later may become a detailed design using collage and better drawing tools
Show a few possible solutions to client – who will invariably want to make changes!
Coded only after design and approval

18. Vertical Navigation System

19. Horizontal Navigation Bar

20. Vertical and Horizontal

21. Example: A storyboard for a web home page

22. Storyboards

23. Detailed Storyboard