Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
What makes website look good? Is it the color choices? Is it the visual layout? Is it the grouping of information? Is it t...
<ul><li>Robin Williams presents to her readers four Elements of Design. </li></ul><ul><li>These elements are the basic ele...
Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition  Repetition...
Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition  Repetition...
<ul><li>Proximity </li></ul><ul><ul><li>Proximity is defined as the  grouping of related items together , move them physic...
Proximity How to get it: Squint and count the number of elements on a page. Limit yourself to between 3 and 5 elements. Wh...
Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition  Repetition...
<ul><li>Alignment </li></ul><ul><ul><li>Alignment is defined as the element where  nothing is placed on the page arbitrari...
Alignment How to get it: Always align elements on the page, even those that are far apart. What to Avoid: Don’t center som...
Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition  Repetition...
<ul><li>Repetition </li></ul><ul><ul><li>Repetition is defined by some  aspect of the design that is consistent  throughou...
Repetition How to get it: Choose design characteristics (type face, color, size, cartoon style, picture style) and repeat ...
Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition  Repetition...
<ul><li>Contrast </li></ul><ul><ul><li>Contrast is defined by creating  two elements that are different  and making them r...
Contrast How to get it: Be bold! Use color, size, and space to differentiate between content Break the rules when it works...
Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition  Repetition...
What makes website look good? Is it the color choices? Is it the visual layout? Is it the grouping of information? Is it t...
Is it the color choices? Is it the visual layout? Is it the grouping of information? Is it the consistency throughout the ...
<ul><li>Next Steps </li></ul><ul><ul><li>It is time to critique websites on their design according to the Robin Williams E...
Upcoming SlideShare
Loading in …5
×

Group7 elements-of-design-97-03

2,690 views

Published on

Published in: Education
  • Be the first to comment

Group7 elements-of-design-97-03

  1. 1. What makes website look good? Is it the color choices? Is it the visual layout? Is it the grouping of information? Is it the consistency throughout the site? Repetition PROXIMITY Alignment Contrast
  2. 2. <ul><li>Robin Williams presents to her readers four Elements of Design. </li></ul><ul><li>These elements are the basic elements that can be applied to a variety of media formats. </li></ul>
  3. 3. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast
  4. 4. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast
  5. 5. <ul><li>Proximity </li></ul><ul><ul><li>Proximity is defined as the grouping of related items together , move them physically close to each other so the related items are seen as one cohesive group. </li></ul></ul><ul><ul><li>Robin Williams explains how the basic purpose of proximity is to organize items together. </li></ul></ul><ul><ul><li>This can be done by grouping related items together to be seen as one cohesive group. </li></ul></ul>
  6. 6. Proximity How to get it: Squint and count the number of elements on a page. Limit yourself to between 3 and 5 elements. What to Avoid: Avoid corners and the middle of the page. Avoid equal amounts of white space between all elements Force relationships between headings and content Don’t put unrelated content elements together
  7. 7. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast
  8. 8. <ul><li>Alignment </li></ul><ul><ul><li>Alignment is defined as the element where nothing is placed on the page arbitrarily resulting in every item having a visual connection with something else on the page. </li></ul></ul><ul><ul><li>Robin Williams explains how the basic purpose of alignment is to bring unity and organize items together. </li></ul></ul><ul><ul><li>This can be done by creating a strong alignment create a variety of looks. Alignment allows the designer to create a sophisticated, formal, fun, or serious look. </li></ul></ul>
  9. 9. Alignment How to get it: Always align elements on the page, even those that are far apart. What to Avoid: Don’t center some text and left align other text. Avoid centering anyway!
  10. 10. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast
  11. 11. <ul><li>Repetition </li></ul><ul><ul><li>Repetition is defined by some aspect of the design that is consistent throughout the entire piece . </li></ul></ul><ul><ul><li>Robin Williams explains how the basic purpose of repetition is to bring unity and add visual interest. </li></ul></ul><ul><ul><li>This element is important in one page pieces and is critical in multiple page pieces. This is called being consistent throughout the media piece. </li></ul></ul>
  12. 12. Repetition How to get it: Choose design characteristics (type face, color, size, cartoon style, picture style) and repeat them. Find existing repetitions and strengthen them by contrast or uniqueness. Accent the repetition. Think black hat, black shirt, black pants, black shoes, white corsage. What to Avoid: Don’t keep repeating if it is becoming annoying. Don’t repeat mistakes. Don’t repeat phrases. Avoid R A N S O m N O T i n g
  13. 13. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast
  14. 14. <ul><li>Contrast </li></ul><ul><ul><li>Contrast is defined by creating two elements that are different and making them really different because they are not the same . </li></ul></ul><ul><ul><li>Robin Williams explains how the basic purpose of contrast is to draw our eyes to the page. </li></ul></ul><ul><ul><li>This element is important because it creates and interest on the page </li></ul></ul>
  15. 15. Contrast How to get it: Be bold! Use color, size, and space to differentiate between content Break the rules when it works! This goes for all four elements. What to Avoid: Avoid wimpy contrast! Yellow and white don’t go together. Avoid two different fonts that look alike. Calibri and Arial.
  16. 16. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast
  17. 17. What makes website look good? Is it the color choices? Is it the visual layout? Is it the grouping of information? Is it the consistency throughout the site? Repetition PROXIMITY Alignment Contrast
  18. 18. Is it the color choices? Is it the visual layout? Is it the grouping of information? Is it the consistency throughout the site? Proximity Alignment Repetition Contrast What makes a website look good?
  19. 19. <ul><li>Next Steps </li></ul><ul><ul><li>It is time to critique websites on their design according to the Robin Williams Elements of Design using the four quadrant matrix. </li></ul></ul>Contrast Repetition Alignment Proximity

×