October 24, 2021

Introduction to Style Tiles for Web Design

Every designer should be familiar with the inner workings of a style guide. These guides are little print booklets or digital PDFs that contain information about a company’s brand, identity, color scheme, and other similar features.

The concept of a Style Tile advances this idea for use on the web. Style tiles include branding and colors, but focus more on design aesthetics for user interfaces.

Any large web project can be improved with an organized style tile. But how do you know where to start? In this post I’ll cover the basics of style tile design and how you can use tiles in your own work. Once you understand the purpose and structure of style tiles you’ll realize their place in the larger web design workflow.

The Style Tile: Overview & Usage

As Tuts+ author Chris Brown explains in his wonderful post, style tiles are alternatives to jumping right into a digital mockup.

Website layouts are mostly based around content. A style tile isn’t great for explaining how content fits together – but it’s perfect for explaining everything else. Colors, icons, typography, textures, page elements, you name it.

The purpose of a style tile is not to plan out the full mockup. It’s just a roadmap to help you reach the destination with less hassle. These tiles cannot replace wireframes or mockups. But they can be used for generating ideas and gluing the pieces together.

tutsplus premium style tile

A good style tile behaves more like an extended UI kit. It may also be comparable to a moodboard with more pragmatism.

Ultimately style tiles are just a new way of generating ideas quickly. They can be sent to clients as “jumping off” points for a new project and they’re great for inspiration when it comes time to build the full website.

Flexibility for Mockups

By creating a style tile first you give yourself flexibility to change. It’s easier to make changes on a small UI kit rather than a full layout. These quick graphics and ideas give you points of reference for what the layout could become, without committing to the full layout.

Also keep in mind that most websites nowadays are fully responsive. It takes a lot of work to craft both full-width and responsive-width mockups. But style tiles don’t require such considerations because they focus on smaller pieces of the puzzle.

typography colors style tile

Flexibility reigns supreme in the field of digital design. Especially in the early stages of large projects you really need to be flexible with ideas. Once you’ve locked into an idea the rest of the process becomes much easier.

basic example style tile design

Clients also seem to respond positively to style tiles, assuming you explain what they are first. When clients expect a simple moodboard they’re more open to direct critique from an early-stage thought process.

Tile Design Tips & Trends

When it comes to actually designing a style tile you need to consider the overall composition along with the internal elements. Some tile designers like to create mini-headers with the website’s logo, color scheme, and tile version number.

The branding should be recognizable and explain that the document is only a style guide. The version number helps clients reference different versions based on what they like(ie. I like the button styles in v1 but the typography looks better in v2).

However the website’s branding should only take up a small portion of the design. Style tiles are meant to convey ideas about the interface. Naturally this would include headers, paragraphs, links, buttons, and icons. But also consider adding smaller elements like nav items and form fields.

collective ios app flat ui

If a site is more niche-specific then it helps to add more detail. For example, a tile for a social networking site may include elements of the user profile. What will the default avatar look like? How should a user’s timeline be designed?

Place greater focus on individual page items that offer a glimpse of your creative direction. From here it’s all about feedback and making necessary changes to prepare for the 1st mockup draft.

Gathering Client Feedback

Before sending out any tiles go over your work and reaffirm the direction. Try to complete 2 or 3 different versions and see which elements draw the most attention.

Clients know what they want when they see it but don’t always know how to say it in words. Offering too many choices will create choice paralysis. Instead opt for a lower number(2 is great) and gauge their reaction.

sample news style tile design

Try to encourage open-ended feedback instead of pushing a certain ideology. Ask your clients to share their opinions on specific items(ie. what are you thoughts on the direction of the button textures?).

style tile mood board design

You also want to gather as much “corrective” feedback as possible. This means the client should explain what they do/don’t like and why. Once you understand why they like something it’ll help you piece together other areas of the design.

Regarding the total number of elements to use in a tile, that really depends on the project. Some websites only need a small number of elements while other projects may require a full UI kit. At the very least include some basic branding, colors, typography, and vital elements for the webpage.

Style Tile Examples

The best way to learn is often by example. Since style tiles are relatively new, only a sparse number of designers have latched onto the idea regardless of its practicality.

Take a look over the following style tiles to get an idea of what they’re all about. You may shake your head in rejection or find yourself asking how you didn’t think of this before. The style tile is not great for every project or every designer. But it can save time during the early creative stages when the concept isn’t completely set in stone.

Tile for Colors

style tile color scheme

Tile for Icons

icons styles style guide

Terasu Style Tile

terasu style tile homepage

WAC Tile

wac style tile example

iOS App Style

ios flat style tile

Tan Tile

tan style tile mockup

LRA Style Tile

lra example photoshop tile

Project Lifecycle

project life cycle tile

Zoobit

zoobit creative style tile

Visit Denver

visit denver style tile

Textures & Colors

art website tile textures

Fishery Website

fishery style tile design

LFC 360 Tile

lfc clean v2 style tile

Southside Farms

southside farms retro style tile

Depression Management App

flat app management ui design

ThinkGeek Style Tile

redesign style tile thinkgeek

Teal Style Tile

teal color style tile

School of Architecture

school of architecture style tile

Divestment Tile

divestment style tile example

Bloomz Style Tile

bloomz style tile sample

Jake is a creative writer and UI designer by trade. You can follow him on twitter @jakerocheleau or learn more at his personal website JakeRocheleau.com.

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *