A Basic Visual Design Framework

Visual Design as a skillset has been through many stages. To those new to the industry, it is the artifact that drew many of us into the role. To seasoned designers, it is the physical expression of thoughtful product work. While its importance is contentious, the aspects are not mutually exclusive. Visual Design is complex. It should be understood for its breadth, complexity, and flexibility.

You need a good eye for visual design.

Visual design is bundled with the concept of taste — the ability to ‘know’ what is good or not. It is a trait that follows most designers at family parties when they are expected to decorate someone’s living room or shoot the family photo.

Taste is commonly thought of as a disposition — a talent. Good visual skills, as a result, straddles this line, being a result of either ‘having a good eye’ or years of practice.

Debating whether talent is real or not is a larger conversation to be had. However, what is true is that parts of the visual design toolkit can be objective. This framework aims to categorize these aspects into a three dimensions, so that we can improve our visual chops and create a language to better talk about it.

So, how can we re-define visual design?

Good design conveys exactly what the designer intended. To approach better visual design, let’s look at how we critique visual work. We don’t ask “does it look good?”. We compare a user’s interpretation of an interface to what was intended. We ask how the work relates to the most important outcomes for the product and its users. We say interfaces look crowded or unfamiliar.

We can summarize that visual design does the following:

1. Communicates and organizes important and complex information.
2. Encourages intended behaviors and devalues others.
3. Maintains legibility and familiarity.

Therefore, we can associate these goals to three questions we can ask when evaluating visual work.

1. Is it useful? Does the design provide value or utility to the user?
2. Is it clear? Does the design encourage an intended behavior? Does it follow a narrative that makes sense.
3. Is it pleasing? Does the visual work feel native to the product it is working in? Are the elements familiar? Does it feel polished?

1. Is it useful?

Products use visual representations to convey information or function. The hook of a door handle affords a tug or a pull. The ridges on the battery storage of a remote affords a drag.

Digital interfaces have affordances as well. In fact, we started out with similar physical affordances, using harsh shadows and gloss on buttons and iconography that looked similar to physical objects. Over time, the bevels disappeared and buttons became flat. They evolved into a new family of affordances that differed in appearance, but presented similar utility.

Designing for utility maps function to the form. We first look at heuristics that improve how fast we remember what something will do by just looking at it.

In this example, here are common affordances in digital user interfaces. Text conveys consumable information. Buttons convey actions that users take. Navigation conveys how users can move through an app. Lastly, you can also have affordances for complex visual expressions. An actor is a representation of a person, which is common across the products we use everyday.

While affordances improve how you extract expectation, they only take you partway. At a granular level, there are details that better articulate your interface.

• If a button is performing a specific function, you need to pick language that better describes the action.
• If a text label has a unique state (ie. unread message), you can use color or weight to differentiate it.

In this example, Add to Cart and Buy Now allow users to progress through a purchase pipeline. However, the language implies two different outcomes. Add to Cart allows users to make decisions later and purchase multiple items at the same time like in a clothing store. Buy Now allows users to finalize a purchase like when you buy an plane ticket.

2. Is it Clear?

Microsoft Word 2010 toolbar

10 years ago, tools like Microsoft Word and Adobe Photoshop provided good affordances within their products. They had obvious buttons, labels, and iconography. They accommodated different use-cases with various features. However, some features were hardly used, but others were used all the time.

Visual designs, now, are reductive and opinionated. They let people problems and business goals empower specific actions and information. They map components to intuitive mental models, yet also encourage mental models that are beneficial to the product.

At its core, clarity weaves affordances into a narrative. The narratives allows you to more clearly understand a flow of an interface and the intent of the product. Some of the most common ones are drawn from Gestalt Psychology.

1. Prominence: Use louder visual treatments to make components feel more important and lighter treatments for those that are less.
2. Proximity: Put content that are related closer together.
3. Similarity: Keep similarities between components that have similar behavior.
4. Closure: Enclose components that are related.
5. Continuity: Place content linearly (eg. in a feed) to show similarity across several of components.

This is an example of Prominence. It takes the basic component of a button, but then uses a heavy background fill compared to a light outline. It, both, brings attention to what a user probably would do and what the product wants the user to do — complete a transaction.

3. Is it Pleasing?

Useful components that are grouped in a clear way convey function and an opinion of what a user should be doing. Our brains process that information in every instance. It retrieves similar examples from past interfaces, and we look for patterns and those that break them — each causing our brain extra energy to process. Too many of these moments manifest as frustration or confusion. We see these issues in real life as well — when there’s a small blemish on our face or when a hair is out of place. In an interface, while we can’t explicitly identify the difference between a 24pt and a 25pt font, we can sense it. We can’t discern it exactly, but our brain knows that something feels off.

To design pleasurable visual experiences, we need to set reductive and meaningful rules on what is different and what is similar to create patterns that are simple, recognizable, and consistent.

How can we show difference?

In psychology, Just Noticeable Difference (JND) is the amount of change for a difference to be noticeable. There is a JND value for noticing a heavier weight or noticing when a color is a different hue. While we can create step sizes of changes for size and color that are slightly noticeably distinct, we still want to emphasize distinction without overdoing it.

Visual differentiators should be modest and meaningful. Do we really need another typeface to indicate less important content? Probably not. Do we need to use both a circular and a square profile picture throughout the product? Probably not. With too many visual differentiators, visual cues are harder to notice and attribute meaning.

This is an example of a reductive arrangement of text treatments and colors. Each step-size should be distinct and unique and attribute a certain meaning.

How can we show similarity?

When you write on looseleaf paper, you can easily write on the next line without even looking. The lines use a consistent spacing to reduce the effort of finding the next line, creating visual rhythm. Digital products do the same thing. They create an expectation by repeating visual elements and organizations like placing a profile picture at the top left of content types.

Similarity, overall, can be attributed to designers use similar treatments across simple forms like two different header sizes for sections and subsections. They can create the same expected behaviors for complex forms like people and companies.

Even on a granular level, it also can be as simple as always using red when there is an error, or using a consistent treatment for tooltips and educational text. It can also be using consistent spacing rules in between elements.

Above is an example of a visual treatment that uses a step-size of 4pt to create margins and padding between elements. It prevents you from being arbitrary, but it also gives your product consistent whitespace.

Putting it Together

Not one principle can live without the others. While it isn’t comprehensive, it does tackle big problems with visual design at a novice level. It fights the impulse to fill up negative space with useless information or to create new visual paradigms ‘because it looks cool’. It cautions against decision overload by giving many actions the same weight. It also encourages thoughtfulness and consistency when applying hexadecimals, font-size, and spacing.

The three-step framework forces you to cycle through each principle and dive deep. It allows you to identify which part of visual design you are most weak at and allows others more pointedly critique your work. We are all trying to improve, but we just need the same vocabulary to do it. So, next time when you are evaluating visual work, ask the questions:

Is it useful? Is it clear? Is it pleasing?

___

Frameworks don’t prescribe what is right, but instead create a vocabulary that aligns concepts that we all use yet don’t label. We all have some opinion on what it means for visual work to be useful, clear or pleasing. Therefore, if you disagree, please un-package your definitions, start a discussion, and let’s align. The faster we can find the commonalities, the easier it is to un-package truths, and the more people we can train to build better experiences.

Thank you to Brad Birdsall for his thoughts and feedback!