Visual Design: Putting Theory Into Practice

Gillian Murrey, Vanderbilt University

Design Theory: Principles and Elements

“To design is to communicate clearly by whatever means you can control or master” — Milton Glaser.

Principles: Recipe For Design Project

  • Unity: Shapes, sizes, colors, typography.
  • Variety: Use an accent color, make one piece larger.
  • Hierarchy: Organize content logically and predictability.
  • Proportion: Golden rectangle and rule of thirds.
  • Scale: Used to draw the eye.
  • Balance: Symmetrical, asymmetrical, radial.
  • Rhythm: Gives interest and creates visual consistency.
  • Proximity: Close edge, touch, overlap, combine.

Elements: Ingredients In the Design Recipe

  • Shape: Geometric, natural, abstract.
  • Space: Positive or negative, white space provides a visual rest.
  • Line: Any mark connecting two points used to organize information.
  • Size: Use size to attract attention.
  • Color: Hue, value, intensity.
  • Color types: Monochromatic, analogous, complementary, split complementary, triad.
  • Texture: Adds sense of touch.
  • Typography: CSS.
  • Layouts: Z-layout (top left to right, then down), Mondrian, CSS.

Putting Theory Into Practice

Initial Meeting

  • Define problem.
  • Goals of the site.
  • Audience(s) for site.
  • Branding requirements.
  • Who has final sign-off authority.

Develop Creative Brief

  • Project description.
  • Project goals.
  • Key messages to convey.
  • Target audiences.
  • Keywords/phrases.
  • Images related to key words.
  • Site’s personality and tone.
  • Critique of competition.
  • One sentence summarizing ideas.

Brainstorm

  • Develop concepts and themes.
  • Will your concept work?
  • Organize content.

Prototype

  • Paper or Photoshop.
  • Come up with lots of ideas, fast.
  • Be brave; break out of the box.
  • “Great design happens about five iterations after you think you are finished.”

Execute and Implement

  • Create three prototypes for client.
  • Polish the prototypes.
  • Share with clients.
  • Build a style guide.

Visual Designer’s Bag of Tricks

  • Develop a design style.
  • Build a library of print samples.
  • Build a library of Web materials: Screen shots and code snippets.
  • Build a playground (Brendan Dawes).
  • Visit museums and galleries.
  • Photos (free photos at www.sxc.hu).
  • Lead the viewer.
  • Use grids for structure.
  • Avoid visual rectangles (use rounded edges and background images).

Visual Design Trends

  • Web 2.0.
  • XHTML/CSS.
  • Wide-screen displays.
  • Curves and organic shapes.
  • Moving away from pixel perfect layouts.
  • Rich media.

Creativity

  • Ask questions you don’t know the answers to.
  • Intentionally think of bad ideas for projects.
  • Work quickly.
  • Have lots of options.
  • Delay judgments.
  • Be brave and take risks.