More Stencil Fun For Designers

By Jennifer Farley


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?

  • 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:



Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.