Exploring Web Design
description
Transcript of Exploring Web Design
![Page 1: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/1.jpg)
Exploring Web Design
Chapter 1
![Page 2: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/2.jpg)
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
![Page 3: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/3.jpg)
Perspective
WWW is full of poorly designed webs
Our pages can be well designed
![Page 4: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/4.jpg)
Critiquing Websites (1)
• You are a web user
• Watch for other people’s mistakes
• Pay attention to what you like/dislike
![Page 5: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/5.jpg)
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?
![Page 6: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/6.jpg)
Critiquing Websites (3)
• Don’t limit yourself to websites. Look at the layout and design of:
1. Newspapers
2. Magazines
3. Textbooks
![Page 7: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/7.jpg)
Consider Your Audience
![Page 8: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/8.jpg)
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?
![Page 9: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/9.jpg)
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?
![Page 10: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/10.jpg)
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!
![Page 11: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/11.jpg)
Getting Technical
![Page 12: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/12.jpg)
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
![Page 13: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/13.jpg)
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
![Page 14: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/14.jpg)
Raster Images (2)
![Page 15: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/15.jpg)
Vector Images (1)
• WMF, EWMF, SWF, PDF
• Composed of dots and vectors
• They scale well (enlarge)
• Have independent resolution
![Page 16: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/16.jpg)
Dithering
![Page 17: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/17.jpg)
Common Web File Formats
• JPEG
• GIF
• PNG
• SWF
![Page 18: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/18.jpg)
JPEG
• Joint Picture Experts Group
• Lossy
• Highly compressed
• No transparency channel
• 16.7 million colors
• Used for photos and gradients
![Page 19: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/19.jpg)
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
![Page 20: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/20.jpg)
PNG
• Portable Network Graphics
• Lossless
• Highly compressed
• Tranparency channel
• Create raster and vector images
• Still not used as widely and JPEG/GIF
![Page 21: Exploring Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062301/56814dbf550346895dbb17ba/html5/thumbnails/21.jpg)
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