Web Design

Fundamentals
What to do, why to do it on the
Web

Before we get started…

O What sites are you working on?
O What’s the purpose of your site?
O What audience(s) are you trying to reach?

Site Planning
O Determine site goals
O Analyze your audience
O Analyze the “competition”
O Know your own abilities and resources
O Map the current site
O Design your new site

1
 Site Goals and Guidelines
O Why are you creating this site?
O What does the site owner hope to achieve with
this site?
O What action does the site owner want the
audience to take as a result of visiting?
O What restrictions or guidelines must be followed
when designing the site?
O Accessibility guidelines (Kansas)
O http://da.state.ks.us/itec/WASPriorities112001.htm
O Style guidelines (for a sub-site)

Audience Analysis
O Who are you trying to reach?
O Age
O Language and Culture
O Level of education
O Access to the Web (High-speed? Dial-in?)
O Familiarity with the Web
O Barriers to access?

O What are they looking for at your site?

O Information
O Services Are there multiple
O Community
audiences?
5

How do I find out about the audience?

O Ask the site owners

O Look at current site’s logs and stats
O Talk to people who “fit the bill”
O Students who are in the program (but were once
prospective students)
O People in the same demographic groups

O Review published research

O Build feedback capability into your site
O Know how audiences deal with the web in
general

2
 Analyze the “Competition”
O Look for sites with similar contents, purpose
O Within KU

O At other universities

O At other organizations

O In the private sector

O What are the trends and precedents?

O Where do they excel or fall short?
O Does your site need to “match” a parent site?

Know Resources & Abilities

O What technical knowledge do you have?
O What tools, resources, and time do you have
access to (now AND later)?
O Software
O Web authoring tools
O Image editing and tools Think long-term!
O Animation tools Be sure you have the
resources (human and
O Hardware
technical) to maintain the
O Camera (video and/or still) site once you’ve created it.
O Scanner (flatbed or slide)
O Other people

Site Map
O All the pages, all the links of the current site
O Boxes for pages, lines for links
O Shows how “deep” your site is
External Links
Feb March April

Events May June

Members
Home
Profile – John Q. Public
Site Profile – Jane Doe
Profile – John Doe
Contact
Profile – Mr. Smith
Profile – Ms. Jones 9

3
 More on site “depth”
O Depth and “click-throughs”
O Deep and narrow
O Few links on each page, many “levels” of pages

O Shallow and broad

O Many links on a page (especially the main page),
often fewer levels of pages
O Once again, consider your audience and
content
O NIH.gov: deep
O Fool.com: broad

10

Design (or redesign) the site

O Review audience needs/wants with site owner
O Determine the site structure (site map)
O Gather content (visuals, information)
O Mock up a visual design
O Build the site in a “test” mode
O Perform (user) testing and make changes
O Put the site into production
O Maintain and update the site

Communicate with the site

owner at each of these stages!
11

A few words on usability testing

O The testers should…
O Reflect your audience demographics

O Be (relatively) uncoached

O The test should…

O Have clearly defined goals
O “Find out how many computers are in the Budig Media lab.”
O “Sign up for the next Access: Introduction workshop.”
O Be observed in some way
O Ask for tester feedback
O Notes
O Post-test interviews

12

4
 Visual Design
What looks good? Why?

13

Before we get started…

Consistency is a
good goal for any design.

14

Elements of Visual Design

O Composition
O Rule of Thirds (and Rule of Three)

O Grids

O Balance

O White space

O Color
O Fonts
O Motion
O Examples

15

5
 Grids and the Rule of Thirds
O For image composition
O Web Grids (the “page”)

16

More Rule of Thirds

O Image “flows” up
and in
O Sight-line points
towards the middle
of the image

17

Grouping Objects/Balance

Symmetrical Balance:

(Can be seen as static and dull in some

Western cultures, but common in the East
and in Native American cultures.)
18

