Planning your website

Web Site Development Process

Chapter 3: Planning a Successful Web Site: Part 1

Step 1: Define the Purpose

List the goals of the Web site Decide on a topic for the Web site Determine your objectives

Chapter 3: Planning a Successful Web Site: Part 1

Step 2: Identify the Audience

Define the needs of the audience



Develop a preliminary audience profile

Chapter 3: Planning a Successful Web Site: Part 1

Step 3: Plan the Content

Content is critical to the success of a Web site Value-Added Content

Develop relative, informative, and timely content  Do not duplicate content created for print on Web pages - Repurpose the content so it will add value

5
Chapter 3: Planning a Successful Web Site: Part 1

Step 3: Plan the Content

Text
 

Primary component of a Web site Guidelines to consider

Abbreviate text Chunk information Add hyperlinks to explanatory or detailed information Use active voice / friendly tone Remove transitional words Do not use Web clichs

Chapter 3: Planning a Successful Web Site: Part 1

Step 3: Plan the Content

Photographs
Most commonly included content element on Web sites  Can personalize and familiarize the unknown


In Class Find a web site that attaches a photograph as well as description of item

Chapter 3: Planning a Successful Web Site: Part 1

Step 3: Plan the Content

Photographs
Can help deliver a message or prompt an action  Select high-quality, relative pictures

http://www.jeep.com/en/2010/wrangler/

Chapter 3: Planning a Successful Web Site: Part 1

Step 3: Plan the Content

Multimedia
Add action, excitement, and interactivity to your Web site  Viewers are intrigued and entertained by multimedia presentations  Multimedia presentations can be interactive


Users can participate Helper Applications Plug-ins

9
Chapter 3: Planning a Successful Web Site: Part 1

Step 3: Plan the Content

Using multimedia created with Macromedia Flash, the U.S. Air Force accomplishes some impressive recruiting

10

Chapter 3: Planning a Successful Web Site: Part 1

Step 3: Plan the Content

Animations
Widely used to attract attention and liven Web pages  Adds interest and appeal to Web pages  Overuse of animations can become distracting and annoying  Animated GIF


Gives the appearance of moving pictures

11
Chapter 3: Planning a Successful Web Site: Part 1

Step 3: Plan the Content

12

Chapter 3: Planning a Successful Web Site: Part 1

Step 3: Plan the Content

Audio
Low-bandwidth alternative to video  Incorporate audio into a Web site to personalize a message, enhance recall, set a mood, or sell a product or service


13

Chapter 3: Planning a Successful Web Site: Part 1

Step 3: Plan the Content

Video
Video clips incorporate movement and sound  Extremely large sizes of video


Downloadable vs. Streaming Video

http://www.7up.com

14

Chapter 3: Planning a Successful Web Site: Part 1

Step 3: Plan the Content

Dynamically Generated Content



Served up to your Web site visitor triggered by a specific event

Frequently called up from a database

Active Server Pages  Scripting languages



Costaatt banner login information

15

Chapter 3: Planning a Successful Web Site: Part 1

Step 3: Plan the Content

16

Chapter 3: Planning a Successful Web Site: Part 1

Step 4: Plan the Structure

Outline your Web Site



Choose the method that you find most flexible and comfortable
Linear Mesh Random structure Hierarchical structure

17

Chapter 3: Planning a Successful Web Site: Part 1

Linear Structure

Presents information in a specific order



Training website

18

Chapter 3: Planning a Successful Web Site: Part 1

Random Structure (Mesh)

Presents information without a specific order Use only for small Web sites

19

Chapter 3: Planning a Successful Web Site: Part 1

Hierarchical Structure

Organizes information into categories and subcategories Best used in organizational / topical Web sites

20

Chapter 3: Planning a Successful Web Site: Part 1

Hierarchical Structure

21

Chapter 3: Planning a Successful Web Site: Part 1

Preparing for Step 5

Home Page
First page visitors will see  Indicate to visitors what they have accessed  Might include the following:


Image maps Search function Directory

