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

Web Site Design, Production, and Aesthetics  Designing A Web Site

Designing 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…  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. Designing A Web Site, Continued…

 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. Designing A Web Site, Continued…

 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. Designing A Web Site, Continued…

 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) Designing A Web Site, Continued…

 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. Designing A Web Site, Continued…

 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. Designing A Web Site, Continued…

 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. Designing A Web Site, Continued…

 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. Designing A Web Site, Continued…

 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 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 liaison. Designing A Web Site, Continued…

 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 Designing A Web Site, Continued…

 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 Designing A Web Site, Continued…

 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. Designing A Web Site, Continued…

 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 Designing A Web Site, Continued…

 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. Designing A Web Site, Continued…

 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. Designing A Web Site, Continued…

 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. Designing A Web Site, Continued…

 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) Designing A Web Site, Continued…

 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. Designing A Web Site, Continued…

End Chapter 8, Part I. The Internet and the World Wide Web