A Little Birdie Design

Design often has a strong intuitive aspect. Designers know what looks good on a level that’s part art, part science. But there are some known facts that can help us choose design features, from fonts to colours, in terms of how they’re known to affect audiences. Everyone can see that if you’re building a website to sell cookies, German Gothic is a bad font choice. If you’re in corporate finance, you should probably dodge Lucida Handwriting. If you run a babysitting service, your website background probably shouldn’t be black. But how exactly do the right design choices resonate subconsciously with audiences, creating the associations we want? Scott Mickelson takes us through it.

Web design has to be like a well-engineered component: it has to do several jobs simultaneously. It has to look good. It has to make navigating the website simple and easy – easier than clicking away to something else online. And it has to make the conversion funnel that leads to sales as compelling and inviting as possible.

When a website is designed, the objective is to influence people’s behavior. That means an understanding of how design choices affect people at the psychological level is important. If putting big yellow dots on your website made people feel a compulsion to sign up to email lists, there would be a lot of polka dots on the internet. We can look to purely visual subconscious cues like this – we don’t have to delve into mysticism to see that certain colors invoke certain moods or thoughts – or to the use of language and imagery to suggest cultural references that imply trustworthiness, playfulness, professionalism, youth, authority or whatever ideas are appropriate to meet the needs of the site.

The four major elements that go into creating a website are content, layout, color and typography. Obviously these don’t exist in isolation – you have to choose a color for your words, and decide where to lay them out on the page for instance, and overall the feel of a website will be produced by interactions between design elements – but we can talk a little about each one and how to make great choices to improve that specific element.

Content

Content is the heart of a website; the core of what really wants to be said. In the web’s early days, content meant text, and boy, was there a lot of text. Websites would feature the scroll bar to infinity as a body of uninterrupted text, sometimes lacking even paragraphs, meandered on, telling the reader everything they might ever want to know in relation to the subject. That approach didn’t survive the migration onto the web of people who knew how to talk to people, and modern websites don’t so much eschew copy as use a carefully measured dose to achieve the desired result. Visual content is no different – the trade-off between empty space and visuals has to mean that the individual elements grab your attention, but the website as a whole doesn’t feel jarring or intrusive.

That means content needs to be both edited and organized, so that visitors don’t feel overwhelmed. Instead, they should feel they’re being invited in, and the content they find should feel like their own discovery.

If your content is ill-organized, that’s what your visitors will think about the brand behind it. If it’s well-produced and professional-looking, that will rub off onto the brand itself.

Layout

The way a website is laid out can affect the way visitors feel. When you’re organizing content, it’s vital to consider the effect that will have on the overall layout. We’re talking about the trade-off between visuals and white space.

Depending on your color choices, your ‘white space’ might not actually be white. But it will be empty of visually arresting elements that demand the reader’s attention.Without these areas of ‘on’ and ‘off’ design, the website will lack contrast. An ‘everything louder than everything else’ design scheme actually makes the visuals feel like mashed potato – lacking in texture and undistinguishable. White space, often actually white, is making its way into more and more websites in a big way as bigger screens and better mobile technology give designers more choice, and the competition for attractive and tasteful layouts increases.

The fashion is definitely moving in that direction: we’re seeing complex, multicoloured layouts giving way to simpler two or three color layouts, where the amount of white space can actually outweigh the content. As Mark Boulton says, the mantra used to be, ‘white space is empty space,’ but now clients can see the error of this thinking.

Additionally, though this isn’t true for the web, white space has the effect of making an item look more upmarket. That has to do with the implied assumption that the brand doesn’t need to scream and wave its arms for visitors to be interested, but it also harks back to the days when everything was hardcopy. Whitespace meant you could afford to have paper that wasn’t doing anything.

White space affects composition by controlling how busy a page seems, too. Too little white space, especially around textual content, and readers find themselves craning and squinting – when a couple of design alterations could have made the same amount of text at more or less the same size seem a relaxing and inviting read.

Color

Earlier in this post, I talked about using color to change the way people behave. In fact, color can have quite a strong effect on background mood. It can also be a powerful way to refer to cultural ideas and to reinforce the message content is delivering.

Red is a bright, energizing and exciting color that also calls to mind passion, power and, sometimes, anger. In nature, it’s used to warn and show danger; in web design, we’re usually not trying to scare people away – but we might want to borrow red’s associations with determination and boldness.

Warmer, less sharp reds, like brick and maroon, can be strong and comforting, meaning they’re good choices for sites that want to convey a feeling of stability. Conversely, slightly harder reds like tomato, true red and crimson, are great for youthful-looking sites that want to embrace red’s connections with danger and excitement – qualities that will engage the visitors you want, not drive them away.

Pink is very strongly associated with girlishness – with youth and femininity together. (It didn’t use to be – pink was once for boys, and blue for girls, but that’s another story.) Pink can be used to make older visitors feel sentimental or nostangic, or to call to mind ‘good old days,’ and it’s a popular color for sites aimed at young women and girls. It can be used to more provocative effect in the cases of hot pink and very bright pinks, but these colors can be visually overwhelming.

