Communicating With Style Tiles
Style Tiles by Samantha Warren have been a part of my visual design process for a few years now. On the surface they simply illustrate possibilities; fonts, colors, the general direction for styling a website or application. Their ability to evoke reactions usually reserved for more polished work has made them a staple.
Like a lot of tools and processes, tiles are about saving those lost minutes that add up to hours and getting clients on board with a direction as soon as possible.
As a freelancer, tiles have reduced the budget I normally put into early visual design exploration; allowing me to move that time into subsequent activities like high fidelity mockups, component revision, prototypes, and so on. It’s a radical shift for visual design. We’re able to spend less time on exploring concepts that might not work and expedite medium-to-high fidelity deliverables our clients can understand and critique!
If you’re a visual designer (fist-bump) I suspect you’ve already used Style Tiles on a project or two so I’ll skip the overview. However, if you’re not yet familiar with them I strongly urge you to check out styletil.es for the highlight reel. In this essay I’ll share what’s worked for me, how my approach with tiles has changed over time, and how other parts of my design process integrate with tiles. Waste not, want not.
Intent And Follow Through
The most important thing I’ve learned about Style Tiles is that they’re a conversational conduit. Before a tile is made and as it is presented a lot of talking has to happen for it to be successful. The hurdle: tiles can easily fall into the same traps as mockups:
- There’s temptation to immediately open Adobe Illustrator, Photoshop, Sketch App, or soup du jour and move pixels around even though I have little to no input. Whoops – I totally forgot to ask my client what they wanted! And let’s be real… it’s hard to build intent without input.
- Our deliverables are narrative-centric but it’s easy to forget the follow through; telling a good story about the tiles. Clients want to know what got me here. “Why are there rounded corners? Why green and not blue?” Ironic, since storytelling is in our DNA! You’d be hard pressed to create anything without inadvertently having a story to go with it. Case in point: I’ve written an essay about Style Tiles purely because I use them and appreciate the success they’ve garnered.
By avoiding these two traps I’ve upped my storytelling game and gotten some “I like where this is going” head nods with clients. It feels good to earn trust so early in the scope of things; especially if I have to spend it later. Sometimes the head nod doesn’t happen right away but that’s okay. Every dismissed tile gets me closer to the right one.
It’s the kickoff meeting (welcome!) and there are no visual design assets to share yet which means I’ve got a lot of talking and notetaking to do first. No back seats. There aren’t participation ribbons being handed out when our project wraps up. Now’s the time to find direction.
My goal as a visual designer is to have a set of tiles ready for review by the next meeting (that’s how I like to pace things anyway). I’ll begin by asking questions in a way that guides a client. That, and listening. Always with the listening. I show up with a notebook and a few boilerplate questions about their product, goals, and possible benchmarks as well as their “Who We Like/Dislike” list; sort of a contextual inquiry.
Answers vary, but they will clue me into (1) how aggressive the project’s timeline will be and (2) where I can focus visual design effort. If the timeline is aggressive (ding-ding-ding-ding!) that’s all the more reason to build a round of Style Tile explorations into the budget. Again, it’s a speed thing. I’ll find the visual direction faster this way.
I’ve found that talking about client goals and values represents one-half of what’s needed to build a set of tiles. Adjectives represent the second half. I want to leave a kickoff meeting with a long list of describers. People are very good at weaving these into the conversation so I stay alert and write them down as soon as I hear them. I could hear things like:
Friendly. Inviting. Authoritative. Serious. Authentic.
It’s a veritable Mad Libs of clues. Write them down, tie those words into the Style Tiles after interpreting them, (Samantha does an amazing job describing this process on styletil.es) and then reap the rewards in your second meeting:
“We wanted to avoid anything that looked playful or childish so I chose this typeface because of its authoritative look, based on these qualities….”
That’s a bit generic, but I’m sure you get the gist. Do this and you’ve created a correlation between your work and their words. I have yet to find anyone that does not appreciate this.
Sometimes my list of adjectives come from comments where a specific trait was not said aloud. For instance, I once heard a stakeholder say, “The news in our experience is going to be fairly negative. People should feel like they want to come back despite that.”
That’s gold; total ah-ha moment. It informs my design direction, breaks my preconceived notions, and let’s me know they’re aware of how they come off. Here’s the list of adjectives I came up with based on the comment:
While that stakeholder didn’t say those words exactly, they’re certainly at the heart of his concern. Based on my interpretation I can now experiment with the elements and principles of visual design; line, color, form, space, rhythm, emphasis, and so on to build a few tiles. Creating divergent tiles will be easy since there’s more than one way to interpret what he said.
Normally, I’ll create 3–4 different tiles in a day. Fast and fruitful. The outcome: I gained trust during the Style Tile review because I drew my intent directly from their adjectives and their stories. Plus the tiles were all visually appealing in their own ways, giving them a peek at some great directions!
UI Patterns Are Money
When a Style Tiles has been unsuccessful for me it’s usually because it didn’t have enough clarity or context built in. Showing isolated fonts and colors doesn’t do enough to illustrate a tile’s effect on a design system. For clients to understand the Gestalt we need those atoms to come together into something molecular. Basically, I want to show part of a mockup without spending time on, well… an entire mockup!
That’s where patterns come in; probably the best thing in a Style Tile and where I put most of my effort. Think of them like a Dribbble shot, around 400x300 pixels would suffice. Patterns bond and test experiments with the elements and principles of visual design, like a cropped view of a potential future. Patterns make it real for a client.
The catch is that I should create patterns that make sense. They can’t be totally random. Luckily, I can look to another part of my design process for that; sketching.
Don’t Throw Away Those Sketches!
I turn to my hand drawn sketches when I build patterns. Group sketching has been a part of every good workshop I’ve been a part of and hopefully yours too. It’s likely that we didn’t come up with an approved model for our UI that first day, but there’s certainly enough in those sketches to create some patterns for Style Tiles.
- Start by identifying sketches that represent main components like site headers, important content areas, forms, or interesting image/text relationships; look for compelling compositions and variety
- Pick at least 2–4 sketches that are the strongest examples; those are usually the ones that the group felt the most positive about
- Finally, each tile repeats the same patterns but styles them differently based on its own emerging look and feel
Clarifying The Role Of Patterns
To avoid any confusion I let my audience know that patterns are not finished, pixel-perfect mockups. Give them the backstory:
- Patterns help others understand the implication of each emerging style
- They don’t get us caught up in the details of a mockup
- They’re an important step in not surprising anyone during later, high fidelity phases of visual design
Earning Trust Faster With Style Tiles
Every step along the design process you’re either earning trust or you’re cashing it in on an idea that might be a little risky. You might find yourself saying something like this:
“Remember how well those Style Tiles worked out when we began? You were unsure but they ended up being helpful, right? I’d like to think I earned your trust so I’m hoping you trust me now to try the following…”
I advocate for tiles, in part, because of the way tiles collectively increase comprehension so early in the game. It’s an opportunity to show a client my thinking, my approach, and how much I value them and their feedback. Moreover, having trust banked at the end of a project could mean a client might invite me back.
Going Above And Beyond
Variety is a good thing and I’ve eventually learned to not be afraid of creating a Style Tile that a client didn’t ask for. It can be worth spending some trust early-on. If a client wants “light” you can certainly show them one that’s dark.
The first time I was asked to over-deliver and create an assumption-busting tile it made me uncomfortable. “But they didn’t ask for that” I blurted out.
Luckily I had a great design director who pushed me. I’m fortunate she saw my hesitation and corrected it. That outlier became a popular option and while it did not gain ultimate approval it got our clients excited about the future and working with us.
I’m paying it forward here and encouraging you to bust some assumptions yourself. It’s a small risk with a lot of payoff if your client is receptive to it. After all, they’re paying us to think!
Naming For Comprehension
What’s in a name? Well, a lot actually. There’s so much happening in a Style Tile that it can be difficult to refer to each one by its characteristics. Especially if there are similarities.
“The light one with the rounded corners, Proxima Nova and bright orange buttons.”
That could be two of them. Or all of them!
I’ve taken to naming my tiles because it helps aid recognition and keeps the conversation flowing. As long as the names I use somehow reflect what’s happening in the Style Tiles there’s a lot to choose from; comic book characters, greek gods, or even sports cars. I’ve learned to avoid names like tile-01, tile-02.14.2016, or tile-C. Numbers and random letters don’t clarify like distinct names do. If you watch shows like Fixer Upper on HGTV, you’ll notice the hosts don’t call potential new homes “House A” or “House B.” They’ll use more descriptive names like, “The Movie Theater House” or “The Old Equestrian Ranch.”
Tiles Have A Short Lifespan
Finally, the goodbye is inevitable. We’ve done so much to get our tiles to maturity; even given them names! All so one of them could become the approved direction for visual design. However, there’s going to be a point where an approved tile stops being useful. Either I moved onto subsequent exercises like element collages or mockups, or maybe a developer I’m working with has started to codify the design direction. These are hints that it’s time to archive my tile and refrain from using it anymore.
Tiles are a valuable tool for exploration but they won’t align with a mature design system. If you compare them side-by-side it’s like night and day. That said, they’ve become one of my favorite go-to’s for kicking-off visual design and have certainly made communicating my design intent easier. Thanks to Style Tiles I have a sound foundation to iterate from.