Summaries of books I’ve read.
Semantics is about meaning. If you design something you need to know everything you can about the meaning of the thing you’re working with. Everything in your design should support that meaning.
Syntactics is about the building blocks of your design and how they relate to each other. Like any syntax those elements should form a language together. They should be a connected system.
Pragmatics means that even if you’ve got these first two right, if no-one knows what your design means it’s useless. A design exists to be understood.
You must pay attention to absolutely every element of your design. Nothing can escape your notice.
Elements in your design can mean more than one thing, and this is generally good. Try to have multiple meanings throughout, but make sure they support the overall purpose of the design.
Simple shapes, colours, and type give a design a timeless quality. Designs made in this way will last longer than designs that pay too much attention to fashion.
No part of your design should be arbitrary. Every element should be there because it adds meaning, and is appropriate to the design. Arbitrary splashes of colour, for example, make a design worse.
Simplicity means “consisting of relatively few connected parts and being easy to understand”. Simplicity is the opposite of two concepts: complexity, which is how many parts are involved in something, and complicatedness, which is how difficult to understand something is.
Better and more tools make our physical lives easier, but make our mental lives less simple. Now that life is physically easier, we have many more choices available to us, which makes our life mentally more complicated.
Something can be any combination of quantity-simple (not complex) and quality-simple (not complicated). Just because something has few parts does not mean it is easy to understand, etc. We also want different things depending on how we view an object. A wrist watch viewed as a piece of jewellery might look better if it is quantity-simple—for example if it has no numbers on its dial—but this might make it more difficult to use and understand.
If something is generally simple it means that anyone will think it is simple. Special simplicity means that someone already knows enough to understand a particular object, but someone else without that required knowledge won’t. For example, if you know how to type, a QWERTY keyboard on a touch screen phone is simple in the special sense, but not in the general sense.
There are three motives to seek out simplicity: Functionality means you seek it out for ease of use. Aesthetics means you seek it out for how it looks. Ethics means you seek it out for moral reasons (religious, environmental, etc.). These three motives serve comfort, pleasure, and conscience respectively, and generally map to the concepts of ease of use, minimalism, and austerity.
Simplicity is affected by how many elements there are in something, the variety of those elements, and the structure of them.
An object’s functionality can be judged in three ways. Perceivable affordance is about whether you can tell what the object is and does. Readability is about whether the object is easy to understand. Does it need instructions in a separate book or does the object explain itself? Ease of use is about how easy the object actually is to use.
Simplicity in one place is often offset by a lack of simplicity in another place. For example, flat-pack furniture is simple for the seller but complicated for the buyer. Pre-built furniture is simple for the buyer but complicated for the seller. For visual communication especially, the larger the audience the more time the designer might need to spend on the design, to make sure it’s simple for everyone.
There are several ways to simplify something: Reduction, specialisation (split a tool into different, simpler tools), modularisation (organise the tool into focused but still connected units), combination (combine tools into one, which often makes the tool more complicated but makes ownership and process more simple), smoothing (putting a smooth case over complicated internal parts), and clarification (use the outer casing to represent the inner workings in a clearer way).
Where possible we prefer to learn how to use an object from the object itself. If this is not possible, we then prefer to rely on labels shown on the object. If this is not possible, as a last resort we rely on separate user instructions.
There is a certain amount of complexity that is required or even desirable in an object. A bicycle would be more difficult to ride up hills if it did not have the added complexity of gears.Some things are intentionally complicated, such as a maze.
An interface can have ten buttons for ten functions, which is broad, or one button for ten functions, which is deep. One works in space one works in time. Both are simple in different ways.
Aesthetic simplicity, or minimalism, is partly about removing ornamentation. Without ornaments, in some cases the structure of the object is revealed to provide the aesthetic pleasure. For example, chairs made of tubing and not covered in upholstery.
When it comes to using graphic design techniques to emphasise elements, you should emphasise them enough and no more. If everything is emphasised, nothing is emphasised, so a little emphasis goes a long way. For example, in typography you might emphasise a heading in many different ways, but you should only use one or two of them.
Redundancy means repeating something, perhaps in a different way, to help understanding. Sometimes redundancy is good because the meaning will be clearer to more people. There’s a natural tension between too much redundancy and too little. How much redundancy is required depends on the viewer’s knowledge. Redundancy is one of the reasons that removing too many elements can make a design less simple.
Some designers create clutter because that is the effect they want. Some designers create clutter because the tools are available and they want to use them. Some designers create clutter because they are incapable of creating something uncluttered.
Gather up examples of visual design in your target area, for example logos or websites. Are there patterns? Can you exploit them by doing the opposite? Do you need to use those same patterns because they help define the area?
Gather examples of brands/types of things in your target area. Can you map these to a two-by-two matrix of values? Is there an underrepresented area you can target?
Take a central visual idea and apply action verbs to it. If your idea is “a lightbulb”, what happens if you smash it? Stretch it? Squash it? Melt it? Use these action verbs to try new ideas with the familiar concept.
Be an active sponge: look for ideas everywhere that can you can use in design. Keep a note of interesting combinations of colours, textures etc. Observe other designers to see where they get their ideas. Make a database of inspiration for yourself: take screenshots of websites, photos of posters, etc.
Many figures of speech can be applied to visual design. Look through the list on Wikipedia, and see if any of them spark ideas.
You can represent a concept with an icon, which visually represents it, an index, which points to the object but doesn't necessarily depict it, or a symbol, which is an abstract representation.
Start a visual diary, possibly with a theme. On a regular basis contribute visual design ideas to the diary. If any particular effort excites you, go back to it again the next time you record something and expand on it. Share your work with others, make it public. Keep at it because the good stuff happens when you dive into an idea fully. Harvest anything good.
Not the same as Google-style sprints or Agile sprints. Take a concept, set yourself some rules/limits (typefaces, for example). Set a time limit and explore as many approaches as you can for the visual design in that time, and with your limits.
Similar to the design system approach. Create a kit of parts you can use and combine to create your visual design. Then your only job is combination and not creation.
The same concept as copy-work. Take another piece of work, take it apart into pieces, recreate it, study the rules of its construction. Now create new work using the same pieces and rules.
One reason to mix typefaces in the same design is because it creates typographic texture. Look for typefaces that come from the same period in history. Look for two typefaces that are designed to suit the roles they need to play in your design. Look for similar proportions in two typefaces, such as character height or width. Look for smaller visual details that typefaces share in the letterforms.
If you want to add an extra text style to create visual hierarchy, change the size, or colour, or weight, or case style. Don’t change the typeface. This doesn’t apply to the standard case of having one typeface for body and one for headings.
It can be very difficult to tell two serif typefaces apart. Best not to mix them together.
If you’ve got sans-serif text in the same line as serif text, or are mixing in italic text with non-italic text, check to see whether the two styles look the same size. You might need to increase the serif or italic text size slightly to optically match them with the sans-serif or non-italic text.
Typefaces with a taller x-height might need more line height added to keep them easy to read.
Every visual element (a colour, a typeface, etc.) you use in a project should be echoed elsewhere in the project. If you have a red circle in the design there should be another red element somewhere else so that the red doesn’t feel like an alien.
White space should gather at the edges of a design, not in the middle. This means you should avoid situations where some white space is surrounded on all sides by elements.
If you have four columns of text and they're all different lengths, the best approach is to hang them all from the same horizontal line, called a hangline. In other words, align the tops of the columns rather than the centres.
If every element in a design appears to be a similar size, it makes them appear to all exist on the same plane. You can make a design more dynamic if you vary the size so that some elements are in the foreground, and some are in the background.
If colours appear next to each other on the colour wheel, don’t place them next to each other in a design. They’re not distinct enough from each other, and will blend together.
Some colour combinations are popular now, but will probably not be in a year or more. If you want your design to stand the test of time, don’t use these trendy colour schemes.
Bad colour combinations are timid colour combinations. As long as you’re confident, you can make any colour combination work. Make it big, make it bold.
If you start to work on the visuals first, your creative energy is focused on the details like typefaces and colours. It’s better to focus on the idea first, make sure it’s right, and let that good idea inform the visuals. Good visuals that support a bad idea is bad design.
Heavy: More, difficult, important, sad, expensive, debts, guilty, responsible
Light: Less, easy, unimportant, happy, cheap, innocent, irresponsible
Up: More, good, happy, healthy, social status, moral
Down: Less, bad, sad, sick, having no say, immoral
Near: Similar, familiar, considered, concrete, good
Far: Different, unfamiliar, not considered, abstract, bad
Rough: Exciting, unpleasant, impolite, dangerous
Smooth: Boring, pleasant, polite, safe
Big: More, good, important, powerful
Small: Less, bad, unimportant, powerless
Warm: Active, happy, friendly
Cold: Inactive, sad, unfriendly
Soft: Pleasant, flexible, uncertain
Hard: Unpleasant, strict, certain
Bright: Happy, knowing, the sacred, good
Dark: Sad, unknowing, the profane, evil
Strong: More, competent, confident
Weak: Less, incompetent, unconfident
Left: Bad, social-democratic
Right: Good, conservative