Make style tiles a time-saving step in your web design process

Style tiles create an opportunity for clients to participate in the outcome of the final concept before the heavy design effort begins.

Styling_feature

Style tiles made sense to me in theory. But for quite a while, I struggled to make them work in my own web design business. They felt like an extra step. Clients didn’t get them.

Before designing for mobile became a “given”, I’d start my process by designing a whole homepage concept for clients. In fact, I’d design 2 or 3. It was so.much.work.

I was focused purely on aesthetic.

Fortunately for my clients, I was fairly intuitive about website flow and structure. But I was essentially starting at the end with a full website concept. As a result, I didn’t encourage my clients to engage with me in finding the best solution. Revisions were plentiful and cumbersome.

At the point of presenting those concepts, I was done with the design. But for clients, it was just the beginning. Of course they wanted to have input.

Because I wanted to continue to attract highly collaborative clients, I stopped often to assess my process through their eyes. Starting at the end was not the answer.

How could I actively involve clients earlier in the process?

Over the course of a few projects, I started separating form from function. I felt clients needed to engage in the structure conversation as much as they did in styling. If I could get input at critical points early along the way, then there should be no reason for large changes when we got to the final concept.

My first few attempts to introduce style tiles into my process failed, my clients were SO confused. I almost abandoned the idea of using them.

I found if I shifted my thinking from – Here’s your website elements to Here’s my ideas for a starting point for your website concept – the role of style tiles fell into place.

Style tiles became a huge time saver – rather than extra step – in my process. Styling became an opportunity for clients to engage and influence the actual outcome of the final concept before the heavy design effort began.

How do I present style tiles to clients?

The way I present them helps clients understand the role of style tiles in the web design process.

  • I present them as potentially confusing. Style tiles can be a little confusing, please read this message thoroughly.
  • I make sure clients understand that this is not the final design concept. This does NOT represent the layout of your homepage. By asking for your feedback now, I can eliminate spending hours going in the wrong direction by honing in on the right direction and giving you an opportunity to participate in this part of the process.
  • I let them know that this might take a few rounds (I’d rather do it here than after the homepage concept is complete). I can almost always combine all your favorite elements into one Style Tile. I might get close in the first round, but it also might take us a few versions to get it right (that’s okay!)
  • I require feedback to be provided in a very specific way. Please provide the following feedback by replying to this message: What do you like? Not like? Any style tiles we can eliminate? It helps to say things like “#1 is too drab, #3 is too bright, #3 could be more neutral”. Think of your feedback in terms of – it’s too much _____, not enough ____, or just right.

Where do style tiles fit in the design process?

I introduce style tiles between wireframing and the final concept. I prefer clients focus on the flow of the website first (wireframes), without the distraction of aesthetic (styling).

I tend to modify what I include on a style tile based on my client’s level of collaboration and understanding. If I have visual research that’s a bit all over the place, I might start with rapid, lightweight tiles to narrow things down first. Then I’ll create a more complete-looking tile that might include ideas for hero image, offerings or the footer.

It’s completely normal for me to have 2-4 revision cycles in the styling step. I’d rather work through design ideas in a nimble format. If I move straight to a concept without this step, I could spend hours going in the wrong direction. Using style tiles this way allows me to include my clients early on, rather than surprising them at the end.

I no longer send concepts to clients and hold my breath. The final concept is the inevitable result of our collaborative work.

How are you using Style Tiles in your web design process? If not, what’s keeping you from implementing them? Head on over to the Drama-Free Design Collaborative on Facebook and tag me and we’ll talk about this.

How to use style tiles in your freelance web design process. How to present a style tile to your design client.

Author: Christine Thatcher

Christine Thatcher is the founder of Christine Marie Studio, a boutique design agency dedicated to helping visionary entrepreneurs infuse their personalities into profitable virtual platforms. She combines 27 years of design experience to guide her clients through the web design process. Also the creator of Designing to Delight, a brand dedicated to teaching designers how to build collaborative client relationships so they can charge more for their work.

Sort by category: