Quick start guide: Add personality to an interface

Interface personality is the result of many visual and interaction details that work together. Here’s an introduction.

General principles

Variety and contrast (in size, shape, colour, layout, etc.) makes a design more interesting. They add energy to a design
Personality is harder to do well if you use more stuff because there are more relationships between elements to work with
Humans naturally associate things with personality types. Rely on that
Some element types (text) are more concrete and some are more abstract (colour). The more concrete the element type, the more clearly it will represent personality
Almost all personality is communicated by visual design and feedback

You can use a novel layout system other than a grid (e.g. concentric circles)
Elements don’t have to follow the rules of the layout (e.g. rotated elements, rounded corners)
More space between elements feels calmer and less space feels more energetic
Softer shapes feel calmer than sharper shapes
Contrast of large versus small adds a lot of energy and represents concepts like bullying, or difference in power
The more your viewer’s eye moves around the page the more engagement they’ll feel

Bigger differences in type scale feel more energetic, interesting
Typefaces have personalities associated with them. Choose well
You can use more than one typeface and use the contrast between their personalities to say something
Text styles like bold, italic, underline, case, colour, etc. to add meaning or reinforce concepts in the text

People have strong associations with colour so they’re useful to show personality
More colours means more chances to show personality
Brightness contrast in your palette is more energetic
More variety across the colour wheel (different hues) is more energetic
Different tones of colour feel different ways. Earthy colours feel different to primary colours which feel different to pastels

The words in your design speak very clearly about the personality of the design
So does imagery like photographs and illustrations
Patterns and other textures can make a design feel a certain way, but they’re more abstract

Animation makes a design feel more alive. Make an element move like something real and it’ll have more personality
Speed of animation affects the energy of a design
How the interface reacts to the user’s interaction is a strong element of personality. e.g. a button does a little jiggle when you hover over it