Graphic Design
Visit Purpose and Guidelines for Effective Use of Web Graphics.
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
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
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.
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
Copyright
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?
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.
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.
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
Webspiration - Create a simple concept or mind map.
MediaBuilder 3D Text Maker - Create a logo
Tagxedo - Create a 10 word collage with a common theme
Online Image Editor - Edit any gif with a before and after.
Before After
Rubistar - Create a simple 4 by 4 rubric. Copy and paste it into the web page.
Diigo - Bookmark 10 graphic web site resources titled "graphic resources."