COMM 3353: Communication Web Technologies I Chapter 8a: Web Site Design, Production, and Aesthetics Chapter 8a: Web Site Design, Production, and Aesthetics

COMM 3353:Communication Web Technologies I

COMM 3353:Communication Web Technologies I

Chapter 8a:Web Site Design, Production, and Aesthetics

Chapter 8a:Web Site Design, Production, and Aesthetics

www.class.uh.edu/comm/classes/comm3353/ppt/_Pres8a.html

Web Site Design, Production, and AestheticsWeb Site Design, Production, and Aesthetics

Designing A Web Site Designing A Web Site

Designing A Web SiteDesigning A Web Site

A web page can be created by almost anyone with access to a server, and with some basic understanding of HTML.

Once a company or person decides to have an online presence, the real work of creating a web site begins. Not just writing a couple of jazzy HTML docs. Requires thorough knowledge of how the web works,

combined with marketing, design, and Internet technology.

A web page can be created by almost anyone with access to a server, and with some basic understanding of HTML.

Once a company or person decides to have an online presence, the real work of creating a web site begins. Not just writing a couple of jazzy HTML docs. Requires thorough knowledge of how the web works,

combined with marketing, design, and Internet technology.

Designing A Web Site, Continued…Designing A Web Site, Continued…

The key to a successful Web site: Detailed Planning

Site Architecture should be completely mapped and planned prior to the first tag’s creation.

Site content, graphics, video, audio, and links should all be identified and gathered during the planning stages

Mapping gives designers an overall image of how each page fits with the site’s overall architecture.

The key to a successful Web site: Detailed Planning

Site Architecture should be completely mapped and planned prior to the first tag’s creation.

Site content, graphics, video, audio, and links should all be identified and gathered during the planning stages

Mapping gives designers an overall image of how each page fits with the site’s overall architecture.

Sites are structured as “Levels.” Most sites open at a “door.”

Index.html --or-- home.html first-level pages (sections).

Then. . . navigation to interior documents. A2.html

Second-level pages opened from first-level pages.

A2_Link.html Third-level pages opened from second-level pages.

Sites are structured as “Levels.” Most sites open at a “door.”

Index.html --or-- home.html first-level pages (sections).

Then. . . navigation to interior documents. A2.html

Second-level pages opened from first-level pages.

A2_Link.html Third-level pages opened from second-level pages.


Each successive level increases level of content. The more you navigate into a web site, the

more specific the content becomes. Web site design should be done with

both provider and user in mind. A web site may be “perfect” from the

company’s stand point, but worthless from a user point of view.

Each successive level increases level of content. The more you navigate into a web site, the

more specific the content becomes. Web site design should be done with

both provider and user in mind. A web site may be “perfect” from the

company’s stand point, but worthless from a user point of view.


Two Major Components: Design Building

Site design begins with an under-standing of WHY users access the Web Then. . . Combining the needs of the user with the

needs of the provider. Site Building involves deciding purpose, goals,

content, presentation, feedback mechanisms, and site advertising.

Two Major Components: Design Building

Site design begins with an under-standing of WHY users access the Web Then. . . Combining the needs of the user with the

needs of the provider. Site Building involves deciding purpose, goals,

content, presentation, feedback mechanisms, and site advertising.


Stages of Deliberate Web Site Planning I. Going Online II. Content III. Organization IV. Evaluation (rating)

Stages of Deliberate Web Site Planning I. Going Online II. Content III. Organization IV. Evaluation (rating)


Stage I: Going Online Establishing a Purpose

The architecture depends on the provider’s purpose.

A “purpose” guides a site’s basic design function.

A site without clear objectives and goals will most likely be unsuccessful.

Stage I: Going Online Establishing a Purpose

The architecture depends on the provider’s purpose.

A “purpose” guides a site’s basic design function.

A site without clear objectives and goals will most likely be unsuccessful.


Going Online, Continued. . . Goals and Objectives measure a site’s

success. Should be quantifiable.

Exact amounts or terms (e.g. number of hits on the company’s site)

Should have a clear method of evaluation. The absence of clear goals and objectives

can mislead management into thinking a web site is cost-effective or successful.

Going Online, Continued. . . Goals and Objectives measure a site’s

success. Should be quantifiable.

Exact amounts or terms (e.g. number of hits on the company’s site)

Should have a clear method of evaluation. The absence of clear goals and objectives

can mislead management into thinking a web site is cost-effective or successful.


Understanding motivations and targeting an audience People’s reasons for using the web follow a

“shifting” pattern like the web itself. Methods of Viewing:

Instrumentally A defined purpose

Ritualistically Casual surfing to pass the time, or checking the latest

news, out of habit.

Understanding motivations and targeting an audience People’s reasons for using the web follow a

“shifting” pattern like the web itself. Methods of Viewing:

Instrumentally A defined purpose

Ritualistically Casual surfing to pass the time, or checking the latest

news, out of habit.


Understanding motivations and targeting an audience, /Cont./ The first step in Web Site Design:

Site designers must recognize their target audience, and recognize the needs of that audience.

