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

Similar documents
Foundation of Web Goal 4: Proficiency in Adobe Dreamweaver CC

Unit 3. Design and the User Interface. Introduction to Multimedia Semester 1

21 ST CENTURY LEARNING SOLUTIONS

WORKSHEET WEBSITE DEVELOPMENT

Adobe Web Communication using Dreamweaver CS5 Curriculum/Certification mapping

Request for Proposal (RFP) Toolkit

Adobe Web Authoring using Adobe Dreamweaver Exam and objectives

Technical Communication A Practical Approach: Chapter 11: Web Pages and

IBE101: Introduction to Information Architecture. Hans Fredrik Nordhaug 2008

Redesigning a Website Using IA Principals

MMGD0203 MULTIMEDIA DESIGN

Strategy Conceptual Design

About Customizing a SharePoint Server 2007 Site

Delivering the Online customer experience

Unit 3 Building a basic client website

Practical IT Research that Drives Measurable Results OptimizeIT Strategic Planning Bundle

Project Life Cycle. Chapter 11

Sixth Edition. Building an E-commerce Web Site. Building an E-commerce Site: A Systematic Approach. Most important management challenges:

WEB DESIGN QUESTIONNAIRE

ADOBE VISUAL COMMUNICATION USING DREAMWEAVER CS5 Curriculum/Certification Mapping in MyGraphicsLab

Web Site Design Principles. Principles of Web Design, Third Edition

Business Education Program Understandings

Website Design and Development CSCI 311

Make artificial intelligence work for your business MEDIA INFORMATION 2018

Bringing Maps to Life:

Design Iteration: From Evidence to Design. Slides originally by: Dick Henneman

Potential candidates should their CV with visual portfolio to

Typical Website Design & Development process

CREATIVE. web design

Exemplar for Internal Achievement Standard. Technology Level 1

Effective Web Site: Global Standards and Best Practices

Module 9: Audience Analysis, Usability, and Information Architecture COM 420

REQUEST FOR PROPOSALS: ARTIST TRUST WEBSITE REDESIGN

ORDINARY. Connected Health and Wellness Project. Context Creative RGD Web Accessibility Conference

The Ultimate Career Guide For The Web & Graphics Industry

BUYER S GUIDE WEBSITE DEVELOPMENT

Guide for Creating Accessible Content in D2L. Office of Distance Education. J u n e 2 1, P a g e 0 27

Entry Level Assessment Blueprint Web Design

Identify how the use of different browsers and devices affects the look of a webpage. Competencies

Web Design Course Syllabus and Planner

Development Methodology TM

A network is a group of two or more computers that are connected to share resources and information.

Web Development IB PRECISION EXAMS

The main website for Henrico County, henrico.us, received a complete visual and structural

WORLDSKILLS SINGAPORE 2016 TECHNICAL DESCRIPTION. WEB DESIGN (Information for Contestants)

Guideline for Creating Accessible Public Documents 1

Now without being over-modest we can say that it's our work to reach the summit of your desires.

All Adobe Digital Design Vocabulary Absolute Div Tag Allows you to place any page element exactly where you want it Absolute Link Includes the

Measuring What Matters in. Job Ready Assessment Blueprint. Web Design. Test Code: 2750 / Version: 01

4. You should provide direct links to the areas of your site that you feel are most in demand.

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives. Overall Design Is Related to the Site Purpose. Website Organization

Creating a Course Web Site

CURZON PR BUYER S GUIDE WEBSITE DEVELOPMENT

QUESTIONS AND CONTACTS

Interactive Media CTAG Alignments

Dreamweaver Domain 6: Evaluating and Maintaining a Site by Using Dreamweaver CS5

Information System Architecture. Indra Tobing

HTML, XHTML, and CSS. Sixth Edition. Chapter 1. Introduction to HTML, XHTML, and

Fundamentals of Web Design

Objectives. Object-Oriented Analysis and Design with the Unified Process 2

Stay Ahead of Disruptive and Emerging Technology MEDIA INFORMATION 2017

LATIHAN Identify the use of multimedia in various fields.

Step 1 - Learning & Discovery

Dr. Jeff Ritchie Chair of Digital Communications Department at Lebanon Valley College 101 North College Ave. Annville, PA 17003

PRODUCTION PHASES CHANGES

USER EXPERIENCE DESIGN (UXD)

Unit 17 Website Development

CHAPTER 3 WEB DESIGN BASICS KEY CONCEPTS

COMSC-032 Web Site Development- Web Design. Part-Time Instructor: Joenil Mistal

SharePoint 2013 End User Level II

Introduction to Microsoft PowerPoint 2010

New Media Production week 3

Dear Candidate, Thank you, Adobe Education

Principles of Design. Alignment

Document and Web design has five goals:

UI/UX BASICS. What is UX?

ways to present and organize the content to provide your students with an intuitive and easy-to-navigate experience.

Schoology Voluntary Product Accessibility Template (VPAT)

Web Development & Design Foundations with HTML5

Unit 2 Web portfolios using Adobe Dreamweaver CS4

Proposal for the design and development of the Compass Land Consultants website

ABCs of Direct Mail. Tips for More Effective Marketing Publications

Google Analytics. powerful simplicity, practical insight

Web Page, Digital/Multimedia and Information Resources Design CIP Task Grid

Chapter 3! Planning and Design! 2012 Elsevier, Inc. All rights reserved.

Procedure for Developing a Multimedia Presentation

Emergent Learning Technologies

Designing Web Applications: Lessons from SAS User Interface Analysts Todd Barlow, SAS Institute Inc., Cary, NC

Northwood Elementary Technology Fair Application

Chapter 2 Web Development Overview

Edexcel CiDA Course Overview

WEB APPLICATION DEVELOPMENT. How the Web Works

('cre Learning that works for Utah STRANDS AND STANDARDS WEB DEVELOPMENT 1

Universal Design for Learning Tips

Simplify the Way You Work: Enhancing Microsoft Office with MindManager 7

National Unit Specification: general information. Applied Multimedia (Higher) NUMBER DM4D 12. Information Systems (Higher)

Process. Interface Design Introduction. Purpose and Goals of your Website. Module 2. Introduction

Voluntary Product Accessibility Template

ICT 4 Life 3 Functional Skills Matching Chart Level 1 Unit 1. 1 Unit 1

Multimedia Design Guidelines MMP

Transcription:

: Creating Digital Excitement Planning the Multimedia Web Site

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

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

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

Introduction Chapter 2 5

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

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

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

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

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

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

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

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

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

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

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

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

Identify Web Site Categories Chapter 2 18

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

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

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

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

Wireframes Chapter 2 23

Storyboards Chapter 2 24

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

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

Hierarchical Organizational Structure Chapter 2 27

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

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

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

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

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

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

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

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

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

Navigation Bar Chapter 2 37

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

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

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

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

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

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

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

Domain Name Selection Chapter 2 45

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

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

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

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

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

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

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

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

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

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