Visual Design: Putting Theory Into Practice
November 14, 2005
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.