pebble
  • Tutorials
  • Get the SDK
  • Guides
  • Documentation
  • Examples
  • Community
  • Blog
  • More
Privacy
Cookies
Publish

Guides

  • Table of Contents
  • App Resources
  • Appstore Publishing
  • Best Practices
  • Communication
  • Debugging
  • Design and Interaction
    • Benefits of Design Guidelines
    • Core Experience Design
    • One Click Actions
    • Recommended Guidelines and Patterns
    • Round App Design
    • Example Implementations
  • Events and Services
  • Graphics and Animations
  • Migrating Older Apps
  • Pebble Packages
  • Pebble Timeline
  • Rocky.js
  • Smartstraps
  • Tools and Resources
  • User Interfaces

Design and Interaction

Interaction guides are intended to help developers design their apps to maximize user experience through effective, consistent visual design and user interactions on the Pebble platform. Readers can be non-programmers and programmers alike: All material is explained conceptually and no code must be understood. For code examples, see Example Implementations.

By designing apps using a commonly understood and easy to understand visual language users can get the best experience with the minimum amount of effort expended - learning how they work, how to operate them or what other behavior is required. This can help boost how efficiently any given app is used as well as help reinforce the underlying patterns for similar apps. For example, the layout design should make it immediately obvious which part of the UI contains the vital information the user should glance at first.

In addition to consistent visual design, implementing a common interaction pattern helps an app respond to users as they would expect. This allows them to correctly predict how an app will respond to their input without having to experiment to find out.

To get a feel for how to approach good UI design for smaller devices, read other examples of developer design guidelines such as Google's Material Design page or Apple's iOS Human Interface Guidelines.

Contents

  • Benefits of Design Guidelines - Learn the main concepts of design guidelines, why they are needed, and how they can help developers.

  • Core Experience Design - How design guidelines shape the core Pebble app experience.

  • Example Implementations - Resources and code samples to implement common design and UI patterns.

  • One Click Actions - Details about how to create One Click Action watchapps

  • Recommended Guidelines and Patterns - Pebble's recommended guidelines for creating awesome app experiences.

  • Round App Design - Tips and advice for designing apps that take advantage of the Pebble Time Round display