Designing Watch Faces for Android Wear

DESIGNING
WATCH
FACES
for Android Wear
Version 1.0
INTRO
In early 2014, ustwo began collaborating with the Android Wear team
at Google to design and build some of the first watch faces available
to customers on the Play Store.
Along the way we have learned much from the unique challenges that
come with designing watch faces for wearables.
The goal of this guide is to build on and extend the use of the official
Google Design Guidelines and elevate the level of design for watch
faces for the Android community.
Designing Watch Faces for Android Wear
2
PRINCIPLES
We lean on these principles throughout the
design process. Strong and clear principles help
keep designs focused, critiques purposeful and
free of egos, and solutions clear and decisive.
Designing Watch Faces for Android Wear
BE ZEN
An effective watch face design
should be calming, balanced and
considered.
Calendar
Showing your wearer how busy they are doesn’t need to be
stressful. Avoid lots of manic patterns, lines, and shapes.
Designing Watch Faces for Android Wear
BE
GLANCEABLE
People don’t stare at their watch,
they glance quickly at it many
times a day.
Whatever data you decide to show
on your watch face, make sure it
can be read completely in a short
glance.
Your design doesn’t need to be
confusing to be a good
conversation piece.
Calendar
If your concept needs to be “studied” to be
understood consider simplifying your design.
Designing Watch Faces for Android Wear
MAKE IT
WORK
Is the functionality thought
through or is it just pretty? A great
watch face undergoes round of
interrogation, not just challenging
it’s visual appeal but how it will
actually work as a watch face.
Fit
How do UI elements map to time?
Designing Watch Faces for Android Wear
SHOW A
SINGULAR
EXPRESSION
If your design aims to express a
single idea, you can avoid
overwhelming wearers. It’s a small
screen and pixels are bigger than
atoms. A simple purpose paired with
a simple design will make your
watch face easy to understand and
fun to wear.
For example:
Weather
Less is more. A weather-based watch face that shows tons of detailed
Is it going to rain later?
When is my next meeting?
How active have I been today?
Designing Watch Faces for Android Wear
data points is ultimately less useful than one which is simple and clear.
PROCESS
Designing Watch Faces for Android Wear
RECOGNIZE
HISTORY
Wristwatches have been around
for many centuries. As designers,
we need to learn and respect the
history of this artform before we
can push into the future.
Here are some resources we like:
Hodinkee
Dezeen Watch Store
Perpetuelle
WatchTime
Watchville
Designing Watch Faces for Android Wear
Source: HODINKEE
SKETCH
YOUR IDEAS
Sketching is an essential part of
the design process. It’s the fastest
way to get your ideas out and will
allow you to come up with a bunch
of concepts in no time.
Once you have some sketches you
should be able to quickly discern
what is working and what is not. It
also helps to show other people to
make sure they understand your
concept.
Download our sketch sheet
2.3MB
Designing Watch Faces for Android Wear
CONSIDER
YOUR
WEARERS
Watch faces are an expression of
the wearer. Think about the kind of
people that you imagine would
want to wear your watch face(s)
and the kind of styles they’d love.
Designing Watch Faces for Android Wear
Source: thesartorialist.com
We encourage each designer
to continuously iterate and
test designs directly on a
range of devices.
Designing Watch Faces for Android Wear
ITERATE
Build upon your previous design
until you really nail it.
Designing Watch Faces for Android Wear
v1
v2
v3
Exploration of stick and numerals.
Line width exploration.
The final simplified version of Air.
CREATE SPECS
Save yourself some time by
talking with your team. Your
specifications only need to
include what is agreed to be
necessary.
Describe how the face is meant to
function, animate and specify line
weights, type sizes and color
values etc. Be sure to include how
the face is designed to look in
ambient modes and how the
system UI should be placed.
Designing Watch Faces for Android Wear
TECHNIQUE
Designing watch faces for a tiny screen on your wrist is a
game of constraints. Become familiar with these constraints
and use them to make your faces more beautiful and useful.
Designing Watch Faces for Android Wear
USE A GRID
A grid will introduce a systematic
and uniform layout to your design.
Designing Watch Faces for Android Wear
USE
MULTIPLE
COLORS
Wearers love to customize their
watch face so consider how your
design looks using a variety of
colors. This can be achieved by
giving your design elements alpha
values instead of solid colors.
Avoid light colored backgrounds.
Black works best as it blends
seamlessly into the watch hardware.
Designing Watch Faces for Android Wear
VARY HAND
LENGTHS
The hour hand should be at least ⅓
shorter than the minute hand. This
will make the time easier to read.
Designing Watch Faces for Android Wear
BE BOLD
Ensure your design elements are
bold enough to stand out as
subtle details are easily lost in a
real world context.
Designing Watch Faces for Android Wear
DESIGNING
WITH DATA
Designing Watch Faces for Android Wear
DATA
INTEGRATION
The wear platform enables us to
push data from your mobile device
to the watch face itself through a
companion application.
The inclusion of data in a watch
face design makes way for many
exciting possibilities.
Designing Watch Faces for Android Wear
DATA
RESOLUTION
It can be useful to lower the
resolution of the data shown.
For example it’s better to say it will
rain this evening, rather than at
7:15pm.
Designing Watch Faces for Android Wear
USE REAL
DATA
Use real sample data to ensure
your design will look as realistic
as possible.
Example: Albumen
Designing Watch Faces for Android Wear
STRESS
TEST
Consider all kinds of situations to
ensure your design is well
prepared.
Examples:
All day day calendar events
No data
Surpassing fitness goal
Translated text
Designing Watch Faces for Android Wear
Albumen
Next
Runway
All day event
Multiple events
No data
CONSTRAINTS
Designing Watch Faces for Android Wear
ROUND
AND
SQUARE
Android wear devices come in
different shapes and sizes.
You’ll need to consider square and
round faces.
Create flexible concepts
Use a common design language
The watch face is flexible enough to work
well without any adjustment.
Try using a common set of colors and
other design elements.
Naturally, some concepts will work
better in a certain formats but a
little planning will allow people to
enjoy your watch face regardless
of screen format.
Adjustments for analog concepts
Some of your concepts will naturally take the
shape of an analog clock.
Designing Watch Faces for Android Wear
SYSTEM UI
Android Wear devices feature a
variety of screen technologies,
each with their own advantages
and considerations.
One important consideration when
designing the ambient mode
display for your watch face is how
it affects battery life and screen
burn-in on some screens.
Designing Watch Faces for Android Wear
Large Card
Small Card
Cards are the notification system that
bridge the experience between the
watch and smartphone.
Faces with information on the bottom
half of the face should leverage the small
peek card instead.
Hotword & Indicator
Customization
Pixels on some screens in ambient
mode are either “on” or “off”.
Indicators and Hotword can be
change the position.
SCREEN
SIZES
When creating a watch face
design you will need to ensure
your designs can be translated
into both circular and square
screen orientations.
Prepare your design to fit within a
320×320dp circular and square
canvas. We recommend that you
create designs using only vector
artwork so that you can scale your
designs easily to accommodate
for future screen sizes and
resolutions.
Designing Watch Faces for Android Wear
320 DP
320 DP
320 DP
CANVAS
LIMITATIONS
There are several canvas size
limitations that all watch face
designers should be aware of.
The Moto360, a watch model that
features a circular display has a
bevelled edge which distorts the
visual display along its edge. For
this reason we recommend you do
not place important design
elements within 20dp from the
edge of the canvas.
Designing Watch Faces for Android Wear
20 DP
20 DP
20 DP
20 DP
DESIGN FOR
ALL MODES
We encourage you to create
designs that translate well across
all screen modes.
Ambient
Designing Watch Faces for Android Wear
Slide
Slide
Slide
Interactive
Ambient
Ambient Low bit
SIMPLIFYING
1BIT MODE
If your design requires multiple
data source it’s important to be
extremely clear in how the
information is presented.
Designing Watch Faces for Android Wear
DEPLOY
Your Play Store listing should look
as good as your watch face(s).
Designing Watch Faces for Android Wear
NAME
Your watch face can be listed as a
standalone app on the Google
Play Store or it can be added to an
existing app that you may have
already published (example).
If you intend on listing your watch
face as a standalone app you
should add the words “watch
face” or “watch faces”. This will
help differentiate from other smart
phone and tablet apps.
Designing Watch Faces for Android Wear
ICON
If you’re publishing a single watch
face your icon can simply be a
preview of the watch face itself.
If you’re publishing a bundle of
watch faces within one app you’ll
need to try and represent this
within the icon.
Single
Bundle
A single watch face can work well, but
This icon represents a bundle
consider simplifying the design so it
containing 10+ watch faces.
works well at varying sizes.
Designing Watch Faces for Android Wear
DESCRIBE
Write an easy-to-understand
description describing how your
watch works.
Designing Watch Faces for Android Wear
PRESENT
Showing how your design looks on
both square and round devices is
super important.
Designing Watch Faces for Android Wear
SHOW
MOVEMENT
Show the movement of your watch
face so wearers can understand
how they work. This is especially
important for abstract faces.
Designing Watch Faces for Android Wear
PROMOTE
Create graphics to promote your
watch face(s). These can be used
on your Play Store listing and
social media.
Designing Watch Faces for Android Wear
WEAR.USTWO.COM