Style Tiles & Designing a Better Process for Design

Angela Madsen // March 2017

Historically, a designer would leverage a conversation or two and a design brief to make three mockups of a design to start the conversation in earnest, with the hope of one of those mockups being close enough to the spoken and unspoken needs and hopes of the client to serve as the blueprint for the rest of the design. The key to most design client failure is that unspoken aspect – and to be clear, it’s not malicious, it’s not a test. In it’s simplest state, the presence of new ideas act as a light that sometimes brings ephemeral or incoherent other ideas into enough sharpness to be able to express.

How style tiles help a designer

What designers are doing with the advent of tools like style tiles, wireframes, and prototypes is breaking down the design process into digestible pieces to facilitate client communication and decision making. They are a way to focus on finite design problems and spark conversations and problem solving before specific use cases can influence decisions. Exploring combinations of typography, color, texture without getting caught up in how that comes together on a page allows for better conversation with the client, focusing on a few decisions at a time. 

Designers know that iteration is the key to the best final piece. If you’re lucky enough to consistently get the best idea the first try, iteration is still necessary to prove to the rest of the world that you were right. Two of the biggest components of design – color and typography – seem nearly infinite, especially when you are looking at a blank page. 

The style tile process takes iteration to the next level. They allow a designer to focus on the few key factors that will inform the look, feel, and evocation of the visual space. By being able to iterate quickly through a succession of combinations, a designer can come to terms with the hits and misses.  The best thing, though, is that a designer does not invest so much time in one perfect visual that fails because a factor wasn’t considered and/or communicated. Because style tiles are not precious, feedback can’t begin to tacitly question what a designer is doing with their time…or life. 

So breathe a sigh of relief. You can now fall on your face and pop up like a slapstick comedian. 

Better, you can say, “I meant to do that,” with complete honesty. 

How style tiles help a client

Style tiles are there to be wrong. Really. The first time a client sees a set, they are not supposed to see one and say, “That’s it. Nail on the head.”  By interchanging pieces - a button here, a header there - they start to understand how design makes a voice. By giving them good choices, you’re setting them up for success. By having them choose, you are giving them a chance to evoke unstated goals and they are invested in the final product. 

There might be a few clients out there who will comment along the lines of, “doing your job for you,” but they aren’t. You’re giving them a small, finite set of good choices that meet the criteria they have communicated. Chances are that they will have opinions about that set, but if they don’t it’s ok for them to communicate that any of these will do. The designer can go back, pick the bits and pieces that were scattered through the three pages that they thought were most successful, and combine them into a final. The chances are pretty solid that somewhere along the line the style tiles garnered some kind of reaction, and those reactions can inform the designer’s choices. 

How style tiles help developers

Style tiles start with the granular bits that are globally used. It doesn’t seem like they could possibly help a developer (or another downstream implementer), but they do. How? They are a beginning point of deeply instilled consistency.  

The goal with this kind of design endeavor is to create something that will survive in the wild, leveraged by others who may not necessarily know what goes into good design – but who do know when it’s bad. They won’t fix. Depending on a developer to understand you meant for white – not black – text on a blue ground sets everyone up for failure.  

Ultimately the designer is focusing on discrete components and making decisions before they are needed. Consistency is easier to stick to when building on pre-defined parts, defeating unintentional chaos. Hybrids are thoughtfully created. With deeply instilled consistency, it’s easier to create summaries for downstream use that aren’t so complex that developers think it’s easier to fix mistakes than weed through the design documentation. 

The style tile process

The designer will spend the most time on style tiles, but in a perfect world there will be others on the team. Design can happen in a vacuum, but it’s inevitably better when it doesn’t. As a part of iteration the designer will test and throw out hundreds of combinations, most of them taking a second or two to apply and discard. Ones that meet a certain level of cohesion get to stay in place and an ecology built around them until the designer has enough tiles to talk with their team – it might be four, it might be nine, and it primarily depends on the complexity of the voice the client wants. These are shared with the team and talked through. Why? Because fresh eyes are fresh ideas and insights.  

The insights garnered from the team are used to make three tiles that will be put in front of the client. The presenting team’s favorite elements should be scattered throughout; by ensuring they aren’t all in one piece, there isn’t one tile that stands out and subliminally indicates which is more ‘finished’ and ‘right’.  Conversations are sparked, more is learned about the client, their thoughts about their culture, and their design aesthetics. A set of tiles is literally cut up and taped to the board as agreements evolve.   

By listening closely to the conversations as well as noting the specific items they agreed on, we have an even keener understanding of the voice the client is aiming to build. The same internal process (iterate, team meeting, condense) happens again, but this time with a much tighter ecology of potential. When the team is satisfied, the final style tile is presented for approval. 

Now, when we move into the next step of the process, we have a set of design decisions that can help to influence the next set of solutions. We have moved from a blank page and some conversations about project goals and maybe a design brief, to a tangible constellation of design components and a deeper, more thoughtful and sharper understanding of the client’s stated goals and unstated hopes. 

Understanding style tile impact

Water Lillies by Claude Monet, 1916-19

I have roots in art; my final concentration in college was stone carving, and my most recent painting was completed a couple months ago. One of the things I learned as part of my degree was that a good artist knows how to leverage the perception of the viewer.  

Everyone fills in gaps. Everyone. Impressionism and post-impressionism, especially, depends on this – otherwise Monet’s water lilies are so many pink blobs. The flip side of this is that everyone is also making patterns in their head – mostly subconsciously – and when those patterns aren’t consistent, it throws the viewer off. More thought goes into seeing what’s there and frustration lurks around the corner. Nuances are fine, as long as they are applied in some kind of consistent context – a subset pattern. Chaos is not fine. 

Style tiles set up an underlying network of design decisions that are already consistent. It’s not unusual to tighten up design as we come closer to a final document in a standard design process. Leveraging style tiles as part of our process, the design starts tight, and we’re thoughtfully adding relevant nuance as we’re building out the design. 

Want to learn more?

Style tiles (in conjunction with a pattern library) enable us to create iterative and repeatable website patterns, while simultaneously enabling style changes. This creates consistency while allowing for customization within webpages.