Lesson 1: Introduction to Web Graphics
Before you start learning how to create graphics for your web pages, it
is important to think about how graphics can be used effectively to enhance
pages without creating accessibility and usability problems. In this lesson,
you will learn about the purpose of graphics in web design and discuss guidelines
for effective use of web graphics.
At the completion of this exercise, you will be able to:
- identify what constitutes purposeful use of web graphics
- identify guidelines for effective use of graphics on web pages
- utilize graphics for web design in a manner that minimizes accessibility
and usability impacts
- Open up the handout: Purpose
and Guidelines for Effective Use of Web Graphics. Look over the three
bullet points that discuss the purpose of graphics in web design. Why do
you think it is important that generally speaking it is good practice to
let the content of the page lead the graphics on the page and not the other
way around? Can you think of any situations where this may not be the case?
- In the same handout, read the section titled Guidelines
for effective use of web graphics. For each guideline, think about why you
think that guideline is important to web design. Remember what you learned about good
design principles and accessibility in Unit 1. Can you think of any additional
guidelines for effective use of web graphics that have not been listed?
- Open the blank web page unit4.htm, which you created in
the Unit 2 lesson on Essential Tags. You will now
populate this page with several sections of content, each section related
to a different lesson in the current unit.
- Be sure the web page has a <title>
element that is reflective of the purpose of this page (a good title would
be "Unit 4: Web Graphics")
- As you may have learned by now in earlier lessons, the
title specificed using the <title> element does not
show up in the body of the document. So, it's a common practice to add
this same title to the body of the document as a main heading, like
<h1>Unit 4: Web
- Your web page will include this main heading, as well as several
subheadings. Following these guidelines in entering your first subheading:
- Use <h2>...</h2> to
identify your subheading as a level-2 subheading.
- The text of your subheading should be: Evaluation of web
- Include an anchor inside the heading tags so you can give your
heading a name, like this: <a
name="evaluation" /> This will allow you to link
directly to this section
from your home page.
- Find the current lesson in the list of Required Projects on your
home page. Make this into a link to
- Go on to the Internet and find a web page of your choice.
graphic images have been used on the page. In your Unit 4 web
page, under the new "Evaluation of web
graphics" subheading, use any XHTML tags that you feel are
approriate to record the URL of the site
you chose, and your responses to the following two questions:
- Referring to the section in the handout titled Purpose of graphics in web design, do you feel the graphics on the
page you selected serve a purpose? If so, what is it? If not, why not?
- Referring to the section in the handout titled Guidelines for
effective use of web graphics, do you feel that the graphics on
the page meet each guideline? If not, which guidlines do they not meet?
Copyright © 2005-2008 by University of Washington.
Permission is granted to use these materials in whole or in part for
educational, noncommercial purposes provided the source is acknowledged.
This product was created with support from the National
Institute on Disability and
Rehabilitation Research of the U.S. Department of Education (grant
#H133D010306), and is maintained with support from
the National Science Foundation (grant #CNS-0540615). The contents do not
necessarily represent the policies of the U.S. federal government, and you
should not assume their endorsement.