6
 Grouping Objects/Balance

Asymmetrical Balance:
Both halves
balance, but are
not the same.

(Most frequently used in Western art and design.)

19

Grouping Objects/Balance

Radial Balance:

(For example, mandalas and other Eastern designs.)

20

Screen/Page Layout
O Where do you
normally see page
navigation?
O Where are page
titles/headings?
O Where do graphic
elements go?
O What about screen
real estate?
O What about scrolling?
(Do users scroll?)
21

7
 White Space
O What is it? Why is it a good thing?
O Absence of “visual clutter”

O Helps readers scan/find info quickly

O Avoids “information overload” syndrome

O How do you create it?

O Examples
O ACS Site

O ACSess Site

O ACS Training Site

22

Color
O Color Theory
O What does color mean?

O What does that color mean?

O Warm/cool
O Cultural definitions
O Combining colors
O “Safe” Colors
O What’s it all about?
O Palette Man

O Light backgrounds with dark text or vice versa?

23

Fonts (aka typography)

O Keep it simple
O Limit number of fonts per page and per site

O Use the same fonts consistently throughout the site

O Make good font choices

O Sans serif vs. serif

O Commonly installed fonts

O Mood

O Readability

O USE CAPITALIZATION SPARINGLY

24

8
 Font Moods
O What mood does this font evoke for
you?
O What about this one? Is it formal? Casual?
O Would this font give your page a professional
look? Why or why not?
O W hat assum ptions about the content
w ould you m ake from this font?
O Can you even read what this says? If you had to read a whole page of
this, how would you feel?

25

More Font Moods

O 8-Pin Matrix Font

O PUNCH LABEL FONT

O Font for the Dumped

Specialty fonts like these are NOT intended for
body text, but can be used for headings or other
special uses to great effect.
Since they aren’t likely to be installed on your
visitor’s computers, though, you’ll have to create
image files using the text you want to display.

26

Motion
O Coolness factor vs. “dancing bologna”
O Plug-ins, plug-ins, plug-ins
O Bandwidth/download time
O Content is king
O Examples:
O KU Theatre

O lookandfeel new media

O KU Endowment (by look and feel)

O Julia Childs on PBS

27

9
The Fool

28

Unicorn Theatre

29

KU Department Web Sites

30

10
Web Design Fundamentals
All the Links

Site Planning
Kansas Web Accessibility Guidelines: da.state.ks.us/itec/WASPriorities112001.htm
Site Map – Generic Site example: www.ku.edu/acs/docs/wkshop/webdesign

Visual Design
Space and White Space
The browser grid from WPDFD: www.wpdfd.com/browsergrid.htm
White space usage examples:
• www.ku.edu/acs
• www.ku.edu/acs/news
• www.ku.edu/acs/train

Color
Color Theory from Poynter.org: www.poynter.org/special/colorproject/colorproject/color.html
Cultural color meanings from About.com: webdesign.about.com/library/weekly/aa070400c.htm
Color study resources from Sanford: www.sanford-artedventures.com/study/g_color.html
Webmonkey on the Colorsafe Palette: hotwired.lycos.com/webmonkey/00/37/index2a.html
Paletteman’s color-combining tool: www.paletteman.com
Example of a site with light text and a dark background: www.ku.edu/~tv14
Example of a site with dark text and a light background: www.kansan.com

Fonts
Basic typography info from Fonts.com: www.fonts.com/fontent/fontent_home.asp?con=type101

Motion
KU Theatre: www.ku.edu/~theatre
lookandfeel new media: www.lookandfeel.com
KU Endowment: www.kuendowment.org
Julia Child on PBS: www.pbs.org/juliachild

General Design Examples

