style tiles: ready to wear for the ux designer

12
Style Tiles Ready to Wear for the UX Designer © Rob Fitzgibbon 2015

Upload: rob-fitzgibbon

Post on 19-Aug-2015

106 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Style Tiles: Ready to Wear for the UX Designer

Style Tiles Ready to Wear for the UX Designer

© Rob Fitzgibbon 2015

Page 2: Style Tiles: Ready to Wear for the UX Designer

So What is a Style Tile, Anyway?

No Nope

© Rob Fitzgibbon 2015

Page 3: Style Tiles: Ready to Wear for the UX Designer

Well Let Me Tell You…

In a digital project, a Style Tile is…• A single deliverable of images, colors, words and UI elements that • Defines both “soft” design themes and “hard” front end UI elements

• Device agnostic• Resolution agnostic; doesn’t rely on fixed width• Responsive design-friendly• Described as paint chip or color swatch• Avoids the vagueness of a mood board and the literalness of a screen

comp• Popularized by Twitter designer Samantha Warren in a March 2012 List Apart

article

© Rob Fitzgibbon 2015

Page 4: Style Tiles: Ready to Wear for the UX Designer

Here’s an Example

Rob Fitzgibbon 2015

http://webdesign.tutsplus.com/articles/style-tiles-an-alternative-to-full-design-comps--webdesign-7232

Page 5: Style Tiles: Ready to Wear for the UX Designer

Here’s Another Example

Rob Fitzgibbon 2015

http://badassideas.com/style-tiles-as-a-web-design-process-tool/

Page 6: Style Tiles: Ready to Wear for the UX Designer

And Here’s a Third

Rob Fitzgibbon 2015

http://webdesign.tutsplus.com/articles/style-tiles-an-alternative-to-full-design-comps--webdesign-7232

Page 7: Style Tiles: Ready to Wear for the UX Designer

Annd…Another OneText• Text

Rob Fitzgibbon 2015

https://eringooddesign.wordpress.com/author/eringooddesign/

Page 8: Style Tiles: Ready to Wear for the UX Designer

And Finally This One…

Rob Fitzgibbon 2015

http://alistapart.com/article/style-tiles-and-how-they-work

Page 9: Style Tiles: Ready to Wear for the UX Designer

So How/When Is a Style Tile Used?

During a Design Phase• Useful when there is an already

established brand that needs to be ported to a new platform

• As a tool to focus design/brand discussions with client

© Rob Fitzgibbon 2015

Page 10: Style Tiles: Ready to Wear for the UX Designer

The Advantages of Style Tiles

Lean Design• Less work than making screen comps, thus

efficient and cost effective• Pattern-centric as opposed to concept-

centric• Easy to apply to templates• Developer-friendly

© Rob Fitzgibbon 2015

Page 11: Style Tiles: Ready to Wear for the UX Designer

Of Course Every Rose Has Its ThornMean Design; a Style Tile is also• Reductionist, reducing design down to a set

of Lego pieces• Lazy; easy to miss elements/states and leave

them undefined• It doesn’t work with lots of content• It’s rigid AND frigid (i.e. non-interactive)• It’s non-narrative

© Rob Fitzgibbon 2015

Page 12: Style Tiles: Ready to Wear for the UX Designer

Style Tile Significance?

New Design Tool for the Ages?

UX equivalent of a coffee stirrer?

© Rob Fitzgibbon 2015

Time will Tell!