The Gestalt principles of visual perception describe how our brains make sense of what we see. For example, they explain how we associate a photo with the text of a newspaper article or understand a series of words as a sentence on a billboard. These principles originated from the field of Gestalt psychology in the early twentieth century.

In laying out sketches, I try to consider how a viewer will understand what connects with what, the order in which the viewer will read the sketch with their eye, and how colour or formatting link related elements—skim through the back catalogue to see it in action. In creating each sketch, consciously and unconsciously, I use many of the standard Gestalt principles of design.

There are many Gestalt principles and some variations in the names. I chose seven common principles to illustrate:

Proximity
Objects that are close together are perceived as a group

Similarity
Similar objects are perceived as a group

Continuity
Elements on a line or curve are related

Closure
Completing missing parts of images to create a whole

Figure-Ground
Identifying what's in the foreground or background

Symmetry & Order
Perceiving symmetrical or orderly elements as a group

Common Fate
Objects moving together are perceived as part of a group

The Gestalt principles are helpful for information design, user interface design, user experience design, graphic design and just about any design. It is also fascinating to spot how you unconsciously use them when interpreting designs you see. For example, look at the signs in an airport, a menu, or a page of your favourite app and see which principles are in play.

The Interaction Design Foundation has a great article on the Gestalt principles that explains their use in design in more depth. You'll also find many others.

Gestalt principles

A ghost grid is a guide for organising thoughts, information and sketches, that doesn't compete with content.

Content itself can also be the ghost grid to highlight changes and help draw comparisons — as when you might sketch options for extending a house or designing a garden.

A grid is useful for structure and creation but needs to fade back from content or disappear when no longer needed. Like freeing data from its data prison, a ghost grid emphasises content and information without non-data-ink taking attention.

I learned the term ghost grid from Edward Tufte's Seeing with Fresh Eyes: Meaning, Space, Data, Truth.

I rarely buy other notebooks for work than a dot grid, preferably in a funky colour. Some of my favourites: Leuchtterm dot grid hardcover, Moleskine dot grid softcover, Moo soft cover dotted journals

Ghost grid

The default table crowds out your data with non-data-ink and locks your data into cells. When data is locked into cells their relationships with other data is harder to see and the reader has to work harder to learn from your table.

When making a table of data consider if, by adjusting spacing and alignment, you can make the columns or rows clear enough as they are without the prison bars. And look for opportunities to remove the visual noise to let your data and the relationships between them shine out.

The data prison is a concept from Edward Tufte. Check out the beautiful Envisioning Information, for more.

The data prison

The 60-30-10 color rule is a handy and memorable technique for a great start in simple branding. 

Think of a suit where about 60% of the colour you see is the suit, 30% the shirt and 10% accent or highlight with the tie. Classic.

Also see: The basic colour wheel other drawing sketchplanations

60-30-10 Colour rule

Often, the form of the data is obvious enough for what it is that you might consider simplifying by removing the label.

Let your data speak for itself.

Data graphics can lie in many ways, but the most common, I expect, is the error of using area or volume objects to represent one-dimensional data.

More data visualisation principles from Edward Tufte.

Watch for the lie factor

You can design almost any information with this in mind (even an email for example). Probably not ideal for a novel, but if you’re competing for attention, as most things are, it’s not bad to keep in mind.

Design for a Glance, a Look and a Read

A nifty technique for making fonts appear smoother when viewed on a screen rendering pixels.

Anti-aliasing

Checking that things fit by rehearsing in the air is often a few seconds well spent.

Air-write before inking

Underlining was a by-product of typewriters. It generally doesn’t improve things. Now, I’m still waiting for someone to make a pen with a button on it to write in bold. And to write a straight line without a separate ruler. Anyone want to team up?

Urge to underline? Use bold or italic instead

Except in a sentence. Generally, I think this is helpful. Simpler, cleaner, and still clear. If it’s not clear, or if you’re writing a book or an article, keep the colon.

Get my new weekly sketch in your inbox

Category: graphic design