University of Hawaii (http://www.hawaii.edu/)

22

Chapter 3: Planning a Successful Web Site: Part 1

Preparing for Step 5

23

Chapter 3: Planning a Successful Web Site: Part 1

Preparing for Step 5

Splash Page
Provides elements of interest that draws visitors to your Web site  Might contain powerful multimedia such as graphics, sound, and movements  Some visitors consider splash pages a nuisance


24

Chapter 3: Planning a Successful Web Site: Part 1

Preparing for Step 5

25

Chapter 3: Planning a Successful Web Site: Part 1

Preparing for Step 5

Underlying pages
Connects and combines the Web site  Underlying pages should:


Have a look that shows a definite visual connection with the home page and other underlying pages Clearly display the Web site name Provide a link to the home page
Visit (http://www.subway.com/subwayroot/index.aspx)
26
Chapter 3: Planning a Successful Web Site: Part 1

Preparing for Step 5

27

Chapter 3: Planning a Successful Web Site: Part 1

Page Size and Information Placement

The initial, visible screen area is extremely valuable space Place the most critical information above the scroll line


Avoid a cluttered appearance

Chapter 3: Planning a Successful Web Site: Part 1

28

Establish A Visual Connection

Create a consistent look and feel Inconsistent appearances confuse visitors Be careful not to over apply consistency


Overly applied consistency makes pages boring and uninteresting

(http://www.dominos.com/home)

29

Chapter 3: Planning a Successful Web Site: Part 1

Establish A Visual Connection

30

Chapter 3: Planning a Successful Web Site: Part 1

Color Scheme
Color schemes create unity Limit the number of colors in your scheme to three Apply color scheme to the background, text, and graphic elements Background color should increase legibility of text Choose graphics that match your color scheme

31
Chapter 3: Planning a Successful Web Site: Part 1

Color Scheme

The Heinz Web site utilizes an effective color scheme to create a sense of unity

32

Chapter 3: Planning a Successful Web Site: Part 1

Layout
Consistent layout creates unity A well-designed layout creates a sense of balance and order Display certain items consistently (in the same place) on all pages

Main navigation bar  Main content area  Auxiliary links



Itunes
33
Chapter 3: Planning a Successful Web Site: Part 1

Layout

34

Chapter 3: Planning a Successful Web Site: Part 1

Grids

Underlying layout structure that arranges a page into rows and columns Allows you consistently placed items on your pages

35

Chapter 3: Planning a Successful Web Site: Part 1

Tables
Contains cells aligned into rows and columns Two common uses

Create rows and columns of data  Create Web page templates



36

Chapter 3: Planning a Successful Web Site: Part 1

Tables

37

Chapter 3: Planning a Successful Web Site: Part 1

Tables

Position text and other elements

Cell spacing  Cell padding


cell spacing

cell padding 38
Chapter 3: Planning a Successful Web Site: Part 1

Tables

Options for defining table width

Absolute width  Relative width


Each option has advantages and disadvantages Understand that each user will view your table differently

39
Chapter 3: Planning a Successful Web Site: Part 1

Tables

Used to reconstruct segmented images Allows developers to animate certain parts of an image


Rollovers change a page element when the mouse pointer moves over it

Image editing can be done with software packages such as Macromedia Fireworks, Adobe ImageReady, Paint Shop Pro, Photoshop
Chapter 3: Planning a Successful Web Site: Part 1

40

Tables
This image contains four rollovers that display messages when the mouse pointer moves over them

41

Chapter 3: Planning a Successful Web Site: Part 1

Style Sheets

Cascading Style Sheets allow Web designers to attach to their HTML specific information regarding the appearance of their Web pages Styles can:
   

Define measurements of elements Set margins Indicate page breaks Specify other layout features
Chapter 3: Planning a Successful Web Site: Part 1

42

Style Sheets

Allow you to define several attributes all at once to elements with the same HTML tag Internal Style Sheet  Provides styles for individual Web pages External Style Sheet  Used for multiple pages  Created in a separate file  .css extension
Chapter 3: Planning a Successful Web Site: Part 1

43

Step 5: Plan The Web Pages: Sample Plan

44

Chapter 3: Planning a Successful Web Site: Part 1

Step 6: Plan The Navigation

Well-designed navigation pulls the visitor down the home page Draws them deeper into the Web site Design should be both user-based and user-controlled

45

Chapter 3: Planning a Successful Web Site: Part 1

User-Based Navigation
Navigation is user-based if you followed the guidelines for creating the outline structure (Step 4) Major navigational paths are determined by the sites outline structure

46

Chapter 3: Planning a Successful Web Site: Part 1

User-Controlled Navigation

Offer options to navigating your Web site only through its major paths Most visitors use browser navigation features
   

Back and Forward Search History Favorites

Well-designed navigation is essential to the success of your Web site

Chapter 3: Planning a Successful Web Site: Part 1

47

Navigation Elements

Relative and Absolute URLs Text Buttons Image maps

Menus Site index Search feature Frames

48

Chapter 3: Planning a Successful Web Site: Part 1

Navigation Elements
Linking takes visitors to a different section of the page, a different page on the site, or another Web site Relative URL Absolute URL

49

Chapter 3: Planning a Successful Web Site: Part 1

Relative URL
Points to another location in relation to the current location Use for pages within your site

<A HREF=investmentform.html>Investment Form</A>

50

Chapter 3: Planning a Successful Web Site: Part 1

Absolute URL
Points to another location by specifying the protocol, server, path name, and file name Use for pages located on another server

http://www.aarp.com/moneyguide/moneyb ooks
51
Chapter 3: Planning a Successful Web Site: Part 1

Text
Linked text is the most common navigation element Settings for linked text

Unvisited link  Active link  Visited link  Underlining  Rollover effect


52
Chapter 3: Planning a Successful Web Site: Part 1

Alternatives to Linked Text

53

Chapter 3: Planning a Successful Web Site: Part 1

Buttons
Second most common navigation element Design special effects to buttons by adding scripts to HTML Buttons can be downloaded, purchased, or designed from scratch Icons, small, symbolic images, can serve as links

54

Avoid excessive use of icons

Chapter 3: Planning a Successful Web Site: Part 1

Buttons

55

Chapter 3: Planning a Successful Web Site: Part 1

Image Maps
Graphics that link to more than once place Designated hot areas are defined by x and y coordinates Created using mapping software

56

Chapter 3: Planning a Successful Web Site: Part 1

Menus
Offer visitors several navigation options in a relatively small amount of space Various types

Pull-down  Pop-up  Scrolling



57

Chapter 3: Planning a Successful Web Site: Part 1

Menus

58

Chapter 3: Planning a Successful Web Site: Part 1

Site Index
Contains hyperlinked text to specific locations within the Web site Organized alphabetically, or as an outline of the site Generally preferred over site maps (graphic representation)

59

Chapter 3: Planning a Successful Web Site: Part 1

Site Index

60

Chapter 3: Planning a Successful Web Site: Part 1

Search Features
Popular navigational tool for large, complex Web sites Search process is the same for both large and small-scale sites Gives visitors much desired flexibility and control

61

Chapter 3: Planning a Successful Web Site: Part 1

Search Feature

62

Chapter 3: Planning a Successful Web Site: Part 1

Frames
Divide Web pages into sections Frames allow scrolling Understand the pros and cons of using frames Best suited for larger monitors

63

Chapter 3: Planning a Successful Web Site: Part 1

Frames

64

Chapter 3: Planning a Successful Web Site: Part 1

Navigation Guidelines
Consistently place your primary navigation elements in the same location on all pages Underlying pages should include

Link back to home page  Logo or site identifier



65

Chapter 3: Planning a Successful Web Site: Part 1

Navigation Guidelines

Ensure that links on your Web page are

Functional  Relative and worthwhile


Choose link terminology that gives a realistic expectation of the content to be found if the link is visited Indicate to visitors clear link options

66
Chapter 3: Planning a Successful Web Site: Part 1

Navigation Guidelines

Consider visitors who have graphics turned off in their browsers

Use the ALT attribute  Provide text links in addition to graphic elements


67

Chapter 3: Planning a Successful Web Site: Part 1

Step 6: Plan The Navigation Sample Plan

68

Chapter 3: Planning a Successful Web Site: Part 1

Design Plan Checklist

Define the purpose Identify the audience Plan the content Plan the structure Plan the web pages Plan the navigation

69

Chapter 3: Planning a Successful Web Site: Part 1