Learning Lit dot com's logo

Website Construction for Teachers

Assignment 3 - Introduction to Web Graphics

Graphic Design

  1. Visit Purpose and Guidelines for Effective Use of Web Graphics.

  2. Next, visit Go Animate! and 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.

    • “Graphics should fit in with the purpose, organization, and style of the page” - The graphics do tend to meet this requirement. There is a clear color scheme and provide structure at times as the viewer scrolls down the page.

    • “Avoid using graphics with large file sizes that add to the load time of the page” - The use of embedded videos, multiple graphics, icons, and Gifs contribute to a slower load time than a text-based page. The load time (on my computer at least) is not significantly longer than a text-based website, though.

    • “Graphics should help to guide the viewers’ focus to the important content on the page” - The graphics on the page, especially as icons, guide the viewer to important content. However, there are a lot of graphics, so it may be difficult to sort through the content the viewer wants.

    • “Avoid repetitive use of overly bright or potentially ‘obnoxious’ images” - There are a few Gifs that make the page a bit obnoxious. There is a lot of flashing on the screen between the video players and the Gifs.

    • “Avoid the use of graphics to convey textual content information” - The only time graphics are used instead of text are the endorsement logos.

    • “Provide textual equivalent alternatives for graphic content” - When Gifs and videos are used, the website makes clear their content.

    • “When using text in graphics, make sure there is sufficient contrast between the text and the background color” - The text and backgrounds offer an acceptable level of distinction, using either a dark background with light text or vice versa.

Web Graphic Types

  1. Web Graphics Basics

    • Define "pixel" - the tiny colored dots used to create images on digital screens

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

      • Website - typically displayed by 72 or 96 pixels per inch, higher resolutions do not increase image quality

      • Printing - typically much higher ratio of pixels, higher resolutions increase image quality

  2. File Formats

    • Define .gif - small files with a limited number of colors (256), allows for transparency, not good for photographs, and can be animated

    • Define .jpeg - supports a much larger color selection (16.7 million), small file size, good for photographs, lose quality during editing

    • Define .png - larger images, may support transparency, supports high quality images in a low resolution format, does not lose quality during editing

    • What is the difference? Gifs are for basic images and can be animated and without a background. Jpegs are for high quality pictures. Pngs are for high quality pictures, supports transparent backgrounds, and are lossless.

  3. Read the information at Web Style Guide: Characteristics of Web Graphics and for each of these five images state the appropriate file format you would use for each in placing that image on a web page.

    • Image 1 - .gif

    • Image 2 - .jpeg

    • Image 3 - .jpeg

    • Image 4 - .gif

    • Image 5 -  .gif


  1. Read the information at Interactive copyright questions and answers 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. Scenario 1 - Timmy Thompson gets almost a perfect score. He looked for copyright information before taking the pictures, and he makes sure to credit the owner. However, there are two items that Timmy must consider. First of all, the author of the original webpage may have used these pictures illegally. In that case, Timmy has broken the copyright law, assuming that these pictures belonged to that author. Second, if Timmy’s assumption that these images belong to the author is correct, then those images belong to the author with or without placing copyright notices on the page. Unless the author explicitly makes the pictures public domain, these images are protected. Crediting the author may not be enough to protect Timmy from taking these pictures. Of course, all of these violations go away if the original pictures used on the author’s site are listed in the public domain.

    2. Scenario 2 - In Susie’s case, she has not violated the law by using pictures from a government website that explicitly states that the images are in the public domain. Given that any publication of a USA agency is considered an interpretation of the law, she is covered by national copyright law. While Mr. Johnson will probably not take off any points, he may advise Susie to credit the source of the picture anyway.

    3. Scenario 3 -  Assuming that he did not pay for the images and that Timmy published the website, Timmy broke the copyright law. Publishing the website removes the situation from a purely educational project, thus violating the wishes of the stock photography website.

Hands On

  1. Webspiration - Create a simple concept or mind map.

        mindmap made using webspiration

  1. MediaBuilder 3D Text Maker - Create a logo

        moving image reading Learning Lit dot com made with the 3d text maker

  1. Tagxedo - Create a 10 word collage with a common theme

        word collage made with tagxedo using the terms Learning Literature, story, poetry and text.

  1. Online Image Editor - Edit any gif with a before and after.

        before picture of a gif            after picture of a gif made by the image editor which now has color changes and flashing

                                     Before                                                                   After

  1. Rubistar - Create a simple 4 by 4 rubric. Copy and paste it into the web page.

        basic 4 by 4 rubric made with rubistar

Diigo - Bookmark 10 graphic web site resources titled "graphic resources."


Copyright © 2017 by Chris Rozelle