Then. . .the Site provider’s needs and goals should be interlaced with the needs and motivations of the audience.

Understanding motivations and targeting an audience, /Cont./ The first step in Web Site Design:

Site designers must recognize their target audience, and recognize the needs of that audience.

Then. . .the Site provider’s needs and goals should be interlaced with the needs and motivations of the audience.


Determining the type of site needed and hiring personnel: After identifying the Goals and Objectives, and

identifying the Target Audience, a Webmaster and supporting staff should be obtained.

Factors that contribute to the size of support staff needed: a) complexity and depth, b) maintenance, updating

Determining needed staff and their roles: Webmaster, content editor, art designer, technician, software

maintenance, security, and email liaison.

Determining the type of site needed and hiring personnel: After identifying the Goals and Objectives, and

identifying the Target Audience, a Webmaster and supporting staff should be obtained.

Factors that contribute to the size of support staff needed: a) complexity and depth, b) maintenance, updating

Determining needed staff and their roles: Webmaster, content editor, art designer, technician, software

maintenance, security, and email liaison.


Stage II: Online Content The success of a Web site is dependent on how well

the content of the site matches the interests and needs of the target audience. It should match the goals and objectives of the provider as

well.

Success is also measured on site efficiency Prioritize links in accordance with importance. Content must be planned around a general theme or

purpose

Stage II: Online Content The success of a Web site is dependent on how well

the content of the site matches the interests and needs of the target audience. It should match the goals and objectives of the provider as

well.

Success is also measured on site efficiency Prioritize links in accordance with importance. Content must be planned around a general theme or

purpose


Stage II: Online Content, Continued. Value-Added Web Content:

Content, such as games and contests, used to attract visitors and keep them interested and connected to a particular site for longer periods of time.

Most experts agree that value-added content and interactivity are a “must” for the success of any web site

Stage II: Online Content, Continued. Value-Added Web Content:

Content, such as games and contests, used to attract visitors and keep them interested and connected to a particular site for longer periods of time.

Most experts agree that value-added content and interactivity are a “must” for the success of any web site


Stage II: Online Content, Continued. . . Keeping a Site Interesting:

Updating and changing content is inviting to repeated users and encourages repeated visits

The web is unlike most other media forms in that lacks a publishing or broadcast date that lets users know how old a document actually is.

Stage II: Online Content, Continued. . . Keeping a Site Interesting:

Updating and changing content is inviting to repeated users and encourages repeated visits

The web is unlike most other media forms in that lacks a publishing or broadcast date that lets users know how old a document actually is.


III. Organizing a Web Site Overall Web Site Organization depends

on: Provider Purpose Type

Components of Site organization Mapping Grouping Linking

III. Organizing a Web Site Overall Web Site Organization depends

on: Provider Purpose Type

Components of Site organization Mapping Grouping Linking


Mapping Mapping: A Map is a top-level diagram,

representing an overall design, used as a guide for site development

Web Blueprints: A Map that shows how various levels and documents are laid-out and linked together.

Mapping Mapping: A Map is a top-level diagram,

representing an overall design, used as a guide for site development

Web Blueprints: A Map that shows how various levels and documents are laid-out and linked together.


Mapping, Continued. . . Most sites are mapped in a hierarchical

manner A “Center” or “Home” page that links to each

site’s various sections. Each section is made up of various linking

pages.

Mapping, Continued. . . Most sites are mapped in a hierarchical

manner A “Center” or “Home” page that links to each

site’s various sections. Each section is made up of various linking

pages.


Mapping, Continued. . . Some sites are mapped and configured in

a “Wagon Wheel” configuration. The main page acts as a “hub,” linked to all the

other pages All the other pages, in turn, are linked to each

other.

Mapping, Continued. . . Some sites are mapped and configured in

a “Wagon Wheel” configuration. The main page acts as a “hub,” linked to all the

other pages All the other pages, in turn, are linked to each

other.


Mapping, Continued. . . Horizontal vs. Vertical Movement through

a site: Vertical: Movement from a site on one level to

a site on a lower level. (e.g.: from a homepage to an interior page)

Horizontal: Movement from one site to another, but on the same level.

(e.g.: pic page 1 to pic page 2)

Mapping, Continued. . . Horizontal vs. Vertical Movement through

a site: Vertical: Movement from a site on one level to

a site on a lower level. (e.g.: from a homepage to an interior page)

Horizontal: Movement from one site to another, but on the same level.

(e.g.: pic page 1 to pic page 2)


Grouping Subjects together: Arranging sites together based on content

and purpose

Establishing Link Pages Linking pages on each level should be

consistent with the section or area it’s in.

Grouping Subjects together: Arranging sites together based on content

and purpose

Establishing Link Pages Linking pages on each level should be

consistent with the section or area it’s in.


• End Chapter 8, Part I.

• End Chapter 8, Part I.

The Internet and theWorld Wide Web

The Internet and theWorld Wide Web

Documents

COMM 3353: Communication Web Technologies I Chapter 8a: Web Site Design, Production, and Aesthetics Chapter 8a: Web Site Design, Production, and Aesthetics