Planning - Structure

8/3/2019 Planning - Structure

1/69

Planning your website


2/69

Chapter 3: Planning a Successful Web Site:Part 12

Web Site Development

Process


3/69


Step 1: Define the Purpose

List the goals of the Web site

Decide on a topic for the Web site

Determine your objectives


4/69


Step 2: Identify the Audience

Define the needs of the audience

Develop a preliminary audience profile


5/69


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 forprint on Web pages - Repurpose the

content so it will add value


6/69



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


7/69



Photographs

Most commonly included content

element on Web sites

Can personalize and familiarize theunknown

In Class Find a web site that attaches a

photograph as well as description of item


8/69


9/69



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


10/69


Using multimedia

created with

Macromedia Flash, the

U.S. Air Forceaccomplishes some

impressive recruiting



11/69



Animations

Widely used to attract attention and liven

Web pagesAdds interest and appeal to Web pages

Overuse of animations can become

distracting and annoying

Animated GIF

Gives the appearance of moving pictures


12/69




13/69

Chapter 3: Planning a Successful Web Site:

Part 113


Audio

Low-bandwidth alternative to video

Incorporate audio into a Web site topersonalize a message, enhance

recall, set a mood, or sell a product or

service


14/69


Part 114


Video

Video clips incorporate movement and

sound Extremely large sizes of video

Downloadable vs. Streaming Video

http://www.7up.com


15/69


Part 115


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


16/69


Part 116



17/69


Part 117

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


18/69


Part 118

Linear Structure

Presents information in a specific

order

Training website


19/69


Part 119

Random Structure (Mesh)

Presents information without a specific

order

Use only for small Web sites


20/69


Part 120

Hierarchical Structure

Organizes

information into

categories andsubcategories

Best used in

organizational /

topical Web sites


21/69


Part 121

Hierarchical Structure


22/69


Part 122

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/)


23/69


Part 123



24/69


Part 124


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


25/69


Part 125



26/69


Part 126


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)


27/69


Part 127



28/69


Part 128

Page Size and Information

Placement The initial, visible

screen area is

extremely valuablespace

Place the most critical

information above the

scroll line Avoid a cluttered

appearance


29/69


Part 129

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)


30/69


Part 130

Establish A Visual

Connection


31/69


Part 131

Color Scheme

Color schemes create unity

Limit the number of colors in your scheme

to threeApply color scheme to the background,

text, and graphic elements

Background color should increase legibility

of text Choose graphics that match your color

scheme


32/69


Part 132

The Heinz Web site utilizes an

effective color scheme to create

a sense of unity

Color Scheme


33/69


Part 133

Layout

Consistent layoutcreates unity

A well-designed layout creates a sense ofbalance and order

Display certain items consistently (in thesame place) on all pages

Main navigation bar

Main content area

Auxiliary links Itunes


34/69


Part 134

Layout


35/69


Part 135

Grids

Underlying layout

structure that arranges

a page into rows and

columns

Allows you

consistently placed

items on your pages


36/69


Part 1

36

Tables

Contains cells aligned into rows and

columns

Two common uses Create rows and columns of data

Create Web page templates


37/69


Part 1

37

Tables


38/69


Part 1

38

Tables Position text and other elements

Cell spacing

Cell padding

cell

spacing

cell

padding


39/69


Part 1

39

Tables

Options for defining table width

Absolute width

Relative width

Each option has advantages and

disadvantages

Understand that each user will viewyour table differently


40/69


Part 1

40

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 asM

acromedia Fireworks,Adobe ImageReady, Paint Shop Pro,

Photoshop


41/69


Part 1

41

This image contains

four rollovers that

display messageswhen the mouse

pointer moves over

them

Tables


42/69


Part 1

42

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


43/69


Part 1

43

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 separatefile

.css extension


44/69


Part 1

44

Step 5: Plan The Web

Pages: Sample Plan


45/69


Part 1

45

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


46/69


Part 1

46

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


47/69


Part 1

47

User-Controlled Navigation

Offer options to navigating your Web siteonly 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


48/69


Part 1

48

Navigation Elements

Relative and Absolute

URLs

Text Buttons

Image maps

Menus

Site index

Search feature Frames


49/69


Part 1

49

Navigation Elements

Linkingtakes visitors to a different

section of the page, a different page

on the site, or another Web site Relative URL

Absolute URL


50/69


Part 1

50

Relative URL

Points to another location in relation to

the current location

Use for pages within your site

Investment

Form


51/69


Part 1

51

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/moneybooks


52/69


Part 1

52

Text

Linked textis the most common

navigation element

Settings for linked text Unvisited link

Active link

Visited link Underlining

Rollover effect


53/69


Part 1

53

Alternatives to Linked Text


54/69


Part 1

54

Buttons

Second most common navigationelement

Design special effects to buttons byadding scripts to HTML

Buttons can be downloaded,purchased, or designed from scratch

Icons, small, symbolic images, canserve as links

Avoid excessive use of icons


55/69


Part 1

55

Buttons


56/69


Part 1

56

Image Maps

Graphics that link to more than once

place

Designated hot areas are defined by xand ycoordinates

Created using mapping software


57/69


Part 1

57

Menus

Offer visitors several navigation

options in a relatively small amount of

space Various types

Pull-down

Pop-up

Scrolling


58/69


Part 1

58

Menus


59/69


Part 1

59

Site Index

Contains hyperlinked text to specific

locations within the Web site

Organized alphabetically, or as an outlineof the site

Generally preferred oversite maps

(graphic representation)


60/69


Part 1

60

Site Index


61/69


Part 1

61

Search Features

Popular navigational tool for large,

complex Web sites

Search process is the same for bothlarge and small-scale sites

Gives visitors much desired flexibility

and control


62/69


Part 1

62

Search Feature


63/69


Part 1

63

Frames

Divide Web pages into sections

Frames allow scrolling

Understand the pros and cons ofusing frames

Best suited for larger monitors


64/69


Part 1

64

Frames


65/69


Part 1

65

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 orsite identifier


66/69


Part 1

66


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


67/69


Part 1

67


Consider visitors who have graphics

turned off in their browsers

Use the ALTattribute Provide text links in addition to graphic

elements


68/69


Part 1

68

Step 6: Plan The Navigation

Sample Plan


69/69

Chapter 3: Planning a Successful Web Site:P t 1

69

Design Plan Checklist

Define the purpose

Identify the audience

Plan the content

Plan the structure

Plan the web pages

Plan the navigation

Date post:	06-Apr-2018
Category:	Documents
Upload:	keron-thomas
View:	239 times
Download:	0 times

Planning - Structure

Documents