Your SlideShare is downloading. ×
From Goya To Google: Traditional Design Principles at Work On The Web
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

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

8,088
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 …

... 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
36 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,088
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
405
Comments
9
Likes
36
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
  • 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
  • Transcript

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

    ×