top of page

Introduction to Web Graphics

1. GRAPHIC DESIGN (14 pts)

  • Visit Purpose and Guidelines for Effective Use of Web Graphics and read the information on this page. Next, visit Go Animate! Apply each of the 7 guidelines above to the design of this site. State the guideline and whether the Go Animate site meets the guideline and why or why not.

    1. ​Graphics should fit in with the purpose, organization, and style of the page.

      • GoAnimate products fit with this first guide line.​

    2. Avoid using graphics with large file sizes that add to the load time of the page.

      • GoAnimate allows for 15 MB so it fits this second guide line.​

    3. Graphics should help to guide the viewers’ focus to the important content on the page.

      • The graphics help the viewer focus on specific content and support a theme.

    4. Avoid repetitive use of overly bright or potentially “obnoxious” images

      • Some graphics lean more towards obnoxious if they choose to.

    5. Avoid the use of graphics to convey textual content information.

      • Graphics include text and can add text boxes to explain information

    6. Provide textual equivalent alternatives for graphic content.

      • You can voice over and have a graphic speak instead of a text box.​

    7. When using text in graphics, make sure there is sufficient contrast between the text and the background color.​​​ 

      • It is all customization so the user can make sure there is contrast.

 

2. WEB GRAPHIC TYPES (20 pts)

Visit the following site to answer below: Web Graphics Basics

Define "pixel" 

  • Thousands of tiny dots of colors that create a image.

What is the difference between using a graphic on a web site and using one that will be printed?

  • Some graphics used on the web are jpeg, gif, and png. The difference is the resolution in the images. Images for print, a higher resolution will yield a higher quality image so you need a high quality to print it.

​

Visit the following site to answer below: Difference between GIF, JPEG AND PNG

Define each of these. Also, what is the difference?

  • gif - Graphic Information Format, allows only 256 colors

  • jpeg. - Joint Photographic Experts Group, allows up to 16 million colors and is the best choice for image with many colors or color gradations

  • png - Progressive Network Graphics, allows for use of millions of colors as well as providing the ability to have transparent backgrounds

 

ALSO, read the information at Web Style Guide: Characteristics of Web Graphics and for each of the five images at https://www.washington.edu/accessit/webdesign/student/unit4/module2/lesson1.htm state the appropriate file format you would use for each in placing that image on a web page.

  1. Graphics and bandwidth

  2. Screen resolution

  3. Gama

  4. Color display

  5. Screen resolution or color display

 

3. COPYRIGHT (6 points)

Read the information at Interactive copyright questions and answers (you need an updated version of FLASH PLAYER to view this) and 10 Big Myths about copyright explained and give your opinion about each of the 3 scenarios at Copyright Scenarios, Copyright violation or not and why?

  1. Timmy is using the pictures right and gave credit to the owners instead of trying to past them off for his own. 

  2. She says they are public domains so I would go check to make sure it explicitly states that it is public domain. Even in this instance I would also ask her to cite but the pictures are okay.

  3. As long as he does not make the site public. If they are just used for educational use then he is okay but if they decide to actually use it then they need to pay or change their images.

 

4. HAND ON (20 points)

Do the following if you did NOT do them in a prior course for me and insert them into your web page for this assignment: 

  • I completed them in EdFound 204 with Dr. Pastore

​​

5. DIIGO (20 points)

Bookmark 10 graphic web site resources in Diigo titled "graphic resources" and put the link on the web page for this class.

bottom of page