Exploring Web Design
description
Transcript of Exploring Web Design
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
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