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

2. Project Specification Content Design and Construction Testing, Launch, and Handover

3. Content Sourcing Managing Formatting Delivering Tracking Copywriting

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

5. 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”

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

7. 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

8. 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

9. 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

10. Content Delivery Digital when possible –Diskette (floppy, zip, or CD) –Email –FTP –Web –Compressed (zipped or stuffed) –Photos for scanning (original when possible)

11. 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!

12. 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

13. Storyboarding Raytheon Media Examples Art of Storyboarding Example

14. Symbolic associative representation of your website –computer generated or hand drawn Lines and arrows designate links Shapes designate nodes Story Board Concept

15. Website home page (main menu) Majorsubmenus Individual pages/ documents Flow Chart Method

16. 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

17. Universal Template I Banner/Graphic/Title Clickable Image Map Menu ` Section Header Text Links Content Logo/Graphic Author’s name and affiliation Author’s email/contact info.. Revision date page URL

18. description: text and narration content: graphics: video--including voice-over script: 3D/animation: audio: links to & from: Web Page Elements Universal Template II

19. 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

20. 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

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

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

23. 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

24. 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.)

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

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

27. Web Site Design Process

28. Implementation Design Preliminary Design Conceptualization Discovery

29. Design Process: Discovery Implementation Design Preliminary Design Conceptualization Discovery Assess needs –understand client’s expectations –determine scope of project –characteristics of users

30. 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

31. Design Process: Conceptualization Implementation Design Preliminary Design Conceptualization Discovery Begin defining site –Take results from discovery and visualize solutions –Early information design

32. Design Process: Conceptualization Activities –Brainstorming (collaborative & solo) –Sketching ideas (collaborative & solo) –Defining site structure Deliverables –Site maps –Written reports –Presentations

33. (information design: site map) Design Process: Conceptualization (information design: site map + navigation)

34. Design Process: Conceptualization (information design: site map)

35. Design Process: Conceptualization (information design: site map)

36. 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

37. Design Process: Preliminary Design Activities Sketching designs Creating mock-ups Quick and rough Deliverables Schematics (a.k.a. templates) Site maps Mock-ups Presentations

38. Design Process: Preliminary Design (information/navigation design: schematic)

39. Design Process: Preliminary Design (information/navigation design: schematic)

40. Design Process: Preliminary Design (navigation design: storyboard)

41. 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

42. Design Process: Design Implementation Design Preliminary Design Conceptualization Discovery Iteration Design Prototype Evaluate iteration at the level of development process And within design stage

43. Design Process: Design Activities Creating and refining mock-ups Graphic design very active Prototyping Deliverables Mock-ups Prototypes (HTML, Director, Flash) Presentations

44. Design Process: Design (graphic design: mock-up)

45. Design Process: Implementation Implementation Design Preliminary Design Conceptualization Discovery Prepare design for handoff –Create final deliverable –Specifications and prototypes –As much detail as possible

46. Design Process: Implementation Activities Create final deliverables Prepare specifications and guidelines Prepare prototypes Deliverables Specifications/Guidelines written or interactive Prototypes (HTML, Director) Presentations

47. Design Process: Implementation (interactive specification)

48. 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

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

50. Dimensions of Design Communication Designer Client Team Member Implementer Self

51. Testing Usability Functional Operational Scenario Security Copy Proofing

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