Project Specification Al Futrell April 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 3 rd 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) – –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) Majorsubmenus Individual pages/ documents 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/Title Clickable Image Map Menu ` Section Header Text Links Content Logo/Graphic Author’s name and affiliation Author’s /contact info.. Revision date page 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 of web page layout 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 design structure, categories of information Navigation design interaction with information structure Graphic design visual presentation of information and navigation (color, typography, etc.)

Design Specialties Information Architecture includes management and more responsibility for content User Interface Design includes testing and evaluation

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

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 Activities Sketching designs Creating mock-ups Quick and rough Deliverables Schematics (a.k.a. templates) Site maps Mock-ups Presentations

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: Design Activities Creating and refining mock-ups Graphic design very active Prototyping Deliverables Mock-ups Prototypes (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: Implementation Activities Create final deliverables Prepare specifications and guidelines Prepare prototypes Deliverables Specifications/Guidelines written or interactive Prototypes (HTML, Director) Presentations

Design Process: Implementation (interactive specification)

Design Process: Hand off Project is handed off to engineers/programmers who will implement the site There may or may not be direct communication between the designers and programmers

Duration of design phases Implementation Design Discovery 1-2 weeks 6-8 weeks 2-3 weeks (this varies wildly) Conceptualization Preliminary Design

Dimensions of Design Communication 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