Notes on visual design

Jump to:

Classical and expressive aesthetics

The most useful visual design concept I’ve come across is the idea of classical and expressive aesthetics. The names come from Talia Lavie and Noam Tractinksky’s paper, “Assessing dimensions of perceived visual aesthetics of web sites”.

For each, here are some qualities they represent, and some methods you can use to produce them.

Classical aesthetics

Qualities: Objective/universal, Plain, Functional, Familiar, Elegant, Professional, Traditional, Clean, Pleasant, Organised, Clear

Methods: Structure, Order, Proportion, Symmetry, Simple/calm shapes, Simple visual techniques

Expressive aesthetics

Qualities: Subjective/individual, Emotional, Dynamic, Novel/creative/original, Extravagant, Playful, Fascinating, Trendy, Artistic, Complex

Methods: Variety, Complex/energetic shapes, High contrast, Many colours, Advanced visual techniques

Things I learned about visual design

  1. Beauty and function are not different. Beauty IS a function. And it is important.
  2. Beauty is a result of strong relationships between elements.
  3. Visual design can be split into classical aesthetics and expressive aesthetics.
  4. Classical aesthetics are universally beautiful: orderliness, clarity, cleanliness, symmetry, etc. But they’re also boring.
  5. Expressive aesthetics are exciting: flashy sprinkles, bold colours, painterly textures, originality. But they also divide audiences.
  6. Interaction design and visual design are a Venn diagram. There is a lot of overlap between the two.
  7. Visual design has five purposes: attraction, communication, expression, identity, and interaction.
  8. Even the best designers are inspired by the work—software and beyond—of others.
  9. There are no new ideas. Many designers copy other designers and then tweak it to make something “new”.
  10. It’s OK to steal the work of others, but it can go too far. It’s safer to steal classical aesthetics because they’re universal.
  11. Most if not all visual styles are a reaction to something: another style, new technology, an inspiring object, constraints, etc.
  12. Often the best way to think about visual design is to create visual design.
  13. Creativity is easier if you have constraints. Even if you make them up.
  14. Visual creativity is a result of soaking your brain in good design.
  15. Trained eyes find joy in subtlety.
  16. You cannot be “born with” good taste. Anyone can develop good taste with enough active exposure to good design.
  17. You couldn’t avoid developing a personal style if you tried, but it might take longer than you expect.
  18. Visual design demands a lot of rigour. Some people don’t have the patience, or care more about other things, and that’s OK.
  19. A design decision is only wrong in context.
  20. Almost any visual design decision can work as long as you commit to it.
  21. “It feels right” is valid, and sometimes preferred (e.g. optical alignment). But if you can explain why it feels right, that’s better.
  22. Some techniques and patterns are harder to get wrong. Focus on those, early on.
  23. If you make a design simple by hiding things, you’ve swept rubbish under the rug. The room is still full of rubbish.
  24. The last 20% takes 80% of the time.
  25. Both elegance and extravagance are valid, as long as they’re sophisticated.
  26. You rarely get good visual design the first time. Perhaps not even the fifteenth. Iterate.
  27. The more people who have input into a visual design, the safer but more boring it is likely to be.
  28. Small visual design issues (e.g. misalignment) catch the eye. They’re a bigger problem than they seem.
  29. Feedback is vital, especially when you’ve worked on a design long enough that you cannot see it clearly.
  30. Some elements of your design (e.g. centrepieces) should need far more of your time than others.
  31. Elements that take a lot of time or money to make are more impressive.
  32. An element does not need to be noticed to have an effect.
  33. Beauty is hard to justify but impossible to deny.
  34. Content (e.g. album artwork) adds visual interest, so you may not need much else in your interface.
  35. Elements of different types (photography and typography) can still feel like they belong together.
  36. Colour used for practical purposes might be enough colour.
  37. Small visual design decisions (e.g. a button style) can inform the rest of the design.
  38. Content should inform visual design. Visual design should inform content.
  39. Every element offers more than one opportunity to reinforce the concept.
  40. Trends are popular but do not last long.
  41. Variety is interesting.
  42. The more elements you add, the harder visual design becomes. Every element you add creates many more visual relationships.
  43. Good typography, layout, and colour can take you most of the way there.
  44. If you want visual interest, you can add more elements. Or you can change the elements you already have so they’re more interesting.
  45. Your design does not need many centrepieces.
  46. Software is rarely seen all at once. Strong motifs are useful to maintain visual relationships.
  47. The more a person will use your visual design, the less expressive it should be. Expressiveness can grate over time.
  48. Usability and beauty are sometimes at odds. That’s no excuse to go too far in either direction.
  49. Ideas will often work in your head, sometimes work in a sketch, and rarely work in a mock-up.
  50. Visual design involves many rules. Some designers don’t notice them.
  51. If a design is good, it probably follows some rules. Even if one rule is “broken”, another probably applies.
  52. If you want to “break a rule” you should have a good reason to do so. And appreciate that the good reason probably represents another rule.
  53. Some designers cannot share what they know because they learned through action and it’s second nature to them.
  54. Some elements are supposed to attract attention. Some elements are not, but still do. Reduce these distractions.
  55. It’s best if visual design techniques have an anchor in reality.
  56. “This doesn’t match my expectations” is a valid way to grab attention. Cutting something’s anchor to reality is a way to do that. But do it on purpose.
  57. Bigger things should have more detail. Smaller things should have less detail.
  58. “More flashy stuff” is the easier way to have visual interest. “Make no mistakes” is the harder way to have visual interest. You can do both.
  59. Every style has value, but they also often have common emotional associations that you should be aware of.
  60. Good visual design is about balance. If you increase one thing, you might need to decrease another.
  61. You can learn valuable things about visual design if you take things you instinctively like and try to understand your instincts.
  62. If something is absent (e.g. colour), it will have much more impact when it is suddenly present.
  63. Some visual techniques work better against a dark background (e.g. lighting effects) and others work better against a light background (e.g. shadow effects).
  64. If you’re not able to do something well, it’s sometimes better not to do it at all. The presence of something mediocre will look worse than the absence of something.
  65. Beauty won’t make them come back forever. You need something more.

