We recently launched a new site for FinishMaster, and part of the planning and design process included expanding on their current brand. FinishMaster already had a small set of brand guidelines, but the website would require more styles than their guidelines accounted for. To explore possibilities, we crafted style tiles to establish the best direction for the brand on the website.
We’ve talked about style tiles before, but as a refresher: style tiles are a design deliverable that articulate the essence of a brand for a website. It’s not a mood board (which covers general look and feel, but may not get as specific as defining what buttons will look like), but it’s also not a full-blown website design (which covers all the details, but also takes longer to create). It’s somewhere in the middle. Just enough to have a conversation about style, create same pagery, and set a direction, but not too much that it requires a lot of time to create.
For FinishMaster, we landed on two style tile possibilities. Both had subtle, but key, differences:
The first remained true to the brand’s typeface (Frutiger) and used only variations of it. FinishMaster’s original color palette contained just dark blue and red, but this style tile expanded the palette by altering the red slightly (toning it down) and adding a warm orange to the mix. Buttons were filled in with color to create more visual interest, and the icons used a monochromatic scheme for a subdued look. Photos were bright and featured employees in their workspace. Small details, such as finer lines, rounded out the styles, creating a refined, polished look.
Contrast that with the second style tile:
This style tile was bolder and featured a color palette of cooler tones. It also introduced a secondary typeface that sought to create a casual contrast against the brand’s Frutiger. Buttons employed more flat design than the first tile, and photos showed employees doing work in their workspace, preferably using bright colors as a backdrop.
After reviewing both style tiles, the FinishMaster team liked the warmth of the first tile, and the contrasting serif typeface in the second tile, but not that particular serif. So, we tried a combination of the first tile with a different serif typeface:
Ultimately, the team really liked adding in this typeface and thought it added a good contrast to the brand's typeface. So with this approved style tile in hand, we used it to guide the design of the website. Want to see how it turned out? Head on over to finishmaster.com!