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

Slides:



Advertisements
Similar presentations
INFORMATION SYSTEMS APPLIED MULTIMEDIA HIGHER This presentation will probably involve audience discussion, which will create action items. Use PowerPoint.
Advertisements

Chapter 11 Designing the User Interface
Information Architecture Information Architecture (IA) is a process of identifying the objectives for building a Web site and then constructing a comprehensive.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Information Architecture Week 8. Information Architecture QUIZ Please put your books away and get ready for this week’s quiz.
Art 155 Information Architecture In-class Presentation Week 9B.
MULTIMEDIA Development Team.
User Centered Web Site Engineering Part 2. Iterative Process of User-Centered Web Engineering Prototype Evaluate Discovery Maintenance Implementation.
DENIM: Finding a Tighter Fit with Web Design Practice James Lin, Mark W. Newman, Jason I. Hong, James A. Landay April 6, 2000 CHI 2000, The Hague
Art 155 Information Architecture In-class Presentation Week 9A.
Kapi’olani Community College Art 155 Information Architecture In-class Presentation Week 8B.
Your Interactive Guide to the Digital World Discovering Computers 2012.
DENIM A Sketching Tool for Prototyping Web and Desktop UIs Mark Newman and Jimmy Lin Group for User Interface Research UC Berkeley July 8, 1999.
Discovering Computers Fundamentals, 2012 Edition Your Interactive Guide to the Digital World.
Effort in hours Duration Over Weeks Or Months Inception Launch Web Lifecycle Methodology Maintenance Phases Copyright Wonderlane Studios.
Web Design cs414 spring Announcements Project status due Friday (submit pdf)
Living in a Digital World Discovering Computers 2011.
Presented by Mina Haratiannezhadi 1.  publishing, editing and modifying content  maintenance  central interface  manage workflows 2.
Chapter 13: Designing the User Interface
Discovering Computers Fundamentals, 2011 Edition Living in a Digital World.
Professor Michael J. Losacco CIS 1110 – Using Computers Application Software Chapter 3.
Creating a Web Site Back to Table of Contents. Creating a Web Site Conceiving a Web Site Planning a Web Site 2 Creating a Web Site Section 9-1 Section.
Louisa Lambregts, What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations.
Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise.
Problemsolving 2 Problem Solving: Designing a website solution Identifying how a solution will function Taking into account the technical constraints a.
4.5 Multimedia Production. Learning Outcome 1. Design the structure and user interface for a multimedia project. 2. Produce a successful multimedia project.
It is helpful to break up the word ‘multimedia’ in order to gain a better understanding of its meaning. “Multi” means more than one e.g. a multi storey.
Adobe Dreamweaver CS3 Revealed CHAPTER ONE: GETTING STARTED WITH DREAMWEAVER.
Chapter 12: The Internet The ultimate direct. Internet Facts U.S. firms spend $14.7 billion on Internet advertising in 2005 By 2010, they are expected.
Introduction to Interactive Media 02. The Interactive Media Development Process.
Multimedia and the Web Chapter Overview  This chapter covers:  What Web-based multimedia is  how it is used today  advantages and disadvantages.
COM 263 Design Process. o Example: Tampa International Film Festival Web Site.
1 DENIM: An Informal Web Site Design Tool Inspired by Observations of Practice CS 376 – Research Topics in HCI 11/01/2005 Tony Tulathimutte.
Bayu Priyambadha, S.Kom Teknik Informatika Universitas Brawijaya.
Planning and Writing Your Documents Chapter 6. Start of the Project Start the project by knowing the software you will write about, but you should try.
MULTIMEDIA DEVELOPMENT
IT 499 Bachelor Capstone Week 8. Adgenda Administrative Review UNIT Seven UNIT Eight Project UNIT Nine Preview Project Status Summary.
Introduction to Interactive Media The Interactive Media Development Process.
CHAPTER TWO THE MAKING OF MULTIMEDIA: AND MULTIMEDIA DEVELOPMENT TEAM
Multimedia Design 1. 2 Objectives By completion of this session, you will be able to: Organize your multimedia project Develop Flowcharts and Storyboards.
U.S. Department of Agriculture eGovernment Program Design Approach for usda.gov April 2003.
Multimedia ITGS. Multimedia Multimedia: Documents that contain information in more than one form: Text Sound Images Video Hypertext: A document or set.
Introduction to Making Multimedia
1 Week 5 Application Software. Objectives Overview Identify the four categories of application software Describe characteristics of a user interface Identify.
Introduction to Multimedia Review 1 - Lecture Notes Semester 1.
Interface Design 2 Week 2. Interface Design 2 :: Week 2 :: Calendar.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® DESIGN PROJECT PRODUCTION PHASES.
Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design.
Chapter 3-Multimedia Skills
Lesson 3-Multimedia Skills. Overview Members of a multimedia team. Roles and responsibilities in a multimedia team.
Oman College of Management and Technology Course – MM Topic 7 Production and Distribution of Multimedia Titles CS/MIS Department.
Discovering Computers Fundamentals, 2010 Edition Living in a Digital World.
Understanding Web-Based Digital Media Production Methods, Software, and Hardware Objective
EUROTECHNIKI PRODUCTION OF MULTIMEDIA MATERIALS FOR EDUCATION MODULE 5: PRODUCTION OF MULTIMEDIA MATERIALS FOR EDUCATION ANTWERP MEETING JANUARY.
Advanced Higher Computing Science The Project. Introduction Worth 60% of the total marks for the course Must include: An appropriate interface using input.
User-Centered Design Services for MSU Web Teams Sarah J. Swierenga, Director Usability & Accessibility Center MSU Webmasters 402 Computer Center February.
Objectives Overview Identify the four categories of application software Describe characteristics of a user interface Identify the key features of widely.
Application Software Chapter 6.
APPLIED MULTIMEDIA HIGHER
Web Development A Visual-Spatial Approach
Define phase Interview the client to understand goals, audience, content, design, and delivery requirements. Organize and outline interview information.
Chapter 10 Development of Multimedia Project
DESIGN PROJECT PRODUCTION PHASES DEFINE, STRUCTURE, DESIGN, BUILD AND TEST, DELIVERY ® Copyright 2012 Adobe Systems Incorporated. All rights reserved.
Back to Table of Contents
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
DESIGN PROJECT PRODUCTION PHASES DEFINE, STRUCTURE, DESIGN, BUILD AND TEST, DELIVERY ® Copyright 2012 Adobe Systems Incorporated. All rights reserved.
Project HE Assignment Web Site Design
1. 00 Apply procedures to set project requirements in Dreamweaver
Presentation transcript:

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