#PDR15 - Designing for Pebble
-
Upload
pebble-technology -
Category
Technology
-
view
2.273 -
download
3
Transcript of #PDR15 - Designing for Pebble
![Page 2: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/2.jpg)
![Page 3: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/3.jpg)
![Page 4: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/4.jpg)
Kickstarter
![Page 5: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/5.jpg)
a lot has changed
![Page 6: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/6.jpg)
Pebble Visual Language
![Page 7: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/7.jpg)
64 colors
![Page 8: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/8.jpg)
Contrast Especially when involving text
Peb Peb
![Page 9: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/9.jpg)
Contrast Especially when text is involved
vPeb
![Page 10: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/10.jpg)
Contrast Avoid thin lines & light text
v12:3 v12:3
![Page 11: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/11.jpg)
Anti aliasing reduce curves & shallow angles
45° 30° 15°
![Page 12: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/12.jpg)
Anti aliasing reduce curves & shallow angles
2° 2°
![Page 13: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/13.jpg)
Anti aliasing reduce curves & shallow angles
![Page 14: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/14.jpg)
Anti aliasing Use pixelated or angular fonts
![Page 15: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/15.jpg)
![Page 16: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/16.jpg)
![Page 17: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/17.jpg)
animation
![Page 18: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/18.jpg)
![Page 19: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/19.jpg)
![Page 20: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/20.jpg)
![Page 21: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/21.jpg)
![Page 22: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/22.jpg)
Stretch Icon spatial movement
1 2 3
![Page 23: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/23.jpg)
![Page 24: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/24.jpg)
![Page 25: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/25.jpg)
![Page 26: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/26.jpg)
Dot to System level transitions
5:30AM
Timeline Future
Timeline Past
Launcher
![Page 27: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/27.jpg)
![Page 28: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/28.jpg)
![Page 29: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/29.jpg)
Dot to Incoming events
5:30AMNew SMS
![Page 30: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/30.jpg)
![Page 31: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/31.jpg)
Morph Used to reduce movement when changing between similar elements
69°69° 47°
![Page 32: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/32.jpg)
![Page 33: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/33.jpg)
![Page 34: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/34.jpg)
Round
![Page 35: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/35.jpg)
Start & end points
![Page 36: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/36.jpg)
Start & end points Top to bottom, left to right
![Page 37: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/37.jpg)
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
![Page 38: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/38.jpg)
Start & end points Perfect fit
Lorem ipsum dolor
sit amet, consectetur
adipisicing elit, sed
do eiusmod tempor
incididunt ut labore
et dolore magna
![Page 39: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/39.jpg)
Start & end points
![Page 40: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/40.jpg)
Start & end points Center to perimeter
![Page 41: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/41.jpg)
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
![Page 42: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/42.jpg)
Watch face App Launcher
vvv
Lorem
Ipsum
Dolor
Sit
![Page 43: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/43.jpg)
Watch Smart
vvv
Lorem
Ipsum
Dolor
Sit
![Page 44: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/44.jpg)
Watch Smart
v
![Page 45: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/45.jpg)
![Page 46: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/46.jpg)
![Page 47: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/47.jpg)
![Page 48: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/48.jpg)
v
![Page 49: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/49.jpg)
![Page 50: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/50.jpg)
![Page 51: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/51.jpg)
![Page 52: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/52.jpg)
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
![Page 53: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/53.jpg)
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
![Page 54: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/54.jpg)
Making it work Text flow
amet, consecte
adipisicing elit, sed do
eiusmod temporalistas
incididunt ut labore et
dolore magna
![Page 55: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/55.jpg)
amet, consecte
adipisicing elit, sed do
eiusmod temporalistas
incididunt ut labore et
dolore magna
Making it work Don’t scroll. Paginate
![Page 56: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/56.jpg)
Making it work Centered fixed focus
![Page 57: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/57.jpg)
Making it work Extra info on focus
amet, consecte
eiusmod tempo subheader
dolore magna
![Page 58: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/58.jpg)
Making it work When possible replace unfocused items with icons
eiusmod tempo subheader
![Page 59: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/59.jpg)
![Page 60: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/60.jpg)
![Page 61: #PDR15 - Designing for Pebble](https://reader033.fdocuments.net/reader033/viewer/2022042723/58ed20e61a28ab74648b4567/html5/thumbnails/61.jpg)
Thanks!