by Gaelle Monin
UX / UI Designer
– How’s the project going?
We’re making great progress: we’ve completed the discovery phase, we’ve defined the business and client goals and we’ve created early prototypes that point to the core elements needed to create a functional product.
– So what happens next?
We’re now ready to kick off the design phase and we can start creating the main building blocks for the project.
This phase must be approached with adaptability in mind, ensuring that what’s being built is not only suitable for the existing content but is also easily adjustable for potential future updates and edits. Focusing on the bigger picture here is key to building the foundation for usable solutions.
Fortunately there is a great asset in the designer’s toolkit to help with this process: without further ado, let me introduce you to the style tile.
– Sounds interesting, but what is it?
A style tile is a visual tool that helps explore the aesthetic direction of a design project.
Before getting bogged down with the intricacies of high-fidelity layout and mockups, it’s a window of opportunity for experimentation with visual ideas. Keeping in line with the essence of the brand, the designer can try things out before nailing the project visual direction.
– I see, so it’s a mood board then?
Whilst the mood board is a curated collection of sample images and colour swatches that conveys feelings and themes, its more thorough cousin the style tile introduces specific common elements like colour palettes, typography and font sizes, button styling and interface elements. More importantly, the style tile showcases the relationship between those elements.
It can even include button hover states or micro-interactions so the client gets to see a realistic rendition of what the finished product might look like.
– Ah, so it’s a mockup then?
The style tile doesn’t fully define the finished layout. Instead, the designer is free to experiment with several ideas to present to the client, opening the floor for discussion around actual interface elements.
When viewing a fully perfected mockup, it can be difficult to identify which finer detail(s) need(s) tweaking. But with a style tile, it’s easy to spot if the essence of the intended feeling has been captured successfully.
– I’m intrigued, what does a style tile look like?
Here are some examples of the style tiles we put together for the National Centre for Circus Arts, one of Europe’s leading providers of circus education.
The brief for a website redesign was centred around a wish for a clean and pared back direction to let the striking imagery stand out.
In direct response to this, these style tiles allowed us to explore various routes whilst remaining faithful to the brand identity. They focused our attention on the building blocks of the website and their relationship to one another.
– They look great, but do we have time for that?
Working with style tiles is a rewarding stage of the design process as it opens up a dialogue between the project team and the client, guaranteeing all parties are aligned on the visual direction and development of the project.
A little design exploration goes a long way into informing the designer’s decisions and will prevent any untimely misunderstandings in the long run. It’s a window of opportunity for collective conceptualisation, deliberation and evaluation, pointing towards a clearly defined and streamlined visual language for the product.
This collaborative approach guarantees the client is being heard and the rest of the project team are involved from the onset. Initiating a dialogue around the style tile – externally and internally – can help spark new ideas for further enhancements and identify potential stumbling blocks early on.
The style tile helps consolidate a fool-proof system that’s fit for purpose and that will stand the test of time. Ultimately, it’s time well-spent and a smart way to invest into the smooth running of the project in the future.
– So working with style tiles makes a lot of sense!
Indeed, the transition from conceptual ideas to detail design can be overwhelming. The style tile encourages clarity and reduces complexity at this critical point in the design process.
With every team member and client collaborating early and aligned on the same goals, even the most complicated project can be tackled with a smart approach.
21st June 2022
What does it mean to design for everyone?
7th June 2022
The internet is entering a new era for privacy and authentication. But what could this mean for the applications we create?
20th April 2022
When it comes to using white space in web design, balance is key. Here’s how to achieve it.