Yahoo! Design Stencil Kit: Generic Mobile Design Assets for Wireframing and Paper Prototyping
August 8th, 2008 by Scott JanousekMobile Web Design
Via Mariam, she came across an article that discusses designing websites for mobile devices.
It includes some talk about usability guidelines on mobile and offers code examples to explore.
Mobile Stencil Awesome-ness
There is also a download to a Yahoo Mobile Stencil collection for wire framing and paper prototyping applications:
Download:
Yahoo! Design Stencil Kit version 1.0
(pdf, svg, png, Visio, OmniGraffle)
The stencil library consists of generic (mobile) user interface stencil assets, as well as specific templates for both iPhone and Nokia/BlackBerry.
It includes:
• 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
Consider adding the stencils your existing workflow, and leverage in paper prototyping during design phases.
You do prototype design, before development begins (more often, than not) … right? … I hope so!
Pencil and paper are mightier than the fingers and keyboard?
I usually do sketches and story boarding of mobile content flow, in the very least before a project begins (depending on its scope, of course).
When developing for Flash Lite, user interface is not constrained as much in a lot of design directions you can take (compared to some other mobile development platforms). Thus, I find sketching on paper is the best way to come up with, and play with new ideas on mobile app flow and layout.
Of course, a lot of the time, many pieces of user interface work or “feel the same” across platforms and devices. These are often “cookie cutter pieces”. For instance the softkey bottom nav, top nav for battery and signal strength, etc on certain mobile applications.
Anyways, that’s “how I roll”.
- Scott Janousek \m/
Print This Post


