An Event Apart: Style Tiles

by Luke Wroblewski February 17, 2014

At An Event Apart in Atlanta GA 2014, 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:

  • We live in an industry where the only thing that is certain is change. Style tiles is a process for designing effectively in a state of constant change.
  • Do we just inherit existing processes or do we change how we work to deal with today's Web environment?
  • 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? Words are not enough.
  • We have to find the balance between timelines (efficiency) and good design. We need design systems that work in this world of multiple devices, CAMS management, and rapid change.
  • Clients, stakeholders, timelines, multiple devices, and more are reigning down on designers. How do we cope?
  • 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.

Enter Style Tiles

  • 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.
  • 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.
  • Comps are specific to a device width, but style tiles are device agnostic. They are not tied to a specific screen size.
  • 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.
  • 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. But with lots of revisions, keeping comps up to date can be cumbersome.
  • Style tiles are neither too vague nor too specific. They help get designers and stakeholders/clients on the same page.
  • 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.

Using Style Tiles

  • Bring your clients with you along the journey of figuring out a style. If they come with, they'll be more vested in the result.
  • 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. Don't just start talking at a client. Bring them in and make them part of the process.
  • 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. What are the top user goals and top business goals?
  • 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”.
  • As a designer, you are often more like a therapist than an artist. You need to understand the point of view of your clients.
  • 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. There's a bit of magic here but you are just aiming for a place to start.
  • 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.
  • Style tiles are just one tool. Design a system not individual pages. Look for reusable components that can be employed in different parts of the site.
  • Elements can be combined to create components and compound components. These elements are combined into templates and designs.
  • An effective system finds the right balance between consistency and variety.
  • A style tile can be delivered with a component library, some templates, in addition to the style tile. Put your clients in a position to succeed. Give them the deliverables that will help them.
  • The problem is not building a better site, its building a better process. If we share our processes, we all get better.