A style tile as the basis for the look & feel of your website. (2024)

Style tiles have been an integral part of our design process for some time. This article will explain:

• what a style tile is;
• how we use it in our design process;
• and what advantages they offer for realising your new website.

It starts with the discovery phase

In this phase we explore the various challenges in the project. Of course we have received a briefing and we have an idea of what should happen. However, there are still plenty of questions that need to be cleared up on both sides. Questions such as; Which target group(s) should we take into account and what does the target group find important to achieve? What are the things they currently encounter? But also; what are the overall objectives of the website and how do we make this measurable? Which content are we dealing with and how do we display it in the content architecture? The intention is that at the end of the discovery phase we are ready to continue with the design and realisation of the website.

To get started right away, it is important that we know what the overall visual style of the website will look like. That is why the creation of a style tile, which is the look & feel of your website, takes place in the discovery phase. All of the input that we gathered up till this point is used as a basis for creating the first design of a style tile.

What actually is a style tile?

A style tile is a way to communicate a particular visual style to you as a client. A style tile contains various elements such as colours, typography, shapes, lines, textures, and certain UI elements. UI elements are the various visual components on your website that the user interacts with. This can be a button for example. In essence, we summarize all the elements that give direction to a visual style in a ’tile’. This allows you to quickly grasp an impression of the online visual style. Nevertheless, a style tile is never fully complete; it’s a product that can continue to evolve over time. However, it does offer guidance throughout the ongoing design process.

Why a style tile?

Your website can lack a clear visual style or the existing style is severely outdated. Directly start working on developing and designing entire pages can be confusing. Due to the unclear style direction and simultaneous work on designing functionalities, it becomes challenging to effectively differentiate and provide feedback on both the visual style and functionalities. You have to think carefully about things like; layout, placement of elements and content, which becomes quite challenging when you also need to simultaneously consider a visual style. Therefore, it’s not recommended to start designing entire pages of your website right away.

Why not use other tools like a mood board?

A mood board is a tool often used in industries like advertising or interior design. A mood board can quickly establish a certain atmosphere through colours, typography, and images. Nonetheless, a mood board does not offer a comprehensive representation of the visual style of a website, especially with regards to its adaptation for an online platform, It doesn’t effectively convey the appearance of specific online elements, such as buttons or specific styled elements such as a news block or shopping cart for example.

Separating function from visual style

We opt to use style tiles in the project’s early stages. By creating a style tile, we ensure that we can concentrate on the visual style without being diverted by aspects that are not important at this point, like designing different functionalities. In short, we separate function from visual style so that we can evaluate them more effectively; independently. We can assess visual style based on the desired appearance. On the other hand we can evaluate layout, functionalities and content based on the desired user needs and business goals.

Ensuring accessibility through style tiles.

As we’ve seen, style tiles are fundamental in our design process to define a website’s visual look & feel. style tiles play a crucial role in web accessibility by setting the tone for the site’s contrast, colour combinations and typography.

Addressing accessibility early in design ensures compliance with standards like WCAG (Web Content Accessibility Guidelines) and fosters a more positive user experience for all visitors. It aligns with the ethical and practical standpoint that a website should be welcoming and functional for everyone, regardless of their abilities.

Do we completely stop developing pages then?

If you’re thinking that we only create style tiles: absolutely not! We view the creation of a style tile as a tool to expedite the design process. When we create a style tile, we often begin in parallel with the content architecture of you website. A content architecture clarifies the content being offered, how relationships between different content can be established and how information can be accessed as easily as possible. Within this content architecture, we identify a couple of pages as ‘core pages’. These core pages are the most critical sections of your website, which is why we choose to create a responsive design for them.
Designing core pages is more efficient than working on all pages. Working on core pages allows us to effectively identify components that can be reused. This, in turn, gives us more time to enhance the user experience, such as developing exciting functionalities or employing micro-interactions.
In the end, by creating the core pages. you can see how the elements from the style tile come together to create a web design. This provides a clearer vision of what your website will look like.