1 Comment

Facilitating Visual Design Direction with Style Tiles

Driving decisions about aesthetics and visual design direction with project stakeholders is a delicate process that can be fraught with frustration on all sides. You can increase the likelihood of success and happiness by using targeted artifacts in your decision-making process, but the real secret for success lies in good communication and guidance.

Style Tiles – Between a Mood Board & a Wireframe

Atomic Object has been using style tiles to help guide the visual design direction of software products. If you’re not familiar with style tiles and how they work, here’s a brief overview.

Early, high-fidelity visual design direction has historically been critiqued by reviewing two types of artifacts:

  1. Mood Boards – A mood board is collage that generally consists of images, text, and objects that reflect an aesthetic direction.
  2. Wireframes – A wireframe shows a fully-defined user interface.

However, both mood boards and wireframes can be dangerous to use when critiquing visual design. Mood boards can be too abstract for many people, since they have a hard time projecting how a mood board would manifest as tangible visual design elements like color palette, font, or button style. Wireframes, on the other hand, can be too concrete and can focus attention on the wrong considerations. When presenting high-fidelity wireframes, people can easily get sidetracked critiquing information architecture or interaction design.

Below are two mood boards that help set a direction but don’t concretely show how interface elements will appear.

MoodBoard

MoodBoard2

Style tiles are collages of tangible, visual design elements, which help to communicate a concrete visual language. They put the focus on critiquing visual design elements and provide a balance between the abstract nature of a mood board and the completeness of a wireframe.

The tiles below show two different approaches for the same application. There is a bit of sample wireframe work included to help visualize how individual elements come together, but the sample wireframe is not intended to show a final information architecture or interaction design.

StyleTile

StyleTile2

Context & Communication Are Essential

Style tiles are great tools, but they’re not self-explanatory. In my experience, most non-designers have a difficult time providing feedback on a single stile tile or even comparing and contrasting different tiles. Simply asking for open feedback is a poor way to facilitate meaningful conversation. And sending style tiles through email and asking for written feedback is an invitation of disaster.

I believe stakeholders have difficulty providing style tile feedback for two reasons:

  1. Stakeholders may feel implicit pressure that they should be able to articulate why a specific style tile feels right, but they lack the vocabulary to map their emotions to concrete visual design terminology related to typeface, color theory, composition, etc.
  2. Stakeholders actually want to see the fully designed wireframe so they can picture the end result. Stakeholders will embark on the impossible task of trying to envision each stile tile as a fully realized wireframe and mentally comparing the finalized mental visions. This can’t be done. I’ve observed people trying to perform this futile exercise, and it’s easy to see them get frustrated and give up.

Getting the most out of style tiles requires two things: in-person communication and attention to emotions.

In-Person Communication

In-person feedback is essential for providing guidance, assurance, and clarifications. Don’t seek early design feedback through email. Ever. If in-person is impossible, use a video conference.

Use Emotion, not Logic

Before creating style tiles, you should have collaboratively defined adjectives describing the software product’s or brand’s personality attributes. You may have identified attributes like “progressive”, “orderly”, and “concise” to describe the product.

When asking stakeholders to choose a style tile out of a set of alternatives, ask them to compare two tiles against each other and make a gut decision based on the predefined attributes. Keep decisions quick, and don’t get into details. Compare additional alternatives against previously ranked style tiles to create a fully prioritized set.

Next, ask stakeholders to zoom in and focus on the details of their top choice. Ask stakeholders to focus on each design element of their top choice, and ask if the element reflects the product’s personality attributes better than the same element on other tiles. This detailed comparison will allow some elements to be swapped in from other tiles and a final tile to be created from the elements of several alternatives. Don’t use jargon when helping stakeholders compare element alternatives, and try to keep everyone from zooming out to envision a wireframe.

Please leave a comment below if you have any similar observations, tips or tricks to share.