Part 1: Guidelines For Good Web Design…

Use the Guidelines for good web design presentation to complete the questions below.

Background
Define
• Internet _A big, worldwide network that Connects computers and networks. It is the hardware
• World Wide Web _Electronic documents linked together that Runs on the Internet and is the software
• Web Page _A single file, its basic form is a text document
• Web Site _Multiple web pages that share a common topic
• Browser _Displays the pages and handles navigation

What do you find on a web page?

_ You find text and graphics, multimedia, and hyperlinks

Web Design
Web design
• Definition ___The various tasks involved in creating a web page
• Related more to the __front end__ - the __presentation__
• Challenging due to
__Various types/brands of browsers______
__End-user variables – hardware, settings, __
__Different and changing technology___
• Good news and bad news is that ___anyone_____ can ___create_____ a website.

First Steps of Web design

• First step is to _turn off your computer.
• Web Design begins with ___paper___ and ____pencil____
• The three parts of web design are
__Information design_____
__Interaction design___
__Presentation design_____
• You should also consider the following
____Users/audience, Purpose/goal, and Look and feel___

Web Design Basics

The three components of a web page are: _text__, __Multimedia___, _HTML__

Text – another way of saying ___content__________

• It can come from __existing Word documents and other text files__
• You can create it using _ word processors__ and _plain text editors__

Multimedia – usually a collection of __ compressed images______

• Could also be __sound, animation, and preformatted files______
• Graphics can be created using ____programs__________
• Graphics types:
_____GIFs, JPEGs, And PNG_______
______________________________________________________________________________________
______________________________________________________________________________________

HTML - Hyper_ Text____ Markup_____ Language_____

Guidelines for Making User Friendly Web Sites and Pages
1. Make the Site’s Purpose Clear
___Include a one-sentence tagline or slogan, Write a good window title ,and Group all related information together
______________________________________________________________________________________
2. Help Users Find What They Need
____Put important things first and/or at the top, Group things when possible, and Include a search input box.____
3. Help users see what’s there
___Show examples of real site content, Use pull quotes, and Begin link names important keywords.
______________________________________________________________________________________
4. Be smart with graphics & formatting
____Don't over-format pages, Use meaningful graphics, and Quality is better than quantity____

Basic Design Rules

General Design Rules
1. Write __50% less___ text than you would use for other documents. Why? __to allow the person reading to get only
the information needed in a faster time.____
_________________________________________________________________________________________________
2. Use ‘sans-serif’ or ___non-footy___ fonts such as ___sans-serif______. Why? ___it look more professional____
_________________________________________________________________________________________________
3. Use ___dark____ text on ____white_____ background in main content areas.
4. Don’t make pages too ___wide____. Why? _____to keep it organized _________
5. Keep your home page file size __small___ Why? _______to keep it organized ___________

Rules for your Home Page

6. If you have a logo, it should go in the ___upper left____.
7. A ____tag _____ line or _____summary_____ line.
8. You should include a ____directory _____ of the site’s main content areas – the __navigation____.
9. You should include a ___summary ____ of the most important news or promotions
10. You should include a __ search feature______ (if possible)

Rules for your whole site

11. You should have easy to understand ___navigation_____ features that show _____Where I am, Where I have been,
and Where can I go
12. You should have an ‘_‘About <us>______’ page or section.
13. You should have a ‘___Contact Us____’ page

Rules for Links

14. Avoid changing the ___color_____
15. __Differentiate____/___sort___/___group____ links
16. Use ___discriptive______ link names
17. Let the user know _____________what the link will link them to.________

Frames
18. You should ___stay away____ from frames because
_____Many browsers cannot print framed pages appropriately, Frames are so hard to learn, and Search engines have
trouble with frames.________
_________________________________________________________________________________________________
Section 508 and Accessibility
19. Why should you worry about accessibility?
___The more accessible and user-friendly your website, the more people are going to be able to visit your Web pages.
Websites are available to show you how to comply ___
Part 2: Good and Bad Websites…
Use the guidelines for good web design presentation to complete the following.
List at least 3 things from each site below you see that are bad, wrong, or bad web design.
Jami Lin 1.The colors of the background and the text do not mix well.
http://www.jamilin.com 2.The webpage is not wide enough, and the text looks too small.
3.pictures are too small to see

TNT Events 1. The background should not have pictures and it does not match the theme of the
http://www.tnteventsinc.com website
2. the title of the website is not centered
3. the address should not be on the top right

Fabricland 1. hard to navigate

http://www.fabricland.co.uk 2. colors do not match
3. words are too small

Yale art school 1. the background does not make any sense to the theme of the webpage
http://art.yale.edu/Home 2. all the information is on the left side and the space is not used well
3. the person does not stick to one color when displaying the information j

List at least 3 things from each site below you see that are good, correct, or meets the web design guidelines.
Coffeecup 1. the site is well organized and easy to navigate
http://www.coffeecup.com 2. the text is easy to read and understand
3. the background color complements the text

FoxNews 1. provides the information needed and it is easy to navigate

http://www.foxnews.com 2. well organized
3. uses enough of the space that is needed