Design Principles

The good and the badAlyssa Mendiola

Summer 2009

Contrast

• Contrast is a marked difference• A well designed site has contrast, which

can be a difference in..• Color• Images• Fonts• Size

Contrast

• This website has clearly takes the principle of contrast to the extreme. There are too many colors flashing, causing visual overload. There is also too many different fonts present. Everything is different, bright flashy and there is too many different kinds of patterns. The eye can’t focus on any one object because there is too much going on. Web designers should limit their colors as well as their text styles.The Bad

Contrast

• This website is very subdued, the bright green text is different from the muted gray background and white text. The eye instantly focuses on the green words since there is such a difference in intensity from the rest of the website.

The Good

Repetition

• The repeating of something so that it is the same as before.

• It unifies your design

• Repeat elements such as• Color• Font Style• Graphics• Size

Repetition

• This website had the right idea that repeating pictures unifies a website, but this one is distracting. The site would have been better if they had forgone the tile format and had one picture in the background. It would also be easier on the eyes if the text repeated some colors from the picture, thereby unifying the site.

The Bad

Repetition

• This site repeated the orange color with great success. Even though there is a lot going on the site, each panel is tied to those surrounding it by using the same orange in the text and navigational buttons. The purple is also repeated, to a lesser degree, tying the site together even more. The repeated colors don’t stress the eyes and makes it easy to read.

The Good

Alignment

• Linear or orderly arrangement

• Creates cohesion

• Centered text is hard on the eye

Alignment

• The center alignment on this page makes it hard to read. The eye gets tired and since each line starts in a different place, there is no consistent place for the eye to start the next line. The page is mostly text and while the center alignment does not hurt the navigation area located on the left side, it is detrimental to the body of the website.The Bad

Alignment

• This website has everything lined up nicely. It is easy to read and looks neat and professional. Everything is left justified, allowing the eye to read the text easily. Even the pictures line up with the text boxes creating a crisp sharp looking site.

The Good

Proximity

• Closeness

• The way items are grouped and spaced allow the viewer to recognize the organization.

Proximity

• This webpage is a horrible example of proximity. The site has navigation links and logos all over the page. Nothing is in proximity to each other, making it look unorganized and sloppy.

The Bad

Proximity

• Everything is arranged neatly. In addition to the proximity the pictures and text provide, the red boxes act to further categorize and arrange the content. The viewer can quickly see how the site is organized. The Good

Resources

• The Bad • http://www.miauk.com• http://www.photographertoronto.com• http://www.drjoye.com• http://www.mci.edu/com/index.html

• The Good • http://www.urbanlegends.com • http://www.funology.com• http://www.geocaching.com• http://www.questacon.edu.au