Style Tiles — “A Savior for Freelance UI UX Designers”
By: Pathange Balaji Rao
Tags: User Experience, User Interface, Design, Designer, Freelance Designer

Outcome of the write-up would be to understand what Style tiles are, How can they help to add more productivity to our work as a Designer, Then I will show you the underlying process of Designing a Style Tile for your upcoming Design Project.

If you are listening the words Style Tile for the 1st time you might be thinking what the Heck is this now. I have read and known about tons of terms like UI, UX, Contrast ratio, bla bla bla. But never heard about this type of tile. Is it a bathroom tile 🤪🤪.

Absolutely not, let me make things simple for you.

If you are a Freelance Designer designing for your client, or a Design Consultant, or a Designer at an agency or a Designer at a Product based company. Where ever you are from the above “You are always asked to present and communicate your Ideas”.

When you here a word present do you get drained off. Does it bring into your mind tons of work, wire framing a new concept, designing new screens for them etc.

That’s a TON of work for sure.

So to save us from this unproductive & draining process of presenting your ideas and also showing the look & feel of your Concept for a new feature or an app or a website you can take the help of Style Tiles.

Let’s get into it.

Its Samantha Warren who is called the Queen of Style Tiles. Its she who started up with this concept of Style Tiles.

“Style tiles are for when a moodboard is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining layout.” — Samantha Warren

So you might have understood what Style Tiles are from the above words from the Founder of Style Tiles itself. In my words “Style Tiles are small pieces of art which acts as a blueprint prepared based on the branding and other references Resources provided by the clients just to start off the design process.” These are used just to give more idea to the client and to encourage collaborating on the process further.

So In case of style tiles: [5–10 Hours] Design a tile from the available resources that are provided by the client plus add some of your research to it. Then you would be able to come up with the Style Tile very soon.

Without a style tiles: [Unlimited hours] Inshort “Multiple full comps kill cute things”. Designing tons of screens and options, overwhelming your client, confusing them, getting unwanted feedback and a lot of other undesirable & unproductive stuff going on.

Thanks to Style Tiles!

Now lets get into what goes into the process of designing the Style Tiles:

Who the client was?

The project here was for a client — Platform who sell flight tickets and travel tours [Travel Booking site]

What I was provided with?

I was provided with just the Logo that they had got from a Designer who had designed for them previously.

So at times you might get more material from the client side if they had done some constructive work previously with their Design.

You at times can get the color pallet, typography and other branding as well.

So the logo that you see on the left was what I was provided with.

What Next ?

Let’s start with the Process of getting a Style Tile in place from the above logo.

Main things that we could add in the Style Tiles include:

Branding Typography Color Iconography Forms/UI Imagery Key components (ex. Testimonials UI if they are a Consulting company etc.) Comp Teaser (ex. Some kind of interactions, small show of main components for example the motion of how videos plays when a play button is clicked and other interactions behind this action)

So lets now directly go to what I have designed basing the Logo that I had been given.