1. Design Principles The good and the bad Alyssa Mendiola Summer 2009

2. Contrast Contrast is a marked difference A well designed site has contrast, which can be a difference in.. Color Images Fonts Size

3. 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

4. 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

5. 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

6. 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

7. 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

8. Alignment Linear or orderly arrangement Creates cohesion Centered text is hard on the eye

9. 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

10. 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

11. Proximity Closeness The way items are grouped and spaced allow the viewer to recognize the organization.

12. 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

13. 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

14. 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