Tag: workflow

Using Style Tiles

I’m currently working on what will be a responsive WordPress website for a theater incubator and have noticed for a while that Photoshop comps are really limited when it comes to designing responsive websites. How many screen sizes should you design for? What about accommodating a CMS?

Instead of comping every screen size, I’m going to create Style Tiles which were introduced on A List Apart by Samantha Warrren. If you have never heard of Styles Tiles before, go now and read the A List Apart article. I’m serious – read it!

The concept is still making its way around the Internet and now other people are sharing their own methods and templates. Samantha offers a Photoshop template, Adrian Gould collected templates in Illustrator, Fireworks, InDesign and Keynote as well. Namanyay Goel created Webstiles for a HTML/CSS version. I also found a WordPress theme called WP Style Tiles created by Steve Fisher and Jesse Friedman.

I’m going to try out both the WordPress theme and the Photoshop template to see which one is more helpful to my workflow and presentation.

 

Thoughts About Sketching

When I was little, I drew constantly on everything. Scrap paper, inside the covers of coloring books, notebooks, you name it. At some point my level of drawing activity dwindled to doodling in the margins of class notes and there it stayed for a while.

What really got me drawing again was taking a Graphic Design at the School of Visual Arts. One of the exercises we learned was creating thumbnails; tiny sketches showing multiple layouts side by side for a project. I found it difficult at first, because out of all of the layouts produced, some were bound to be bad, some mediocre, and hopefully a few could be developed further. My perfectionist tendencies were really challenged. At that level though, there was no need to be a perfectionist since the stakes were so low.

Since then, I’ve read a lot of articles about sketching for User Experience and have been doing it more and more. My current favorite notebook is by Muji and has dot grid paper (I hate ruled paper for some reason). I also like using printed storyboard worksheets, especially the Storyboard with Notes paper on Konigi.com.

A few months ago, I got an assignment to make wireframes for a online contest application that had previously been done as a print campaign. The client had made some assumptions about how the application should be done that could cause some real problems for users. I did a cartoon-type storyboard to show the account manager how the process would play out following those assumptions with possible “pain points” at each step. Though not all of my recommendations were followed, I was able to communicate places to make changes using the storyboard. A sample panel is below:

Panel from Storyboard

 

So I won’t be creating the next great graphic novel, but it was a useful tool anyway. Plus, well, it was fun to do!