Style Guide Outline



Web Site Design ASCIT Workshop

Fall 1999 Page 1

HTM 305

Web Site Design

Objective

The objective of this workshop is to introduce the basic principles of designing effective, usable web sites. Most web sites, including major corporate sites, are poorly designed. Most sites do not focus on value added marketing – sharing more than just information, but sharing knowledge and expertise. Web sites are often overly difficult to use. When a user is given a specific task to accomplish, the majority of the time they will fail. Most web designers fail to understand the needs of the users and the limitations of the technology.

The amount of information available on the web is growing at an incredible pace. With the increased competition for attention, simply having a web presence will no longer guarantee visitors. Web sites now must be designed to make the user’s experience as enjoyable as possible.

Utility can be defined as the usefulness or satisfaction one receives from a good or service. The focus of this workshop is web design based on improving utility. Topics to be covered include developing content, writing for the web, site design, page layout, cross platform issues, optimizing images, and a review of html authoring packages. This is a three hour session presented in lecture format; each section will repeat the same material.

Table of Contents

References ........................................................ Page 2

Section One - Introduction

What’s Wrong With the Web ..................... Page 3

The Four Elements of Good Design .............. Page 4

Section Two - The Web Design Process

Planning ...................................... Page 5

Determining Content ........................... Page 6

Information Architecture ..................... Page 7

Page Design & Layout........................... Page 9

Section Three - Graphic Design ..................................... Page 10

Section Four - Tools for creating web sites ........................ Page 12

Companion Web Site



Web Site Design ASCIT Workshop

Fall 1999 Page 2

References

Books

Holzschlag, Molly, (1998), Web By Design, Sybex

Rosenfeld, Louis, and Morville, Peter, (1998), Information Architecture for the World Wide Web, O’Reilly

Sano, Darrell, (1996), Designing Large-Scale Web Sites, John Wiley & Sons

Sterne, Jim, (1995), World Wide Web Marketing, John Wiley & Sons

Waters, Crystal, (1996), Web Concept and Design, New Riders Publishing

Weinman, Lynda, (1997), Designing Web Graphics.2, New Riders Publishing

Williams, Robin, (1994), The Non-Designer’s Design Book, Peachpit Press

Web Resources

Copyright Links (from Iowa State)



Graphics, Visualization, & Usability Center's (GVU) User Surveys



Jakob Nielsen's Website



How Users Read on the Web



Inverted Pyramids in Cyberspace



Response Time: The Three Important Limits



The Web Usage Paradox: Why do People Use Something This Bad



Report Puts a Number on the World Wide Wait (New York Times article)



Useable Web



Writing on the Web (from Sun Microsystems)



Web Review



Yale Style Guide



Web Site Design ASCIT Workshop

Fall 1999 Page 3

Section One - Introduction

What’s Wrong the Web

Overview

Despite the popularity of the web, most sites are poorly designed. Most users find using the web a frustrating experience. The Graphics, Visualization, & Usability (GVU) Center at Georgia Tech has performed user surveys of the World Wide Web for the past several years. The results of these surveys regarding problems people have using the web provide valuable insight into effective design.

The most common complaint about the web is speed. Sites should be made to download as quickly as possible.

Application

How Fast is Fast Enough

Pages should load in no more than 10 seconds, less than one second is the ideal

General recommendations for page sizes fall between 30k and 60k, but this should be based on how the target audience is connected to the internet (Pages load at approximately 3k per second over a 28.8 modem)

Improving Speed

3. Use images and graphics only to meet the site’s objectives

4. Optimize images to the smallest possible size that will maintain acceptable quality

5. Reuse images to take advantage of the computer’s cache

6. Keep navigation and other important information in the first screen

7. Avoid long tables and layers of embedded tables

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 4

Section One - Introduction (cont.)

The Four Elements of Good Design

Overview

The four elements of good design in all effective web sites are content, navigation, interaction, and feedback. These elements will remain relatively constant and are independent of technological advances.

Content

Content is the single most important element of a web site. Content is king. All successful web sites will have reliable, accurate, timely, compelling information that is developed for the target audience.

Navigation

The quantity of information on the internet has grown faster than user’s ability to find it. Single home pages have been replaced by large comprehensive web sites. By it’s very nature, electronic information is difficult to navigate. Effective sites will get users to the content quickly and intuitively, and each page will provide context on that page’s relationship to the site.

Interaction

A web site is not something people read, it is something they do. The best web sites make users feel like they are pulling information they want, rather than having it pushed at them. The user is in control of what happens.

Feedback

The web provides the opportunity for two way communication. Effective web sites actively solicit the opinions of users through the use of on-line forms and email.

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 5

Section Two - The Web Design Process

Step One - Planning

Overview

Designing, creating and maintaining a large web site requires planning and traditional project management skills. An important first step that is often skipped in the rush to create a web site is determining the site’s goals. Too often sites are launched without a fundamental understanding of mission and purpose. The successful web designer will spend time planning the project, determining objectives, identifying audiences, and establishing criteria for measuring success.

