The Adventures of Cindy Li

@media2006: Good Design vs Great Design

June 15 , 2006

Speakers

Cameron Moll
Veerle Pieters
Jon Hicks

Define Design in just 1 sentence
cameron: Design is about communication but design cannot exist without a medium of some sort. Outdoor sign-age, multimedia.
V: way of communicating emotional its expresses feelings so its design
j: design is not printed because its been a lot of debate how ugly design or no design wins it misses the point that design is about communication

Design is very subjective

you may not think of is great design
design is about approaching a problem with many routes

How important is it to be original and creative when designing something?

Cameron: creativity and originality ... is over rated.
Failing to be inspired by the people around us
Good designers look at other sources in the same genre
where great designers are surrounded by everything around them for inspiration that are separate from the genre
Veerle: Originality is important to make it better.
Jon: Its nice to be able to be original but that isn’t necessary to be doing. Maybe the best way is to follow the conventions already set.

Is it possible to have great design on a budget?

Jon: No, because I think designing something is as much as thinking type
The interface is better than 3 months ago
Cameron: I think what separates good design and great design is their ability to respond to the timeline. That time line is always shorter
great designers are able to create something
Veerle: Great design you need extra time. To make the design great you need extra time and that affects the budget
Jon: more money
Veerle: great designers can come up w/something good though
Jon: if you were a great designer you wouldn’t take that long

Cameron on grids

the beauty of a grid lies in the fact it does the work for you.
A grid will ease the decision for you

3 steps

• Assess: the content characteristics
  What are the content characteristics? Extra long headlines? Photo?
  Ad formats? user information? Look at the characteristics
• Violate that grid when necessary. It needs to be flexible enough. Perhaps its a photo that takes over 3 columns
  “it’s important to understand that the grid… should never subordinate the element

U then have columns that divide across the page you have modules
You’ve got flow lines that are horizontal

Methods in web design

note there are more.. but I limited it to 5

• 1. Fixed width, uniform
  Example: new york times inspired by the onion
  Now if we look at the grid structure of this there are 11 columns of this that divide the content and with that you have spatial zones if we overlay that for the zones you’ve got side bar analysis and bars
  If you dig in you will see the same structure for the site
  try sticking in a background image and turn that on and off as you coding.
  By using a background image it facilitates to that grid
• 2. Fixed width, hierarchal
  Example: national gazette (jason saint-maria) this is based on the placement of elements
  On the left or right you have two grids that are 100 pixels away
  The reason for this is on the left and right side bars. We’ve allowed proper sizing for the ad sizes. In the middle required the photo.
  Let’s look at this as a content structure
  The content shifts to the left
• 3. Fluid width, uniform
  Here is the site for this conference. This is fluid width. 4 columns and the top being joined but the bottom has 3 columns. We’re making it easier by making the grid work
• 4. Fluid + fixed width
  blanks screen, the underlying site has 5 columns on the bottom,
  one across, then two split and the top joined.
  why so bizarre? this is probably the 15th iteration where we tested a variety of layouts so that it is specific to the content.
• 5. modular scale: it is not random or chaotic but in web design that deserves some attention. Think of astronomy the scale would be like star charts,

  Music has some refined ratios Major 3rd 4:5
  Dim. 5th/Aug.4th 1: 2
  Minor 6th: 5:8
  Something that dictates

  These five understand grid apply it to web design

  Talking type: Jon Hicks
  Typography is its the most subtle
  “Every typeface has a language which language is right?”
  Context

  Who is speaking using fonts
  “Never mind the bollocks here’s the sex pistols”
  type can be the design itself
  It can make it or ruin it
  Its not appropriate

  Not looking so hot now, eh?

  Comic sans is great for designs too!
  Activity farm “Farmer Gow’s”
  Throughout all their branding they used comic sans
  They chose it appropriately

  Design using Meta
  Design using trebuchet
  Harmonizing fonts

  Americans love serif type
  Europeans love sans-serif type
  Swiss created helvetica

  Great typography is not…
  choosing a “cool font”

  Great typography is…
  invisible
  is to aid reading it isn’t intended to be noticed it is about the space around the letters and text

  A list apart
  Jason did the typography
  It is focused on the typography
  so for example it is ready to scan

  subtraction.com
  even though there aren’t real text
  Then everything in the actual content
  to create visual hierarchy

  There are lots of rules

  Those tiny little sparks
  There is an element

  All these examples I found on one blog

  Denis Raden… has examples

  good designers-good typefaces

  great designers: great typography

  Improving typography:
  Sign up for type catalogues
  Get excited about typefaces and learn the language
  It gives you an idea of what type…

  The elements of typographic style

  Veerle

  What makes a great design, purely judging on the use of color?
  We choose vibrant colors but sometimes gray can be stylish too
  It depends on the purpose of design
  Contrast is important but you have to use it in the right proportion
  You want extra contrast in the design because you want to evoke an aggressive effect. Make sure you have enough rest points. To get the right balance

  Westtoer
  These colors are important role because it gives extra guidance in the website
  Corporate sections and consumer section
  Use the same color for the main navigation and excellence the diff sections have different audience
  consumer and professional
  hiking and biking

  The challenge is use the colors in the right proportions without over doing it
  otherwise it seems to be a color book

  The other slides showing biking section so here the orange takes over the design a little more

  Details are important in the design you will feel the girly touch

  Design matters:
  its very difficult to decide what makes good design
  Which do you do first?
  Grid, color, or typography

  Jon: b/w layout to suggest the areas.. color last for me
  Cameron: Something evolves with the client, what to emulate
  I’ve got 15 mins.. typography its collaborative

  I generally start with the grid
  If there is a house guide sometimes the colors are already there.