Photoshop Tutorials

Is prototyping websites in Photoshop harder than it should be? Try drawing on paper instead with the help of these stencil kits. These stencils are here to save you time and make your work easier. They certainly look nice, but are they useful? Read our quick review to find out if they live up to their looks!

Where do these stencils come from?

UI Stencils sells stencil kits for web and mobile UX designers. These stencils are designed and created in-house by a design company in Seattle, WA and they make designing on paper easier. There are stencils for the iPhone, iPad, Android phone, Windows phone, websites, and user flow - we chose the User Flow and Website Stencil kits to review.

Website Stencil Kit

When you first receive this stencil, you'll be awed by it's sharp cutouts. This laser-cut stencil has perfectly sharp edges and jammed with icons. The pixel ruler lets you design your website with precision so that you know everything will fit the way you wanted it. There are also stencils to create 3 and 4 column layouts. There wasn't really any icons that I felt was missing but the cursor icons sure looks big (approx. 40x50 pixels).

There's a few inevitable downsides to metal rulers:

1. It's really thin - this isn't something you want to throw in your bag with heavy objects that can dent or bend your stencil. Keep it in a safe place such as a hard pencil case or inside the middle of your sketchbook.
2. The edges are sharp and and as you draw, the lead of your pencil shaves against the edge of the ruler leaving you with graphite dust on your paper. Be sure to blow away these dust instead of swiping them away with your hand.
3. The biggest downside with metal stencils/rulers is that you can't see what's underneath it. This makes it hard to align objects or see exactly where you are drawing.

UI Stencils definitely did a great job with this stencil. The icons are nice but I found the pixel ruler the most useful when you use it with the free printable website template. As someone who works on the computer all day, it feels nice to be able to switch to paper.

User Flow Stencil Kit

This is a simple stencil and at first glance, it looks like there's only 7 stencils. There's also a curly bracket, circle, and a round corner for drawing curved lines or boxes with round corners.

As simple as this ruler is, I really like it. The transparent plastic makes it easy to align objects and see where you are drawing. It's also pretty thick which makes it easy to pickup and move. This is a perfect product.

Should you buy it?

These stencils are definitely not cheap - at the time of this writing, they go for $26.95 each + shipping. The $5-15 additional shipping cost can make you feel like buying more than one stencil just to justify it. It certainly feels overpriced for what it is until you think about the opportunity cost.

Currently, there aren't alternatives to these and if you like drafting your designs on paper for yourself or in front your clients, these stencils will definitely speed up your workflow and can give you a creative advantage over Photoshop or wireframing software. All in all, if you can rationalize your purchase through better design, faster workflow, or improved client experience, then these UI stencils are for you.

Where to buy

Buy Website Stencil Kit

Buy User Flow Stencil Kit

Share your Feedback