B2B Marketing Agency for Technology Companies

“I Like It!”: How to Nail Your Website’s Visual Design with Research, Activities & Collaboration

To perfect a website’s visual design (look & feel), it demands research, activities, and collaboration. Our formula works, and has these 6 ingredients.

Comments 0
by Eric Sharp

"I like it!"

Three simple words.

They’ll make a website designer smile ear to ear, and a website owner exhale with joy (or relief, depending on how the process went).

It’s not easy to get a website’s visual design (aka look & feel) done right.

How to nail visual web design tools activities

After presenting 100+ designs over the last decade, I know of the long hours needed and the nervous energy — on both sides — the whole process could bring. Though not perfect, my team’s approach for finding a website’s visual design is working well these days.

Over the years, we iterated on what works and experimented with new tactics to slowly evolve our creative approach.

We hear “I like it” exactly when we need to within the process because we emphasize research, documentation, hands-on activities, and collaboration. (Rather than some grandiose presentation you'd see in Mad Men)

So, how exactly do we approach the visual design phase?

Our secret sauce has 6 ingredients. But first, let’s ensure we understand visual design and its role in your website.

What is Visual Design?

Look and feel, to put it simply.

UXBooth.com defines visual design as: "The use of imagery, color, shapes, typography, and form to enhance usability and improve the user experience."

Usability.Gov says: "Visual design focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements."

and UXMatters.com puts a nice spin on it: “The consistent visual treatment of elements and components."

(I like that UXMatters used consistent in their definition.)

A Helpful Analogy

A website’s visual design is a lot like the curb appeal of a home.

Fresh paint, new roof shingles, manicured landscaping, carefully laid pavers, an inviting and boldly painted front door — these elements quickly say “Welcome!” or “Meh”.

This reaction is visceral. And your website’s visual design also creates a visceral reaction.

“WOW, what a beautiful home!” A home’s curb appeal is visceral — like a website’s visual design

Visual design is, visceral

Who hasn’t responded to a website like this?

In his book Emotional Design, Don Norman describes 3 aspects of design: Visceral (appearances), Behavioral (please & effectiveness of use), and Reflective (rationalization & intellectualization).

The visual design process of a website will lock in, explore, and appeal to the first aspect; visceral.

This phase gets tricky because people have a gut reaction (positive or negative) to imagery, color, shapes and typography. This is why a website’s appearance can become a moving target — everyone (even your Grandmother) has preferences and pre-disposed ideas!

Luke Wroblewski said it best:

“Reactions to the visceral level of design are immediate and powerful. It only takes a second to determine if the “look and feel”...appeals to you.”

Visceral opinions are what trips up creative collaboration. When this energy isn’t channeled and utilized properly, the collaborative spirit (and website progress) goes awry.

Why visual design is important to get right

OK, so the visual design of a website is challenging. I'm sure you’ve picked that up by now.

But, why is this important? Well, first impressions matter and a poor visual design creates a negative impression (which leads people to assume a website is untrustworthy).

There’s not many things more important to your website than being trustworthy, and a professional visual design is a great start to building trust with a visitor.

The 6 elements of research, activities and collaboration we rely on to perfect a website's visual design

Alright.

Now that we have an understanding of what visual design is, the role it takes in a website, the challenges its visceral nature brings, and why it's important — here’s our formula for nailing it.

1.) Discuss Branding Guide

This is our very first conversation.

There are two reasons we discuss a company’s branding right out of the gates:

  1. It’s an easy conversation (which jumpstarts the creative process)

  2. These elements are fundamental

A company’s style guide (logo usage, color palette, typography, photography style) is a step in the right direction. Starting off a visual design phase by — let’s say improperly using the logo — won’t build confidence and kills momentum.

This ensures the website reflects the company’s personality — a key attribute to a brand consistency from one medium to the next.

Visual design style guide example

Talking through branding guidelines is an easy way to jumpstart the visual design of a website

2.) Discuss Branding Guide, again (and what can change on the website)

Once we see which branding elements are off-limits, we then discuss which elements are NOT off-limits. From our experience, many small to mid-sized businesses are relatively flexible with their typography and color palette, so it’s a natural conversation.

If their branding guide contains fonts that aren’t web-friendly, we try to find a similar replacements. If the color palette is too simple (1-2 colors), we recommend broadening the website palette with some complimentary colors.

A more sophisticated color palette and a web-friendly font pairing increases our chances to delivering a richer visual design.

Visual design website colors fonts

