Loading...
Loading...

The Science Behind Good Design

When it comes down to it, design is all about making choices. Each color, shape, line, font, text, and graphic you use will ultimately influence the message you’re trying to get across.

We’ve often been in conversations with people who know they should get better at design, but they don’t feel they have a “natural sense” for creativity. However, we argue that learning to design well has as much to do with psychology and user behavior as it does creativity.

What brushing up on psychological principles (as they relate to design) will do is help you understand what goes into the creation of intuitive, intentional design experiences.

1) Mental Models

Computer scientists and UX designers think and talk a lot about mental models, because the process of designing something new — like a website layout or a new app — requires trying to uncover and act on what users might find to be intuitive.

Mental modelling is the process of mapping out what a person understands about the real world through experience and replicating those models in the design of something in the virtual space. This is all about trying to uncover your audience’s intuitive process.

Think of your computer files and folders. They’re based on the same old-school method of organizing hard files, so it’s easy for the user to understand — despite the visual looking rather different.

For designers, understanding what mental modeling is and why it’s important comes down to simply designing with your users’ experience in mind.

Throughout your design process, do an “intuitive check.” Are your visuals moving right to left, top to bottom? Is your message clear and easy to understand, or is it unintentionally hidden?

A gut check with a friend or coworker is a great way to keep an eye on whether your mental modeling is working well in your designs.

2) The Von Restorff Effect

The Von Restorff effect is, quite simply, the idea that the oddball out is the one that gets remembered.

When designing, sometimes you want your audience’s eye to be drawn to one spot –even if there are other design elements around it. This might mean using a different color, font, size, etc.

In this example, By placing a group of similar elements next to one different element (the red shoes), this image uses the Von Restorff effect to show how it’s the different idea that really stands out to the viewer.

Von_Restorff_Effect_Example.png

While this example’s idea is fairly straightforward, you can also use the Von Restorff effect throughout your site pages to draw your users’ eyes to certain spots on a page.

For instance, in CTA creation, you can use the Von Restorff to create contrast on your page and draw your users’ attention, like this:

conversion-lab-landing-page-1-1.png

3) Gestalt Principles

Gestalt psychology explores how elements are perceived in relation to each other visually. The gestalt principles, or gestalt laws, focus specifically on how design elements are grouped together.

  • Proximity: The idea that when objects are placed in close proximity to one another, those objects are seen as a group rather than seen individually. Although there are lots of shapes within the “U,” in the Unilever logo, the eye still recognizes those objects as a group making up the “U” figure.

Unilever_Logo.png

  • Similarity: Objects that look similar will be perceived as one object or as a part of the same group. In the NBC logo, the similar cones are perceived as a group because they look similar to one another.

nbc.gif

  • Closure: Closure occurs when a shape is still perceived as a whole even when the object is not fully closed in reality. In the Girl Scout logo, the shapes and whitespace are used to create a perceived series of silhouettes even though only some of the shapes are actually enclosed.

Girl_Scouts.png

  • Continuity: Occurs as the eye moves naturally from one object to the other. This often happens through the creation of curved lines allowing the eye to flow with the line. In the Olympic logo, the eye can see that the objects are continuous as they link with each other, creating a grouped visual.

Screen_Shot_2016-06-22_at_12.34.42_PM.png

  • Figure & ground: When the eye notices an object as an object, it separates the object (figure) from the surrounding area (the ground). In this logo-tribute to Steve Jobs, the viewer either see the white space as the figure or the ground, depending on whether the eye looks at the apple or the silhouette of Steve Jobs.

Jobs_art_Mak002_web-780x780.jpg

4) Visceral Reactions

Have you ever come across a website, picture, or anything visual that you just instinctively loved but couldn’t necessarily explain why? You probably had a visceral reaction — the kind of reaction that just comes from the gut.

Designing for visceral reactions is essentially designing to create a positive aesthetic impression. To some extent it takes just knowing what looks pleasing to people and what doesn’t.

Airbnb_Visceral_Reactions.png

Designing for the visceral can be as a simple as using beautiful photography and colorful imagery to capture the attention of your audience.

5) The Psychology of Color

We often associate different colors with feelings or thoughts, so designers have done a lot of research to find out which colors humans associate with different moods.

For a more in-depth look at which colors are used for different moods, here’s a great infographic on the psychology of color. Otherwise, here’s the basic rundown:

Blue: Secure, calm, honest, trustworthy, strong, caring

Red: Energy, love, exciting, action, bold, passionate

Orange: Happy, sociable, friendly, affordable

Yellow: Logical, optimistic, forward-thinking, confidence, playful

Purple: Imaginative, creative, nostalgic

Green: Growth, organic, natural, caring, fresh, earth

Black: Sophistication, luxury, seductive, formal, authority

Multi-color: Multi-channel, positive, playful, bold, boundless

Google_Multicolor.png

6) The Psychology of Shapes

Like colors, humans associate different shapes with certain emotions and characteristics.

Although less of a principle itself, the psychology of shapes boils down to studies that have shown which characteristics people match with certain shapes.

Circles, Ovals, and Ellipses: Positive emotional messages attached to community, friendship, love, relationships, unity, and femininity.

AT&T’s circular logo helps its brand communicate a universality feel. As a wireless network, this makes sense. The use of shape helps connect the audience with a recognizable pattern.

at_and_t__logo.png

Squares and Triangles: Stability and balance, strength, professionalism, efficiency, power, and masculinity.

Microsoft and Delta both use triangles and squares in their logos. This helps establish feelings of stability and efficiency when viewing the logo, which are positive feelings to associate with brands.

Microsoft_White_Logo.png

Delta_Logo.png

Vertical Lines: Masculinity, strength, and aggression.

While the basic cloud shape of SoundCloud’s logo might communicate emotions associated with dreaming and creativity, the vertical lines create a more aggressive feel. It’s the combination of the lines and the overall cloud shape that helps communicate the duality of the creative and the strength of SoundCloud as a tool.

sc_square_480.png

Horizontal Lines: Community, tranquility, and calm.

As a civil rights organization, the Human Rights Campaign is a great example to consider when thinking about building community and peace. And the horizontal lines/rectangles used in the logo really help to communicate both equality and tranquility.

220px-Hrc_logo.svg.png

7) Dual-Coding Theory

You’ve probably heard the statistic before that our brains process visual information 60,000X faster than text. Well, dual-coding theory is the idea that both visual and verbal cues can represent ideas, but using both can help the brain recall those ideas faster.

In other words, we need visual and verbal information to digest and remember information.

When designing, this means illustrating ideas as much as possible, while still using verbal messages to fully explain ideas.

In the example below, the graphic shows a visual, literal representation depicting primary, secondary, and tertiary colors. But to fully grasp the concepts, it’s necessary to pair the visual information with written (verbal) information. The dual-coding is what helps the reader truly understand the concept.

Primary_Secondary_Teriary_Colors.png

Comments(5013)