Getting Started with Design Tiles


Last month, Eric posted about Style Tiles and their use in the process of designing a site. I heard about the idea at ConvergeSE, a conference in South Carolina dedicated to the web design, development and marketing where the creator, Samantha Warren, was presenting. I wanted to take it to the next level, so I created Tile Generator, a site that quickly uses CSS to convey the visual essence of a site for a client.

The Problem: “FrankenComp”

It all starts so well…you design two different comps for a client, who looks at them and remarks:

“I really like the buttons on that one, and the pattern on the second one. If you use the first shadow on the second slider I think we’ll have a winner.”

After several rounds of trying to shoehorn a client’s requests into a workable concept, you end up with what amounts to a frankencomp…

A frankencomp is when the client has so mutilated the original designs that they no longer follow any design pattern at all. Not to mention that you spent two hours on each comp, which will never see the light of day.

Enter Tile Generator

Fortunately, there is another way. And they’re called Style Tiles. At the root of a Style Tile is the idea that you can convey the essence of a website before actually creating most of the mockup. All you need to do is illustrate the colors, lines, patterns, and typography associated with the visual brand. That way, you and the client are on the same page before you sink too much time into an enormous comp. A style tile has the basic elements of a site already stubbed in. That’s stuff like headings, color palette, the logo, and some text styles. It also includes some adjectives that describe the overall feeling you want to produce in a design. That way you can communicate with the client about the site aspects that actually matter.

For those of you that prefer, you can start with code by using That way, you can start building reusable CSS that will transfer into the finished product. There’s no reason to do work twice anymore! TileGenerator starts with a blank slate of CSS, and builds the visuals without needing to touch the boilerplate HTML.

Asserting Yourself as a Designer

It’s always been amazing to me how squeamish people/companies become when they hire a designer to do creative work. Don’t get me wrong, clients pay my bills. I’m not hating. But too many clients want a photoshop-monkey. Using a system like Style Tiles asserts your ability as a designer by forcing the client to communicate the essence of what he/she would like in a site, and trusting you to make good decisions with the rest. You can allow them to do that by speaking the language of how a site “feels” and helping clients see adjectives like “clean” or “bold.” Once they really believe that you understand their brand, you’ll have much less trouble pushing through design decisions.

The Style Tile Methodology

Samantha Warren has put together a pretty impressive methodology at Her process goes like this:

  1. Listen Start by asking questions that assess the client’s stated and unstated goals. Also, be sure to have every contributor at that meeting. nGen Works reserves the right to renegotiate a contract if new players enter the design/development process.
  2. Interpret Combine the adjectives that are most important to the client with the basic elements of design (line, color, shape, etc.).
  3. Define a Visual Language This is where Tile Generator comes in. Using what you know about the client’s needs, compose a Tile to show them.
  4. Iterate Take those tiles and squash them together, add, remove, or scrap altogether. You can do this, because you only spent 30-60 minutes on the tiling process.

Where to Go from Here

It’s so important to define your process when dealing with clients. Maybe Style Tiles are the right decision for you, or maybe it’s something else. But perhaps it’s time to reconsider the mockup as a design tool and start using Tiles instead. If you make a sweet tile that you can show off to the world, tweet to @TileGenerator.

We’d love to see it!


Stephen Bateman

I worked with the 8BIT team for a year, then started Right now we're building GarnetReport into a sweet News site for students. I love British authors and storytelling.

What would you like to say?

Your email address will not be published. Required fields are marked *