News/Informational Site: www.fool.com
Theatre/Arts Site: www.unicorntheatre.org
KU Sites:
www.ku.edu www.kuathletics.com www2.lib.ku.edu/anschutzlib/govdocs/
www.kumc.edu www.ku.edu/~jschool www.socwel.ku.edu
Web Design Fundamentals
A (Somewhat) Annotated Bibliography
Brinck, Tom, Darren Gergle, and Scott Wood. “Web Design From the Trenches.”
Proceedings of the Conference on Chi 98 Summary : Human Factors in
Computing Systems. New York: ACM Press, 1998. 133-34.
“Most website design projects involve small to medium-sized sites consisting of
between ten and fifty pages. Such projects require designers to operate on a
tight schedule and a very limited budget. With tightly constrained resources, how
can we maintain a high standard of design and create usable and useful
products? This tutorial presents a practical approach to applying usability
techniques in website design. Our design process includes techniques for project
management, dealing with clients, sketching and comping techniques for quickly
producing high-quality alternatives, and a set of website design guidelines.”
http://doi.acm.org/10.1145/286498.286579
Chak, Andrew. "Effective Info Architecture." Web Techniques Oct 2001: 15-17.
Cruickshank, Alex. "How to Add Dhtml to Your Site." Internet Magazine Jan
2002: 96-98.
“Are you tired of static HTML pages on your Web site and spending hours
updating them after you've done a little redesign? Want to add dynamic,
interactive features that won't put your site's server under strain? Then DHTML's
for you, as Alex Cruickshank explains.”
Deaton, Mary. Guerilla Usability. 2001. Builder.com. Available:
http://builder.com.com/article.jhtml?id=u00120010820gcn01.htm. 3/22
2002.
Fleming, Jennifer. Web Navigation: Designing the User Experience. Sebastopol,
CA: O'Reilly & Associates, 1998.
Available through netlibrary at KU:
http://www.netlibrary.com/ebook_info.asp?product_id=24653
Fogg, B. J., et al. "What Makes Web Sites Credible?: A Report on a Large
Quantitative Study." Proceedings of the Sigchi Conference on Human
Factors in Computing Systems. Seattle, Washington, 2001. 61-68.
“The credibility of web sites is becoming an increasingly important area to
understand. To expand knowledge in this domain, we conducted an online study
that investigated how different elements of Web sites affect people's perception
of credibility. Over 1400 people participated in this study, both from the U.S. and
Europe, evaluating 51 different Web site elements. The data showed which
elements boost and which elements hurt perceptions of Web credibility. Through
analysis we found these elements fell into one of seven factors. In order of
impact, the five types of elements that increased credibility perceptions were
“real-world feel”, “ease of use”, “expertise”, “trustworthiness”, and “tailoring”. The
two types of elements that hurt credibility were “commercial implications&rdquo
;and “amateurism”. This large-scale study lays the groundwork for further
research into the elements that affect Web credibility. The results also suggest
implications for designing credible Web sites.”
http://doi.acm.org/10.1145/365024.365037

-2-
Web Design Fundamentals
A (Somewhat) Annotated Bibliography
Grady, Helen M. "Web Site Design: A Case Study in Usability Testing Using
Paper Prototypes." Proceedings of Ieee Professional Communication
Society International Professional Communication Conference and Acm
Special Interest Group on Documentation Conference on Technology &
Teamwork. Piscataway, NJ: IEEE Educational Activities Department,
2000. 39-45.
“Paper prototypes are a low-tech, low-cost, but highly effective, form of usability
testing for web site design. Creating a web site is relatively easy, given the
technology and tools now available. All too often, web site developers tend to be
enamored with the technology and forget the needs of end user. As a result,
many web site developers delay usability testing until their web site is completely
designed, only to uncover significant interface, content, or structural problems
with the site once the customers try to use it. Significant redesign may be
impossible due to time, cost, or personnel constraints.This paper discusses the
benefits of using paper prototypes to conduct usability testing of a web site for
Mercer University's School of Engineering Center for Excellence in Engineering
Education (CE3).”

