... 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.
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.
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.
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.
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
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