I am currently working on an article about design prototyping and I would like to hear if anyone here can help me getting a few definitions right.

I'm a bit confused regarding the actual definitions on Mood boards and Style tiles. As I understand the both tools are used to define a visual concept with focus on colours, typography and images, opposed to sketching and wireframing which purpose is layout related.(positioning, alignment etc.)

From what I have found on the topic Mood boards seems to be a collection of images, textures, colours etc. which should represent the feel or mood of the intended design where Style tiles seems to be a summary of possible graphic elements arranged in an image-file to present to stakeholders.
Please correct me if I have misunderstood the two concepts or if I'm missing important points.

Thank you.

Edited February 4, 201412 yr by Nillervision

From my experience:

 

A mood board is almost like an inspiration board. It's generally focused around the brand colours, and perhaps even relevant imagery that adheres to the brand, or proposed rebrand.

 

Sketching is what it says on the tin!

 

Wireframing is a step further than sketching, and many of our UXers do this in a slightly different way. Some create fully operable prototypes (with auto-generated HTML) via Omnigraffle or Axure, some hand-code HTML to look like wireframes and may have their own library of components. The end result is similar. A set of strange, empty website templates – generally responsive. They're a good way to test usability before spending time on build/design implementation.

 

Not sure about style tiles though!

Thanks for the reply Andy. I was given this link about style tiles: http://alistapart.com/article/style-tiles-and-how-they-work

It suggests the purpose of the style tiles is to have a something concrete to show a client in order to get more accurate feedback.

I guess the tool would be handy in situations when you are developing an entire visual identity for a brand/campaign.

But since sketching and wireframing only is about the interface layout I guess style tiles could also be the step in the design process where you would evaluate possible colour schemes and typography?

Style Tiles are literally global styling elements that are applied across the whole site including fonts, colours, heading/paragraph/list formatting, content blocks, images, buttons, form elements and so on.

 

It's really the modern way of doing web design. With the advent of "mobile"/responsive simply providing image based mockups can be misleading for clients. Instead you're saying "this is how we present/style content" rather than "this is how the page is layed out".

 

The web has gone back to being a flexible medium rather that being "fixed" so getting the client to understand and focus on content, rather than fuss about how the page is layed out, is a major step forward. All we as web designers/developers have to do is then make sure content flows and adapts to the device it's being viewed on.

 

http://styletil.es/ is the original inspiration site.

 

PS - once you have style tiles set up you no longer have to design new sections of site as all the necssary styling is already done.

Edited February 6, 201412 yr by BlueDreamer

Thank you BlueDreamer. Thats very helpful