Holzschlag, Molly E. "The Fear of X - What Web Designers Should Know About
Xml and Xhtml." PC Magazine August 1 2001: 1-3.
---. "Clean up, Flatten Out." Web Techniques August 2001: 26-27.
“Eschew multimedia clutter, and smooth the bumps out of your pages. Simple
design makes more sense than ever as new platforms emerge.”
---. "14 Ways to Talk Clients out of Runing Their Sites: Temper Your Clients'
Enthusiasm with the Wisdom of Experience." Web Techniques Dec 2001:
24-26.
“Every design shop has dealt with a client who "knows better" than the designer.
Combine an aggressive client with an overly accommodating designer, and the
resulting site can become a primer for mistakes to avoid.
“The best shops work closely with clients to teach them the tenets of solid Web
design. But there are still plenty of novices out there. I've compiled 14 of the most
common client-driven site design errors. Learning to address these issues
diplomatically will mean successful sites for your customers, and an improved
reputation for your shop.”
---. "Raise Your Standards: Knowing the Rules Gives You Freedom to Break
Them and the Skills to Make Your Content More Powerful." Web
Techniques 7.2 (2002): 20-21.

-3-
Web Design Fundamentals
A (Somewhat) Annotated Bibliography
Ivory, Melody Y., Rashmi R. Sinha, and Marti A. Hearst. "Empirically Validated
Web Page Design Metrics." Proceedings of the Sigchi Conference on
Human Factors in Computing Systems. New York: ACM Press, 2001. 53-
60.
“A quantitative analysis of a large collection of expert-rated web sites reveals that
page-level metrics can accurately predict if a site will be highly rated. The
analysis also provides empirical evidence that important metrics, including page
composition, page formatting, and overall page characteristics, differ among web
site categories such as education, community, living, and finance. These results
provide an empirical foundation for web site design guidelines and also suggest
which metrics can be most important for evaluation via user studies.”
http://doi.acm.org/10.1145/365024.365035
Mach, Michelle. "The Service of Server-Side Includes." Information Technology
and Libraries 20.4 (2001): 213-19.
“The use of server-side includes (SSI) simplifies Web site maintenance by
generating Web pages on-the-fly, rather than creating static HTML pages. This
article provides examples and instructions for common uses of SSIs, including
displaying environmental variables, inserting file information, and using the
advanced capabilities of extended SSI (XSSI). Potential concerns including
security, WYSIWYG (what-you-see-is-what-you-get) editors, filename
extensions, and server load are discussed, as are the advantages and
disadvantages of SSI over more well-known tools like CGL JavaScript, or Active
Server Pages (ASP).”
Marcus, Aaron, and Emilie West Gould. "Crosscurrents: Cultural Dimensions and
Global Web User-Interface Design." interactions 7.4 (2000): 32-46.
http://doi.acm.org/10.1145/345190.345238
McManus, Sean. "How to Avoid Web Design Crimes." Internet Magazine Jan
2002: 92-94.
McManus, Sean. "Improve Your Web Site's Navigation." Internet Magazine Nov
2001: 90-93.
Newman, Mark W., and James A. Landay. "Sitemaps, Storyboards, and
Specifications: A Sketch of Web Site Design Practice." Conference
proceedings on Designing interactive systems : processes, practices,
methods, and techniques. New York, 2000. 263 - 74.
“Through a study of web site design practice, we observed that designers employ
multiple representations of web sites as they progress through the design
process, and that these representations allow them to focus on different aspects
of the design. Designers also employ multiple tools during the course of a
project, including graphic design, web development, presentation, and word
processing software, as well as pen and paper. Sketching on paper is especially
important during the design exploration phase of a project, when designers wish
to explore many design possibilities quickly without focusing on low-level details.
Web site design tools intended to support the early phases of the design process
should employ informal interaction techniques, should support multiple site
representations, and should integrate well with other applications that designers
use regularly.”
http://portal.acm.org/citation.cfm?doid=347642.347758

