Introduction to Multimedia (Fall 2004)


In-Class Exercise: Design (posted 5 October 2004)

Working with 1-2 other students (you may not work alone, and you may not work in groups of more than 3 people), go to The Viola Site. Look over the site, and then evaluate it based on the basic design principles laid out by Williams & Tollett:

  • Alignment
  • Proximity
  • Repetition
  • Contrast

Summarize your group's opinions of the site, and provide some suggestions for how the site design could be improved. (Post that information as a comment to this exercise; be sure to include all group members' names.)

Links From Other Weblogs (Trackbacks)

There are no recorded trackback links from other weblogs.

Comments

Andrew Valenti, Eric Peifer, Andy Graig think that the viola site shouldnt have plain text in the same color as links. And that the search box should not be centered between two images. Wider magins are also needed to help improve readiblity. The menu frame s overall too narrow. This site is very dulll using only black white and blue and including out of date black and white images. As for possitives, the proximity (excluding the margins) and contrast are good. However lots of space makes for more scrolling.

Posted by: Andrew Valenti, Eric Peifer, Andy Graig on October 5, 2004 10:54 AM | Permalink to Comment

Contrast: The contrast is extremely readable on this website. The blue text is very easy to read on the white backround. However, we feel that the site is too bland and needs some color to spice it up. A lighter shade backround could be applied and if it didn't look good with the blue text, a different darker shade could be used.

Repetition: Bullets can be used on the left of the link list to show which links are together. There are a few instances where we could not tell if a certain link continued to the line below.

Alignment : There are also two different colors of text. Some that is black and some that is blue. Sometimes the text is centered and sometimes it is aligned left. The paragraphs are not evenly spaced throughout the site and the overall text layout in the main does not coordinate. A style sheet could be used to improve this portion of the site

Proximity: the spacing and location of text blocks on this page compared to that of the location around them is well. The location of text is not severly close the the pictures, which helps the readability of the site.

Overall, this page needs drastic improvement and our eyes are now sore after seeing such a monstrosity.

Posted by: Rich Kenyon, Chris Boulas, and Sandra Kingsbury on October 5, 2004 10:55 AM | Permalink to Comment

Uneventful, boring, simple, bright blue links that turn bright red once visited, simple and easy alignment, proximity is well organized, spaced well and easy to tell which sections belong to which - but there are lots of white spaces that could be slimmed down. Repitition isn't really a factor considering there is a menu with links to navigate the page and the data on the right changes to something new. it could use some background color, some GUI or buttons and design to jazz it up a little bit. a better layout for the menu, possibly something in Flash with dropdown or fold-out menus would be nicer than levels of menus one after another.

Posted by: Andrei Petrov on October 5, 2004 10:57 AM | Permalink to Comment

Alignment: no structure, little to direct the viewer to the main content of the page, annoying because all of the links on the left are blue as well as some of the body content in the right side of the page.
Repetition: All links are blue and underlines, but the is little structure to the content. There is little color to the right section. The link column on the left is lacking in structure and form. Repetition of pioneer’s photos.
Alignment: Crazy structure of the search function in between the pioneer photos and two locations of the search option.

Suggestions: Improve the site with color and style, voice, or use of design elements. Don’t use frames and move the links elsewhere. The main page needs to have a logical progression of ideas and some form of structure to convey the thoughts of the designer.

Posted by: John Carew, Dan Vittegleo, Curtis McKeegan on October 5, 2004 10:58 AM | Permalink to Comment

There is no alignment present in the site. The contrast of the site is good but the use of blue text makes it difficult to determine the links from text. The quote that is in blue is not in close proximity with the information about the person who said it. Some of the links on the side of the page are in eextreme proximity to each other. There is lack of repitition on the page.

Posted by: Andrew Gaskin, John Caligaris on October 5, 2004 11:01 AM | Permalink to Comment

Alignment- Menu seperated but the body is to cluttered and the lines used to seperate the different parts are not dark enough.

Proximity- The links under the pictures look as if they go with the pictures but in reality they do not.

