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


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

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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?
      staying up on trends is cool, but learn the basics
    • 7. Principles of Design
      Proportion, Unity, Variety, Balance, Direction, Pattern
      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.
    • 12.
    • 13.
    • 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.
    • 18.
    • 19.
      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.
    • 25.
    • 26.
    • 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.
    • 32.
    • 33. ‘nother web example
      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.
    • 39.
    • 40.
    • 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.
    • 46.
    • 47.
    • 48. <FIGHT>
    • 49. DESIGN IS ART
    • 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>