Aaron White

husband, dad, geek, front end designer @viddler, sports enthusiast/fanatic, US army veteran

May 3, 2012 at 9:01pm
Home

Early Stage Styling Done Just Right

Many times stakeholders or clients are more concerned with logos, colors and fonts.  When the main focus of the design process should be on workflows, content and wireframes they are more concerned with the look and feel.

Style Tiles Just right

Most often you’ll go ahead and open photoshop and style the crap out of your wireframes.  This is fine, because sometimes you don’t have any other options, but most likely this will slow down your wire framing.  When wire framing all focus should be put on layout, content, workflows and UX.  If you’re in photoshop worrying about what color that button should be or how much shadow to put on that container the thought being put into workflows, content and UX will most definitely suffer.

Although I wasn’t able to go to ConvergeSE this year, I did keep a close eye on my Twitter stream during the conference.  There were several gems that came through the stream and one of those was Style Tiles.  Style Tiles allows you to present interface choices without making the investment in multiple photoshop mockups.  

As the put in on their site.  “Style tiles are for when a moodboard is too vague and a comp is too literal.”  To me, this is the best of both worlds.  Appropriate focus can be put on layout, content, workflows and UX when working on the wireframes because you can put all visual elements in the Style Tile.

Style Tile

What could be included in a style tile?

  • Logo
  • Colors
  • Image treatment
  • Fonts
  • Textures
  • Buttons
  • Links
  • Containers


Clients and stakeholders will always be excited about the visual style of the site you’ll be building for them.  They should be.  That’s why they are having you design their product, because your a kick ass designer.  So make sure neither deliverable is neglected.  Give them a well thought out wireframes and the beautiful style tiles.

(Source: styletil.es)