A guide to Visual Design

Making something complex so simple is really hard. And this holds true even for visual design. It’s easier to screw up visual design and create a mess, than you think. That being said, I’ll highlight a few points about good visual design practices that I’ve learnt below:

• Help people find and consume the information within it with less conscious effort. This is desirable because visual thinking happens much more quickly than conscious, step-by-step logical thinking.

• A clean design is one that supports visual thinking so people can meet their informational needs with a minimum of conscious effort.

• The basic cause of messy design is slight, unintentional differences among elements. This causes your brain’s visual processing to falter. First, your brain has to determine if there actually is a visual difference. Then, it has to determine the significance of that difference. Because the small discrepancies don’t actually signify anything, you end up wasting your audience’s brainpower. Strive for a consistent visual style where elements which are logically similar look similar to each other and look unambiguously different otherwise.

• Make roles like header and detail obvious. Making these roles visually distinct helps people find the info they need. We rely on headers to help us get an idea of what the document’s about. We also use them to narrow in on the details we’re most interested in. At the same time, we know to pay less attention to headers when we’re going through detail text. Using size to clearly distinguish the roles of the different bits of content helps people efficiently direct their attention. They know what to focus on and what to ignore, depending on what they’re looking for.

• Size elements consistently and provide strong contrast between elements with different roles.

• By grouping related content and visuals together you help the user quickly find the information he needs. To prevent confusion and frustration, group elements which are actually related. Leave much more whitespace between non-related elements than related elements in order to make the logical groupings visually clear.

• Alignment is crucial to giving your designs a clean appearance and to conveying organization. Slight misalignments are confusing and look messy. On the other hand, using strongly contrasting alignments can make your design more interesting and attractive.

• Center alignment often gives a much “weaker” impression than left or right alignment. It looks especially bad with many lines of text. Consciously using different alignments in your design can serve to make it look more interesting. It can also make it easier for people to find information in it by further distinguishing the separate sections.

Some good books to read on this topic:

• Universal Principles of Design by William Lidwell, Kritina Holden, and Jill Butler
• The Non-Designer’s Design Book by Robin Williams
• Don’t Make Me Think by Steve Krug
• Visual Thinking for Design by Colin Ware