Contrast- Menu is fine and the links were also colored well but the lines are not dark enough to seperate the body well.

Repetition- The site is very very repetitious and boring and has too much text in the same format in one area and is not properly seperated.

Posted by: Chris Wolf, Deidra Robinson on October 5, 2004 11:02 AM | Permalink to Comment

Rich Vreeland, Rich Vinceletti, Tim Maiura -

Contrast - Contrast is good, because the site is entirely black and white with the exception of blue links. We agree however that the site reminds us of a previous decade, and could use some updating.

Repetition - All of the links are blue, which is good as far as consistency goes, but there are also some blue passages which may make things confusing for viewers. In addition the structure of the body copy continually changes, and there is one page on the site that has a unique background image for no apparent reason; very unusual.

Alignment - The alignment is very poor and sporadic. Alignment is changed for no apparent reason and the site goes down vertically much further than it has to. Some structure would do this site a great deal of help.

Proximity - Things are too far spaced apart and in different increments; the content makes you scroll very far down, as does the frame which sort of defeats the purpose of that separation.

Extra Comments - There is virtually no formatting on the site; no color, default link color and typeface; definitely needs some work. Also, frames used in this way seem to have become a thing of the past, especially in recent years, and generally one will associate a scrolling frame such as this with a poorly designed web site. One interesting note is that the site has CSS formatted scrollbars, which seem very out of place with a site that lacks any other sort of formatting... very unusual indeed.

Posted by: Rich Vreeland, Rich Vinceletti, Tim Maiura on October 5, 2004 11:03 AM | Permalink to Comment

This web page is not very organized, it's hard to navigate. The text on the main page is the same color as the links. Its not colorful at all; black and blue on a white backround are the only colors.

Everything is bunched together, but it seems like there's no order to the bunching. The search bar is stuffed in the center of the main page.

The link menu is resizeable, which adjusts the entired web pages size, messing up the links and the text. The links aren't separated, and the first links in the menu are links to other web pages. The links also don't change at all when you roll over them.

The links should be separated into menues more like http://halo.bungie.org/ .

Posted by: Steve Myers, Chris Gibson, Patrick Cannon on October 5, 2004 11:03 AM | Permalink to Comment

Lots of blue. Text alternates between blue and black, links are blue as well. Links at the top left are not spaced at all. No margins. No sense of grouping between similar topics. Not enough suitable graphics. The grapics that are there don't correspond to their links.

Posted by: Brian, Tony, Wing-Yen on October 5, 2004 11:04 AM | Permalink to Comment

Cyprian, Kelly, and Patty We found this site very confusing in general, it was very disorganized and the online pop-up for the site was extremely annoying. The first problem we found was that their color scheme for text and links were the same in spots. This made it hard to tell by just looking at the site, what was a link and what wasn't. They were also inconsistant with their text size within paragraphs. There were multiple proximity issues, where there was too much space in between quotes and their authors. The images pages could have been condensed down to one site, or used a thumbnail, and needed labeling. The pictures also had no margins, but were flush against the corners. There was a music scale graphic that was actually a link. This wasn't clear until you moused over the graphic; the page it linked to seemed unneccessary. There were too many links in the left frame which made it look unorganized and there was even a long link that appeared to be one link but was actually two. The entire site seemed to be a long list of links to other sites, with hardly any actual content present on the pages. It seemed that there was not much unity to the site overall.

Posted by: Kelly Owens on October 5, 2004 11:08 AM | Permalink to Comment

Contrast: High contrast, but the blue is a little too light for the white background. Also, visited links are red, which contracts better than the blue and looks very generic. The black text contrasts well too.

However, the first few paragraphs are the same blue as the links, and the links are not all the same font size or family, thus making links not too easy to distinguish.

Repetition: The menu bar is fairly repetitive, however towards the end the links start to change font size and family. The main frame lacks repetition and is a mess. It just flows with nothing but inconsistently sized horizontal rules to break sections up.

Alignment: Paragraph spacing is good; alignment is mostly left. However, the top few paragraphs of the main frame are centered, and alignment randomly changes to left. Links in the menu bar are spaced evenly. Everything is linear and it's hard to navigate through a page other than by scrolling.

