Guidelines for GOOD Web Design

1
Guidelines for GOOD Web Design
2
Our Goals

• See why Web design guidelines are necessary
• Discover how to find the defacto standard for
  every aspect of your site's design
• Discuss Jakob Nielsens "Top Ten Guidelines for
  Homepage Usability"
• 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

3
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.

4
Regardless of whether you use Macromedia
Dreamweaver, Microsoft FrontPage, or simply code
by hand, there are some guiding principles you
need to remember whenever you design anything for
the web.
5
Why We Need Principles

• Some bristle at the thought of codified
  guidelines for good design, concerned that such
  guidelines stifle individual creativity.
• They dont realize what you and I already know
  bad web design isnt creative, its bloody
  ANNOYING!

6
Part OneTop Ten Guidelines for Homepage
Usability

• From Jakob Nielsens Alertbox, May 12, 2011

7
Make the Site's Purpose Clear Explain Who You
Are and What You Do

• Include a one-sentence tagline.
• This is more for unexpected visitors
• Write a window title with good visibility in both
  search engines and, more importantly, bookmark
  lists.
• Group all school business information in one
  distinct area.

8
Help Users Find What They Need

• Emphasize your sites top high-priority tasks.
• class site Homework lists, special
  announcements, class calendars, etc. should be
  prominent located higher on your homepage than
  CVs, personal photos, etc.
• Include a search input box.

9
Reveal Site Content

• Show examples of real site content.
• Use pull quotes where possible.
• Begin link names with the most important keyword.
• Offer easy access to recent homepage features.
• If you change your site frequently, have an
  archive of the stuff youve recently removed or
  updated.

10
Use Visual Design to Enhance, not Define,
Interaction Design

1. Don't over-format critical content, such as
   navigation areas
2. Use meaningful graphics

11
Part Two Designing GOOD Web Sites from the Start

• It is easy, as long as you follow a few basic
  steps.

12
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.

13
The Three Parts of Web Design

• Information design
• Interaction design
• Presentation design

14
Information Design
?

• Message
• Audience
• Purpose
• Background
• Structure

15
The Audience Is Key

• Once you identify your audience, designing the
  web page or web site is easy!
• Example the Cambridge High School Marketing
  Program

16
Part ThreeBasic Design Rules

• Stuff that no one ever tells you

17
Oh sure, it LOOKS good ...

• Reading from a computer screen is about 25
  slower than reading from paper.
• Write 50 less text than you would normally write
  for a brochure or paper.

18
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 Explorer.)

19
The basic scheme

• For the main content area of your pages, ALWAYS
  use black text on a white background.
• 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
  ltfont face"Verdana, Arial, Helvetica,
  sans-serifgt
• Better still, use CSS which well talk about in
  a bit.
• Dont change the link colors!

20
How wide?

• 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.)

21
How big?

• 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 (yes,
  people do still use dial-up).
• Your secondary pages can be larger

22
Your Main Homepage

• Your logo (if you have one) should be in the
  upper left corner
• Average size 80 x 68
• Include a tag line that explicitly summarizes
  what your site does.

23
Your home page needs

• A directory of the sites main content areas
  (navigation)
• A summary of the most important news or
  promotions
• A search feature (if possible)

24
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 sites structure)?
• Where I have been?
• Where can I go?

25
Communicating Information about Yourself

• Include a homepage link to an About ltname of
  organizationgt section.
• 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.

26
Links

• Differentiate links and make them easy to scan.
• By default, links are differentiated by being
  blue and underlined. DONT CHANGE THIS!
• Dont use generic instructions, such as Click
  Here as a link name.
• Dont 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.

27
Stay away from frames ...

• Many browsers cannot print framed pages
  appropriately.
• Frames are so hard to learn that many authors
  write buggy code when they try to use them.
• Search engines have trouble with frames because
  they dont know what composites of frames to
  include in their index.

28
Part FourAccessibility

• Welcome to the wonderful world of Section 508

29
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 disabilities.
• 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.

30
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
  pages.

31
How Do You Comply?

• Just go to http//www.webaim.org/standards/508/che
  cklist
• The folks at WebAIM took the 16 Web design rules
  in section 508 and converted them into an easy to
  read checklist.

32
Part FiveThe Basics

• If you break Web design into its individual
  components, it becomes a heck of a lot easier

33
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

34
The Text

• The text is just another way of saying the
  content.
• 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.

35
Creating Text

• You can use any Word processor
• Microsoft Word
• WordPerfect
• You can also use any text editor
• Notepad or Wordpad (PC)
• SimpleText (Mac)

36
The Multimedia

• Usually just a collection of compressed images.
• Could also be
• Sound (Real Audio)
• Animation (Flash)
• Preformatted Files (PDF)
• And so on ...

37
Creating Graphics

• Graphic creation ability is built into hundreds
  of programs
• GIFs for drawings and text
• JPEGs for photos

38
The HTML

• Hypertext Markup Language (HTML)
• Tells the software (Web browser) how to display
  a Web Page.

39
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 boldltBOLDgtThis text is
  boldlt/BOLDgt
• There are some great sites out there that can
  teach you HTML
• www.w3schools.com
• www.codeavengers.com

40
Creating HTML

• Text Editors
• Notepad
• Word Processors
• Word or WordPerfect
• File gt Save As HTML

• HTML Editors
• Microsoft Frontpage
• Macromedia Dreamweaver

41
Part SixSites that Ignore These Guidelines

• Including a few sites shamelessly stolen from
  WebPagesThatSuck.com

42
http//www.tuxedogov.org/

• No title
• Table borders are unnecessary
• Welcome To should have a top vertical alignment
• And the Welcome To graphic is unnecessary
• Navigation is centered
• Unorganized menu

43
http//www.auburn.edu/

• Its Auburn!
• Actually, its a decent site, but
• The image doesnt match the links
• Rollover navigation link callouts are confusing
• Images in bottom corner look like ads (and will
  be ignored)
• Any others?

44
More Sites that Stink

• See if you can figure out why?
• http//www.havenworks.com/
• http//www.fabricland.co.uk/
• http//yvettesbridalformal.com/
• http//www.teacherxpress.com/
• And for even more useless sites
• http//internettourbus.com/bizarre.htm

45
Part SevenSites that Exemplify These Guidelines

• Including a few sites shamelessly stolen from
• http//www.coolhomepages.com/

46
Super Sight!!!

• http//rareformbranding.com/
• http//www.schweppes.com.au/home/?noflashtrue
• And for even more sites check out
• http//www.coolhomepages.com/