-4-
Web Design Fundamentals
A (Somewhat) Annotated Bibliography
Niederst, Jennifer. Web Design in a Nutshell. O'Reilly, 2001.
The O’Reilly books are very popular in the computing world, because they tend
to offer accurate content in a readable, understandable format, without
dummying down the material (a la the “For Dummies,” “Idiots,” etc.).
Nielsen, Jacob. Designing Web Usability. Indianapolis, Ind.: New Riders, 2000.
This book has become one of the most widely used and cited works on designing
usable web pages, and Jacob Nielson is the premiere expert on usability. If there
is a must-read on the topic, this is it. You might also check out www.useit.com,
Nielsen’s site, for columns and articles on web usability.
Otto, Joseph C. "Building a Great Web Site." T H E Journal (Technological
Horizons In Education) 29.7 (2002): 40-42.
Slocombe, Mike. "How to Plan a Great Web Site." Internet Magazine August
2001: 86-88.
Smart, Karl L., Judy Cossell Rice, and Larry E. Wood. "Meeting the Needs of
Users: Toward a Semiotics of the Web." Proceedings of Ieee Professional
Communication Society International Professional Communication
Conference and Acm Special Interest Group on Documentation
Conference on Technology & Teamwork. Cambridge, Massachusetts:
IEEE Educational Activities Department Piscataway, NJ, USA, 2000. 593-
605.
“The tremendous growth of the Internet has brought a heightened awareness of
the importance of designing information to meet customers' needs. Although we
may never develop universal design standards that apply to every situation, we
need more empirically supported guidelines to inform design decisions.
Guidelines must be based on commonly shared semiology of Web conventions.
A semiotics of the Web can help us determine how meaning is derived from Web
pages and the Web, and in turn how to better design sites to convey intended
and desired meanings. This article identifies six categories or dimensions of
design issues relating to the Web that serves as a beginning of a Web semiotics.
Each dimension is explained, with various research issues and questions
suggested.”
Spool, Jared. Web Site Usability. Morgan Kaufmann, 1998.
Another usability expert worth consulting; another place to look is his consulting
company’s web site, User Interface Engineering (http://www.uie.com/).
Sullivan, Terry. User Testing Techniques - a Reader-Friendliness Checklist.
9/12/96 1996. All Things Web. Available:
http://www.pantos.org/atw/35317.html. 3/22 2002.
“Periodic user testing is an important element in developing and maintaining a
reader-friendly Website. But formal usability tests are expensive and time-
consuming -- often prohibitively so. Happily, inspection-based user testing
methods, ranging from a free-form site review to more structured approaches,
provide a cost-effective means of assessing (and thus improving) the usability of
almost any Website.

-5-
Web Design Fundamentals
A (Somewhat) Annotated Bibliography
“One of the most effective forms of inspection-based user testing involves the
use of a "usability checklist." Checklist-based user testing is extremely
inexpensive to implement, and requires a surprisingly small number of testers to
be effective. It's also easy to schedule; it can be used at virtually any time
throughout the development cycle, from the earliest prototype screens to a full-
blown Website.”
Tufte, Edward R. The Visual Display of Quantitative Information. Cheshire,
Conn.: Graphics Press, 1983.
---. Envisioning Information. Cheshire, Conn.: Graphics Press, 1990.
---. Visual Explanations: Images and Quantities, Evidence and Narrative.
Cheshire, Conn.: Graphics Press, 1997.
Williams, Robin. The Non-Designer’S Design Book: Design and Typographic
Principles for the Visual Novice. Berkeley: Peachpit Press, 1994.
Zimmermann, Beverly B. "Applying Tufte's Principles of Information Design to Creating
Effective Web Sites." Proceedings of the 15th Annual International Conference
on Computer Documentation. New York: ACM Press, 1997. 309-17.
http://doi.acm.org/10.1145/263367.263406

-6-