Earlier in the week, Alex had a post here on the Sitepoint blogs about a cool little stencil kit for designing iphone apps. So while we’re thinking about stencils, I wanted to point out another set of stencils that are available for free download. Last year, the Yahoo Developer’s Network released a very handy kit for web and application designers called the Yahoo! Design Stencil Kit , filled choc-a-block with goodies to make designing mock-ups a little easier.

What’s in the kit?

The kit consists of sixteen separate graphics files which you can use as templates or guides for your own designs. This work is licensed under a Creative Commons Attribution 2.5 License. They are perfect for keeping as a library that you can refer to, rather than creating your own graphics from scratch.

  • Ad Units: A full graphic template of all the standard ad units used on the web.
  • Calendars
  • Carousels
  • Charts and Tables
  • User Interface Controls
  • Form Elements
  • Grids For Page Layouts
  • Menus and Buttons for phone and web applications.


  • Mobile – General
  • Mobile – iPhone: The graphic has a full breakdown of the user interface.
  • Navigation and Pagination
  • OS Elements
  • Placeholder Text
  • Screen Resolutions
  • Tabs
  • Windows and Containers

To use a design stencil, download the appropriate stencil kit for whichever design application you are using. Launch the program and add stencil objects to your projects. Adobe Illustrator, OmniGraffle, and Visio users can will be able to use vectors and can therefore ungroup stencil objects to customize and manipulate size, layout, and aesthetics. The .png files can be used in many different image editors, not just Photoshop.

The kit is available for free download in a number of formats;

  • Adobe Photoshop (PNG)
  • Adobe Illustrator (PDF and SVG)
  • OmniGraffle
  • Visio (XML)

You can download the stencil kit here.

Related Reading:


Have you used this design kit or something similar? Do you have any recommendations for designers?

Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Matthew Magain

    Awesome stuff Jennifer, thanks!

  • Crowe

    The iPhone stencil is very cool. They used to have one for web design. I emailed them hoping they’ll do another run!

    The YUI Design Library Stencil’s are absolutely amazing. Downloaded it a couple nights ago and was very impressed. Yahoo does some very cool stuff for developers. If you want to be inspired by some CSS tricks, look at

  • simsim

    Good read, thanks.

    This stencil library is also available for free for Axure RP, the awesome wireframing and prototyping tool at:

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.