.

1. Web Site Design
Things to Think About

2. What questions should you answerbefore
sitting at yourcomputerto create a web
site?
• What do you want to achieve by creating a
Web presence?
• Who is your audience, and what type of
content will you host?
• Do you offer information, or products or
services?
• Do you want interaction with others?
Knowingtheanswers to thesequestions helps youplaneffectively.

3. Describe the three main types
of web pages.
A Web site typically contains three
types of pages:
• the home page,
• topic pages,
• and subsidiary pages.

4. The Home Page
• Create a good first impression with your home page
As the gateway to your site, the home page is the
most important page of your Web presence. It should
clearly convey three things to visitors:
• The site's purpose - the who, what, when,
where, and why.
• The kind of content on the site.
• How to access the content.

5. Topic Pages
• Use topic pages to organize your information Topic
pages are reached by hyperlinks from the home
page. Try to limit each topic page to a single purpose.
Common types of topic pages include:
•Calendar of events
•Price list
•Special offers
•Product catalog
•What’s new
•FAQ (Frequently Asked
Questions
•Directory of related hyperlinks
•Testimonials
•Related products
•Response form
•Company History

6. Subsidiary Pages
• Use subsidiary pages to break down
the information. Subsidiary pages are
subsets of a topic page. If a topic page
contains a product price list, for
example, each product name could link
to a subsidiary page that contains more
detailed information on that product.

7. Tips for Using Hyperlinks
• Avoid nasty surprises with hyperlinks. Navigation should always be predictable.
– Be consistent. The word "Home" or a picture of a house, for example, should always lead the reader
to your home page.
– Use precise wording or images so readers know what destination to expect before they click the link.
It makes their job of moving around your Web site much easier, and increases your ability to hold
their attention.
– Use consistent wording or images so readers can learn what destination to expect before they click
the link.
• Keep the hyperlinkwording brief. This is the Web, so links should be even
more scannable than the rest of yourcontent.
– Make "price list" the hyperlink, for example, rather than "Review our updated price list here."
– Make all hyperlink text in a Web site roughly the same length.
• Make hyperlinks easily recognizable. Yourhyperlinks should be immediately
recognizable as hyperlinks.
– Make the size, color, and placement of each type of link consistent for elements repeated on multiple
pages, such as buttons or navigation bars.

8. Hyperlink Tips continued...
• Avoid underlining foremphasis in yourwriting. Text hyperlinks are frequently
marked by underlining on a Web page.
• Keep the numberof hyperlinks to a minimum. Just as a wall of text chases
away even the most avid Web surfer, so do too many hyperlinks.
• Leave enough space between hyperlinks so that readers don't mistake two or
more hyperlinks forone hyperlink.
• Use different colors forunvisited and visited hyperlinks that contrast with your
Web site's background color. If the hyperlinks blend in with the background,
they will eithernot be visible orthey will seem to disappearwhen clicked.

9. Hyperlinks are hard to find on the left Web page
because they are scattered throughout the text.
Hyperlinks on the right Web page are easier to find
because they are placed together.

10. Important Points About
Graphics
• Don't make readers wait for long downloads Graphics require more disk space
and memory than text, which means they take longer to download. Consider the
following:
• Use your images more than once Images repeated throughout your Web site
add an element of consistency to the design. It can also reduce your viewer's
download time. Use the same image, such as graphical buttons for hyperlinks, to
make them easy to recognize. Or, place a logo in the same position on every
page to reinforce your organization's identity.
• Don't steal - It's the law If you use graphics from publications or the Web, be
sure to get permission from the copyright owner by writing to the author,
publisher, or Webmaster.

11. Graphic Types
Description BestUsed For…
GIF • Graphic Interchange Format • The most widely used graphic format for
clip art, drawings, and black and white
photographs.
• It's the fastest type of graphic to
download, it doesn't become distorted,
and it supports transparency, so you can
view the background behind the GIF.
• Every browser that supports graphics can
display GIFs.
JPEG • Joint Photographic Experts Group • Best for color photographs and scanned
images.
• Slow to download.
• Do not produce clear images for black
and white photos or photos with sharp
contrasts.
Animated
GIFs
These files are a series of GIFs made
into one file that plays like a short
film loop.
• Be sure the animation loop is both short
and relevant to your message.
• Certain browsers can't display an
animated graphic.

12. What is a thumbnail?
Why is it used?
• A thumbnail is a smaller version of a
graphic, typically measuring 1 square
inch.
• Use thumbnails to decrease the time it
takes to download your web site.

13. Examples of Thumbnail Use
•Displaying artists’ works - virtual art gallery.
•Showing pictures of homes/properties for sale.
•Online photo gallery.
•Show a hobby collection.

14. Guidelines for Colour
• Keep the background color, textures, or patterns subtle so that the reader's eye
is drawn to the content of the Web page, not what's behind it.
• Choose a text color that contrasts with the background, rather than blends in or
competes with it.
• Hyperlinks Choose a color for your hyperlinks that stands out, and use that color
only for hyperlinks. Be sure that the color also contrasts with the background.
• Choose a color for visited hyperlinks that is distinct from unused hyperlinks,
other text, and the background.
• Choose graphics with colors that coordinate well with the overall color choices
you've made for your Web site. Your graphics will enhance the pages visually
without overpowering them.