Your SlideShare is downloading. ×
Group7 elements-of-design-97-03
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Group7 elements-of-design-97-03

2,482
views

Published on

Published in: Education

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,482
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
46
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Intro Slide Talk about the slide Key points: The slide is busy, your eye can not follow the flow of information and just all around BADLY designed.
  • Those four elements are CONTRAST, REPITITION, ALIGNMENT, and PROXIMITY. Think about the various forms of media you come across on a daily basis: print media such as magazines covers, posters, flyers, electronic media such as Adobe Flash, Powerpoint, and Websites, to visual media such as movie promotions and television commercials. Every piece of media is going to contain some aspect of design as such as those presented by Robin Williams. When you think about TV commercials, there is a strategy to how certain things are positioned and aligned on the set. You will notice repetition in images and dialog. You will notice contrast in special effects or even prop layouts. GREAT Media is NOT just put together on a whim… GREAT Media has a well thought out strategy and execution plan. Just like a Great Website should have. Let’s review the elements you have discussed earlier in the course but this time we are going to add some more detail.
  • Read the four elements to the audience
  • Why are there so many words “spelling” PROXIMITY all grouped together?
  • Be conscious of where your eye is going… Where did you start looking? What path did you follow? Remember the opening slide? Do you remember where you eyes were trying to go? There is was NO grouping of related items on that first slide at all. Let’s take a look at some tips on how to achieve proximity…
  • Discuss slide
  • Does alignment mean you have to use an actual line? Click to next slide
  • Supporting commentary: An actual line may be used as a graphic to make a bolder statement. Remember it all comes back to where is your eye going? Let’s take a look at some best practices on how to achieve strong and bold alignment features… Click to next slide
  • Notice anything “consistent” with the way repetition is being presented?
  • Many times you are using elements of repetition in your work: Headline being all the same size and weight, half in margin from the bottom, or the same bullet through the piece… Let’s push the idea of repetition further and create a visual key by… Click to the next slide
  • Review slide with viewers…
  • When is comes to CONTRAST, you want to make something STRIKING that draws your readers or website surfer to your page…
  • Contrast is not to confuse your viewer or create a focus that is NOT the focus… Let’s take a look at how you develop AWESOME contrast… Click to the next slide
  • Review slide with viewer…
  • We have REVIEWED and discussed in detail what defines the four elements of design. Now let’s see how we can put these four elements into ACTION… Click to the next slide…
  • Remember the opening slide…. Now you know about proximity? There is no grouping of similar items for unity. Alignment? What alignment? Remember, never center unless is it absolutely necessary. Repetition? There is not one uniform aspect of clarity Contrast? Non existent… How could we make this slide much more attractive? Click to the next slide
  • Do you need the element of design at work? Note the proximity by placing the elements of design in one grouping. Alignment, strong visual focus by using right alignment leaving a clean white space for the eye to view and relax. There is repetition that is consistent when it comes to color and font styles. And how about that contrast? The gray bar causes you to focus but not loose interest or sight of the what else is happening on the page… Applying the elements is much simpler than it looks… Click to the next slide
  • A matrix has been developed to have you start really looking a media and websites from a designers standpoint. Each quadrant contains an element. Your task is going to brain storm by writing down the aspects of a website you like or dislike according to the element in the quadrant… The next steps are to download the Elements Matrix word document and view five separate websites over the next week. Then you will be presented with a quiz where your mastery of the elements is going to be tested… This exercise is designed to help you see who really put the time into how their website was designed… Remember, EVERY great Website site had to be planned and executed strategically…
  • Transcript

    • 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.
      • Robin Williams presents to her readers four Elements of Design.
      • These elements are the basic elements that can be applied to a variety of media formats.
    • 3. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast
    • 4. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast
    • 5.
      • Proximity
        • 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.
        • Robin Williams explains how the basic purpose of proximity is to organize items together.
        • This can be done by grouping related items together to be seen as one cohesive group.
    • 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. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast
    • 8.
      • Alignment
        • 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.
        • Robin Williams explains how the basic purpose of alignment is to bring unity and organize items together.
        • 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.
    • 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. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast
    • 11.
      • Repetition
        • Repetition is defined by some aspect of the design that is consistent throughout the entire piece .
        • Robin Williams explains how the basic purpose of repetition is to bring unity and add visual interest.
        • This element is important in one page pieces and is critical in multiple page pieces. This is called being consistent throughout the media piece.
    • 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. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast
    • 14.
      • Contrast
        • Contrast is defined by creating two elements that are different and making them really different because they are not the same .
        • Robin Williams explains how the basic purpose of contrast is to draw our eyes to the page.
        • This element is important because it creates and interest on the page
    • 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. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast
    • 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. 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.
      • Next Steps
        • It is time to critique websites on their design according to the Robin Williams Elements of Design using the four quadrant matrix.
      Contrast Repetition Alignment Proximity