At Phase2 style tiles are an important part of our design process. They provide us with a communication tool that helps us to understand a client's vision and achieve their goals through visual design. I recently wrote a post explaining where style tiles came from, what they are and how a designer can integrate them into their process.
But I wanted to include some examples of how I use the style tile as a starting point to discover if the client's visual translation of descriptive words and mine are similar. That way, designers intrigued by this concept and application will have some clear steps on how they can explore style tiles in their own processes.
To get started, I ask questions that provoke rich answers with lots of adjectives. Tons of adjectives give me great material for kicking off my style tile. After finishing the conversation, I start to make associations by grouping similar adjectives together. I usually group adjectives as "Conservative, Moderate, or Aggressive" based on how similar or different the adjectives are from the client's current site or brand. And once I get these three columns completed, I'm ready to start creating visualizations of those adjectives.
Ultimately, these three groups become the themes for my style tiles: Conservative, Moderate, or Aggressive. On each, I've taken the actual words that the client used and designed them into buttons, typographic treatments, or illustrations that represent what I think that word means visually.
And style tiles are an assembly of pieces -- they don't have to be thoughtfully placed together in a holistic aesthetic like Mood Boards (see below). They are purposefully chunked so that a client can say "yes" or "no" easily and without being distracted by other elements that are imperative to the overall "mood." Again, the goal is to speak a common language in order to avoid misinterpretations later, after problem-solving decisions have been made.
So, for example, if a client says "Whimsical" and their current brand is incredibly conservative, I would probably create a button in a script font that literally says "Whimsical" and place it on the Aggressive tray. That way, the client can consider how "Whimsical" literally looks as I interpret it visually, and that client can consider how "Whimsical" fits within the existing brand or its future goals.
And even if the client changes her mind or doesn't like it, again, the conversation is key. I immediately start asking new questions to achieve a higher understanding of our shared visual language.
Style Tiles Aren't Mood Boards or Comps
What makes a style tile unique from other tools is that it is specifically a method for establishing a visual vocabulary between the designer and the client, rather than setting a "mood" or defining elements that will ultimately be included in a full layout. (Though obviously the style tile elements may indeed make it into the final design).
Throughout my design career I have had the opportunity to present comps, mood boards, and style tiles, and I have found that it is really important to use the right tool for the job. Mood boards work great for startup clients or opportunities where you are designing an identity to go along with a website and you have very limited budgets. It's great for discovery and brainstorming; distilling big picture feelings and ideas into more clearly defined visuals.
However, when a client has already gone through a branding process, particularly ones that have put a lot of effort into crafting a very specific personality and "mood" for their organization or company, the "mood board" deliverable can be a bit off putting. Many clients are looking at bringing their brand online or reinvigorating it, not re-creating it. And this is where style tiles really shine. A mood board can be too vague, confusing, or intangible for a client to make the connections between what they need and what you are going to eventually build for them. Bringing a brand online is more complex than just taking print collateral and adapting it to the screen, but it doesn't mean the client needs a new logo or color scheme to establish an overall mood.
And a comp combines all of the research and analysis behind a wireframe and layout with style, and this can be a very difficult thing for a non-designer to understand. The entire process of layout and user experience discovery can be halted because of color, pattern, or application.
While they definitely influence each together, separating the two discovery processes allows for iterative progress to be going on simultaneously. By the time you get to the comp stage, the client has had dozens of conversations and checkins regarding how you arrived at the composition. High fives all-around!
While style tiles work really well for the Phase2 design team and me, I understand that it may not be the best method for everyone. But sharing information across our specialization and communicating expectations to our clients makes for a stronger design industry all together. So when clients know what to expect working with a designer, it makes designing awesome stuff a lot easier.