Thursday, June 15, 2006

@media, Good Design vs Great Design

A discussion panel chaired by John Hicks, Veerle Pieters & Cameron Moll.

Design is about communication, not just about making things look pretty. Subjective! How important is is to be original & creative? This can be intimidating for new designers. Look for inspiration from all things, not just the genre you're working on. Look at the brief to see what (if any) conventions have to be followed (eg existing branding).

Can great design be achieved on a budget? No! You may well get good design on a budget, but it's time that's required to make something into a truely great design - and time means money. Thinking time is required, not just the time taken to produce something. Great designers can produce something more quickly, perhaps, than other designers, within the timescale.

Grids

Grids can help you with placement and proportion. Assess the requirements of your likely content - eg long headlines, size of photographs etc, and plan your grid/layout around them accordingly. Violate the grid when neccessary. 5 Steps To Designing Grid Systems.

Methods:

  • Fixed width, uniform - www.newyorktimes.com
    11 columns: 1 wide, 2 wide, 4 wide, 2 x 2 wide
    Useful to use a b/g element tracing image (add to wrapper div) - switch it on and off as you develop.
  • Fixed width, hierarchical
    eg 2 cols either side ~160px; 1x400px, 1x200px - left and right cols can be used for ads.
  • Fluid width - vivabit.com
    Columns stretch as a percentage of browser width.
  • Fluid+fixed width
    eg first four coloumns resize in browser, last one fixed width for adverts

Typography

Every typeface has its own language, emotion, implied age etc. Type can be the design itself.
Imagine the Sex Pistols "Never Mind The Bollox" cover done in Comic Sans & Princetown - it looks ridiculous!
Use harmonising fonts. Meta/Trebuchet are a good pair. Americans tend to use Serif fonts, Europeans tend to favour sans serifs (why?!)
Great typography is not just choosing a cool font. It should be invisible - and relates to space, lines etc.

Case studies:

  • www.alistapart.com - Titles are centred, serifs, colours. Body text, left aligned, and given a decent leading ~1.8em. Author names are text-transform: uppercase, bold, larger kerning - makes it very easy to spot the authors in a list of articles.
  • www.subtraction.com - headings have bold use of whitespace to delineate hierarchy.

Sparks of creativity - tweak the H in the Shelter logo; often just one eleent can be reused to give accent.
Good designers use typefaces, great designers use typography => improve your typography! Ref: 5 Simple Steps To Better Typography

Colour
Why is colour so important? It sets mood, personality, emotion of a site. Can convey meaning. Adds balance and contrast. Great design doesn't solely rely on colour to convey message. Contrast is important - don't overdo colour. Colour guidance for different sections of a site can be useful.

No comments: