From Goya To Google: Traditional Design Principles at Work On The Web
•Download as PPTX, PDF•
40 likes•9,553 views
... 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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (14)
Similar to From Goya To Google: Traditional Design Principles at Work On The Web
Similar to From Goya To Google: Traditional Design Principles at Work On The Web (20)
Recently uploaded
Recently uploaded (20)
From Goya To Google: Traditional Design Principles at Work On The Web
- 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
- 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
- 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
- 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
- 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
- 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
- 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>
Editor's Notes
- 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