Download Section Three: Graphic Design

Web Site Design
Fall 1999
ASCIT Workshop
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
http://www.buffalo.edu/~markgr/htm305
Web Site Design
Fall 1999
ASCIT Workshop
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)
http://www.public.iastate.edu/~mikealbr/links/copyright.html
Graphics, Visualization, & Usability Center's (GVU) User Surveys
http://www.gvu.gatech.edu/user_surveys/
Jakob Nielsen's Website
http://www.useit.com/
How Users Read on the Web
http://www.useit.com/alertbox/9710a.html
Inverted Pyramids in Cyberspace
http://www.useit.com/alertbox/9606.html
Response Time: The Three Important Limits
http://www.useit.com/papers/responsetime.html
The Web Usage Paradox: Why do People Use Something This Bad
http://www.useit.com/alertbox/980809.html
Report Puts a Number on the World Wide Wait (New York Times article)
http://www.nytimes.com/library/tech/98/08/cyber/articles/08wait.html
Useable Web
http://www.usableweb.com/
Writing on the Web (from Sun Microsystems)
http://www.sun.com/980713/webwriting/
Web Review
http://www/webreview.com
Yale Style Guide
http://info.med.yale.edu/caim/manual/contents.html
Web Site Design
Fall 1999
ASCIT Workshop
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





Notes:
Use images and graphics only to meet the site’s objectives
Optimize images to the smallest possible size that will maintain acceptable quality
Reuse images to take advantage of the computer’s cache
Keep navigation and other important information in the first screen
Avoid long tables and layers of embedded tables
Web Site Design
Fall 1999
ASCIT Workshop
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
Fall 1999
ASCIT Workshop
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




Who are they? (Demographics)
What information do they want?
How do they connect to the internet?
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
Fall 1999
ASCIT Workshop
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







Users don’t read web pages, they scan
Use sub headings and bullets to provide white space
Information should be succinct, reliable and timely
Use traditional Style Guides (spelling, punctuation, usage)
Write in inverted pyramids
Use specific link references - avoid “Click Here”
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
Fall 1999
ASCIT Workshop
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





Seven plus or minus two rule: the cognitive limits of the human mind
Chunk information into small, discrete units
Establish a hierarchy of importance
Structure the relationships between the chunks of information
Analyze the balance between menu pages and content pages. The goal is efficient and intuitive task flow
Navigation Systems




Allow users to quickly and easily find information
Allow users to easily move to the various sections of a site
Provide context - visual clues on the relationship of an individual page to the overall site
Separate navigation from content
Improving Navigation







Logical organization of information - strong hierarchy
Provide clear navigational aides, including visual cues
Consistency - be predictable
Don’t disable the browser’s navigational features
Provide links to the home page and major navigational pages from every page
Include a bottom navigational bar on long pages
Include a table of contents, search page, index, and site maps where appropriate
Web Site Design
Fall 1999
ASCIT Workshop
Page 8
Section Two - The Web Design Process
Step Three - Information Architecture (continued)
Site Design Guidelines
 The best design is one no one notices. Keep it simple
 Every site should have a graphic identity
 Background images shouldn’t hinder legibility
 Every home page should clearly state the intent of the site
 Keep users informed of changes
 Only include links that add value
 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







Break the fundamental user model of the web page
URL’s don’t work - you can’t bookmark a page and return to it
Indexing programs (search engines) do not always index the contents of frames
Difficult to print
Difficult to code properly
The back button on older browsers doesn’t work
Most users prefer frame free sites
Image Maps
 Large file sizes
 Server side image maps disable navigation
 Accessibility for people with disabilities
 Time consuming to create
Gratuitous Use of Technology
 Is the design based on the site’s objectives or are you just showing off your skills
 Designing web sites is radically different from designing CD-ROMS due to bandwidth issues
 Forcing user’s to download plug-ins will have a negative impact
 Movement is very distracting and should be used with caution (animated gifs)
Under Construction Pages
 Don’t launch a site until it’s complete. The assumption is the web is always under construction
Notes:
Web Site Design
Fall 1999
ASCIT Workshop
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
 Use a page grid to control the relationship of page elements
 Modular design - each page will have areas that perform certain functions
 Use white space for emphasis and to provide visual relief
Page Design Guidelines
 Design for 640 x 480 display. Do not make users scroll horizontally
 Include clear titles (bookmarks)
 Provide navigation in the first screen
Stand Alone Pages
 Every page should include logos, titles and other information to indicate the site to which it belongs
 Sign and date each page
 Provide links to the home page and major navigational pages
 Include a “mailto” link on each page
Typography
 Fonts are controlled by the user
 Legibility is the most important factor
 60-70 characters per line
 Avoid all capital and all bold letters
 Italics is difficult to read
Cross Platform Issues
 Default Gamma Settings
 Default Font Size & Spacing
Notes:
Web Site Design
Fall 1999
ASCIT Workshop
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






Graphic Interchange Format
8 bit images (256 Colors)
Lossless compression
Interlace images
Transparent images
Animated GIFS
JPEGS





Joint Photographic Experts Group
24 bit images
Lossy Compression
Variable level of compression
Progressive JPEGS
GIFS vs. JPEGS
 Use GIFS for line art, graphical buttons and titles, and when transparency is needed
 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
Fall 1999
ASCIT Workshop
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
2 bit: 4 colors
3 bit: 8 colors
4 bit: 16 colors
5 bit: 32 colors
6 bit: 64 colors
7 bit: 128 colors
8 bit: 256 colors
16 bit: 65,500 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
RGB Value
00
0
33
51
66
102
99
153
cc
204
ff
255
Optimizing Graphics for Speed






Notes:
Crop the image as tightly as possible - every pixel will add to the file size
Reduce the bit depth as far as possible on all gifs
Use the lowest quality acceptable for jpegs
Use height and width tags in the html code for all images
Use thumbnail sketches for large images - warn the user beforehand of large file sizes
Use the file format that produces the smallest file size
Web Site Design
Fall 1999
ASCIT Workshop
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




Text Editors - Word Pad, Simple Text
HTML Editors - HotDog Pro, BBEdit
WYSIWIG Editors - Microsoft FrontPage, Adobe PageMill
Full Development Packages - Dreamweaver, GoLive, Net Objects Fusion
Pro’s and Con’s of WYSIWIG Editors


Pro’s




Ease of use
Save considerable time
Consistency if many people are working on a project
Site management
Con’s




Extraneous code
Lack of exact control
Generate browser-specific code without warning
Steep learning curve
Recommendations




Notes:
Learn html
Check hardware requirements
Must be able to directly edit the html code
Site management tools such as global find and replace and link checking