An Event Apart: Style Tiles

by Luke Wroblewski November 12, 2012

At An Event Apart in San Francisco CA 2012, Samantha Warren shared her process for using style tiles to get designers and clients coordinated on visual design decisions early on in the process. Here's my notes from her talk:

  • In our industry, change is the only constant. Style tiles are a way to make design work for adaptive processes and designs.
  • The Web designer’s dilemma: you need to work with stakeholders and clients. Both want a good product but might interpret design discussions differently than designers. How can you bridge this gap to make a great product, keep users in mind, and also make clients happy?

Enter Style Tiles

  • Traditionally designers have presented clients with a couple of static design comps. This often leads to superficial discussions of picking and choosing elements. Designs that pull elements from different comps can turn into frankencomps that don’t have cohesion or balance.
  • Style tiles don’t limit your ability to adjust designs later on. You’re building a framework to be more creative over time, to build a sustainable system rather than static designs.
  • Style tiles are design deliverables consisting of colors, fonts, and elements that communicate the brand and essence of a design. You can include whatever you need to communicate different style options for the site you are designing.
  • Scale of fidelity for design deliverables: mood boards to style tiles to mockups. Mood boards can be too vague and mockups can be too specific. Style tiles strike a nice balance in between.
  • Mood boards are great for discovering and establishing a new identity for a client. Comps and mockups work well for sites that are being refined rather than redesigned. If you set expectations up front that there will be few revisions, comps can be an effective design deliverable.
  • Style tiles are neither too vague nor too specific. They help get designers and stakeholders/clients on the same page.

Using Style Tiles

  • Separate style and structure. Clients can get stuck on things like colors or small visual design details. Separating out these considerations can speed things up during the design process.
  • Listen, Interpret, Define Visual Language, Iterate.
  • Listen: ask questions to determine what clients really need. Hold a kick-off meeting to get everyone on the same page up front.
  • Goal orientated questions set the tone that personal preference is a not good metric for evaluating designs. Instead generate a definition of success that is separate from taste.
  • Metaphor questions: server as an ice-breaker. If this site were a ____, what would it be and why? The purpose of these questions is to dig into the “why”.
  • Interpret: identify common themes by highlighting common (blanket) adjectives in responses from clients.
  • From there, group adjectives into lists of similar, close to, or far away from current brand. This can represent different directions for a style tile.
  • Define a visual language: it doesn’t need to be right: it just needs to start a conversation. Use the groups of adjectives to explore.
  • Iterate: a lightweight deliverable allows you to make quick adjustments to a design language. Iterating on a style tile is more efficient than iterating on a comp.
  • Design a system not individual pages. Look for reusable components that can be employed in different parts of the site.
  • Style tiles are the missing design artifact. They fill a gap between brand essence and detailed comps. Client and team collaboration can be improved by getting on the same page about visual elements early on.
  • Style tiles are the corner stone to a successful responsive design process: they focus on systems rather than pages.