Multimedia for the Web: Creating Digital Excitement. Planning the Multimedia Web Site

Transcription

1 : Creating Digital Excitement Planning the Multimedia Web Site

2 Chapter Concepts Understand the Design Strategy Identify Web Site Categories Define the Planning Documents Explore Organizational Structure Investigate Navigational Structure Discuss Additional Web Site Tasks Chapter 2 2

3 Introduction Web site development is projectbased process Well-developed plan for site will Save time Money Multiple modifications Rule of thumb for development is 80% planning and 20% production Chapter 2 3

4 Introduction Plan provides structure Web architecture is blueprint for site: State purpose Target audience Organizational/navigational structures Multimedia elements User interface Layout and design Chapter 2 4

5 Introduction Chapter 2 5

6 Understand the Design Strategy Develop a Design Strategy Ensures your Web site effectively achieves purpose for intended audience Shared vision; client and multimedia team clarify the purpose and identify target audience Chapter 2 6

7 Purpose Succinct purpose defined by goals and objectives Goals support the purpose Objectives must be clear, measurable, and obtainable Writing goals and objectives is critical as they guide the development process Chapter 2 7

8 Purpose To determine purpose: How will users be using this Web site? Why visit this site? What will users gain from Web site? Which browser/platform will users use to access this Web site? What types of features will be most useful to the users? Chapter 2 8

9 Purpose Imperative to determine what your client wants in advance Ask client site specifics: How to handle secured transactions What action should user take after visiting site? Is there a specific budget? What is the domain name? Chapter 2 9

10 Purpose Part of planning is educating client about what is practical, possible and eye-catching Client is the visionary of the Web site Important for multimedia team to articulate that vision Chapter 2 10

11 Target Audience Consider the audience Focus on the user Tailor Web site to meet user s needs and wants User profile: picture about the people using the site their online and offline habits Chapter 2 11

12 Target Audience Ways to determine user profile include In-person interviews Online surveys Focus groups Users like to feel in control; give users opportunity to choose of create their own experience Chapter 2 12

13 Target Audience Determine technology available to view your Web site Many users require adaptive technologies Alternate text used by screen readers for blind users Chapter 2 13

14 Target Audience Audience sets the tone, approach, metaphor and emphasis of site Tone: makes a statement Approach: direction to user Metaphor: a theme to aid user Emphasis: whether site will utilize multimedia elements Chapter 2 14

15 Technology Specifications Playback system: Operating system, bandwidth, browser Multimedia elements to be included: Style sheets for comparable quality Functionality How program reacts to an action User Interface Chapter 2 15

16 Creative Brief Creative brief provides summary of the design strategy and process including: Objectives Purpose Target Audience Chapter 2 16

17 Identify Web Site Categories Static Sites Serve the purpose of self-branding Passive, require few design or technology changes Dynamic Sites Provide information and offer some form of interactivity Chapter 2 17

18 Identify Web Site Categories Chapter 2 18

19 Define the Planning Documents Documents used to establish the scope and feel of the site Flowcharts Wireframes Storyboards Chapter 2 19

20 Flowcharts Visual guide of the Web site Graphical representation of how info in site is organized and flows Flowchart is a flexible document Used to illustrate interactivity Chapter 2 20

21 Wireframes and Storyboards Wireframes created to answer what questions related to site Text-only skeletal structure of every click-through possibility Storyboards answer how questions related to the site Diagrams of the layout of each page Chapter 2 21

22 Wireframes and Storyboards Describe the content and sequence of each page Specify how text, graphics, animation, multimedia elements are positioned on each screen Design changes here save money on development Chapter 2 22

23 Wireframes Chapter 2 23

24 Storyboards Chapter 2 24

25 Explore Organizational Structure Organizational structure: the way in which information is organized Hierarchical Nonlinear Linear Data-base driven Chapter 2 25

26 Hierarchical Organizational Structure Top-down approach Sets and subsets of information form a hierarchy Information is chunked down Can be broad and shallow or deep and narrow Chapter 2 26

27 Hierarchical Organizational Structure Chapter 2 27

28 Nonlinear Organizational Structure No prescribed or sequential path Links from one discrete piece of information to another Chapter 2 28

