webOS TouchPad Wireframe Stencils

Overview

The wireframe stencil kit illustrates most of the system or framework-level UI components provided by webOS. Its primary purpose is to enable designers to create better wireframes, faster.

The stencil kit does not represent the final visual styling of webOS UI components, but provides representative diagrams of the parts and pieces available to you as you design your TouchPad application, along with some examples of how to mix and match these components.

Please be aware that in a few cases, we show custom UI controls and widgets that are not inherently part of the webOS framework. The webOS framework will continue to grow in scope, and more prebuilt framework elements will be available to you in the future!

Please note that this stencil kit is a work in progress, and parts of it may change as the system and framework elements are refined.

Viewing the Stencils

The stencil kit exists in two forms--an HTML version, which you are currently reading, and an Adobe Illustrator file containing the stencils.

The Illustrator file is meant to be used by designers with an intermediate to advanced knowledge of Adobe Illustrator CS5 or later.

Non-designers may view the HTML version to get a sense of the kinds of UI components that exist in the webOS system and framework.

In This Document

• Working with the Illustrator File
• Annotations
• Color Swatches
• Glyphs and Graphics
• Type
• System Components
• Headers and Footers
• List Items
• Buttons and Forms
• Popup Examples
• Sharing/Contact Picker
• File Picker (Multi-Select) TBD
• File Picker (Single-Select)
• Media Playback Components
• Sliding Panes - Portrait
• Sliding Panes - Landscape
• Split-View (Not Sliding Panes)
• Full-Width Layouts
• Wireframe Example: Email App (Panels Navigation)
• Wireframe Example: Tasks App (Split-View, Not Panels)
• Wireframe Example: Memos App (Full-Width Layout with Reflowable Grid)