Web Design 6E

Planning a Successful Website: Part 1

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or
service or otherwise on a password-protected website for classroom use. 1
 Chapter Objectives

• Describe the website development planning process

• Complete Step 1: Identify the website’s purpose and
target audience
• Complete Step 2: Determine the website’s general
content
• Complete Step 3: Select the website’s structure

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 2
otherwise on a password-protected website for classroom use.
 The Website Development Planning Process (1 of 3)

• Planning ensures the website development will be:

• Efficient
• Cost-effective
• Successful

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 3
otherwise on a password-protected website for classroom use.
 The Website Development Planning Process (2 of 3)

• A Website plan or design plan determines:

• Purpose
• Audience
• Content
• Structure
• Navigation
• Visual design
• Publishing and maintenance

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 4
otherwise on a password-protected website for classroom use.
The Website Development Planning Process (3 of 3)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 5
otherwise on a password-protected website for classroom use.
 Step 1: Define the Website’s Purpose & Audience

• Website goals
• Website objectives
• Target audience profile
• Target audience wants, needs, and expectations
• Website purpose statement

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 6
otherwise on a password-protected website for classroom use.
 Website Goals and Objectives

• Websites likely will have one primary goal and several secondary
goals
• Objectives are the methods you will use to accomplish the goals
• Demographic characteristics
• Psychographic characteristics
• Develop a target audience profile
- UX and UI

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 7
otherwise on a password-protected website for classroom use.
Target Audience Profile

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 8
otherwise on a password-protected website for classroom use.
 Target Audience Wants, Needs, and Expectations

• Both general and specific ways

• Needs assessment answers questions about audience’s
wants and behaviors

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 9
otherwise on a password-protected website for classroom use.
 Website Purpose Statement

• Formal, written summary of reasons for publishing the website

• Overall goals
• Specific objectives
• Agreement between designer and client

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 10
otherwise on a password-protected website for classroom use.
 Step 2: Determine the Website’s General Content (1 of 2)

• A website will likely have multiple webpages with:

• Text
• Images
• Audio
• Video
• Animations
• Multimedia

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 11
otherwise on a password-protected website for classroom use.
Step 2: Determine the Website’s General Content (2 of 2)

Subsidiary
Home page
pages

Landing /
entry pages
© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 12
otherwise on a password-protected website for classroom use.
 Home Pages (1 of 2)

• The home page is often the first page a visitor sees

• Should include:
• Who
• What
• Why
• Where
• Search feature
• Establish visual identity

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 13
otherwise on a password-protected website for classroom use.
Home Pages (2 of 2)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 14
otherwise on a password-protected website for classroom use.
 Subsidiary Pages (1 of 2)

• Websites often include multiple subsidiary or underlying

pages
• Should include the same elements as its home page:
• Name
• Logo
• Font
• Color scheme

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 15
otherwise on a password-protected website for classroom use.
Subsidiary Pages (2 of 2)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 16
otherwise on a password-protected website for classroom use.
 Landing Pages

• Appears when a visitor reaches a website by clicking a:

• Link
• Advertisement
• Search result
• Use to gauge effectiveness of marketing

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 17
otherwise on a password-protected website for classroom use.
Website Structure Plan

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 18
otherwise on a password-protected website for classroom use.
 Value-Added Content (1 of 2)

• Relevant
• Informative
• Timely
• Accurate
• High quality
• Usable

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 19
otherwise on a password-protected website for classroom use.
 Value-Added Content (2 of 2)

• In general, create original content prepared specifically for the

web
• Repurposing modifies elements for the web
- Shortening or rewriting text
- Adding hyperlinks to background information
- Altering photos
- Creating an infographic
- Editing audio and video

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 20
otherwise on a password-protected website for classroom use.
 Text

• Visitors typically scan webpage text for information

rather than read the text word for word
• Chunk text for scannability
• Place explanatory information on linked pages
• Keep content to one page where possible
• Use active voice, action verbs, and a friendly tone
• Remove transitional words and phrases like as stated
previously, similarly, and as a result

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 21
otherwise on a password-protected website for classroom use.
 Images

• Can familiarize the unknown

• Illustrations
• Diagrams
• Photographs
• Stock images
- Clip art
- Photographs

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 22
otherwise on a password-protected website for classroom use.
 Audio and Video

• Audio
• Audio can vary in form and intensity
• Can persuade, inspire, personalize, motivate, or soothe
• Video
• Incorporates movement and sound
• Extremely large sizes of video
- Downloadable vs. Streaming media

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 23
otherwise on a password-protected website for classroom use.
 Interactivity and Animated Elements (1 of 2)

• Multimedia combines text, images, movement, audio,

video
• Interactivity refers to elements that encourage website
visitors to perform actions
• Animated elements
• JavaScript
• HTML5 <canvas> element

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 24
otherwise on a password-protected website for classroom use.
 Interactivity and Animated Elements (2 of 2)

• Interactive elements include:

• Polls
• Quizzes
• Comment features

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 25
otherwise on a password-protected website for classroom use.
 Dynamically Generated Content (1 of 2)

• Updates periodically
• Can be triggered by an event
- Time of day
- Visitor request
• Database-driven websites
• Searchable
• Easily updated

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 26
otherwise on a password-protected website for classroom use.
Dynamically Generated Content (2 of 2)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 27
otherwise on a password-protected website for classroom use.
Sample Plan for Value-Added Content

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 28
otherwise on a password-protected website for classroom use.
 Organizing Website Files

• Organize the resulting files in your website

- HTML
- Images
-Animation and media
• If using a CMS, files stored on CMS server
- Gallery
• Create folders on your computer’s local hard drive
- Regularly create backups

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 29
otherwise on a password-protected website for classroom use.
 Step 3: Select the Website’s Structure (1 of 4)

• Visualize the organization of pages and linking

relationships
• Organize pages by level of detail
• Follow the links between pages to make certain visitors
can quickly click through the site to find useful
information
• Detect dead-end pages
• Rearrange pages and revise linking relationships

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 30
otherwise on a password-protected website for classroom use.
 Step 3: Select the Website’s Structure (2 of 4)

• A site map is a visual representation of a website’s

structure
• To create a site map draw and arrangement of shapes
and lines
• Shapes represent pages
• Lines indicate links

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 31
otherwise on a password-protected website for classroom use.
Step 3: Select the Website’s Structure (3 of 4)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 32
otherwise on a password-protected website for classroom use.
Step 3: Select the Website’s Structure (4 of 4)

Linear /
Webbed
Tutorial

Hierarchical

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 33
otherwise on a password-protected website for classroom use.
 Linear/Tutorial Structure

• Presents information in a specific order

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 34
otherwise on a password-protected website for classroom use.
 Webbed Structure (1 of 2)

• Also called random website structure

• Arranges information without a specific order
• Visitors can choose which pages to visit
• Provide a search feature

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 35
otherwise on a password-protected website for classroom use.
Webbed Structure (2 of 2)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 36
otherwise on a password-protected website for classroom use.
 Hierarchical Structure (1 of 2)

• Organizes information into categories and subcategories

• Increasing level of detail
• Good for organizational or topical websites
• Some websites use a combination of structures

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 37
otherwise on a password-protected website for classroom use.
Hierarchical Structure (2 of 2)

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 38
otherwise on a password-protected website for classroom use.
Sample Website Structure

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 39
otherwise on a password-protected website for classroom use.
 Chapter Summary

• Describe the website development planning process

• Complete Step 1: Identify the website’s purpose and
target audience
• Complete Step 2: Determine the website’s general
content
• Complete Step 3: Select the website’s structure

© 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or 40
otherwise on a password-protected website for classroom use.