Style tiles have been a solid part of our design process for quite some time now. In this article we explain what a style tile is, why we use them at Level Level and what benefits they offer for the design of your website.

When you are at the beginning of creating a new website and things like planning, scope and budget have been defined: how do we approach the next phase? It’s important to us that we schedule a kick-off meeting together with you as a customer. We’ll dive deeper into the target group(s) of the website. What are their goals to visit your future website? We can do this, for example, by developing a Product Vision Statement. In addition to that we also take a look at the existing branding. Does it still match your brand values? Or can it use a little freshening up? It’s also possible that a good visual translation to the online expression of your brand has not yet been made. Even then it’s smart to take a closer look at the visual style.

Based on all the input and information we collect from our conversations with each other, we get to work and make the first setup for the visual style. We do this in the form of a style tile.

But what is a style tile?

In short, you could say that a style tile is a way to communicate a certain visual style to you as a customer. A style tile contains a variety of elements such as colours, typography, shapes, lines, textures and certain UI elements. UI elements are the different visual elements on your website that the user interacts with. Essentially we summarize all elements that give direction to a visual style in a “tile”. This ensures you get a good impression of the online visual look & feel at a glance. However, this does not mean that we have to be complete already; it’s only a collection of the first online elements to display a good visual image.

Why a style tile?

If you don’t have a clear visual style for your website yet, designing entire pages can cause a lot of confusion. That’s why it’s not recommended to start designing full pages of your website. You have to think carefully about things like: lay-out, placement of elements and content. This can be very difficult if you also have to think about a visual style at the same time. Therefore it would be better to separate this.

Why do we use a style tile and no other resources such as a mood board? A mood board is a tool that is often used in branches such as advertising or interior design. It can quickly create a certain atmosphere by means of colours, typography and image. However, a mood board doesn’t give an overall impression of the visual style. You don’t see the translation to online elements and you don’t know what they will look like. What online elements are we talking about? Well, you can think of things like: buttons, a news block or a shopping cart.

We therefore choose to use style tiles in the start-up phase of a project. By creating a style tile, we make sure that we can focus on a visual style. We also make sure that our attention is not clouded by things that are not yet important at this stage, such as designing various functionalities. In short: we separate function from form so that we can evaluate it even better. This way we can properly assess form on the desired appearance. Then we can asses lay-out, functionality and content by questioning: “How do these contribute to the user needs and business goals?”

Do we no longer create full-page designs at all?

If you think that we only make style tiles: certainly not! We really see the style tile as a tool to get the design process started. When we discussed the look & feel of a style tile together with you, the next step is to design a few core pages (templates). We choose to create templates, because this is a much more effective way to set up your WordPress website later on. It’s a lot more efficient because we look at which parts we can re-use. In that way we can pay extra attention to things that really take the user experience to a higher level, such as cool functionalities and micro interactions (these strengthen the user-friendliness through transitions and animations). With the designed templates you can really see how different elements of the style tile form a complete image of the website. It will be a lot more clear what your website is going to look like!

Does the branding of your website still match your brand values or could it use some freshening up?

Or do you not have an online style for your website at all? We are happy to help!