Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing for the Apple Watch

642 views

Published on

An brief overview of the wearables market and a not-so-brief overview of Apple Watch-specific design principles & opportunities.

Published in: Design
  • I still can't believe how great this worked. My drill battery, several AA and AAA batteries, and my camera battery work great again! This is super fun to do too.  http://ishbv.com/ezbattery/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Designing for the Apple Watch

  1. 1. DE SIG NI NG FOR 
 THE A PP LE WATCH May 2015
  2. 2. DESIGNING FOR THE APPLE WATCH | MAY 2015 2 TH E MARKET & OPPORT U N I T I ES DESIGNING FOR THE APPLE WATCH
  3. 3. 3DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH DESKTOP ➝ LAPTOP ➝ MOBILE
  4. 4. 4DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH SMART WATCHES BIOMEDICAL SENSORS FITNESS TRACKERS MULTIFUNCTIONAL JEWELRY HEAD MOUNTED COMPUTERS, CAMERAS, GAME PLAYERS EYEWEAR FOR REM OTE MEDICAL TRAININ G INFANT & KID SAFE TY TRACK ERS ➝➝ MOBIL E THE GROU ND IS SHI FTING, AGAIN.
  5. 5. 5DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH VIA VANDRICO INC. WEARABLES DATABASE 302WEARABLE DE V ICE S CURRENTLY ON T H E M A RKE T
  6. 6. 6DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH 19.6M 45.7 M 126.1MUnits in 2014 Units in 2015 Units by 2019 WORLDWID E W EA RABLE 
 DEVICE SHIPMENTS EXPECTEDACTUAL ~ ~ VIA STATISTA
  7. 7. 7DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH AR EAS OF MA RKET FO CUS Note: Some devices fall into more than one category. LIF ESTYLE FITNE SS M EDICA L
 ENTERTAI NMEN T IND USTRIA L GA MI NG PE TS /AN IM ALS N UM B ER O F 
 DEV I CES 1 85 13 4 55 39 26 21 5 VIA VANDRICO INC. WEARABLES DATABASE
  8. 8. 8DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH AR EAS OF MA RKET FO CUS Note: Some devices fall into more than one category. LIF ESTYLE FITNE SS M EDICA L
 ENTERTAI NMEN T IND USTRIA L GA MI NG WT F. N UM B ER O F 
 DEV I CES
  9. 9. 9DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH AVERAGE PR ICE BY MARKET IND USTRIA L M EDICA L ENTERTAI NMEN T GA MI NG FITNE SS 
 LIF ESTYLE PE TS /AN IM ALS U SD $9 18 $66 5 $540 $529 $259 $242 $1 34 VIA VANDRICO INC. WEARABLES DATABASE
  10. 10. 10DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH THIS IS NOT A WEARA BLES BOOM VIA STATISTA
  11. 11. 11DESIGNING FOR THE APPLE WATCH | MAY 2015
  12. 12. 12DESIGNING FOR THE APPLE WATCH | MAY 2015 +
  13. 13. $3 49 .00 13DESIGNING FOR THE APPLE WATCH | MAY 2015 + $199 .00
  14. 14. 14DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH YOU’LL NEED TO RE THI NK FUNCTION + Small display + Limited hardware & battery capabilities + Limited data transfer
  15. 15. 15DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH VITAMIN?Nice to have. PAI NK ILLER?Must have.
  16. 16. 16DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH CR EATE USEFUL, MUST-HAVE APPS 1 2 3 4 Complement 
 the containing iOS app, don’t replace it. Measure interactions in seconds & keep them brief: 
 3 screens per task, 
 10 second bursts Apps should be personal, holistic, lightweight & 
 context-aware. Reinforce intimate behaviors through indulgence, nostalgia, identity, fulfillment, enhancement & ritual.
  17. 17. 17DESIGNING FOR THE APPLE WATCH | MAY 2015 TWI TT ER IN STAGRAM SPEAK +TRANSLATE LARK CHAT DESIGNING FOR THE APPLE WATCH CO MM UNICATION
  18. 18. 18DESIGNING FOR THE APPLE WATCH | MAY 2015 EV ERN OT E K E YN OT E 1PASSWORD SCIENTIFIC CALC ULATOR DESIGNING FOR THE APPLE WATCH WORK
  19. 19. 19DESIGNING FOR THE APPLE WATCH | MAY 2015 MOTI ON X G PS DRE AMDAY S UBER HISTORY HERE DESIGNING FOR THE APPLE WATCH TR AVEL
  20. 20. 20DESIGNING FOR THE APPLE WATCH | MAY 2015 LARK CHAT 7 MI NUTE WO RKOUT CALORIE COUN TER PRO MAP MY RUN DESIGNING FOR THE APPLE WATCH HEALTH + FITNESS
  21. 21. 21DESIGNING FOR THE APPLE WATCH | MAY 2015 Y E LP STARBUCK S CHIPOTLE ETSY DESIGNING FOR THE APPLE WATCH SHOPPING
  22. 22. DESIGNING FOR THE APPLE WATCH AP PLE APP OVERVIE W 22DESIGNING FOR THE APPLE WATCH | MAY 2015
  23. 23. DESIGNING FOR THE APPLE WATCH AP PLE APP OVERVIE W 23DESIGNING FOR THE APPLE WATCH | MAY 2015
  24. 24. DESIGNING FOR THE APPLE WATCH | MAY 2015 24 DE SIGNING FOR THE APPLE WATCH — Vision & Design Principles — Ways to Interact — App Structure — UI Elements — Specifications DESIGNING FOR THE APPLE WATCH
  25. 25. DESIGNING FOR THE APPLE WATCH | MAY 2015 25 DESIGNING FOR THE APPLE WATCH V ISION & DESIGN PRIN CI PLES — Personal — Holistic — Lightweight — Context-Aware
  26. 26. 26 PERSONAL DESIGNING FOR THE APPLE WATCH | MAY 2015 + Designed to be worn, UI is attuned to the wearer’s presence. + Always connected; enables instant access to info without your phone. + Apps should be an extension of the wearer & enhance experiences in 
 meaningful ways. DESIGNING FOR THE APPLE WATCH • Raising your wrist to show the time and new alerts. • Digital Touch (i.e. Heartbeat and Sketch features) enables new types of communication • Accelerometer / heart rate sensor can provide personalized information about day to day activity SA MPLE INPUTS INCLUDE:
  27. 27. 27 TH I NK ABOUT… DESIGNING FOR THE APPLE WATCH | MAY 2015 How you can create personal value / give the wearer super powers / improve their lives by making them smarter, stronger, faster, etc. DESIGNING FOR THE APPLE WATCH
  28. 28. 28 HOLI STIC DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH + Blurs the boundaries between physical object and software. • The Digital Crown is a finely tuned hardware control that enables nuanced software navigation. • The Taptic Engine produces subtle, physical feedback associated with alerts and onscreen interaction. • Force Touch—a physical gesture interpreted by hardware—reveals a new dimension of contextual software controls. • The physical border of the Retina display has been considered, resulting in edge-to-edge UI design that effectively renders that border invisible. E XA MPLES
  29. 29. 29 TH I NK ABOUT… DESIGNING FOR THE APPLE WATCH | MAY 2015 How to integrate inputs and outputs / contribute to this experience of hardware and software feeling indistinguishable. DESIGNING FOR THE APPLE WATCH
  30. 30. 30 LIG HTWEIGHT DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH + Respect the context in which the wearer experiences them:
 briefly, frequently, and on a small display. • Glanceability
 Info is accessible and dismissible quickly and easily, for both privacy and usability. (e.g Short- look notification, Glances) • Quick, minimal interactions
 Show the most relevant information needed to complete the task. (If your app has multiple features, focus on core functionality.) • Small display size / the watch’s position on the wrist DE SI GN FOR:
  31. 31. 31 TH I NK ABOUT… DESIGNING FOR THE APPLE WATCH | MAY 2015 Speed—Apple expects people to use the watch in 10 seconds bursts. DESIGNING FOR THE APPLE WATCH
  32. 32. 32DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH ONE MORE T HING…
  33. 33. 33DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH TH I S IS NOT MY DAY. VIA THE WATCH ON MY PHONE: WHAT TIME MEANS TO US.
  34. 34. 34DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH TH I S IS. VIA THE WATCH ON MY PHONE: WHAT TIME MEANS TO US.
  35. 35. 35 CONTEXT-AWARE DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH The watch can can passively gather data about the wearer’s vitals and activities. Your connected phone, can potentially provide a lot of additional information, (e.g. location, contacts, upcoming meetings, and more.
  36. 36. 36 TH I NK ABOUT… DESIGNING FOR THE APPLE WATCH | MAY 2015 Combining all of these inputs to form preferences, patterns, and habits. A user’s context helps us minimize interactions, make assumptions and hopefully delight users by displaying the right information at the right time. DESIGNING FOR THE APPLE WATCH
  37. 37. J U ST WO KE UP?
 
 Suggest the type of clothes to wear based on the weather. 37DESIGNING FOR THE APPLE WATCH | MAY 2015 JUST SAT DOWN 
 AT A RESTAURA NT? 
 Recommend a dish based on past dishes he or she liked. LE AVE WOR K A R OUND 
 TH E S AM E TI ME E VE RY DAY ? 
 Suggest an alternate route 
 or the estimated time home based on traffic.
  38. 38. 38 BRAND ARCHETYPES TO EM PLOY DESIGNING FOR THE APPLE WATCH | MAY 2015 Six universal truths that were consistently present among brands that achieved intimacy with consumers most often in our study. They help explain the character and nature of ultimate brand relationships. DESIGNING FOR THE APPLE WATCH I NDULGENCE Creates a close relationship centered around moments of pampering and gratification that can be occasional or frequent. NOSTA LGI A Focused on memories of the past and the warm, poignant feelings associated with them. These are often brands a person has grown up with. IDENTITY Reflects an aspirational image or admired values and beliefs that resonate deeply. FU LFILLM ENT Exceeds expectations, delivering superior service, quality and efficacy. ENH A NCE ME NT Enables improvement through use of the brand—smarter, more capable, and more connected. R ITUA L When a person ingrains a brand into his or her daily actions. It is more than just habitual behavior—the brand becomes a vitally important part of daily existence. VIA MBLM'S BRAND INTIMACY STUDY
  39. 39. DESIGNING FOR THE APPLE WATCH | MAY 2015 39 WAYS TO INTERACT — Action-based events — Gestures — Digital Crown — Force Touch DESIGNING FOR THE APPLE WATCH
  40. 40. 40 STANDA R D I NPUT S DESIGNING FOR THE APPLE WATCH | MAY 2015 • Action-based events (taps) indicate selection or interaction. • Gestures such as vertical, horizontal swipes; left- edge swipes navigate back to the parent interface • Multi-touch gestures like pinch to zoom are not available on the watch • Digital Crown* to zoom/scroll without obstructing the display, as you would when swiping with your finger. Great for scrolling through longer pages. • The Side Button can’t be accessed by apps. • Force Touch* can display a context menu of up to four items relevant to the current screen. • The display can distinguish between a tap/press. 
 DESIGNING FOR THE APPLE WATCH
  41. 41. 41 NEW INTERACTIONS DESIGNING FOR THE APPLE WATCH | MAY 2015 • Action-based events (taps) indicate selection or interaction. • Gestures such as vertical, horizontal swipes; left- edge swipes navigate back to the parent interface • Multi-touch gestures like pinch to zoom are not available on the watch) • Digital Crown to zoom/scroll without obstructing the display, as you would when swiping with your finger. Great for scrolling through longer pages. • The Side Button can’t be accessed by apps. • Force Touch can display a context menu of up to four items relevant to the current screen. • The display can distinguish between a tap/press. 
 DESIGNING FOR THE APPLE WATCH
  42. 42. 42 AND SOME OT HERS… DESIGNING FOR THE APPLE WATCH | MAY 2015 Not Accessible by Apps (not 100% confirmed) • Sending a Drawing/Heartbeat • Taptic Engine • Voice Input (?) • Apple Pay (?) Accessible by Apps • Accelerometer • Heart Rate Sensor • GPS DESIGNING FOR THE APPLE WATCH
  43. 43. 43 CONSIDERATIONS FOR WIR EFRAMES DESIGNING FOR THE APPLE WATCH | MAY 2015 • Action-based events (taps, glances) • Gestures • Digital Crown (scroll/zoom) • Force Touch (globally accessible context menu) • Haptic Feedback (vibrations might not be accesible, but it’s helpful to consider when they’re triggered for others) DESIGNING FOR THE APPLE WATCH Indicate additional states for
  44. 44. 44 ONE-WAY FLOW (SEND) DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH
  45. 45. 45 2-WAY F LOW (SEND/RECEIVE) DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH
  46. 46. DESIGNING FOR THE APPLE WATCH | MAY 2015 46 APP STRUCTURE — WatchKit App — Notifications — Glances — Navigation — Modal Sheets — Handoff DESIGNING FOR THE APPLE WATCH
  47. 47. 47 WATCHKIT APP DESIGNING FOR THE APPLE WATCH | MAY 2015 • Main way of viewing and interacting with app data • Accessed via the watch home screen, Glance or Notification • iOS apps can have custom nav, but WatchKit Apps don’t support customization yet • Only two types of navigation for the WatchKit App  —   hierarchical & page-based • Figure out what data is most important to the user, how they relate and then the navigation structure that best compliments accessing that data DESIGNING FOR THE APPLE WATCH
  48. 48. 48 NOTIFI CATIO NS DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH • Short- and Long-Look Notifications • Limit notifications to only what’s most useful • The best notifications use the user’s context 
 (e.g. location, time, or activity) to provide a timely, relevant piece of information
  49. 49. 49 SHORT-LOO K NOTIFI CATIO NS DESIGNING FOR THE APPLE WATCH | MAY 2015 • Contains the app icon, app name, and title from the notification. • Appears first and is visible for a brief time. • Lowering your wrist dismisses it • Raising you wrist or tapping on it displays more detailed information and functionality through the long-look notification Since the title is the only thing you have control over, it should provide a brief hint as to the contents of the notification. DESIGNING FOR THE APPLE WATCH
  50. 50. 50 LONG-LOOK NOTIFI CATIO NS DESIGNING FOR THE APPLE WATCH | MAY 2015 All apps share the same structure: • The top displays the app icon and name 
 (you also can specify the bar color) • In between is your custom app content and up to four custom action buttons • Bottom is a dismiss button DESIGNING FOR THE APPLE WATCH
  51. 51. 51 GLAN CES DESIGNING FOR THE APPLE WATCH | MAY 2015 • A browse-able collection of timely/contextually relevant moments from the wearer’s favorite apps • Optional. Not all apps need a glance, and users select which glances to display • Limited to one non-scrollable screen. Put the most useful, essential information on your screen. Use color, hierarchy and imagery to visually distinguish your glance • Tap anywhere on the glance to open your app. 
 (No need for buttons, sliders, or menus) DESIGNING FOR THE APPLE WATCH
  52. 52. 52 GLAN CES DESIGNING FOR THE APPLE WATCH | MAY 2015 • Template-based, with separate templates for the upper and lower portions of the glance screen. • Use Xcode to pick the templates you want and then design your content accordingly. DESIGNING FOR THE APPLE WATCH
  53. 53. 53 NAVIG ATION TYPES DESIGNING FOR THE APPLE WATCH | MAY 2015 Hierarchical structure is best for more complex apps and resembles a lot of existing iPhone apps with the user having to make a series of choices until reaching the final screen DESIGNING FOR THE APPLE WATCH Page-based structure lets the user navigate between pages by swiping horizontally. This navigation is best if the data between pages isn’t tied to data on other pages
  54. 54. 54 MODAL SHEETS DESIGNING FOR THE APPLE WATCH | MAY 2015 • Temporarily prevents the user from interacting with the rest of the app • Consider using when: • It’s critical to get the user’s attention • A self-contained task must be completed or abandoned without distraction • Keep tasks simple • Avoid displaying a second modal interface from your initial modal interface DESIGNING FOR THE APPLE WATCH
  55. 55. 55 MODAL SHEETS DESIGNING FOR THE APPLE WATCH | MAY 2015 • Single or multiple screens (displayed in a page-based layout) • Top-left corner is reserved for the close button. (Users can tap or left-edge swipe to dismiss) • Close text is mandatory, always white, and can be customized DESIGNING FOR THE APPLE WATCH
  56. 56. 56 HAN DOFF DESIGNING FOR THE APPLE WATCH | MAY 2015 • There are times when people may want to dive deeper into content on their iOS devices. Apps use Handoff to convey information about the wearer’s current activity to their other devices. • Handoff is initiated by swiping up on your app icon on an iOS device’s lock screen. When your iOS app receives a Handoff request, it uses the provided info to continue the task that was initiated on the watch. DESIGNING FOR THE APPLE WATCH
  57. 57. 57 DI FF ERENT STROKES DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH V IA
  58. 58. DESIGNING FOR THE APPLE WATCH | MAY 2015 58 SPECIFICATIONS DESIGNING FOR THE APPLE WATCH — Screen Sizes — Layout — Typography — Color — Customization — Home Screen Icons — Menu Icons — Animations
  59. 59. 59 SCREEN SIZES DESIGNING FOR THE APPLE WATCH | MAY 2015 • The Apple Watch comes in 2 sizes
 – 38mm (340px by 272px)
 – 42mm (390px x 312px) • Retina display 
 Provide images @2x • Design once for both sizes
 Apple uses relative sizing/spacing options so images and objects resize to fill the available space. (Though you can provide different sized images or design two different layouts if you really want to) DESIGNING FOR THE APPLE WATCH
  60. 60. 60 SCREEN SIZES DESIGNING FOR THE APPLE WATCH | MAY 2015 • Apple recommends a black background to match the bezel • The dark background also works better in light (when compared to bright colors) • The bezel adds visual padding; maximize the available space and design for the full width of the screen. DESIGNING FOR THE APPLE WATCH DESIGN FILE IN SITU 
 (DISPLAYS V ISUAL PAD DING)
  61. 61. 61 LAYOUT DESIGNING FOR THE APPLE WATCH | MAY 2015 • Apps display the same interface on both sizes of Apple Watch. • Relative positioning lets items expand as needed to fill the available space. • Elements of your interface are laid out top to bottom and left to right. DESIGNING FOR THE APPLE WATCH AVOID TOO MUCH INFO 
 ON ONE SCREEN CREATE VISUAL GROUPINGS USE THE FULL WIDTH OF THE SCREEN REPLACE BUTTONS WITH A MENU WHEN APPROPRIATE LIMIT THE NUMBER OF SIDE-BY-SIDE CONTROLS LEFT ALIGN ELEMENTS
  62. 62. 62 TY POG RAPHY DESIGNING FOR THE APPLE WATCH | MAY 2015 • Make it legible! • The San Francisco typeface is the system font on 
 Apple Watch (free download). • Two variants: 
 San Francisco Text and San Francisco Display • When specifying the system font for system interface elements, Apple Watch automatically applies the most appropriate version of the font based on the point size. It also switches fonts automatically as needed. • Dynamic Type also improves legibility by letting people make global changes to their preferred text size. DESIGNING FOR THE APPLE WATCH CUSTOM TYPEFACES ARE SUPPORTED (USE RESTRAINT!) USE BUILT-IN TEXT STYLES AS MUCH AS POSSIBLE FOR DYNAMIC SIZING
  63. 63. 63 COLOR DESIGNING FOR THE APPLE WATCH | MAY 2015 • Use color to provide visual continuity, support your branding, and aid in communication • Every app has a global tint color that you can configure to reflect your primary brand color • You can add colors, but be sure to use light colors for text to ensure legibility and contrast DESIGNING FOR THE APPLE WATCH WHILE COLOR SUPPORTS MEANING , THE ROUNDED RECTANGLE SHAPE OF BUTTONS/LISTS IS THE PRIMARY WAY TO INDICATE INTERACTIVITY USE BLACK FOR YOUR APP’S BACKGROUND COLOR BE AWARE OF COLOR BLINDNESS AND HOW DIFFERENT CULTURES PERCEIVE COLOR
  64. 64. 64 CUSTOMIZAT IO N DESIGNING FOR THE APPLE WATCH | MAY 2015 • Express brand identity through your font, color, and image choices • Avoid displaying your logo in your app. Space is limited. Use that space for content, not for non- functional branding elements • Don’t include a launch screen • Make sure custom fonts are legible • Use your brand color for your app's global tint color • Avoid filling background areas with logos or brand colors. Apply colors to specific elements instead DESIGNING FOR THE APPLE WATCH
  65. 65. 65 HOME SCREEN ICONS DESIGNING FOR THE APPLE WATCH | MAY 2015 • Required and you need to provide icon resources for both iOS and Apple Watch. • Apple Watch icons are circular and don’t display accompanying text. • Embrace simplicity. • Maintain similarity between your Apple Watch and iOS app icons to associate the two icons. • Create different sizes of the Home screen icon for both Apple Watch sizes (both @2x !) • Design icons as full-bleed square images. Apple Watch automatically applies a circular mask. DESIGNING FOR THE APPLE WATCH
  66. 66. 66 HOME SCREEN ICONS DESIGNING FOR THE APPLE WATCH | MAY 2015 • Required and you need to provide icon resources for both iOS and Apple Watch. • Apple Watch icons are circular and don’t display accompanying text. • Embrace simplicity. • Maintain similarity between your Apple Watch and iOS app icons to associate the two icons. • Create different sizes of the Home screen icon for both Apple Watch sizes (both @2x !) • Design icons as full-bleed square images. Apple Watch automatically applies a circular mask. DESIGNING FOR THE APPLE WATCH Grab an icon template here:
 https://developer.apple.com/watch/human-interface- guidelines/resources/
  67. 67. 67 MEN U ICONS DESIGNING FOR THE APPLE WATCH | MAY 2015 • Menus contain actions that people can perform • Each action requires a label and icon • Labels are limited to two lines • Menu icons are template images, which use the image’s alpha channel (not its color channels) to define the shape • Consider the device size and the complexity of the icon; Set line widths to 4 pixels or greater to ensure that they remain legible. • Use PNGs for menu icons. DESIGNING FOR THE APPLE WATCH
  68. 68. 68 ANIMATIONS DESIGNING FOR THE APPLE WATCH | MAY 2015 • Create pre-rendered animations using a sequence of static images (PNG). Store images in your WatchKit app bundle so that they can be presented quickly. • Creating dynamic animations from your WatchKit extension and transferring them to Apple Watch adds a delay before playback. • Use images or groups for playback control. • Start and stop animations programmatically • Control playback speed and direction • Play back only a subset of frames. • Other elements display full animations in an endless loop. DESIGNING FOR THE APPLE WATCH
  69. 69. DESIGNING FOR THE APPLE WATCH | MAY 2015 69 UI ELEMENTS DESIGNING FOR THE APPLE WATCH — Labels — Images — Groups — Tables — Buttons — Switches — Sliders — Maps — Date & Timer Labels — Menus
  70. 70. 70 UI ELE MENTS DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH LABELS IMAGES GROUPS TABLES More Details here: Apple Human Interface Guidelines
  71. 71. 71 UI ELE MENTS DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH SLIDERSBUTTONS SWITCHES MAPS More Details here: Apple Human Interface Guidelines
  72. 72. 72 UI ELE MENTS DESIGNING FOR THE APPLE WATCH | MAY 2015 DESIGNING FOR THE APPLE WATCH MENUSDATE LABEL TIMER LABEL More Details here: Apple Human Interface Guidelines
  73. 73. DESIGNING FOR THE APPLE WATCH | MAY 2015 73 DESIGNING FOR THE APPLE WATCH RESOURCES
  74. 74. 74 RE SOU RCES DESIGNING FOR THE APPLE WATCH | MAY 2015 Apple Human Interface Guidelines / Resources DESIGNING FOR THE APPLE WATCH Apple Xcode For detailed UI concepts, best practices fonts, and resources (layout templates, icon templates, bezels). Xcode includes Swift to build WatchKit apps and the super helpful iOS Simulator to ‘natively’ display & test every apple device on your desktop while building. Vandrico Inc. Wearables Database Comprehensive database that compiles every wearable on the market by industry, body part, etc, and includes a ton of info, links and insights on the wearables.
  75. 75. DESIGNING FOR THE APPLE WATCH | MAY 2015 TH ANKS! 75 DESIGNING FOR THE APPLE WATCH

×