Simply put, design principles are like visual grammar. With them, we can create a hierarchy of visual elements that helps us guide the audience around an image or page and emphasise the most important aspects of a design, without the viewer ever having to think about it. We can achieve this by understanding the way our minds perceive what we see, and using this knowledges to construct clear visuals. And one thing the human brain is very good at is noticing differences.
Our brains are difference detectors
The neurons in our visual system respond to relative differences in stimulus, such the intensity of light and movement. As I mentioned last post, we remember differences in the things we see more than their similarities, because it’s these differences that allow us to distinguish between visual elements, (we’d need much larger brains with upgradable memory if our visual systems recorded and remembered every little detail we ever saw). But not all differences are equal. As you can see in the above elements, we’re better at detecting changes in colour/tone than shape, and of course movement draws our attention far more than anything static. So, when all else is equal in a static image, our attention is drawn to:
Warm colours dominate because they appear closer to the viewer than cool colours, as the difference in wavelength between warm and cool colours means they hit the sensors in our eyes at slightly different positions (the same effect as we see when light passes through a prism). This creates a false depth perception. And, as I’ve mentioned previously, we perceive sharp elements as more threatening (for obvious reasons), so they tend to stand out more. Interestingly, this also works in complete reverse: if everything else is red, then the blue element will stand out etc, as disruption of natural grouping also creates strong contrast.
We visually group things
We also automatically group together similar elements and view them as a single visual unit. For example, if something is symmetrical, we group it as a single visual unit, but if it is not symmetrical then we view it as two different units (see top row under symmetry below). In the 1930s and 40s the Gestalt school of psychology, founded by Max Wertheimer, observed the way we visually group things, and proposed laws of perception. I’ve outlined some of these below:
Again, some of these grouping perceptions are stronger than others. For example, symmetry is seen more strongly than proximity. In the symmetry example above we see the brackets enclosing a symmetrical shape, rather than the brackets closest together as single units. In Graph Design for the Eye and Mind, psychology professor Stephen Kosslyn explains how our minds behave under the assumption that we are seeing 3D objects, even when they’re drawn on flat surfaces, which makes sense considering we evolved in a 3D world. Our visual systems are wired to see solid closed shapes (closure) and consistent surfaces (continuity), even when parts are obscured/missing. We also group objects into foreground and background (figure and ground), and implied direction of movement, through lines or a sense of polarity, like arrows or a head on a creature (common fate). Converging lines also give the illusion of depth. In his book The Functional Art, Alberto Cairo points out that the way we follow broken contours (continuity) and see shapes when they’re only partly revealed (closure), would have helped us detect predators half hidden through leaves and shadows.
These design principles can be applied to anything visual, from illustrations, data visualisations, photography, animations and physical, real world designs. I used disruption of grouping and colour to create contrast in my Catstralia illustration. Here are some more examples:
We can use one or more contrasting elements along with Gestalt’s laws of perceptions to emphasise the most important aspect of a design, with secondary aspects more subtle in their contrast and so on. In the example above I used a similarity (repeating flies) to form a line across the page (continuity) using the dark toned bodies to emphasise the descending direction (common fate). I created an emphasised focal point by disrupting this continuity with the darker toned, sharper shaped and larger spider.
Layouts (magazine pages, websites, infographics, presentations etc)
By aligning layouts in grids you can employ the principles of proximity (by grouping related content together), similarity (by using the same styles and formats for each group of content), and continuity (aligning content in the same orientation, forming lines across the page) to make the layout intuitive to follow.