Principles of Design<br />Proportion, Unity, Variety, Balance, Direction, Pattern<br />Elements of Design<br />Line, Shape...
WHO CARES?<br />
STOPIMITA-TING<br />staying up on trends is cool, but learn the basics<br />
Principles of Design<br />Proportion, Unity, Variety, Balance, Direction, Pattern<br />
PROPORTION<br />Proportion is a measurement of the size and quantity of elements within a composition. Beginning with the ...
Andrew Wyeth – Christina’s World<br />
http://www.christiansparrow.com/<br />
http://gregorywood.co.uk/<br />
http://events.carsonified.com/<br />
UNITY (HARMONY)<br />Unity or harmony is the quality of wholeness or oneness. The arrangement of elements to create a feel...
Georges Braque – Harbour In Normandy<br />
Grant Wood – American Gothic<br />
http://nclud.com/<br />
http://www.tnvacation.com/<br />
http://www.msn.com<br />
VARIETY (CONTRAST)<br />The differences which give a design visual and conceptual interest: notably use of contrast, empha...
Joan Miro– Blue II<br />
Salvador Dali – Dream Caused By The Flight Of A Bee<br />
Kasimir Malevich – Suprematism NR. 58<br />
http://carsonified.com/<br />
http://www.webdesignerwall.com/<br />
http://www.hawkart.com/<br />
BALANCE<br />Balance is arranging elements so that no one part of a work overpowers, or seems heavier than any other part....
Salvador Dali – The Last Supper<br />
Wassily Kandinsky – Autumn in Bavaria<br />
Roger De La Fresnaye – Village at the Waters Edge<br />
http://www.hicksdesign.co.uk/<br />
http://www.galandesign.com/<br />
‘nother web example<br />
DIRECTION (EMPHASIS)<br />Direction is the visual path our eye will follow. Emphasis refers to the object or element which...
Francisco Goya – The Shootings of May 3rd 1808<br />
Umberto Boccioni – Dynamism of a Soccer Player<br />
Lyonel Feininger – Zirchow VII<br />
http://www.mica.edu/<br />
http://www.patrickbizier.com/<br />
http://www.semisture.com/<br />
PATTERN (RHYTHM)<br />Pattern and rhythm is showing consistency with colors or lines. It can indicate movement by the repe...
Andy Warhol – 200 Campbell Soup Cans<br />
Gustav Klimt – The Tree of Life<br />
Piet Mondrian – Composition with Red, Yellow and Blue<br />
http://www.joshuadavis.com/<br />
http://forabeautifulweb.com/<br />
http://www.squarespace.com/<br />
&lt;FIGHT&gt;<br />
DESIGN IS ART<br />
     ARTISTS    vs   DESIGNERS<br />http://www.flickr.com/photos/zsuggs/<br />http://www.flickr.com/photos/pietel/<br />WH...
MY ARGUMENT<br />Stop romanticizing it; let’s talk about Professionals<br />Designers & Artists shared goal; Communication...
&lt;/FIGHT&gt;<br />
Upcoming SlideShare
Loading in …5
×

From Goya To Google: Traditional Design Principles at Work On The Web

13,159 views

Published on

... Or, "Everything I needed to know about Web Design I learned in Art History Class". Corey will show how traditional art utilizes foundational design principles and discuss how we use these ancient techniques for success on the web.

Published in: Design, Technology, Business
9 Comments
39 Likes
Statistics
Notes
No Downloads
Views
Total views
13,159
On SlideShare
0
From Embeds
0
Number of Embeds
156
Actions
Shares
0
Downloads
412
Comments
9
Likes
39
Embeds 0
No embeds