Proximity: The section with the pictures is confusing; there should be more space between the pictures and the search area. Also, the search area (in the menu frame) has a lot of white space after it.

The use of frames is annoying too, as the mid-90s are over and there ar e better, easier ways to make navigation menus.

It's hard to tell what a lot of the pages are about too. Decent heading use is not in effect here.

Posted by: T.J. Esposito, Bobbisue Rybarik on October 5, 2004 11:08 AM | Permalink to Comment

Good: -Consistent in all browsers -Easy to read

Bad: -Frames are adjustable -Frames look unrelated -No margin -Links are blue, paragraphs are blue -Text is a different size and boldness through the site -"www.viola.com" logo is the "home" link, which you can't tell until you click it -Text alignment sucks -Left frame is all aligned to the left -Right frame incorporates every alignment -Inconsistent background -Bad navigation system -No feedback -Links everywhere

Posted by: Sean Sobieraj, Jim Kanaley, Chris Monti on October 5, 2004 11:09 AM | Permalink to Comment

The lack of pictures makes the site very boring to navigate. Also, the varying size and color of text emphasizes the wrong and less important text. The alignment leaves no space between the text and edge.

Posted by: Geoff Schweigert on October 5, 2004 11:10 AM | Permalink to Comment

Good Website: www.fourstarclothing.com The site is very easy to find your way around. The contrast makes it easy to read. Everything is sectioned of and aligned. All the links are pictures except for some text which is underlined to show it is a link.

Bad website: www.sk8parkinfo.com This hurts my eyes to look at. Everything is very close together, and is hard to differenciate from each other. The text is also very small and hard to read. The alignment is nice, but again, everything is too close.

Posted by: Geoff Schweigert on October 5, 2004 11:23 AM | Permalink to Comment

Andrew Valenti, Eric Peifer, and Andy Craig.

Good - www.investors.com:

  1. the colors are visually appealing
  2. menus are organized and by color
  3. items are evenly spaces
  4. items are clearly seperated into groups
  5. contrast makes text, links, and menus easy to read
  6. rollovers make links easily identified

Bad - www.addictinggames.com:

  1. links are simple and withou rollover
  2. little seperation between anything
  3. title appears to go with the ad directly below it
  4. images aren't aligned properly
  5. menus are at the bottom and go on for about 2/3 of the page itself, even split into columns
  6. contrast is alright at best
Posted by: Andrew Valenti, Eric Peifer, and Andy Craig on October 5, 2004 11:27 AM | Permalink to Comment

http://maddox.xmission.com/ is a good site becuase its very simple. The links are very readable on the black backround. The black backround is easy on the eyes because a computer monitor is not a piece of paper, and looking at black text on a white backround is like staring into a light bulb. The page is all likes to other pages with content, and the menu at the top is used for non-main content, such as the FAQ, images and stats of the webpage. Everything is aligned well, and spaced enough to separate different links. Its very simple, and thats a good thing.

http://www.assortedramblings.com/ is the worst webpage we could find. The backround changes with every link, theres horrible navigation...no menus at all, dark backrounds with dark blue links, and there are no original images or picutres. Everything is really close together too...so the proximity is bad.

Posted by: Steve Myers, Patrick Cannon, Chris Gibson on October 5, 2004 11:31 AM | Permalink to Comment

good site-http://www.altavista.com/web/default

The site is simple to use. it uses a decent contrase such that you can read everything. Good alignment and proximity for the main search function.

Simple s good.

bad site-http://www.hvcc.edu/

the link system does not use any form repitition. the contrast used fot the text is difficult to read. There is no alignment used on the page, things are just thrown all over the place. The link bar at te top of the page doesn't feel like it is a part of the site, it feels seperated from the main page. In general it is a strange layout to the page.

Posted by: Andrew Gaskin, John Caligaris on October 5, 2004 11:34 AM | Permalink to Comment

