Design and Prototyping for Drupal

Chapter 4. Using Style Tiles to Explore Design Ideas

A style tile (sometimes called a mood board) is a simple collection of images, fonts, colors and other inspiration to inform your design. The important difference between a sketch or layout concept and a style tile is its lack of structure; while a layout comp is meant to represent an entire page, a style tile is best kept simple. In a style tile, you collect elements that make sense for the project, shuffle them around, and see how they work. Style tiles are also meant to be works in progress; while the hope is that layout comps will only reach the client when they’re in good enough condition to be close to final, a series of style tiles can be shown to a client at early stages of the project, to gauge aesthetic preferences and make sure you’re on the same wavelength. They’re also great for fleshing out ideas, or keeping track of visual stories for future projects. Figures 4-1 and 4-2 are style tiles for the redesign of my studio website, currently in progress.

Figure 4-1. An initial style tile for tzk-design.com

Figure 4-2. A second style tile, with a different feel to it. After considering the two, I decided to build on the approach in this one, which I refine in Chapter 7

As you can see, this isn’t a complete layout as much as a visual exploration of fonts, colors, and treatments for different areas of the site. When it comes down to theming the site, I might end up doing something entirely different—but at the very least, I’m developing a sense of the mood that I’m trying to create, and working out how the different types of images I will need to show will be displayed, how headlines should be treated, etc.

Style tiles can be created at any stage of a project. They’re especially good for exploring ideas early on, while you’re wireframing, as a way to collect your thoughts about visual solutions before you are ready to explore them with the client. The most important thing to note about them, particularly if you plan on discussing them with clients, is that style tiles should not look like a web page. Their purpose is to explore visual elements and treatments, not to create a layout for the website.

The benefit of showing style tiles instead of design layouts is similar to the benefit of starting a discussion with sketches instead of a more formalized wireframe:

It’s fast

A set of style tiles can take as little as 1–3 hours to put together, often even less. They’re also much easier and more efficient to iterate than full design comps; rather than fleshing out these ideas in full designs that then have to be iterated again and again, you can use style tiles to quickly identify a set of visual guidelines that will guide the overall look and feel of a site quickly and cheaply. In fact, I’ve sometimes ended up doing style tiles while doing research or information architecture for a client project, throwing ideas into a Fireworks file as ideas come up.

It’s modular

Because you’re using the style tiles to explore visual approaches rather than to set up a specific set of layouts for a given section of the site, style tiles fit in very well with the modularity of the Drupal design process. In some cases, you can even start theming based on style tiles instead of having to do full layout comps.

It brings the client into the conversation

This increases their confidence in your approach, and lets them see the design process happening in front of them. Having the client involved in the conversation at an early stage in the process helps them feel like they have “ownership” of the design, which increases the likelihood that they’ll approve the proposed design when you’re ready to finalize the look and feel of the site.

It helps keep the conversation focused

By walking the client through a set of style tiles, rather than a complete layout, you can keep the conversation focused on aesthetics, rather than content and placement—which, ideally, will have already been settled by the time you’ve started discussing the style tiles. This helps keep everyone focused on the visuals at the time when you’re actually supposed to be focused on the visuals.

What you’re doing, in essence, is setting up a series of stylistic conventions to be used across the site’s various elements. This can help you save time by letting you go straight from wireframe to implementation, using the style tiles to guide the theming process, rather than creating design layouts that dictate the design of a specific page, but can’t necessarily be carried over to the other pages.

Once you’ve iterated your style tiles to the point where you and the client agree that you’ve found the best visual approach, you have a choice in how to proceed. If you’ve already started getting some content into a development site (which you ideally will by this point), you can start applying these standards across your site’s theme, and give clients the chance to see how these visuals will play out with real content. If you’re still working out issues with specific types of content, or special areas of the site, you may want to start working the style tiles into full design comps, preferably with examples of real content from the client’s site.

Whether you go to theming straight from your style tiles or you go from style tiles to full design comps, it’s important to consider not just the basics, like headers, paragraphs, and sidebar boxes, but to think holistically about the types of content and functionality that you’re going to be building. In Chapter 5, Design Layout: Covering All Your Bases, we’ll look at some of the elements that should be considered when designing for a Drupal implementation.