Serve customers faster: An introduction to rapid design prototyping with Style Tiles

Will Little

Equipped with your brand foundations, name, and logo, a design strategy that saves an enormous amount of time when building a software product is creating and iterating Style Tiles.

Style…What?

A helpful description comes from Samantha Warren’s site styletil.es:

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

Here’s an example: 

Assuming you have already done the work of forming a moodboard during your brand foundations process, now is the time to translate those visuals into product design by experimenting with fonts, colors, patterns, line heights, etc… under your logo. 

Create a few different versions of these and bounce them off your team, advisors, and initial customers waiting to pay you money for (and/or meaningfully engage with) your product. While your crew is there to support you, ultimately you (the Startup CEO) need to make the final call on what you are going to roll with. As long as your customers are cool with it, don’t worry about upsetting that one crazy advisor or team member that insists on different colors or fonts (remember, it’s good that they are passionate about it!).

Wait…Can’t I just do all this in the mockups? 

Again from the styletil.es site: 

Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room. An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?

In other words, Style Tiles are an extremely fast way to translate brand foundations into concrete design elements, which can then be used to create mockups (or better yet, direct visuals in code). This enables fast design prototyping in order to arrive at the look and feel that your team is happy with sooner than later. 

Solving the screen size problem

There’s another practical advantage of using Style Tiles to consider: the maddeningly huge variety of screen sizes out there. While most web designers will deliver a standard desktop-width mockup for review (maybe including a mobile version as well if you’re lucky), rarely have I ever seen mobile, tablet, and desktop mockups delivered at the various orientations that are common. You can see how there’s a practical problem here that needs solving, and Style Tiles do the job nicely. 

A word of caution 

The whole point of using Style Tiles is to get your team quickly on the same page visually with colors, fonts, interface elements, patterns, etc… in order to save time during the wireframes and mockups stages. The goal, of course, is to start writing code as soon as possible as serve customers waiting for your product.

Therefore, don’t overthink it. Once your team has agreed on Style Tiles and you’ve made a decision, roll with it. Your accent color, typeface, font size, line height, etc… will likely get tweaked before production anyway as everyone tests the product on their own devices and weighs in with their (usually strong) opinions over stuff that usually doesn’t matter. What matters is delighting customers. So use Style Tiles as a mechanism to serve customers faster. 

Author’s note, this is the 25th post in a series of articles outlining a framework for startup operations that my partners and I developed at Prota Ventures. We’ve recently built a web app that leverages the framework to help founders create new ventures. Check it out for free here. Finally, subscribe to my newsletter and I’ll let you know when I get new content up. Thanks! Photo Credit.