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
• 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
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)
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: 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: 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: 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: 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
Top Related