Designing a site (2/4) Conceptual Design

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

2
Lazars Development Lifecycle
Define the mission target users
Collect user requirements
Create and Modify Conceptual design
Perform usability testing
Create and modify physical design
Implement and market the website
Evaluate and improve 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 youre in
• Chunking information 72

5
Navigation, Information Architecture (2/2)

• Navigation
• 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
• Download
• Plug-ins
• Animation
• Feature creep
• Design Considerations
• Information overload
• Backgrounds
• Colour palettes
• Text
• Styles

8
Page Design (2/2)

• Content Considerations
• Quality
• Layout considerations
• Positioning
• Resizing/Scaling

9
Design Challenges

• Designing for Accessibility
• 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. ltobjectgt vs
  ltembedgt, 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
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