Where novel visual styles come from

In software, the most common source of visual inspiration is other software. That is, designers copy other designers. But what if you want to introduce a new visual style? Here are the approaches you can use.

  1. Take an existing software style and tweak it: I assume this is the most common source of new styles in software design. It’s easier to be novel if the amount of change is small.
  2. Copy artistic fields outside of software: For example, graphic design styles are usually easy to transfer to software design. Fields like architecture and painting might need some outside-the-box thinking.
  3. Combine two or more styles: Take some characteristics from one style, and the rest from another, to create a combination that hasn’t been seen before.
  4. Explore what a new technology can do: New technology is sometimes introduced without much purpose. Often that new technology enables new visual styles. Explore what it can do.
  5. Pick a concept and use it to inform style decisions: For example, if you explore the concept of “wealth” and how it can be represented visually, you might discover new styles you can use.
  6. Transform an existing style based on some function: For example, pick a visual style and explore how it would look if everything in it were “broken” in some way. The concept of breaking things might help you to change the visual style enough that it’s not been seen before.
  7. Explore inside strict constraints: Arbitrary constraints encourage creativity. You push the limits of visual style more if you’ve got strict rules about what you can and can’t do. This is brute force creativity, and it is not possible unless you set constraints.
  8. Use visual styles from historical software: This is not truly “novel” because the style has been seen before in software. But if you use a style that has not been seen in software for many years, it might have the same effect.
  9. Do the “opposite” of what is currently popular: Look at whatever visual style is popular at the moment, and intentionally do something different in every way. This is again likely not to be novel, but your visual style will probably stand out.

Trends are common in visual design. Here’s how I think about them.

There is a trend life-cycle

Visual design trends go through a life-cycle:

  1. A trend is introduced
  2. The trend becomes widely recognised
  3. The trend becomes popular
  4. The trend is used so much it reaches saturation
  5. People start to criticise the trend
  6. People actively avoid the trend in their work
  7. The trend enters a “dormant” state

Once enough time has passed, a trend might be re-introduced, which could start the cycle again.

Many designers copy what’s popular

There are many designers who do not want to think too hard about e.g. visual styles. They look at what is popular in the design community. They design something similar. This is a simple way to design something that people currently like.

Novel design can create trends

If a visual style is novel enough, it can have a big impact when it is introduced. e.g. the designer of the Agora website used painterly trees as background elements. This was well received by designers, and I soon saw it on many other websites.

An evolving personal style can create and avoid trends

One way to both create trends and avoid “saturation” is to become known for a personal style, then slowly evolve it. e.g. James McDonald has always had a recognisable visual style. But if you compare his early work to his latest work, it’s noticeably different. James changes his visual style slowly.

Because his visual design skills are recognisably good, I’ve noticed many designers copy him over the years. He starts trends. But because he slowly evolves his visual style, he’s always one step ahead of the people who copy him.

Some trends should not be copied

Some visual styles fit their context or purpose well. A visual style that suits its purpose and is well-executed usually has a big impact on other designers. It’s hard to ignore a visual style that communicates its purpose clearly.

People often copy these visual styles because they’re popular. But the visual style was good because it suited its context well. It likely won’t work in other contexts. You should not copy these visual design trends.

There are also visual styles that suit many contexts well. I think these are the ones that are copied the most, because they work in the most places.

Some trends start and end in the community

Some novel or interesting visual styles become popular, but never make it to “commercial” interfaces. e.g. you might see designers share examples of the visual style with each other. But you will ~never see a mobile app or commercial website use the style. The trend is born and dies within the design community. Probably these trends rely on their novelty, and aren’t practically useful.

Evidence that designers don’t talk about visual design

I believe that the visual design of software interfaces is not given the attention it needs by designers in positions of power. Here’s some evidence to support the belief.

Literature

As of December 2022, I’ve found 19 books about the visual design of software interfaces. I believe that’s all of them. Nine of them are self-published by designers who I assume realised there was a gap in the market. By far the best of the 19 books was written in 1994 (“Designing Visual Interfaces: Communication Oriented Techniques” by Kevin Mullet and Darrell Sano).

“About Face: The Essentials of Interaction Design” is a book written by the Cooper software design agency. It positions itself as an end-to-end guide to software interface design. Of its 720 pages, 28 of them are about visual design, or 3.8%.

Education

Career Foundry offers a course called “UI Design”, with the tagline “make the web beautiful”. Of the ~76 modules the course includes, 18 of them, or 23.6%, are about visual design (e.g. “Layout design & spacing” as opposed to “What is lean UX?”).

Of the 1,430 articles on the Nielsen Norman Group website, 30 of them are about visual design, or 2%.

Of the 52 paid courses offered by Nielsen Norman Group, one of them is about visual design, which is also 2%.

Companies

Design Principles is a website which collects design principles that are in use by companies. Of the 1,448 principles listed, 66 of them are about visual design, which is 4.5%.

Figma is the tool that the majority of designers use for visual design. Of the 24 recorded sessions from Figma’s Config conference in 2020, none of them are about visual design. Of the 43 recorded sessions from the 2021 Config, none of them are about visual design. Of the 71 recorded sessions from the 2022 Config, two are about visual design, which is 2.8%.

[← anthonyhobday.com]