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.

1. liron@pebble.com
Hi

4. Kickstarter

5. a lot has changed

6. Pebble Visual Language

7. 64 colors

8. Contrast
Especially when involving text
Peb Peb

9. Contrast
Especially when text is involved
v
Peb

10. Contrast
Avoid thin lines & light text
v
12:3
v
12:3

11. Anti aliasing
reduce curves & shallow angles
45° 30° 15°

12. Anti aliasing
reduce curves & shallow angles
2° 2°

13. Anti aliasing
reduce curves & shallow angles

14. Anti aliasing
Use pixelated or angular fonts

17. animation

22. Stretch
Icon spatial movement
1 2 3

26. Dot to
System level transitions
5:30AM
Timeline Future
Timeline Past
Launcher

29. Dot to
Incoming events
5:30AM
New SMS

31. Morph
Used to reduce movement
when changing between
similar elements
69°69° 47°

34. Round

35. Start & end points

36. Start & end points
Top to bottom, left to right

37. 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

38. Start & end points
Perfect fit
Lorem ipsum dolor
sit amet, consectetur
adipisicing elit, sed
do eiusmod tempor
incididunt ut labore
et dolore magna

39. Start & end points

40. Start & end points
Center to perimeter

41. 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

42. Watch faceApp Launcher
vvv
Lorem
Ipsum
Dolor
Sit

43. WatchSmart
vvv
Lorem
Ipsum
Dolor
Sit

44. WatchSmart
v

48. v

52. 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

53. 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

54. Making it work
Text flow
amet, consecte
adipisicing elit, sed do
eiusmod temporalistas
incididunt ut labore et
dolore magna

55. amet, consecte
adipisicing elit, sed do
eiusmod temporalistas
incididunt ut labore et
dolore magna
Making it work
Don’t scroll. Paginate

56. Making it work
Centered fixed focus

57. Making it work
Extra info on focus
amet, consecte
eiusmod tempo
subheader
dolore magna

58. Making it work
When possible replace
unfocused items with
icons
eiusmod tempo
subheader

61. Thanks!

62. next
heiko@pebble.com