Exploring Web Design

Chapter 1

Objectives

• Develop a new perspective of the WWW• Learn what makes a website good or bad• Discover how to apply objective rules to subjective

matters• Begin to deconstruct the elements of a web page

Perspective

WWW is full of poorly designed webs

Our pages can be well designed

Critiquing Websites (1)

• You are a web user

• Watch for other people’s mistakes

• Pay attention to what you like/dislike

Critiquing Websites (2)

• Questions to ask:1. Do I like the way this site looks?

2. Can I tell what the site is about?

3. Does the design seem appropriate to what the site is about?

4. Can I find what I’m looking for easily?

Critiquing Websites (3)

• Don’t limit yourself to websites. Look at the layout and design of:

1. Newspapers

2. Magazines

3. Textbooks

Consider Your Audience

What is your message?

• The WWW is a communication tool

• Ask:1. What message are you sending?

2. Will they understand the message?

3. How am I expressing the message?

About Colors

When viewing or creating websites ask:

1. How do the colors make me feel?

2. Can I read the text?

3. Are the colors loud or dull? (eye candy vs. bland corporate)

4. Do the colors look good together?

Your Opinion

You may have an opinion about a website.

That’s great, but try to substantiate your

likes/dislikes objectively using your training.

Be specific!

Getting Technical

Web Color Limitations

• 3 colors: Red, Green & Blue (RGB)• These three colors, in various

combinations, are capable of creating millions of colors.

• 216 colors in common between Windows and Macs

• No longer an issue

Raster Images (1)

• JPEG, BMP, GIF, TIFF, PNG• Also called bitmapped images• Composed of pixels• Windows displays 96 dpi pixel resolution• Do NOT scale well

Raster Images (2)

Vector Images (1)

• WMF, EWMF, SWF, PDF

• Composed of dots and vectors

• They scale well (enlarge)

• Have independent resolution

Dithering

Common Web File Formats

• JPEG

• GIF

• PNG

• SWF

• PDF

JPEG

• Joint Picture Experts Group

• Lossy

• Highly compressed

• No transparency channel

• 16.7 million colors

• Used for photos and gradients

GIF

• Graphics Interchange Format• Lossless• Highly compressed• Have a transparency channel• 2 to 256 colors• Can cause banding in flesh tones/gradients• Used for logos and images with few colors

PNG

• Portable Network Graphics

• Lossless

• Highly compressed

• Tranparency channel

• Create raster and vector images

• Still not used as widely and JPEG/GIF

Animation

• JPEG’s do not animate

• GIF and PNG may be animated

• Animation increases file size

• Take longer to load

• Use ONLY where appropriate to grab attention