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.