Style Tiles: somewhere between moodboards and comps

The Web Design Challenge

If you're from a design background, you're probably familiar with the process from project kickoff, discovering client needs/wants, mood boarding, comp development, feedback/review, iteration, etc.

Design is already tricky and very dependent on individual opinions. When we translate this process to web design specifically, think of all the additional complexity the creators (developers) must face in addition to common design problems: how will this display on a computer? A phone? What happens to these elements as the viewport ratio is different?

For problems like these, mood boards and fixed mockups just won't do. There's too much up-front time and investment in the initial designs just to get an idea signed off, and even then, we're still not capturing every experience.

Enter style tiles.

What are Style Tiles?

Somewhere between a designer's mood boards and fully developed comps there is room for hybrids called "style tiles."

Think of a higher-level summary board to get across a visual identity, without going as vague as "inspiration" references and not as specific as pixel-perfect mockup renderings. This is a single page to convey style and get an emotional reaction and feedback from clients.

Style tiles are presented to a client along with wireframes and other references to conveys the direction the team is headed without getting too far ahead of themselves. The client is paying for the project, after all, so their decision counts... a lot. Thus, this allows the team to complete smaller chunks of work and show their progress, without spending days on design only to be totally off-base.

Design Elements

Style tiles include things like color swatches, typography sets, textures, use of white space, lines, etc. They should convey a "feel": is this more illustrative? Typographic? Photographic? Clean or heavily textured? Modern or old-fashioned?

The Benefits

• Save time designing everything all the way before coding it out.
• Provide visual cues to guide client's wants/desires.
• Have client speak in often, feeling more involved as a contributor.
• Give client a point of reference that everyone can agree on.
• Not limited to one layout/dimension.

Design Process with Style Tiles

1. Ask questions to stakeholders and get emotional reactions
2. Create 3-4 style tiles and draw clear connections to client's actual words
3. Iterate with client. Combine anything? What do you like?
4. "Final" product (we all know nothing's really final)