Being a web designer is an awesome job! More than just designing a beautiful online experience, I often get to help small and medium-sized businesses define who they are and flesh out their visual language through a website.

The website has become a defining pillar of process, style and communication for a business. It is exciting and humbling for business owners to trust me with this – but as a result, it also puts a lot of pressure on the design. It can become a loaded, daunting and stifled process, especially when so many parties want to give input into the direction.

Options come early

If you can hone design directions early on and break the process into smaller bite-sized pieces, it will save large amounts of time and frustration. The sooner you can narrow it down, the better. This will also ensure that the eventual homepage design presentation will hit the right mark. You’ll please and amaze clients, and make the process easier on yourself.

Most clients request several design options, so that they have the opportunity to provide feedback and choose the elements that best suit them.

Traditionally this has meant presenting several different complete and polished homepage mock-ups. Each mock-up takes hours to perfect – with one or more of them eventually being scrapped. This method comes from the assumption that the homepage is the first visual design deliverable that a client should view and provide meaningful input on.

But there is a much better way to work through the process and presenting options for web design projects. And it allows client input and tweaks to the direction before travelling too far down a path that eventually doesn’t get selected.

Introducing style tiles

Before starting any web page design mock-ups, I take the client through sessions with style tiles. This process presents clients with a few possible design directions and poses a few small decisions.

Style tiles are a ‘mood board’ of sorts, but specifically for websites. They provide a snapshot of colour application, typography stylings, buttons, photography options and treatments – and how those elements interact. These are some example style tiles I have presented to a client:

Style Tile A
Style Tile B

Before any project starts, the client and designer might discuss colours, typography, look and feel in kick-off and discovery meetings. A style tile is the continuation of that discussion, in a visual format. Style tiles are used to shape the start and middle of the design conversation – not the end or outcome. While they may be considered a deliverable they aren’t about strict approvals, think of them as a visual discovery session. They narrow and focus the path to completion.

If you’re worried about sacrificing creativity for the sake of efficiency, don’t be! Style tiles are a more meaningful and focused path to completion. They force controlled creative expression, proof of concept and refinement within constraints (which arguably have better outcomes in the end). Traditional approaches leave time-consuming homepage design explorations in the trash.

A variety of directions can be quickly designed and shared with the client or internal team. Because Style tiles are just a glimpse of potential, it also allows the tone to be pivoted and tweaked quickly.

Why style tiles?

Style tiles have had a positive impact on my design and feedback process in many ways:

1. Show rather than tell

What does ‘modern’ mean to you, and what does it mean to your client? Does the client think it means all sans serif fonts, or tech-looking fonts, or a trendy-modern combination of sans serif and serif fonts? We could spend hours breaking apart what exactly ‘modern’ means through lengthy discussion, or simply illustrate it. Style tiles do exactly that: they show rather than tell. Having a simple visual representation eliminates ambiguity.

Using words makes sense for exploring copy; for exploring design, visuals make more sense.

2. Save time!

The most obvious benefit of style tiles is the massive time-saving capability. Style tiles can be quickly put together, changed up, and torn apart. Several tiles can be designed in a fraction of the time of one homepage design.

3. Establish credibility

Style tiles allow you to quickly show that you listened to requirements and requests, while also showing the designer’s ability to be creative and evolve a brand. Friction points are reduced as tweaks and direction can be pivoted quickly.

Presenting homepage design options as the first design deliverable is loaded. There are hundreds of design decisions that the client was not a part of – which makes taking in an entire page design overwhelming for them. Questions on design decisions can quickly turn into questions about a designer’s rationale and even their abilities. Involving the client in some initial decisions will avoid these missteps, and leave them assured and feeling involved in your process.

4. Engagement not frustration

Style tiles break the many decisions involved in designing a website down into a small bite-size pieces, and invite feedback. They allow a client to engage in the design process at an early stage.

One of the most important things I have learned as a designer is that clients want to be involved in the design process. They aren’t designers, or experts, which is why they have hired one – but they do want to work together and have their say. The more input and dialogue between client and designer, the better the relationship will be.

5. Insights and client relationship

Having this visual discovery and inviting feedback at an early stage helps the client and designer work better together. Getting insights on your client’s taste, vocabulary, and working style is quick and easy through these small design snippets. My most candid and useful insights into a client, their brand, and their personal taste come from style tile discussions.

We can start communicating with common language and gain understanding of each other. Style tiles ensure everyone is on the same page before any major pieces of design are created.

6. Style tiles have your back