Application

Type of Site

There are many types of web sites including educational, reference, entertainment, business, and point of sale. (The focus of this workshop is internet sites. Designing intranet and extranet sites requires a different approach.)

Mission & Objectives

Specific goals for the site should be identified. Examples for a business site would include disseminating information, improving customer service, sales, marketing, instruction, branding, etc.

Identifying Your Audience

8. Who are they? (Demographics)

9. What information do they want?

10. How do they connect to the internet?

11. What is their level of computer literacy?

Budget

The development of a web site is a continual process that doesn’t end when the web site is launched. Proper project planning and budgeting should be completed before starting a site. Plan on spending a minimum of 50% of the original budget on yearly maintenance costs.

Staffing

Specific skills for creating a web site include project management, graphic design, computer programming, html, writing and editing, and marketing. These can be the responsibilities of one person or a large team. Identify what can be done in-house and what must be outsourced.

Measuring Success

Success can be measured in many ways including traffic to the site (hits), reduced operating expenses, public exposure, and improved customer relations.

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 6

Section Two - The Web Design Process

Step Two: Determining Content

Overview

Content is the most important element of any web site. The best web sites are more than electronic brochures, they provide value. They provide more than information, they provide knowledge and expertise. Effective web sites are created in a customer service paradigm. Content is based on users’ needs, presented in a way the user will understand.

Application

Validation

Users are often skeptical of information found on the web. Validate content by keeping it current and accurate, signing and dating each page, and including a copyright statement. The objective is to earn the user’s trust.

Writing for the Web

12. Users don’t read web pages, they scan

13. Use sub headings and bullets to provide white space

14. Information should be succinct, reliable and timely

15. Use traditional Style Guides (spelling, punctuation, usage)

16. Write in inverted pyramids

17. Use specific link references - avoid “Click Here”

18. Avoid promotional writing

Copyright

In general, everything on the web is protected by copyright. Written permission from the copyright holder must be obtained before using copyrighted material.

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 7

Section Two - The Web Design Process

Step Three - Information Architecture

Overview

Designing a web site requires a different approach than designing a single web page. The elements of information architecture include organizational systems, navigation systems, labeling systems, and search methods. Concentrating on a site’s information architecture will improve utility. The well designed site will have a short learning curve. Users will quickly become comfortable, confident that they can easily find quality information.

As web sites have grown larger and more complex, navigation has become increasingly important. The early style of embedding links in the content has been replaced by stand alone navigation systems that help provide context and easy movement.

Application

Organizing Information

19. Seven plus or minus two rule: the cognitive limits of the human mind

20. Chunk information into small, discrete units

21. Establish a hierarchy of importance

22. Structure the relationships between the chunks of information

23. Analyze the balance between menu pages and content pages. The goal is efficient and intuitive task flow

Navigation Systems

24. Allow users to quickly and easily find information

25. Allow users to easily move to the various sections of a site

26. Provide context - visual clues on the relationship of an individual page to the overall site

27. Separate navigation from content

Improving Navigation

28. Logical organization of information - strong hierarchy

29. Provide clear navigational aides, including visual cues

30. Consistency - be predictable

31. Don’t disable the browser’s navigational features

32. Provide links to the home page and major navigational pages from every page

33. Include a bottom navigational bar on long pages

34. Include a table of contents, search page, index, and site maps where appropriate

Web Site Design ASCIT Workshop

Fall 1999 Page 8

Section Two - The Web Design Process

Step Three - Information Architecture (continued)

Site Design Guidelines

35. The best design is one no one notices. Keep it simple

36. Every site should have a graphic identity

37. Background images shouldn’t hinder legibility

38. Every home page should clearly state the intent of the site

39. Keep users informed of changes

40. Only include links that add value

41. Test on all common platforms and browsers

The following techniques have been shown to adversely effect the usability of web sites. Careful consideration should be given before using the following:

Frames

42. Break the fundamental user model of the web page

43. URL’s don’t work - you can’t bookmark a page and return to it

44. Indexing programs (search engines) do not always index the contents of frames

45. Difficult to print

46. Difficult to code properly

47. The back button on older browsers doesn’t work

48. Most users prefer frame free sites

Image Maps

49. Large file sizes

50. Server side image maps disable navigation

51. Accessibility for people with disabilities

52. Time consuming to create

Gratuitous Use of Technology

53. Is the design based on the site’s objectives or are you just showing off your skills

54. Designing web sites is radically different from designing CD-ROMS due to bandwidth issues

55. Forcing user’s to download plug-ins will have a negative impact

56. Movement is very distracting and should be used with caution (animated gifs)

Under Construction Pages

57. Don’t launch a site until it’s complete. The assumption is the web is always under construction

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 9

Section Two - The Web Design Process

Step Four - Page Design & Layout

Overview

