We are available for hire, find out more.

RSS Feed

Style tile for the Rationalist Association

By Rach ~ Wednesday, 15 August 2012

View a larger version of this style tile.

Facing the challenge of design in a responsive world, we’ve introduced the concept of style tiles to the Rationalist Association project.

Why style tiles?

As Samantha Warren, the originator of the idea, says on her style tiles site:

Style tiles establish a direct connection with actual interface elements without defining layout.

This is very useful in a situation where layout can shift based on device, browser window size and even orientation of device. In that sort of world, it is much more useful to look at the elements of a page in a modular way, starting to define patterns of elements without committing to where those elements might be, or specific usages of those patterns.

Equally, style tiles are a useful process to run in tandem with UX exploration. Whilst the structure of the site is still in flux, a designer can start work on the visual look and feel of the site, without, and this is the important bit, I think, giving the impression of finished and fixed design of pages.

So how did it go?

Style tiles are not something I personally have incorporated into my work flow before this project. The simple verdict is, I would definitely do it again! It’s a useful thing to be able to show to people very early on in the process, a solid outcome from what can seem like a very airy-fairy kick-off design exploration meeting.

However, it wasn’t without its challenges. I found the change of mind-set from designing definite pages quite difficult - it’s hard to pick abstract design components out of the air without the usual processes of sketching and wireframing. Where we got to with it was more that components from paper sketches fed straight into some very rough digital mockups and elements could be picked out of those and developed independently of the rest of the page, eventually ending up on the style tile.

We also ended up with a very large style tile, much larger than other examples I’d seen. This I think is partly due to sketching and exploring the UI in a broader sense in parallel to producing the tile, but also perhaps because one of the key features of the design to come out of the exploration meeting was its need to be neutral and let the content shine through. This necessitated exploring further elements of the page because the tile couldn’t rely on strong textures and heavy design to convey the feel of the site.

Take a look at a larger version of this style tile and let us know whether you think it works.

We’d be really interested to hear how style tiles have worked for you, how did you find the process?

Previous entry: The paywall problem