Improving the Web Design Process Through Style Tiles

As a veteran (translation, old man) of the web design business, I can confidently say that one of the most stressful points in any project is when new design concepts are revealed to stakeholders. Back in the old days, web design projects would begin with a kickoff meeting that would focus on gathering design direction from your stakeholders. They would show you some websites they liked and didn’t like. And then the designer would go off and bury her or himself in Photoshop for weeks until the big reveal — all with very little stakeholder interaction. (Note, content was rarely, if ever discussed at these kickoffs, another issue with the old school web design process).

After basically being invisible to our stakeholders for weeks, we would reconnect at the largest and most anticipated meeting of the project to reveal our webpage concepts. While the feedback might be positive (thanks mainly to our talented designers), the list of changes was usually long. Often times, the stakeholders would want to mix the elements between concepts, taking the header from Option A, the footer from Option C, and the typography from Option B to create Option Hell No. Hopefully, this does not describe your current web design process. But if it does, don’t fret. You can change it.

Several years ago, designer (and all-around great person) Samantha Warren created a new web design deliverable, style tiles. Style tiles are intended to show stakeholders specific elements of a web design before any webpage mockups are designed. These elements are typically fonts, colors, and certain interface elements. The purpose is to get feedback sooner, crucially before spending long hours creating a pixel perfect website or application. As Samantha puts it …

Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.

An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?

We started using style tiles at the beginning of 2015 and it has significantly improved our web design process. Here’s how:

• Style tiles help form a common visual language with our clients, which is then used throughout the rest of the project.
• Because they are less time intensive than full website mockups, style tiles enable designers to share their ideas with stakeholders fast.
• Style tiles can be modified quickly based on stakeholder feedback.
• Style tiles set clear expectations and eliminate surprises, minimizing the risks and decreasing time associated with the webpage mockup reveal.
• Last, but not least, style tiles are easy for stakeholders to understand and process.

Adding style tiles to your web design process is not entirely without its complications. Here are a few tips we’ve learned along the way:

1. Style tiles should not be used to define page layout. Leave that to wireframes.
2. Once a style tile has been approved, it should lead to only one webpage design concept. One of the goals of style tiles is to decrease time spent on webpage mockups. With an approved style tile (coupled ideally with a wireframe), you should be able to put together one solid home page design concept that contains very little surprises.
3. Stakeholders might like what they see so much that they want to see more. Remember, stakeholders are used to webpage mockups. Remind them that those will be coming, but the scope of style tiles is limited to specific elements.

Once you and your client are fully up to speed with what a style tile offers a project, these issues are easy to avoid, especially when you combine style tiles with other UX deliverables, including wireframes and webpage mockups.

Once this happens, style tiles will help you decrease time, minimize confusion, and clearly set expectations with your stakeholders during the web design process.