These are my notes from a short class on visual design fundamentals. I wanted to learn the purpose of visual design, the theory behind design and how it related to UX design.

I played with Flash, Dreamweaver and Fireworks as a teenager, and later got into photography and designing photo books, but I’ve never had any formal design training. I’ve worked with some great designers at GDS, but would love to develop my skills further.

What is visual design?

Visual design focuses on the aesthetics of a project and its related materials by strategically implementing images, colours, fonts and other elements. A successful visual design doesn’t take away from the content or a function. It helps people build trust in it.

Discovery

You need to know about a project before jumping in and designing things. This usually includes talking with and researching the client, colleagues, competitors, sources of inspiration, etc. All of that stuff is then turned into ideas. Quick, low effort work like wireframing can bring ideas into reality, out of your head, to be tested to see whether the ideas work.

Research

Whenever you begin a project, you should always be starting off with research. Take a collaborative approach because you need information from clients and stakeholders to understand their objectives, set constraints, set goals for when work begins and ends, and get useful feedback on your work.

Research looks like

  • looking stuff up on the web
  • looking at books, magazines and blog posts
  • interviewing clients
  • interviewing potential users
  • formalising marketing data
  • etc.

Anything that helps you better understand what you’re making and who you’re making it for. Feel free to drill in to briefs and ask ‘why’ – you don’t want to be left guessing why they like stuff. Find out what level of control the client wants too.

Create the objective

Craft an objective to answer the questions: What are we trying to communicate? Who are we communicating this to?

Use plain language to communicate purpose clearly. Throughout the project, consider whether the design is helping meet this objective.

Ideation

Once you’ve done your research, you’re ready to turn those into ideas.

Not everyone has the same process, and not every process is applicable to each brief. You might need to adapt a process depending on the project.

Moodboarding is a good way to curate design elements that speak to the overall look and feel, and define constraints to work within. If you’re looking to copy a website design, for example, the design decisions won’t be obvious and objectives will definitely be different. So try to look at raw designs: photography, illustration, books, typography, icons, colours, patterns, shapes, textures, etc. These provide different directions to go in and can generate feedback from a client.

You can refine moodboards as you move in a certain direction, e.g. ‘neon’, ‘big, bold and yellow’, etc.

Define constraints

This will contain the scope of the work and can limit scope creep. We want to narrow focus and purpose to make the design as effective as possible.

  • Timeline and budget
  • Technical considerations
  • The audience to reach
  • The message or values to communicate

Visual perception and graphic form

Contrast

It’s not just about colour. Contrast can define hierarchy, exploit context, manipulate relationships between elements. You bring meaning and emphasis by contrasting things with each other. It’s the occurring of elements of different size, position, colour, texture, shape and orientation.

The Rule of Least Effective Difference urges designers to use the smallest visual variation required to effectively communicate an idea.

Use contrast to convey information and importance. Our brains are wired to pick up on contrast. But use it sparingly: decide which few elements need to stand out and make those different to everything else.

You can use design patterns so that you don’t have to reinvent the wheel every time.

Colour is one of the strongest forms of contrast.

Gestalt principles of perception

Gestalt is a German word meaning ‘the qualities of a structure as a whole that cannot be described merely as a sum of its parts’.

You don’t have to present something as it is, people’s brains can fill in the blanks. People will perceive and interpret ambiguous or complex images as the simplest form(s) possible.

“White space is to be regarded as an active element, not a passive background.” – Jan Tschihold

Key ideas behind Gestalt

  • Emergence: where the whole is identified before the parts
  • Reification: our mind fills in the gaps
  • Multi-stability: our mind seeks to avoid uncertainty
  • Invariance: our mind is good at recognising similarities and differences

Space

Space is a really key tool in design. It performs the same function as silence in a song.

It can

  • establish contrast, emphasis and hierarchy
  • generate drama and tension
  • provide visual rest between groups of elements

Colour

Colour schemes

“Colour does not add a pleasant quality to design – it reinforces it.” – Pierre Bonnard

Colour shouldn’t overtake a design, it should push things up. It can

  • set a desired mood
  • reinforce a branding message
  • create contrast and harmony
  • create a comfortable reading experience

Structure a design first, then use colour to provide emphasis.

For colour schemes, you can start with a couple of colours and use tints, shades and tones to add more colours to the scheme.

You might iterate a scheme, adding other shades or colours, as you apply it to different elements for emphasis or muting.

Colour and emotion

Colour has a predictable effect on us. For example, when you see red, it’s stimulating and attention-grabbing.

But meaning isn’t finite. It’s all about context. Red does not always equal love, it could mean lust or revolution.

Typography

Typography is pretty subjective, unlike colour which can be scientific. It’s OK to trust your gut on what works.

### Fonts and typefaces

Fonts matter. You can write the same message in two different fonts and the meaning can be construed by the typography.

You’ll read bigger words before smaller words, so there is a hierarchy to typography.

Garamond is a typeface, 12pt is a font. Some people use ‘font’ to distinguish the weight or variant in a typeface.

When choosing a typeface, consider

  • how legible is it? organic or stylised?
  • how readable is it? long-form or headlines?
  • how flexible is it? different sizes and weights? copy and titles?
  • how unique is it? is it memorable or interesting?
  • has it been optimised for screens?

Don’t use a display typeface – for headlines – for body copy.

Consider micro- and macro-whitespace to create hierarchies.