More Stencil Fun For Designers

Tweet

menu2

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
    image001
  • Carousels
  • Charts and Tables
  • User Interface Controls
    image003
  • Form Elements
  • Grids For Page Layouts
    image005
  • Menus and Buttons for phone and web applications.

    menu

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

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.magain.com/ Matthew Magain

    Awesome stuff Jennifer, thanks!

  • http://www.lit.org 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 Yahoo.com.

  • simsim

    Good read, thanks.

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

    http://www.axure.com/widgetLibraries.aspx