29 Linear Organizational Structure Organizes information sequentially Traditional method of navigation with a set sequence Examples include training sites, online slide show Chapter 2 29

30 Database-Driven Organizational Structure Increasingly popular Large volume of short bits of information Sites that use internal search engine use databases Common examples are library, research, and e-commerce sites Chapter 2 30

31 Site and Link Maps Site map Overview of the organizational structure of site Graphical or text-based menu format Link map Schematic illustrating interconnectivity with site as well as external links Chapter 2 31

32 Investigate Navigational Structure Means through which users know where they are, where they have been, and where they want to go Limit the amount of data the user must keep in short-term memory Chapter 2 32

33 Investigate Navigational Structure Use small, discrete units of information, not long, undifferentiated units Offer simple, consistent navigation available from every page Chapter 2 33

34 Frames Frames divide screen into multiple pages One region of screen remains constant Good for navigation Con: Cannot bookmark specific page Chapter 2 34

35 Navigation Bar Found on almost every Web site in one form or another Text-only navigation bar is practical for vision-impaired users who rely on screen readers Text often used with images/icons Chapter 2 35

36 Navigation Bar Position consistently on every page Drawback to image-based navigation bars: Larger file size makes page slower to download Not accessible to screen readers unless alternative text is present Chapter 2 36

37 Navigation Bar Chapter 2 37

38 Hub and Spokes Cumbersome navigation method Relies too heavily on browser s Back button Users must return to the home page to go to the other pages of Web site Chapter 2 38

39 Search Users navigate directly to content of interest Enter specific search terms Follows standard search guidelines Provides interface for more complicated searches Chapter 2 39

40 Directed Navigational Structure Efficient: tailoring site to user User asked to provide information when entering site zip code, for example Based on information entered, user directed to a specific page Chapter 2 40

41 Discuss Additional Multimedia Web Site Tasks Domain Name Selection Web Site Hosting Search Engine Registration Chapter 2 41

42 Domain Name Selection Numeric address called IP Address (Internet Protocol) Points to a specific location or Web page on the Internet Domain names uses easy-toremember names instead of numeric string Chapter 2 42

43 Domain Name Selection Domain name is a pointer to a numeric Web address Organized according to DNS naming hierarchy: Structured arrangement of ascending authority Root is referred to as. (dot) and directly beneath are top-level domains Chapter 2 43

44 Domain Name Selection Powerful marketing tool Select a name easy to use Name must be registered with registry authority to issue and license domain names Chapter 2 44

45 Domain Name Selection Chapter 2 45

46 Web Site Hosting Once designed, site must be uploaded to Web server accessible to Internet community Can buy a Web server and host site in-house, or outsource to Web-hosting company Chapter 2 46

47 Web Site Hosting Web-host maintains server, network connections, and security of your site on 24-hour basis Different prices for different services Free sites available, but have limitations Chapter 2 47

48 Web Site Hosting Considerations Storage space for Web site Bandwidth for connection speed Peering: host has multiple Internet connections to route traffic in and out Performance Technical support Chapter 2 48

49 Web Site Hosting Considerations E-commerce Scripts and software to use to add features to the site Co-location facilities offer a secure place to physically house hardware Site administration Chapter 2 49

50 Web Site Hosting Considerations Security keeps data secure from hackers Customer Services Price: cheaper is not always better Compare features to effectively compare prices Chapter 2 50

51 Search Engine Registration Register with search engines in order for users to find your multimedia site Use a business who specializes in registering, or use online services Basic information about your site will need to be supplied Chapter 2 51

52 Summary Understand the Design Strategy Purpose Target Audience Technology Specifications Creative Brief Identify Web Site Categories Chapter 2 52

53 Summary Define the Planning Documents Flowcharts Wireframes and Storyboards Explore Organizational Structure Hierarchical Organizational Structure Nonlinear Organizational Structure Chapter 2 53

54 Summary Linear Organizational Structure Data-base Driven Organizational Structure Site and Link Maps Frames Navigation Bar Hub and Spokes Chapter 2 54

55 Summary Search Directed Navigational Structure Domain Name Selection Web Site Hosting Web Site Hosting Considerations Search Engine Registration Chapter 2 55