Yahoo! Design Stencil Kit v1.0

Yahoo! this week released a design stencil kit to help designers quickly create mockups for specifications and user testing. Stencil objects have specific meaning and can be incorporated into a design to symbolize a specific kind of module, interaction, or even aesthetic.

These design stencils complement the Yahoo! Design Pattern Library by providing tangible objects that manifest the essence of specific design patterns. The stencil kit also contains links to YUI components and Design Pattern Library entries that help bring depth and tactical execution to designs.

Stencils kits are available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG) and cover the following topics:

  • Ad Units
  • Calendars
  • Carousels
  • Charts and Tables
  • UI Controls
  • Form Elements
  • Grids
  • Menus and Buttons
  • Mobile - General
  • Mobile - iPhone
  • Navigation and Pagination
  • OS Elements
  • Placeholder Text
  • Screen Resolutions
  • Tabs
  • Windows and Containers

To use a design stencil, download the stencil kit compatible with your design application, launch your design application, and start adding stencil objects to your projects. Adobe Illustrator, OmniGraffle, and Visio users can ungroup stencil objects to customize and manipulate size, layout, and aesthetics.

We'll continue updating these collections as we release new patterns and the YUI team releases new versions of their code library. We encourage your feedback regarding these stencils as well as ideas for new ones!

Lucas Pettinati
Principal Interaction Designer