As well as all the benefits to your clients, style tiles will also help you as a designer. Should things turn sour, a project lead change, or decisions change, style tiles have you covered. They are a flag in the ground illustrating an agreed direction. Should the project be derailed for any reason, you have proof of work and rationale behind decisions throughout the project.

How to work with style tiles?

I have a template I like to use when designing style tiles. I can quickly and efficiently put together several looks for a site. Using the same tight constraints of the tile, I have still come up with fun ways to take the designs a little further. I like to take at least one tile further on each project, pushing the brand in an exciting new direction that they might not have considered, but might enjoy.

I generally present two or three unique directions as style tiles for each project, and work with the client to refine those options down to one direction. Feedback and rounds of revisions are able to move quickly.

Download JPG and Photoshop style tile template for web design.

Download Template

 

Some design elements may already be defined by brand guidelines – but when they are not, these are some things that can be explored through a style tile:

Logo

  • Logo choice, such as horizontal or vertical format
  • Colour logo or reversed/white on a background (colour or image)
  • Placement
  • Interaction with image(s)

Images

  • Tone of images
  • Subject matter of images (such as lifestyle or product shots)
  • Macro photos vs. landscape shots
  • Treatment and filters over images (darkened, lightened, blurred etc.)

Color Palette

  • Colours that are set by the brand/logo
  • What colours be used to accent design elements
  • Colours that could supplement the design
  • How the colours work together
  • The tone of the palette: bold, pastels, colourful, complimentary etc.

Most brands have predefined colour palette. There may not be any need to experiment with colour – but sometimes there is an opportunity to bring in a few complementary colours.

If a brand doesn’t have any set colour palette or branding, I like to pull the style tile back further to only include the logo and colour palette in the first round.

Typography

  • Combination of typefaces on the tile, or using the same for all headlines and body text
  • Combinations of typefaces (thin, thick, bold, fancy) and how they work together
  • Using ALL CAPS vs. sentence case for headlines
  • Application of colour on the typography

The tile is purposely detached from real text content, which allows the viewer to focus on the design specifics without the distractions of copy or layout.

Label headings (ie. ‘main headline’ as shown in the example) to aid communication and the same ‘lorem ipsum’ placeholder text for body paragraphs so that they can be directly compared.

Buttons

  • Bold and colourful buttons
  • Monotone buttons
  • Larger, smaller
  • Square, rounded, three-dimensional or other button effects and styles

This is just a short list of examples, I encourage exploration and play– take a style tile as far as you can within the constraints.

When presenting the tiles, you can highlight the specific differences between each tile you are wanting their reaction to.

Feedback

Arguably the most important part of the style tile process is the discussions and feedback on the tiles. It is important to also ask why? Why a client chose a certain option, or combination of options. These insights will guide you throughout the project’s design when making other choices.

Examples of great feedback

  • Overall feeling of X was preferred over Y
  • Buttons from X as they feel more modern
  • Colour palette from Y as it will work with our slide presentations
  • Don’t like how bold X is

Examples of poor feedback

  • Option X
  • Tile X with the buttons from Y

Encourage clients to provide feedback in a way that works for them – have fun and ask questions. There is nothing worse than an un-engaged client. Once they see that their input will really shape the design, interest and engagement in the process will increase (as well as their enjoyment). I’ve witnessed it time and time again.

It is your responsibility to get the feedback you need. Share this article with your client, share resources and examples, walk them through how the tiles shape their website.

Presentation

I have made this topic into a presentation – complete with slides. Share the learning!

Download Slides

 

 

Resources

It’s pretty clear that I love style tiles. They’re a great tool, and have made me a better and more efficient web designer. Below are more style tile resources you might enjoy:

 

Start with a cupcake

This is a great metaphor for getting feedback early. I highly recommend you read the full article. This is my paraphrase:

The quicker you can get feedback on what you’re thinking the better your idea will be. Usage is oxygen for ideas… Two ways to plan out baking a wedding cake. You can deliver the base first, then the filling, and finally the icing. Only at the end of the final phase do you have something edible; something you can learn from. Alternatively you could start off with a cupcake. You’ll learn the flavours you like, uncover any problems in your kitchen, and in general you’ll fast forward the feedback loop.
– Des Traynor, Co-Founder & Chief Strategy Officer, Intercom

Start with a Cupcake

 

StileTil.es

Has their own downloadable template, information on style tiles – and this great diagram:

StileTil.es

 

Case Studies

Check out how I’ve applied style tiles in my case studies.

Case Studies

 

I hope you gained an understanding of style tiles and area ready to apply them to your web design process – or even applying this concept to other areas of your work. If you have any questions, please reach out and ask.