Really Bad Website www.mperkin.freeserve.co.uk Rainbow colored flashing banner is just horrid. Color scheme and contrast is frightning. The links on the contact page are red and the links of the left are blue. The index link has no hyperlink. Very ranndom mickey mouse animation. There is a tribute with no link. The frame sizes are changeable. Crazy backgrounds used with the R U Here? link, bight green with yellow font. All in one utility website where he even sells his house. Mission impossible theme is supposed to play in the background, it doesn't. Not browser friendly with the sound working in explorer and not safari. Bad combinations of text and background color.

Good website: www.adobe.com good use of rollover and drop down menus. links are mostly in red and those in grey turn red when activated. well designed user interface. color scheme goes well with corporate colors. contrast and repetition is good with the titles. professional clean design. consistent user navigation throughout various portions of the website.

Posted by: John Carew, Dan Vittegleo, Curtis McKeegan on October 5, 2004 11:39 AM | Permalink to Comment

Good Site: Pixar.com

  1. Very Clean
  2. Well Spaced
  3. Easy to Navigate
  4. Visually Appealing / Intelligent Use of 3D Ability
  5. Very Original Content Display, see "how we do it"

Bad Site: "Welcome to My Home Page" http://www.angelfire.com/ny3/sportsbasketball/

  1. This site about basketball. It has red text on a yellow background, lots of tiny unrelated GIFs (smiley, hand, devil, bomb, trash bin, treble clef), and plenty of spellings. Equipped with a free state of the art lime green counter. The site pages are linked to in a linear structure (just one link per page), making it difficult to get back to the home page. A different color theme is used on every page, and it's always "interesting" at the very least.

There are many sites like this, and this is a perfect example of what those sites represent ... garbage.

Posted by: Rich Vreeland, Rich Verceletti, Jim Maiura on October 5, 2004 11:42 AM | Permalink to Comment

An example of a good web site is www.Defjam.com. It has good contrast for most of the web site. It uses different colors and shapes for headings and titles. The only part that is bad is that it is a bit cuttered and has alot going on all at once.the repetition is also good and it does not repeat itself.

An example of a horrible site is www.boog.com. It just plain horrible. The red background and yellow text gives me a headache after reading after only minute. The alignment is way off although they tried to seperate the menu but failed at it. The proximity is bad because it is very close together and cluttered. The repetitiion is horrible as well becausae they only use 3 colors.

Posted by: Chris Wolf, Deidra on October 5, 2004 11:42 AM | Permalink to Comment

Bad Site:
http://www.scopesys.com

Contrast:
-Contrast is aweful
-No consistency in color or design

Repetition:
-No repetition at all, completely random

Alignment:
-Some text is aligned to the left, some centered

Proximity:
-No spacing in some of the text
-Cluttered lists
-Sections are inconsistent
-No margins

-No navigation, links are random
-Text size is inconsistent
-gifs are unrelated to the content

Good Site:
http://www.mozilla.org

Contrast:
-Good colors, easy to read

Repetition:
-Sections are easy to distinguish
-Same block style repeats

Alignment:
-Text is consistently aligned in the respective sections

Proximity:
-There are margins
-Items are well spaced
-Pictures go with text

-Links are consistent
-Main menu is consistent across all pages

Posted by: Sean Sobieraj, Jim Kanaley, Chris Monti on October 5, 2004 11:45 AM | Permalink to Comment

oops.

Posted by: T.J. Esposito, Bobbisue Rybarik, Andrei Petrov on October 5, 2004 11:50 AM | Permalink to Comment

Bad: http://www.xanga.com/home.aspx?user=zenzi

  1. The Superman logo on the background makes it very difficult to read the text
  2. The contrast is bad, there are black backgrounds with dark blue text and vice versa
  3. The background image overpowers the whole site
  4. The size of the logo isn't necessary

Good: http://waveofthought.com/main.htm

  1. The use of flash is good
  2. The color blend is well put to use
  3. The site is very interactive
  4. It has a cool factor to it
  5. You only see what you want to see, no clutter
Posted by: Brian, Tony, Wing-Yen on October 5, 2004 11:52 AM | Permalink to Comment
Post a comment




Remember Me?

(you may use HTML tags for style)