Guidelines for GOOD Web Design - PowerPoint PPT Presentation

1 / 46
About This Presentation

Guidelines for GOOD Web Design


Web Design The Text The text ... Creating Graphics Graphic creation ability is built into hundreds of programs GIFs for drawings and text JPEGs for ... – PowerPoint PPT presentation

Number of Views:410
Avg rating:3.0/5.0
Slides: 47
Provided by: pcri2


Transcript and Presenter's Notes

Title: Guidelines for GOOD Web Design

Guidelines for GOOD Web Design
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

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

Part OneTop Ten Guidelines for Homepage
  • From Jakob Nielsens Alertbox, May 12, 2011

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
  • Group all school business information in one
    distinct area.

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.

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

Use Visual Design to Enhance, not Define,
Interaction Design
  1. Don't over-format critical content, such as
    navigation areas
  2. Use meaningful graphics

Part Two Designing GOOD Web Sites from the Start
  • It is easy, as long as you follow a few basic

The Paper Rule
  • The first step to good web design is to turn off
    your computer and pull out a couple of pieces of
  • Most poorly designed sites are poorly designed
    from the start.

The Three Parts of Web Design
  • Information design
  • Interaction design
  • Presentation design

Information Design
  • Message
  • Audience
  • Purpose
  • Background
  • Structure

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

Part ThreeBasic Design Rules
  • Stuff that no one ever tells you

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.

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

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,
  • Better still, use CSS which well talk about in
    a bit.
  • Dont change the link colors!

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

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

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.

Your home page needs
  • A directory of the sites main content areas
  • A summary of the most important news or
  • 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 sites structure)?
  • Where I have been?
  • Where can I go?

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.

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

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 use them.
  • Search engines have trouble with frames because
    they dont know what composites of frames to
    include in their index.

Part FourAccessibility
  • 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 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.

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 http//
  • The folks at WebAIM took the 16 Web design rules
    in section 508 and converted them into an easy to
    read checklist.

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

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

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

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

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

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
  • There are some great sites out there that can
    teach you HTML

Creating HTML
  • Text Editors
  • Notepad
  • Word Processors
  • Word or WordPerfect
  • File gt Save As HTML
  • HTML Editors
  • Microsoft Frontpage
  • Macromedia Dreamweaver

Part SixSites that Ignore These Guidelines
  • Including a few sites shamelessly stolen from

  • 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

  • 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?

More Sites that Stink
  • See if you can figure out why?
  • http//
  • http//
  • http//
  • http//
  • And for even more useless sites
  • http//

Part SevenSites that Exemplify These Guidelines
  • Including a few sites shamelessly stolen from
  • http//

Super Sight!!!
  • http//
  • http//
  • And for even more sites check out
  • http//
Write a Comment
User Comments (0)