Watch out for Apple Watch

Harsha Kakkeri

Apple’s most personal device yet

THE APPLE WATCH has finally arrived and the developer community had received early access to the WatchKit SDK last November.Currently, anyone ordering the Apple Watch Sport will have a long waiting time before their orders are shipped. Things aren’t much better for the standard, mid-range Apple Watch, which currently will take 4 to 6 weeks to reach your wrist.

The Apple Watch is a brand-new Apple product developed after the death of Steve Jobs. Within less than ten minutes of the release on 10th of April it had sold out.

It is an extraordinarily small and ultimately more personal device. It knows when you’re wearing it, you can talk to it and also it thinks about your Heartbeat. And with three variants available there’s an Apple Watch for everyone.

Apple’s wearable comes in three different models and two different sizes. Apple Watch, Apple Watch Sport and Apple Watch Edition which comes in Two sizes 38mm and 42mm.

What it does, what it is

Much like most other smartwatches, the Apple Watch isn’t a standalone device — it’s an extension to your phone. Android Wear, Samsung Gear, Pebble and others work the same way. But here, you must own an iPhone 5 or later to use the Watch.

Core apple watch functions

Communication, fitness, information, time and also many more features and apps like:

  • Apple Watch receives messages from friends
  • Send texts and lets you dictate messages
  • Make speakerphone calls, ping people with animated emoj
  • It tracks your steps, logs runs and monitors your heart rate
  • Listen to music via wireless Bluetooth headphones
  • Make payments with Apple Pay and much more

Designing for Apple Watch

Apple has provided a set of Photoshop (PSD) resources to help designers prototype user interfaces. Get the apple watch kit resource from here.

A few key points
  • Apple wants Watch apps to focus on one thing at a time.
  • Although it’s not required, Apple recommends that all Watch apps have black backgrounds
  • Apple wants developers to use color sparingly, only for accenting text and branding
  • Apple also wants developers to use icons instead of text as often as possible
  • Circular Buttons and Icons
  • Different Image Sizes, since both screens will be retina, you will only need to provide your images as @2x when bundling

Navigation

A WatchKit app may include more than one screen. When this is the case, choose the navigation model that best meets your needs: page-based or hierarchical. (You can’t use both models in one app.)

  • Page Based: A paginated interface lets the user navigate between pages of content by swiping horizontally
  • Hierarchical: This style matches the navigation style in iOS and is best suited for apps with hierarchical information

Digital Crown

The Digital Crown, Apple’s specialized way of interfacing with the watch, sits off to the side, looking just like the part of the watch that used to wind older watches. Instead of gestures for navigation, it uses a digital crown to handle scrolling and zooming, and a force press to bring up secondary actions.

A second button below brings up favorite contacts, or triggers Apple Pay with a double-click.

User interaction

The interaction are minimal, such as “Vertical and Horizontal swipes to display previous and next page and Left edge swipe navigate to the parent interface”.

The screen is touch-sensitive, and while gestures are not supported, pressure-sensitive touch is included to distinguish between tap and hold.

Layout Guidelines

Few things that needs to be considered before we start our design layout for apple watch

  • Try to limit the number of side by side controls in your interface by max 3
  • Try to make text buttons full width
  • Use the space all the way up to the edges of the screen
  • App uses relative positioning of items (while porting from 42mm to 38mm)
  • Prefer the use of left alignment during layout – Top to bottom and left to right
  • Use the content menu to present the secondary action

Color & Typography

iOS 7 heralded the start of the Helvetica Neue era for Apple, marked by the transition to the flat design and discarding of the aging skeuomorphic designs.  For Apple’s wearable, they have opted for the aptly-named San Francisco font, which is a new sans serif font.

Few key points

  • Use the built-in text styles whenever possible
  • Always use Dynamic Type
  • Use a single font throughout your app

Color helps provide visual continuity and branding for your app

  • Use black for your app’s background color.
  • Use your app’s key color for branding or status
  • Use high contrast colors for text

Icon Sizes

Every app needs a beautiful, memorable home screen icon that uniquely identifies the app to the user. Because apps on the home screen are identified solely by their icon, your icon should be recognizable and similar to your iOS app icon while still conveying the purpose of your app.

icon

  • Create your icons as full-bleed square images using the given dimensions
  • Use the PNG format for all images and icons
  • Use the standard bit (24 bit) depth for icons and images

Menu Sizes

Icons in the Force Touch menu are template images, where the alpha channel of the image defines the  resulting shape. Color information in the image is ignored.

menu

Finally, let’s not forget Siri

Activate Siri on your Apple Watch either double tap the button located below the Digital Crown, press and hold the Digital Crown, or say “Hey Siri”.

“Hey, Siri.” Voice recognition was excellent and more useful than you’d expect. You can use the concierge service to dictate messages, find places on a map and check your calendar too.

about the author

Harsha Kakkeri