Page design consists of the positioning and balancing of page elements to direct the readers eye through the content of the page by using the tools of layout, typography, and illustration. The traditional page design principles of contrast, alignment, repetition and proximity are applicable to web design.

Of the three current methods for web page layout (tables, frames and cascading style sheets), tables are the most consistent, dependable technique.

Application

Page Layout

58. Use a page grid to control the relationship of page elements

59. Modular design - each page will have areas that perform certain functions

60. Use white space for emphasis and to provide visual relief

Page Design Guidelines

61. Design for 640 x 480 display. Do not make users scroll horizontally

62. Include clear titles (bookmarks)

63. Provide navigation in the first screen

Stand Alone Pages

64. Every page should include logos, titles and other information to indicate the site to which it belongs

65. Sign and date each page

66. Provide links to the home page and major navigational pages

67. Include a “mailto” link on each page

Typography

68. Fonts are controlled by the user

69. Legibility is the most important factor

70. 60-70 characters per line

71. Avoid all capital and all bold letters

72. Italics is difficult to read

Cross Platform Issues

73. Default Gamma Settings

74. Default Font Size & Spacing

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 10

Section Three: Graphic Design

Overview

Balancing the aesthetics and visual appeal of graphics and in-line images against the effect on download times is always difficult. User surveys continue to rate slow download times as a major problem, yet it’s the use of graphics that has made the web a success.

When using graphics, they should directly add to the content and address specific objectives. All graphics should be created with quality and professionalism. The file size of all graphics should be reduced as much as possible while retaining quality.

Application

|GIFS |JPEGS |

| | |

|Graphic Interchange Format |Joint Photographic Experts Group |

|8 bit images (256 Colors) |24 bit images |

|Lossless compression |Lossy Compression |

|Interlace images |Variable level of compression |

|Transparent images |Progressive JPEGS |

|Animated GIFS | |

GIFS vs. JPEGS

75. Use GIFS for line art, graphical buttons and titles, and when transparency is needed

76. Use JPEGS for photography

Bitmap and Vector Images

• Bitmaps are images that are displayed as rows and columns of pixels (picture elements)

• Vector images use mathematical formulas for displaying lines and shapes

• All current graphic file formats used on the web are bitmaps

Resolution

• Typical screen resolution is 72 DPI (dots per inch)

• All images for the web should be created at screen resolution

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 11

Section Three: Graphic Design (cont.)

Bit Depth

• The number of colors in an image or the number of colors a computer system is capable of displaying

• The lower the bit depth, the smaller the file size

|1 bit: 2 colors |6 bit: 64 colors |

|2 bit: 4 colors |7 bit: 128 colors |

|3 bit: 8 colors |8 bit: 256 colors |

|4 bit: 16 colors |16 bit: 65,500 colors |

|5 bit: 32 colors |24 bit: 16.7 million colors |

Anti-Aliasing

• The adding of intermediate colors to smooth the jagged edges normally seen in bitmap images

• Anti-aliasing should be used on all text larger than 12 points

• Anti-aliasing should not be used when making selections to help eliminate the halo effect

Web Safe Colors

There are 216 colors that are shared between the major browsers and platforms. Failure to use web safe colors could result in dithering on monitors set to 256 colors. Use the following table to determine the web safe colors:

Web Safe Color Values (the rule of 51’s)

|Hex Value |00 |33 |66 |99 |cc |ff |

|RGB Value |0 |51 |102 |153 |204 |255 |

Optimizing Graphics for Speed

77. Crop the image as tightly as possible - every pixel will add to the file size

78. Reduce the bit depth as far as possible on all gifs

79. Use the lowest quality acceptable for jpegs

80. Use height and width tags in the html code for all images

81. Use thumbnail sketches for large images - warn the user beforehand of large file sizes

82. Use the file format that produces the smallest file size

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 12

Section Four: Tools for Creating Web Sites

Overview

There are a wide variety of tools for creating web sites. These fall into four general categories: text editors, html editors, WYSIWYG editors, and full development packages. Each category has strengths and weaknesses and what is best will depend on the nature of the project and individual preferences. Regardless of the tool, to properly design effective sites requires a fundamental understanding of html.

Application

Tools for Creating Web Sites

83. Text Editors - Word Pad, Simple Text

84. HTML Editors - HotDog Pro, BBEdit

85. WYSIWIG Editors - Microsoft FrontPage, Adobe PageMill

86. Full Development Packages - Dreamweaver, GoLive, Net Objects Fusion

Pro’s and Con’s of WYSIWIG Editors

87. Pro’s

88. Ease of use

89. Save considerable time

90. Consistency if many people are working on a project

91. Site management

92. Con’s

93. Extraneous code

94. Lack of exact control

95. Generate browser-specific code without warning

96. Steep learning curve

Recommendations

97. Learn html

98. Check hardware requirements

99. Must be able to directly edit the html code

100. Site management tools such as global find and replace and link checking

Notes:

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download