There are certain principles I’ve come across that are absolutely fundamental to good visual design. I've listed them here.
To create polish, you MUST constantly [pore] over every little decision on the screen until you feel like it’s magical.
The quote above is from a very rare sight indeed: a designer who talks about how they produce good visual design. The thrust of the post is that you need to be deliberate.
Deliberateness might be simple, but it is not easy. In the context of good visual design it means that no detail may escape your attention. You need to have considered absolutely everything.
This takes a long time, and can be frustrating. You’ll stare at a specific design detail for half an hour, and you’ll know that something is wrong with it, but you won’t know what. Eventually you might think “it’s good enough” and never come back to it. That’s the point at which you gave up on good visual design.
So: to create good visual design, you must pay attention to every detail that it is possible to pay attention to. You must be absolutely deliberate. If someone could point to a random element in your design to ask you why it was that way, and you are unable to answer, you’re not finished yet.
Iteration is incredibly important to good visual design. It’s easy to design something, make a few tweaks with it, and assume that it’s finished. Then you come back to it later, or compare it to someone else’s work, and you’re not happy with it. Often, the problem is a lack of iteration.
You iterate on your design when you identify the things that you don’t like about it, and try new approaches to those things. It’s common for good visual designers to go through tens of iterations for a design. If you’re only going through, let’s say, three iterations, you make it harder for yourself to create good visual design. Be patient, and give yourself the time to change the design until you’re very happy with it.
Here’s a simple and practical way to iterate on something, from script writer Jane Espenson:
Pick a random joke in your script. It can even be one you like, and imagine you’ve just been told that the only change you need to make is to improve that joke. I bet you can do it. Now do it with every single joke in your script.
This principle, and the two that follow, come from Massimo Vignelli’s book, The Vignelli Canon. He didn’t invent the concepts, but he gave them names, so I’m using them here.
Semantics is to do with meaning. Everything in your design should mean something, and the meaning that you communicate with your design should be heavily researched. If you’re designing a website for a charity, what are all of the meanings sitting behind that charity? Their brand, their donors, their history?
When you learn the meaning behind things, you can make sure your visual design carries that meaning to the viewer.
One common way to approach meaning in design, especially if you start a project from scratch, is to write down the adjectives you want your design to represent. “Friendly”, “scary”, “funny”, “childish”. These are all feelings that you can communicate if you make the right visual design choices. Being clear about these goals up-front means it’s easier to make a choice each time one comes up.
An important concept in semantics is ambiguity. Some things are ambiguous in that they have multiple meanings associated with them. As long as the multiple meanings support the overall meaning of the design, ambiguity is a good thing. You should try to include elements that support the right meaning in multiple ways. This makes for richer design.
Syntactics, as in “syntax”, is about the system underlying your design. Every element you use should relate to other elements in some way. Later in this book I talk about concepts like typographic scales and spacing scales. These are examples of the syntax that guides your design.
Graphic design has a concept called “rigour”. If a design or a designer is rigorous it means that the internal rules of the design—the syntax—have been followed to the letter. There will always be cases where a good designer does not stick to the rules—usually on purpose—but rigour is very important.
Every element in your design should follow a rule of some kind, and the same rule should be used for all elements of that type. When the elements in your designs follow these “internal rules”, they feel like they belong together.
In his book The Graphic Artist and his Design Problems, Josef Müller-Brockmann touches on this topic:
The proportions of the formal elements and their immediate spaces are almost always related to certain logical numerical progressions. The typographical arrangement reflects the composition of the pictorial division in order to eliminate everything fortuitous or unordered.
Pragmatics is about whether the design is understood by the viewer. You might have meaning behind your design, and it might follow a strict syntax, but if it isn’t understood by the viewer, it’s not good visual design. You must make sure you get through to the person who actually uses your design.
Two visual elements can have the same properties even if they look different. For example, you might put a yellow highlighter effect behind some text. Then you might tilt it slightly to give it some personality.
Later in the same design, you might put a yellow border around a product screenshot, and you might tilt that slightly as well. The text highlight and the screenshot border are not the same visual element, but they both follow the same style rules.
This is called a motif, and they’re a powerful tool if you want your visual design to be better. Set some simple rules for your visual style to follow, and use them throughout your design on different types of elements. The different elements will feel like they belong together.
Skills like layout, typography, and colour have a very high skill ceiling: you could probably learn about them for a lifetime and still have room to grow. It’s important to realise that if you think you’ve learned everything you need to about a topic, you haven’t.Next chapter → ← Previous chapter Back to the table of contents