Knowing if things like fonts and colors are flexible sets boundaries for a visual designer

3.) Analyze & document inspiring Industry, Competitor Websites

Let me put a disclaimer on this activity: it’s not smart to copy your competitors.

ConversionXL explains why copying competitors is dangerous:

The problem is that copying a design style, information about architecture, web copy, service claims, or sign up flow is not copying a formula for success. Even if you copy something that’s working for them, it doesn’t mean it will work for you.

ConversionXL

Once we preface this activity, and the client shakes their head in agreement, we’re off in collecting and reviewing the visual design approach of competitor websites. We keep the list short (3 to 5) to ensure the entire process stays purposeful (rather than a stalk-fest).

4.) Analyze & document inspiring non-Industry, non-Competitor Websites

We believe inspiration can come from anywhere — even outside of a company’s industry or niche.

This list is also short (3 to 5) and we discuss how these website’s visual design could be experimented with moodboarding (#6 below).

Typically, the client comes to the brainstorm with something like “I was checking out Website.com earlier, and x element was interesting” and we facilitate a candid conversation on whether or not that direction is fitting for their brand’s personality.

5.) Design Gut Check

Design Gut Check Activity

A Design Gut Check exercise is a quick (and fun!) way to gather design data

This exercise takes some work to facilitate, but it has laser-like precision in identifying that visceral-ness of a client.

I first heard of the Design Gut Check from Big Sea Design, who discovered it on Good Kickoff Meetings: 20 Second "Gut" Test, but it looks to originate from designer Chris Cashdollar.

The Design Gut Check goes something like this:

  1. Gather ~20 websites (each different in style)

  2. Hand out score sheet to clients

  3. Show 1 of those websites for 20 seconds

  4. Have client score it from 1 to 5 (1 = “Hate It”, 5 = “LOVE IT!”)

  5. Repeat for other websites

  6. Gather scores, see which websites score the highest

Don’t reveal the 20 websites before the activity begins. A client should be having their initial gut reaction to every single website. If they’ve seen or used the site before, the essence of the exercise is lost.

A design gut check takes around 10 minutes once it begins. But, most of the work happens beforehand to set up the exercise.

6.) Mood Boards

Once a few, or all — if the budget allows — of the previous activities are completed, it’s time to actually design something for a client.

Cue the web design mood board.

I’ve dissected the ins and out of the moodboarding phase here:

Mood boards are the canvas to which visual design experimentation comes to life. We typically create 2 or 3 different mood boards for websites depending on the engagement. I wouldn’t recommend more than 3, as more options tend to create analysis paralysis.

I can't imagine trying to lock down a website's visual design without utilizing mood boards. They're incredibly powerful if the client understands their purpose (and doesn't mistake them for mockups — which is typically the next step in the overall website process.)

Mood board template and sample

Our mood board template (left) specifies which user interface elements (e.g. menu, buttons, page headers) to experiment with in every client’s mood board (sample on right).

I can't imagine trying to lock down a website's visual design without utilizing mood boards. They're incredibly powerful if the client understands their purpose (and doesn't mistake them for mockups — which is typically the next step in the overall website process.)

How are you approaching your website's visual design?

Here are two more tips.

Tip #1: Focus on a professional design, rather than pretty design

Color harmony, proper font pairing, use of whitespace — this chatter isn’t necessarily in the average person’s vocabulary, but this professional dialogue needs to drive a visual design phase.

“Pretty” is ambiguous and hard to measure.

Don't say “Our website needs a pretty design.” Instead, say “Our website needs a professional design.”

Tip #2: Don’t approach a visual design phase like it’s a Don Draper presentation

Sometimes businesses think nailing their website's visual design is about finding that perfect designer that “Will see my vision.”

Though there are plenty of talented website designers today, a website’s look and feel is less about design wizardry and more about collaboration.

Mad Men presentation

The big reveal worked for Don Draper, but it won’t for your website’s visual design

Productive visual design collaboration is difficult to achieve without research, activities and clear communication.

Good luck. Keep it fun for everyone involved. And enjoy the entire creative process!

You might also enjoy this

We believe a conversion-focused website — paired with the proper traffic, content, automation, and end-to-end ROI measurement — equips B2B technology companies with a real asset to scale their business.

18

Years in business

50%

Minimum growth in quality leads our clients see after an engagement

300+

Websites we've created, supported, or consulted over the last decade

 0 

The jargon we speak (we'll approach conversation like a layperson)