Principles of GOOD Web Design
Transcript Principles of GOOD Web Design
Guidelines for GOOD
• See why Web design guidelines are necessary
• Discover how to find the defacto standard for
every aspect of your site's design
• Discuss Jakob Nielsen’s "Top Ten Guidelines for
• Learn how to design good Web pages and Web
sites from the start
• See how your choice of page font impacts your
pages' readability (and why you should stay away
from serif fonts like Times New Roman)
• And much, much more …
Good News / Bad News
• The good news is that anyone can
create a Web page or Web site.
• The bad news is that anyone can
create a Web page or Web site.
Regardless of whether you use
Microsoft FrontPage, or simply
code by hand, there are some
guiding principles you need to
remember whenever you design
anything for the web.
Why We Need Principles
• Some bristle at the
thought of codified
guidelines for good
that such guidelines
• They don’t realize
what you and I already
know: bad web design
isn’t creative, it’s
Top Ten Guidelines for Homepage
From Jakob Nielsen’s “Alertbox,”
May 12, 2002
Make the Site's Purpose Clear:
Explain Who You Are and What You Do
1. Include a one-sentence
This is more for
2. Write a window title with
good visibility in both
search engines and, more
3. Group all “school
business” information in
one distinct area.
Help Users Find What They Need
4. Emphasize your
site’s top highpriority tasks.
class site: Homework
calendars, etc. should
be prominent – located
higher on your
homepage than CVs,
personal photos, etc.
5. Include a search
Reveal Site Content
Show examples of real
Use pull quotes where
Begin link names with
the most important
Offer easy access to
If you change your site
frequently, have an
archive of the stuff you’ve
recently removed or
Use Visual Design to Enhance, not
Define, Interaction Design
9. Don't over-format
10. Use meaningful
Designing GOOD Web Sites
from the Start
It is easy, as long as you follow
a few basic steps.
The “Paper” Rule
• The first step to good web design is
to turn off your computer and pull
out a couple of pieces of paper.
• Most poorly designed sites are
poorly designed from the start.
The Three Parts of Web Design
The Audience Is Key
• Once you identify your audience,
designing the web page or web site
is a snap!
• Example: the Bertrand Russell
Intermediate High School Concert
Basic Design Rules
Stuff that no one ever tells you
• Most of the tips
you are about to
see come straight
Usability by Jakob
Nielsen & Marie
• ISBN: 073571102X
• US$39.99 ($27.99
Oh sure, it LOOKS good ...
• Reading from a computer screen is
about 25% slower than reading from
• Write 50% less text than you would
normally write for a brochure or
Serif versus sans-serif
• On paper, we are all used to reading
serif fonts – fonts with a “tail” (like
Times New Roman.)
• On screens, however, sans-serif
fonts are easier to read.
• The most readable screen font is
Verdana (which ships with Internet
The basic scheme
• For the main content area of your pages,
ALWAYS use black text on a white background.
– We have to defer to both David Ogilvy AND the Fortune 500
on this one.
– The rest of your page can be colored, but leave the main
content area alone!
• If you have to change fonts, use a sans-serif font
like Verdana, Helvetica, or Arial.
– Or, if you code by hand, use a font family like <font
face="Verdana, Arial, Helvetica, sans-serif“>
– Better still, use CSS [which we’ll talk about in a bit.]
• Don’t change the link colors!
• While bigger monitors continue to pop-up,
most people are still using 800 by 600.
• You have to account for the scroll bars.
• Stay under 760 pixels wide, especially with
your graphics (600 wide if you are making
something for Blackboard or WebCT.)
• Try to follow the “30/30 rule”: keep
your main homepage – graphics and
everything – to under 30 kilobytes in
size. That way it will load in under 30
seconds over a very slow dial-up.
• Your secondary pages can be larger.
• I break this rule ALL the time.
Your Main Homepage
• Your logo (if you
have one) should
be in the upper left
– Average size: 80 x
• Include a tag line
your site does.
Your “home” page needs:
• A directory of the site’s main content
• A summary of the most important
news or promotions
• A search feature (if possible)
Your other pages need:
• Easy-to-understand navigation
features that show:
– Where I am (relative to the Web as a whole
AND relative to the site’s structure)?
– Where I have been?
– Where can I go?
Communicating Information about
• Include a homepage link to an
“About <name of organization>”
• Include a “Contact Me” or “Contact
Us” link on the homepage that goes
to a page with all contact information
for you or your organization.
• Differentiate links and make them easy to
– By default, links are differentiated by being blue
and underlined. DON’T CHANGE THIS!
• Don’t use generic instructions, such as
“Click Here” as a link name.
• Don’t use generic links, such as “More …”
at the end of list items.
• If a link does something other than go to
another Web page … make sure the link
explicitly indicates what will happen.
Stay away from frames ...
• Many browsers cannot print framed pages
• Frames are so hard to learn that many
authors write buggy code when they try to
• Search engines have trouble with frames
because they don’t know what composites
of frames to include in their index.
Welcome to the wonderful
world of Section 508
What is Section 508?
• Section 508 of the Rehabilitation Act requires all
federal agencies (with the exception national
security systems) to ensure that electronic and
information technology is accessible to
employees and members of the public with
• This only applies to electronic and information
technology that is procured by a FEDERAL
department or agency.
• BUT, most companies and educational
institutions around the world voluntarily comply
with section 508, especially when it comes to
those companies' or institutions' Web sites.
Why Comply Voluntarily?
• Why? One word: traffic.
• If you can make your Web pages
more accessible, especially to people
with disabilities more people are
going to be able to visit your Web
How Do You Comply?
• Just go to
• The folks at WebAIM
took the 16 Web
design rules in
section 508 and
converted them into
an easy to read
If you break Web design into its
individual components, it
becomes a heck of a lot easier
Three Parts of a Web Page
• The Text
– This is simply the content you are sharing
with your audience.
• The Multimedia
– Usually, this is just pictures, but it could
also include sound files, movies,
animation, and stuff like that.
• The HTML
• The “text” is just another way of saying
• A lot of Web content is just re-tasked
Word documents and PageMaker files.
– CTRL + C and CTRL + V
– CTRL + Shift + V
– CTRL + Z
• The danger with re-tasking is that no one
has ever read the original.
• You can use any
– Microsoft Word
• You can also use
any text editor:
– Notepad or Wordpad
– SimpleText (Mac)
• Usually just a
• Could also be:
– Sound (Real Audio)
– Animation (Flash)
– Preformatted Files
– And so on ...
• Graphic creation
ability is built into
hundreds of programs
• GIFs for drawings and
• JPEGs for photos
• Hypertext Markup
• Tells the software
how to display a
• Should you learn
Simple HTML basics
• HTML works a lot like an old word
processor – you have to turn formatting
on and off by hand.
• To make something bold:
<BOLD>This text is bold</BOLD>
• There are some great sites out there that can
teach you HTML:
• Text Editors
• Word Processors
– Word or WordPerfect
– File > Save As
• HTML Editors
– Microsoft Frontpage
Sites that Ignore These Guidelines
Including a few sites
shamelessly stolen from
• Auto loading MIDI is
• No title
• Table borders are
• “Welcome To” should
have a top vertical
– And the “Welcome To”
graphic is unnecessary
• Navigation is centered
• Unorganized menu
• The title doesn’t
include the state.
• The gun is wholly
• The Flash is … um …
• Click on “webmaster”
and you get a “not
• It’s Auburn!
• Actually, it’s a decent site,
• The image doesn’t match
• Rollover navigation link
callouts are confusing
• Images in bottom corner
look like ads (and will be
• Any others? (Besides the
fact that IT’S AUBURN?!)
More Sites that Stink
• See if you can figure out why?
• And for even more useless sites:
Sites that Exemplify These
Including a few sites shamelessly
• And for even more sites check out
• This presentation was created by
• You are free to reuse this
presentation provided that you
– Not make any money from this
– Give credit where credit is due.