Orange is less overpowering than red, less gendered than pink and yet remain a bright, fun color. For that reason, it’s a familiar sight on sites that want to emphasize their creativity or youthfulness without coming across as provocative or confrontational.

Yellow is an extremely versatile color, partly because its effects change so much with the brightness of the shade. It’s considered an energizing color when it’s light and bright, and it’s a popular choice for young children’s websites where it gets attention and seems warm and happy. More subtle shades of yellow have different connotations, with darker shades redolent of antiquity and suggesting both wisdom and curiosity. These qualities sometimes see yellow used for business sites that want to look modern as well as professional.

Green is associated in viewers’ minds with the environmental movement and increasingly with social causes. Websites promoting ethical causes often choose green, but it can also be a comforting color, or even a dignified one suggesting permanence and luxury, in the case of dark, strong greens. Its similarity to the color of currency means that it is often chosen for financial sites. (It’s a natural choice for gardening websites too.)

Purple was once forbidden to be worn by anyone but royalty. Its association with wealth and luxury outlasted the sumptuary laws that put it above other shades, and is now a common choice for sites that want to present a luxurious, sumptuous appearance. It’s also available in paler, less bold shades, and lavender can do a lot of the same jobs as pink, for instance.

Blue is redolent of dependency and security. People who work in bluechip companies wear blue suits. It’s the color of seriousness and work, though light, floaty blues can gain by an association with cleanness, clarity and spirituality.

That combination means it’s a popular choice for corporate websites; business and professional sites will often prefer blues.

Black, white and gray are usually relegated to the background, allowing another color to stand out from them and make the real impact. Back suggests power, incorruptibility, modernity and sophistication. Meanwhile, white calls to mind purity, clarity, innocence, and simplicity. Their contrasting associations as well as their ‘not-really-colors’ positions on the spectrum make them a natural pair. Black and white designs need to be approached with caution since they’re very strong, but will throw all the viewer’s attention on the shape of the design. Gray is a more neutral color, though light grays have a ‘spiritual’ feel and darker grays can make associations with calmness, age and tradition. Gray has to be used carefully too – let it creep too much into the foreground and it can sabotage design efforts by making the site look lacking in energy.

Browns – including creams and tans – are often used for texture. They’re also a popularchoice for backgrounds that mirror natural objects like wood, paper, fabric or stone, and here they convey a sense of wholeness, relaxation and cosiness.

Creams are calm, elegant and pure, meaning they’re a great background color for websites that want to portray themselves as traditional. Cream and brown go well together, as do cream and tan. It’s important to be careful that brown and cream sites don’t end up looking underpowered and tired instead of dependable and clean.

Typography

Typography can influence how viewers see your site. Different families of fonts have different associations, and knowing how to invoke them can help you get the best design.

Serif fonts are the most traditional type – essentially, they’re traditional printsetter’s typefaces that have migrated onto computers and then online. We’re thinking faces like Times New Roman, Georgia, Garamond and Baskerville here, and they convey that sense of traditionalism, seriousness and authority that their age implies. Obviously you know when to design ‘against type’ – but by and large, these typefaces are right for business and corporate events, and wrong for a 40s-themed big band dance party.

Sans serif fonts carry implications that are related to serif fonts, without being exactly similar to or opposite to them. Serif is tradition, sans is modern; serif is authoritative, sans is universal; serif is respectable, sans is clean. Sans serif fonts are a popular choice for conferences and seminars, and for sites that want to gain by association with a scientific milieu, and they’re also a lot easier to read, an important consideration if you’re designing for people who don’t read well – hence the success of the ugly but functional comic sans.

Slab serif fonts have thick, strong, slab-like serifs. They’re sometimes also known as ‘mechanistic serifs’ and are popular choices where a feel of almost amateurishness is desired – like music festivals. When you want to appeal to a younger, more energetic audience, slab serif fonts are a good choice.

Script typefaces like Lobster, Lucida and Brush Script are a popular choice for sites aimed at women or that focus on celebrating events. Think of them as the rosé of typefaces: they’re perceived as being elegant and feminine, friendly and creative.

Modern typefaces are usually angular, spacy sans serif fonts, radiating style and fashion consciousness, as well as a feeling of exclusivity. Popular examples include Eurostyle and Matchbook, Politica and Infinity.

It’s often the designer’s job to understand the psychology of design choices – consideration needs to be made to what effect those choices will have on visitors’ minds at the subconscious level, as well as making great design choices in terms of appearance and function, in order to create the best websites possible.

Video: https://www.youtube.com/watch?v=ojr-s9mPCKw

When you’re making decisions about the kinds of layout, font or colour you’re going to use, it pays to have an idea of the kind of image you’re portraying, and the effect your choices will have on audiences. An understanding of that you’re saying with your imagery is one of the things you pay a designer for - great designers know how to get your message across even in incidental imagery and design detail, and the result is a strong, coherent brand identity with expression based on a solid understanding of the psychology that underpins design.