In her Faster Design Decisions with Style Tiles presentation at An Event Apart in San Diego 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.
Diving into responsive design projects can be daunting. Old design practices are cumbersome when thinking in terms of web systems that will span a wide variety of devices and dimensions. What if we had an artifact that not only helped us communicate with clients, but allowed for developers to jump into the project earlier? Style tiles are a design artifact consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They create a strong foundation early in the web design process for talking with clients, establishing a visual language, and working iteratively with developers. Learn how to apply design principles and bring confidence and agility to your process by using style tiles.
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.
- How do we adapt to the world of change
- Efficiency: are fundamental in our work in our process
- The web sites needs to work everywhere. Desktop, mobile…
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.
- Do we just inherit existing processes or do we change how we work to deal with today’s Web environment?
- 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.
- Mood boards can be too vague. Comps and mockups work well for sites that are being refined rather than redesigned.
- comp/mockup is too precise (clients get to caught up in details)
- 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.
- You build a sustainable system rather than static designs or pages.
- 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.
- Style tiles are neither too vague nor too specific. They help get designers and stakeholders/clients on the same page.
- Style tiles 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.
How to use 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. Bring the clients 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 like a therapist more 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.
- 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.
- PBS Newshour style tiles
- The role of the designer is basically that of a good host, anticipating the needs of the guests.
- Style tiles is just the first step
- Pattern library, a tool kit to use all in an organisations
- Component library for twitter.
- It’s about delivering a system and not individual pages
- Look for reusable components that can be employed in different parts of the site.
- Atomic design (Brad Frost) 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. That will get them the deliverables that will help them.
Style tyle process in action
- Ask the questions (metaphore). Get the adjective to use to make the tiles
- Gather the adjectives together in same, middle, different (to the current site)
- Match them to make tyles (the adjectives are influencing the tiles)
- Wire frame, architectural aspect
- component library (icons)
- Create unic pages and templates
- Final design and how it works across devices
- The problem is not building a better site, its building a better process. If we share our processes, we all get better.