What is a Style Tile?

12 Jun What is a Style Tile?

One of the biggest challenges in the web design process is filling the the gap between the wireframe and the mockup.

A wireframe is the blueprint of a website. It’s fantastic for planning the overall layout of a website, but gives little information on how the website will actually look.

A mockup is a static website layout. It’s the detailed design of how a website will look with images, text, colors, buttons, etc.  And while both closely depend on each other, the gap between them can create serious problems for brand consistency in the design.

So how do we bridge that gap, and make sure that every website perfectly fits our partners’ brands? The answer is Style Tiles.

What Are Style Tiles?

Style Tiles are an overview of a website’s “look and feel” without the website layout.  They use only the most significant elements of a brand, so that the website can be planned & designed around them.

A good Style Tile should include:

• Logo
• Typography (font names)
• Font styles for Header, Sub-Header, Body and Links
• Color scheme
• Visual adjectives
• Button examples
• Graphic examples of styles and/or patterns

How Are Style Tiles Used?

The elements in the Style Tile are meant to be consistent across the website, which establishes a basic design that makes the transition from wireframe to mockup much easier.

Not only do Style Tiles streamline the design process, they also help create better, more successful websites by fully submerging the brand into the layout.

Without Style Tiles, every little change in layout or features would require a new mockup. We would spend a lot of time making these adjustments and it would get too costly. Instead, our team is able to visualize all changes by simply shifting the wireframe, because we already understand how the brand elements will shift along with it.

Will I Get a Style Tile?

At Fawkes FX, we use style tiles for every website we design. Each is customized to our partners’ needs, regardless of whether they have an established visual brand or not. This way, we don’t have to sacrifice quality for cost-efficiency, and you can get the best possible website no matter what your budget may be!