Project Specification Al Futrell April 2001 Some slides from Mark Newman.

Project Specification

Al FutrellApril 2001

Some slides from Mark Newman

Project Specification• Content• Design and Construction• Testing, Launch, and Handover

Content• Sourcing• Managing• Formatting• Delivering• Tracking• Copywriting

Content Sources• Free• Syndicated from content provider• Newly created for this project• Repurposed content• Stock material content

Managing Content• Clients are usually late with the

content• Who is responsible for 3rd party

providers?• Tell the client where the “stuff”

comes from• Need to have a “content plan”

Content Formats• Text

– Get it digitally– Agree on a format– Use forms to get it from client– Not all fonts are the same

Content Formats• Graphics

– Get the source of graphics files– Get high resolution graphics– If scanning is needed, you do it and

not the client– Get vector graphics when you can– Know the difference between a .gif

and a .jpg

Content Formats• Audio

– Get the highest level source possible– MP3, WAV, Quicktime, RealAudio,

NetShow– Who will edit?– Streaming vs. Downloaded– Get copyright permission when

needed

Content Formats• Video

– Always get digital if possible.– Expensive and time-consuming– Make sure it is necessary– RealVideo, Ne5Show, AVI, MOV– For a lot of video you may need a

separate server

Content Delivery• Digital when possible

– Diskette (floppy, zip, or CD)– Email– FTP– Web– Compressed (zipped or stuffed)– Photos for scanning (original when

possible)

Tracking Content• Hard disk organization

– File structure should mirror the site map

• Use a database when available• Update content plan often• BACK UP EVERYTHING YOU GET!

Copywriting• Give copywriters examples to work

from• Copywriters are sensitive creatures• Degree of involvement depends on

the complexity of the web site• Present small doses to client for

signoff before a lot is done

Storyboarding• Raytheon Media• Examples• Art of Storyboarding Example

• Symbolic associative representation of your website– computer generated or hand drawn

• Lines and arrows designate links• Shapes designate nodes

Story Board Concept

Website home page (main menu)Website home page (main menu)

MajorMajorsubmenussubmenus

Individual pages/Individual pages/documentsdocuments

Flow Chart Method

• Create a computer generated or hand-drawn web page template

• Use a separate template for each web page/screen

• Linked pages (nodes) and hypertext can be attached to layout page (home page)

Universal Template Method

Universal Template I

Banner/Graphic/TitleBanner/Graphic/Title

Clickable Image Map MenuClickable Image Map Menu

`Section HeaderSection Header

Text Links

Content

Logo/GraphicAuthor’s name and affiliationAuthor’s email/contact info..Revision datepage URL

description: text and narration content:graphics:video--including voice-over script:3D/animation:audio:links to & from:

Web Page Elements

Universal Template II

Storyboard Page # __/__

Rough sketch ofRough sketch ofweb pageweb pagelayoutlayout

Description

Project:_________________Screen #:_____ / ________Screen Name:____________Designer:_______Checkoff:____

Links To & From

Text & Narration Content:

Graphics/Video

Audio

3D/Animation

Universal Template III

Design and Construction• Several published accounts exist

– But little agreed upon terminology

• “Official” process structures work– Defines a set of deliverables

(artifacts)– However, “everything is custom”

• Process is malleable

First Things First• Set up Server• Get all needed Software• Get all needed Hardware• Get copyright permissions• Find a place to work/meet

Work in Progress• Storyboard• Talk Through• Graphics by mail• Color printouts• Disk• Staging Server

Design Specialties in Organizations

• Specialists vs. Generalists– UI design & info arch vs. graphic

design– no specialization at smaller firms

• Information & navigation design usually done before graphic design

Design Specialties

Information designstructure, categories of information

Navigation designinteraction with information structure

Graphic designvisual presentation of information and navigation (color, typography, etc.)

Design Specialties

Information Architectureincludes management and more responsibility for content

User Interface Designincludes testing and evaluation

Web Site Development Process

(from Fleming, J. Web Navigation: Designing the User Experience. O’ Reilly. 1998)

Web Site Design Process

Web Site Design Process

Implementation

Design

Preliminary Design

Conceptualization

Discovery

Design Process: Discovery

Implementation

Design

Preliminary Design

Conceptualization

Discovery Assess needs– understand

client’s expectations

– determine scope of project

– characteristics of users

Design Process: Discovery• Activities

– Review materials provided by client• Existing versions of products/sites• Other documents

– Competitive analysis– Collect data from users: interviewing, task

analysis, etc.

• Deliverables– Written reports– Presentations

Design Process: Conceptualization

Implementation

Design

Preliminary Design

Conceptualization

Discovery Begin defining site– Take results from

discovery and visualize solutions

– Early information design

Design Process: Conceptualization• Activities

– Brainstorming (collaborative & solo)– Sketching ideas (collaborative & solo)– Defining site structure

• Deliverables– Site maps– Written reports– Presentations

(information design: site map)

Design Process: Conceptualization

(information design: site map + navigation)

Design Process: Conceptualization

(information design: site map)

Design Process: Conceptualization

(information design: site map)

Design Process: Preliminary Design

Implementation

Design

Preliminary Design

Conceptualization

Discovery Generate multiple (3-5) designs

– one will be selected for development

– navigation design– early graphic

design

Design Process: Preliminary Design

ActivitiesSketching designsCreating mock-upsQuick and rough

DeliverablesSchematics (a.k.a. templates)Site mapsMock-upsPresentations

Design Process: Preliminary Design

(information/navigation design: schematic)

Design Process: Preliminary Design

(information/navigation design: schematic)

Design Process: Preliminary Design

(navigation design: storyboard)

Design Process: Design

Implementation

Design

Preliminary Design

Conceptualization

Discovery Develop the design– Design is selected

in previous stage– Increasing level of

detail– Iterate on design

Design Process: Design

Implementation

Design

Preliminary Design

Conceptualization

Discovery Iteration

Design

Prototype

Evaluate

• iteration at the level of development process

• And within design stage

Design Process: DesignActivities

Creating and refining mock-upsGraphic design very activePrototyping

DeliverablesMock-upsPrototypes (HTML, Director, Flash)Presentations

Design Process: Design

(graphic design: mock-up)

Design Process: Implementation

Implementation

Design

Preliminary Design

Conceptualization

Discovery• Prepare design

for handoff– Create final

deliverable– Specifications and

prototypes– As much detail as

possible

Design Process: ImplementationActivities

Create final deliverablesPrepare specifications and guidelinesPrepare prototypes

DeliverablesSpecifications/Guidelines

written or interactivePrototypes (HTML, Director)Presentations

Design Process: Implementation

(interactive specification)

Design Process: Hand off

Project is handed off to engineers/programmers who will implement the siteThere may or may not be direct communication between the designers and programmers

Duration of design phases

Implementation

Design

Discovery 1-2 weeks

1-2 weeks

6-8 weeks

2-3 weeks

(this varies wildly)

ConceptualizationPreliminary Design

Dimensions of Design Communication

Designer

Designer

Designer

Designer

Client

Team Member

Implementer

Self

Testing• Usability• Functional• Operational• Scenario• Security• Copy Proofing

Launch• Search Engines• DNS• Meta-tags• Legal issues resolved• Marketing/PR• Training