Model+2+Hunt+1

=Principles of Graphic Design=

** What to do **: Purdue University's Online Writing Lab (OWL) - MLA Formatting and Style Guide
As a high school English teacher, I use this website regularly. Not only does it come from a reputable institution, but it is also clean, professional and easy to use and understand. This site has several characteristics of good web design:
 * 1) ** Uniform connectedness :** Notice the navigation bar on the left side of the page. The colors indicate "chapters" and "subheadings" within those chapters. The two main sections are in dark orange, the subheadings show below in a lighter shade, and the specific content shows in a still lighter shade below that. This navigation bar remains consistent on each page of the site - a visual table of contents.
 * 2) ** Good continuation/Closure of the Logo **: Take a look at the OWL logo at the top left of the page. Not only does the "swoop" of the "W" lead from the picture of the owl to the text, but it also helps the eye see both a picture of the owl and the text at the same time. It's a nicely designed logo.
 * 3) ** Proximity and Grouping **: Common elements of the page are grouped together well. The navigation remains on the left side of the page (and is color coded to show major and sub-categories). The focus information is in the center of the page and the text is separated into sections and labeled with appropriate headings ("General Format"). The main heading ("MLA Formatting and Style Guide") appears at the top followed by a succinct summary in a shaded box. The major divisions of the OWL are listed horozontally across the top of the page (eliminating the need for unnecessary vertical scrolling or constant "mousing" over items to find one's way back to major sections). A "breadcrumb" trail is conveniently located across the top of the page - a mental reminder of where one has been and a method of easy return to previous topics.
 * 4) ** Alignment **: Every element the page is visually linked to other areas of the page. The eye is able to quickly recognize patterns of navigation, headings, subheadings, and content. Nothing is placed arbitrarily on the page.
 * 5) ** Repetition **: Not only are elements visually linked and therefore aligned, but the visual "rules" are repeated where appropriate. For example, the main heading introduces the summary, the next subheading introduces text, and still further down the page, a second subheading introduces more text. The main headings, subheadings, and body text share the same font sizes, so the eye can easily determine the patterns of content.
 * 6) ** Color **: Because this webpage employs only 4 main colors (black, brown, orange, and white) the design does not detract from the content. Instead of using many colors to group information, the designers do a nice job of using shades of the major colors instead. The colors have a unifying effect for the material presented on the site. They go together well and are pleasing to the eye.

Back to top

What not to do : Accept Jesus, Forever Forgiven[[image:Bad_Web_Design.jpg width="560" height="328" align="right"]]
Mahatma Ghandi said, "If it weren't for Christians, I'd be a Christian." OK, from someone who does go to church most Sundays, I AM SO SORRY FOR THIS! How revolting! I would love to be able to give you more of a description of the site, but I can't stand to stay there long enough to figure it out. How does it violate the principles of good design? Let me count the ways... 1. ** Lack of uniform connectedness **: The overall impression I get when I look at this page is simply that it's a poorly designed PowerPoint slide. The navigational elements are lost in the center of the page, and the title and the verse eclipse them. There are randomly placed archways (with search menus behind them?), a ladder, advertisements, a black cat (Pagan symbol?) chasing a dove (Christian symbol?)...Oh, my... 2. ** Poor use of Space **: The use of space seems completely arbitrary. The only logic I see is "huge, big, small" - with the actual navigational content (reason for the page in the first place) as the smallest. Though the type is aligned, it doesn't seem to be for any other reason than to simply be put in the middle. Everything is aligned center - the alignment doesn't serve any particular purpose. 3. ** Lack of Proximity and Grouping **: The only grouping is the linked headings int the middle, and those are only grouped in the sense that they are all in the same font, case, and color. 4. ** Poor Alignment **: Again, other than everything being aligned to the center, there is no other use of alignment. The navigation in the center is hard to read, as there is no pattern to it. A viewer must skim horozontally and then repeat the process two more times in order to browse the navigation. 5. ** General aesthetic violations **: Just so you can thoroughly appreciate how motion sick I was while writing this entry, just take a quick peek at the site by clicking here. Because I am at a loss for how to label the other violations, I have lumped them together here:
 * ** Color **: Not only is the rainbow color of the background distracting enough in the static screen shot here, but on the actual site, it moves, pulsating across the page! It is too bright, and does not provide enough ** figure/ground separation ** for the viewer - it takes too much effort to try to read the blue text as the rainbow constantly moves beneath it.
 * ** Sound **: Visit the site - enough said. But for the sake of this write-up, I'll explain. When you first visit the site, you will hear a cat shriek (because that is pleasant), immediately followed by the demo mode that is "like a 1980s Casio keyboard remake being played on half-empty Coke cans" or "what the makers of the original Super Mario Bros. threw away after a night of writing while doing Tequila shots" (my husband). In summary, it is cacophonous, annoying, and persistent.
 * ** Expectation **(is this the right label?): Take a look at the screen shot. The yellow message bar that usually appears on websites to warn users of add-ons or files the computer is trying to download is being used here as a religious advertisement. It's just odd.

Back to top