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

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

more share options
Embed For WordPress.com

Without related presentations

8 comments

Comments 1 - 8 of 8 previous next Post a comment

+ Carmen María Pérez 2 months ago
Congratulations, excelent work. My vote Up.
+ James Shelton 2 months ago
Now I understand the Wal-Mart Spring beauty design. It’s a use of Rythm.
+ Ali Hadi 3 months ago
Excellent Work!
+ Yangtze University 3 months ago
Thanks for sharing.Perhaps there will be better way to redesign the 21st slide.
+ Edward Fidgeon Kavanagh 3 months ago
I like it man!
+ SynapseIndia 3 months ago
Nice.
Find another video on graphic designing at http://www.slideshare.net/synapsecom/graphic-designing
+ Stacy Surla 3 months ago
Nice overview!
+ Alokjain 3 months ago
Corey, I missed the refreshDC but thanks for sharing. This is a very nice presentation. It would be very helpful if you can include more talking points on the notes.

I feel that design ends up being very instinctive but knowing and working with these principals help.

Notes on slide 1

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

23 Favorites

ibox2000, Consultant favorited this 1 week ago
Tags design principles
andycollyer favorited this 3 weeks ago
Elena Moltó favorited this 1 month ago
idplay favorited this 1 month ago
Tags principle design
Jim10 favorited this 1 month ago
Tags design
Jorge Fernandez Garcia, Consultant at Antares Consulting, favorited this 2 months ago
Tags design
stedfast favorited this 2 months ago
Jaap den Dulk favorited this 2 months ago
Eugenio Vincenzo Pandolfi favorited this 2 months ago
Tags presentation
David Gelb, Professor at York University, favorited this 2 months ago
Alexander Osterwalder, Author & Speaker on Business Model Innovation at Osterwalder Strategy Facilitation, favorited this 3 months ago
Tags good thinking design
zeezat favorited this 3 months ago
Tags cool
Divy.kumarsoni favorited this 3 months ago
Tags design
Joe Chen, Marketing & PR at BayFlower Tech., favorited this 3 months ago
David Zhao, UE egineer at SNDA, favorited this 3 months ago
Tags ue

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

Principles of Design
Proportion, Unity, Variety, Balance, Direction, Pattern
Elements of Design
Line, Shape, Direction, Size, Texture, Color, Value
WHO CARES?
STOPIMITA-TING
staying up on trends is cool, but learn the basics
Principles of Design
Proportion, Unity, Variety, Balance, Direction, Pattern
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.
Andrew Wyeth – Christina’s World
http://www.christiansparrow.com/
http://gregorywood.co.uk/
http://events.carsonified.com/
UNITY (HARMONY)
Unity or harmony is the quality of wholeness or oneness. The arrangement of elements to create a feeling of completeness.
Georges Braque – Harbour In Normandy
Grant Wood – American Gothic
http://nclud.com/
http://www.tnvacation.com/
http://www.msn.com
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.
Joan Miro– Blue II
Salvador Dali – Dream Caused By The Flight Of A Bee
Kasimir Malevich – Suprematism NR. 58
http://carsonified.com/
http://www.webdesignerwall.com/
http://www.hawkart.com/
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.
Salvador Dali – The Last Supper
Wassily Kandinsky – Autumn in Bavaria
Roger De La Fresnaye – Village at the Waters Edge
http://www.hicksdesign.co.uk/
http://www.galandesign.com/
‘nother web example
DIRECTION (EMPHASIS)
Direction is the visual path our eye will follow. Emphasis refers to the object or element which first catches our attention.
Francisco Goya – The Shootings of May 3rd 1808
Umberto Boccioni – Dynamism of a Soccer Player
Lyonel Feininger – Zirchow VII
http://www.mica.edu/
http://www.patrickbizier.com/
http://www.semisture.com/
PATTERN (RHYTHM)
Pattern and rhythm is showing consistency with colors or lines. It can indicate movement by the repetition of elements.
Andy Warhol – 200 Campbell Soup Cans
Gustav Klimt – The Tree of Life
Piet Mondrian – Composition with Red, Yellow and Blue
http://www.joshuadavis.com/
http://forabeautifulweb.com/
http://www.squarespace.com/
<FIGHT>
DESIGN IS ART
ARTISTS vs DESIGNERS
http://www.flickr.com/photos/zsuggs/
http://www.flickr.com/photos/pietel/
WHICH SIDE ARE YOU ON?
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
</FIGHT>