No notes for slide
  • Thanks: BOALT, Jackson, you. How many designers? How many artists?
  • Our agenda for the next 30 – 40 mins
  • Ironworks – Who, Where, ClientbaseMe – WV – got into design thru punkrock – DIY – MWC art program – traditional – segue into principles
  • Language of visual communication
  • What does this mean to US web folk?Raise your hand if you’ve ever had to discuss visual designGet a visual languageMake the logo biggerMiscommunicationsAnother way… flip
  • Imitation – blame css galleries – designers that copy without understanding “why” things look good Any questions?
  • Set up. Principle, Art, Websites. “Spot the Principle”
  • 2-d prop and 3-d prop. Proportion creates a feeling of futility, distance & separation. Proportion = powerlessness
  • Combo of 2d objects in 3d space
  • Typography utilizes proportion
  • Pop Quiz: how does this composition use proportion well?Proportion is a relationship issue.
  • Unified composition is about completion … not tension. Uses 3rds for layout
  • Unity can be content, or portions of a composition. Classic study of Unity of Shape. Subconsciously “looks nice” picking up on these unified shapes.
  • Unity does not have to be subtle and quiet. It can be that everything is LOUD.
  • How is unity used (or not used) in this example? This looks like it was designed by a dozen diff people who couldn’t see each others work.
  • Groupings, calls to action, important stuff. Disassociated from other items.
  • Need to find new example
  • Groupings of similars, variety between them
  • Creates a large amount of interest
  • At the forefront of the ‘large bkgd’ trend which has become very popular. Variety b/t floral illustrations and tactile paper creates both a divide and a balance
  • Pop quiz: why is this design unsuccessful?
  • Grid-based design
  • Symmetrical balance is rare on the web and in art
  • Asymmetrical balance
  • Web-friendly art. Look at cubist and futurist paintings for inspiration. Geometric and removed from realism.
  • Nearly symmetrical balance
  • How you direct attention, how you communicate focus on important items. It is pleasing to be drawn in to a composition.
  • Futurism deals with motion
  • Using both hue and line to draw the eye
  • This is pushing design forward. Natural transitions of content areas. Like a house with an open floor plan.
  • Dominating figure becomes almost secondary to the logo and navigation
  • Your turn, show me how direction is used here. The black threads subconsciously lead your eye around
  • Backgrounds, groupings,
  • Single item, not interesting. Duplicated 200 times, pretty interesting.
  • Renewal of this style due to twitter. Patterns create groupings.
  • Separation of each content piece, but the eye groups together similar ones.
  • At least 3 patterns going on here, what are they?Pattern of circles in the header creating a field, pattern of content boxes in the bottom creating rigid content. Pattern of info boxes across top.
  • Design is about constraints. Needs to satisfy business requirements AND aesthetic requirements
  • From Goya To Google: Traditional Design Principles at Work On The Web

    1. Principles of Design<br />Proportion, Unity, Variety, Balance, Direction, Pattern<br />Elements of Design<br />Line, Shape, Direction, Size, Texture, Color, Value<br />
    2. WHO CARES?<br />
    3. STOPIMITA-TING<br />staying up on trends is cool, but learn the basics<br />
    4. Principles of Design<br />Proportion, Unity, Variety, Balance, Direction, Pattern<br />
    5. PROPORTION<br />Proportion is a measurement of the size and quantity of elements within a composition. Beginning with the Renaissance, artists recognized the connection between proportion and the illusion of 3-dimensional space.<br />
    6. Andrew Wyeth – Christina’s World<br />
    7. http://www.christiansparrow.com/<br />
    8. http://gregorywood.co.uk/<br />
    9. http://events.carsonified.com/<br />
    10. UNITY (HARMONY)<br />Unity or harmony is the quality of wholeness or oneness. The arrangement of elements to create a feeling of completeness.<br />
    11. Georges Braque – Harbour In Normandy<br />
    12. Grant Wood – American Gothic<br />
    13. http://nclud.com/<br />
    14. http://www.tnvacation.com/<br />
    15. http://www.msn.com<br />
    16. VARIETY (CONTRAST)<br />The differences which give a design visual and conceptual interest: notably use of contrast, emphasis, difference in size and color. Contrast to show difference and diversity in an artwork by combining elements to create interest. <br />
    17. Joan Miro– Blue II<br />
    18. Salvador Dali – Dream Caused By The Flight Of A Bee<br />
    19. Kasimir Malevich – Suprematism NR. 58<br />
    20. http://carsonified.com/<br />
    21. http://www.webdesignerwall.com/<br />
    22. http://www.hawkart.com/<br />
    23. BALANCE<br />Balance is arranging elements so that no one part of a work overpowers, or seems heavier than any other part. The three different kinds of balance are symmetrical, asymmetrical, and radial.<br />
    24. Salvador Dali – The Last Supper<br />
    25. Wassily Kandinsky – Autumn in Bavaria<br />
    26. Roger De La Fresnaye – Village at the Waters Edge<br />
    27. http://www.hicksdesign.co.uk/<br />
    28. http://www.galandesign.com/<br />
    29. ‘nother web example<br />
    30. DIRECTION (EMPHASIS)<br />Direction is the visual path our eye will follow. Emphasis refers to the object or element which first catches our attention.<br />
    31. Francisco Goya – The Shootings of May 3rd 1808<br />
    32. Umberto Boccioni – Dynamism of a Soccer Player<br />
    33. Lyonel Feininger – Zirchow VII<br />
    34. http://www.mica.edu/<br />
    35. http://www.patrickbizier.com/<br />
    36. http://www.semisture.com/<br />
    37. PATTERN (RHYTHM)<br />Pattern and rhythm is showing consistency with colors or lines. It can indicate movement by the repetition of elements. <br />
    38. Andy Warhol – 200 Campbell Soup Cans<br />
    39. Gustav Klimt – The Tree of Life<br />
    40. Piet Mondrian – Composition with Red, Yellow and Blue<br />
    41. http://www.joshuadavis.com/<br />
    42. http://forabeautifulweb.com/<br />
    43. http://www.squarespace.com/<br />
    44. &lt;FIGHT&gt;<br />
    45. DESIGN IS ART<br />
    46. ARTISTS vs DESIGNERS<br />http://www.flickr.com/photos/zsuggs/<br />http://www.flickr.com/photos/pietel/<br />WHICH SIDE ARE YOU ON?<br />
    47. MY ARGUMENT<br />Stop romanticizing it; let’s talk about Professionals<br />Designers & Artists shared goal; Communication<br />We all work under constraints<br />We use the same tools to reach our goal<br />Labels are stupid<br />
    48. &lt;/FIGHT&gt;<br />

    ×