Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Pebble Technology, profile picture
Uploaded byPebble Technology
PDF, PPTX2,525 views

#PDR15 - Designing for Pebble

This document discusses design guidelines for Pebble smartwatches, including using sufficient color contrast for text, reducing curves and angles to improve anti-aliasing, animating transitions between elements, and formatting text to fit the small screen while maintaining readability. It also provides examples of watch face layouts, text flows, and interaction patterns.

Technology◦
liron@pebble.com Hi
Kickstarter
a lot has changed
Pebble Visual Language
64 colors
Contrast Especially when involving text Peb Peb
Contrast Especially when text is involved v Peb
Contrast Avoid thin lines & light text v 12:3 v 12:3
Anti aliasing reduce curves & shallow angles 45° 30° 15°
Anti aliasing reduce curves & shallow angles 2° 2°
Anti aliasing reduce curves & shallow angles
Anti aliasing Use pixelated or angular fonts
animation
Stretch Icon spatial movement 1 2 3
Dot to System level transitions 5:30AM Timeline Future Timeline Past Launcher
Dot to Incoming events 5:30AM New SMS
Morph Used to reduce movement when changing between similar elements 69°69° 47°
Round
Start & end points
Start & end points Top to bottom, left to right
Start & end points Top to bottom, left to right Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
Start & end points Perfect fit Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
Start & end points
Start & end points Center to perimeter
Lorem ipsum dolor sit amet, consecte adipisicing elit, sed do eiusmod temporalistas incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Making it work Text and form factor parsing don’t fit
Watch faceApp Launcher vvv Lorem Ipsum Dolor Sit
WatchSmart vvv Lorem Ipsum Dolor Sit
WatchSmart v
v
Lorem ipsum dolor sit amet, consecte adipisicing elit, sed do eiusmod temporalistas incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Making it work Text and form factor parsing don’t fit
Lorem ipsum dolor sit amet, consecte adipisicing elit, sed do eiusmod temporalistas incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Making it work center align
Making it work Text flow amet, consecte adipisicing elit, sed do eiusmod temporalistas incididunt ut labore et dolore magna
amet, consecte adipisicing elit, sed do eiusmod temporalistas incididunt ut labore et dolore magna Making it work Don’t scroll. Paginate
Making it work Centered fixed focus
Making it work Extra info on focus amet, consecte eiusmod tempo subheader dolore magna
Making it work When possible replace unfocused items with icons eiusmod tempo subheader
Thanks!
next heiko@pebble.com