• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=Downloads
2page.tags=Icons,stencils,color swatches
3@jd:body
4
5
6<p>For icons, sticker sheets, and other downloadable resources, visit the
7<a href="http://www.google.com/design">Design site</a> or use the links below. </p>
8
9  <div class="resource-widget resource-flow-layout col-16"
10       data-query="collection:design/landing/resources"
11       data-cardSizes="6x2"
12       data-maxResults="6"></div>
13</div>
14
15
16<h2 id="Wear">Android Wear Materials</h2>
17
18<div class="cols">
19  <div class="col-5">
20  <h4>UI toolkit</h4>
21<p>The toolkit contains detailed specs and measurements of all of the primary Android Wear UI components. Available in PDF and Illustrator formats.</p>
22
23  </div>
24  <div class="col-4">
25
26    <img src="{@docRoot}design/media/downloads_wear_toolkit.png" width="220">
27
28  </div>
29  <div class="col-4">
30  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit AI');"
31    href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140722.ai">Adobe&reg; Illustrator&reg; Toolkit</a>
32
33  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit PDF');"
34    href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140722.pdf">PDF Toolkit</a>
35  </div>
36</div>
37
38
39<div class="cols">
40  <div class="col-5">
41  <h4>Sample user flow patterns</h4>
42<p>Examples of how to chain together simple Android Wear UI components into common user flow patterns, from simple notifications to complex interactions involving full screen activities.
43</p>
44  </div>
45  <div class="col-4">
46
47    <img src="{@docRoot}design/media/downloads_wear_flows.png" width="220">
48
49  </div>
50  <div class="col-4">
51  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns AI');"
52    href="{@docRoot}downloads/design/Android_Wear_Patterns_20140722.ai">Adobe&reg; Illustrator&reg; App Patterns</a>
53  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns PDF');"
54    href="{@docRoot}downloads/design/Android_Wear_Patterns_20140722.pdf">PDF App Patterns</a>
55  </div>
56</div>
57
58
59<div class="cols">
60  <div class="col-5">
61  <h4>Sample app design mocks</h4>
62<p>Stream cards and UI elements for some example apps in fully editable PSD format.
63</p>
64
65  </div>
66  <div class="col-4">
67
68    <img src="{@docRoot}design/media/downloads_wear_psds.png" width="220">
69
70  </div>
71  <div class="col-4">
72  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Sample PSD Mocks');"
73    href="{@docRoot}downloads/design/Android_Wear_Sample_Assets.zip">Adobe&reg; Photoshop&reg; mocks</a>
74  </div>
75</div>
76
77
78<div class="cols">
79  <div class="col-5">
80  <h4>Watch faces UI toolkit</h4>
81<p>Detailed specifications and measurements for the the background canvas, notification cards, and
82system indicators.
83</p>
84
85  </div>
86  <div class="col-4">
87
88    <img src="{@docRoot}design/media/downloads_wear_DesignSpec_Icon.png" width="220">
89
90  </div>
91  <div class="col-4">
92  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Specifications');"
93    href="{@docRoot}downloads/design/AndroidWear_DesignSpec_11.13.pdf">PDF Toolkit</a>
94  </div>
95</div>
96
97
98<div class="cols">
99  <div class="col-5">
100  <h4>Slide watch face</h4>
101<p>Example of a watch face design in AI format.
102</p>
103
104  </div>
105  <div class="col-4">
106
107    <img src="{@docRoot}design/media/downloads_wear_Slide_Ai_Icon.png" width="150"
108         style="width:150px;margin:0 auto;display:block">
109
110  </div>
111  <div class="col-4">
112  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example');"
113    href="{@docRoot}downloads/design/Slide.ai">Adobe&reg; Illustrator&reg; Design</a>
114  </div>
115</div>
116
117
118<div class="cols">
119  <div class="col-5">
120  <h4>Slide watch face specifications</h4>
121<p>Design specifications for the Slide watch face in PSD format.
122</p>
123
124  </div>
125  <div class="col-4">
126
127    <img src="{@docRoot}design/media/downloads_wear_Slide_Psd_Icon.png" width="150"
128         style="width:150px;margin:0 auto;display:block">
129
130  </div>
131  <div class="col-4">
132  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');"
133    href="{@docRoot}downloads/design/Slide.psd">Adobe&reg; Photoshop&reg; Specifications</a>
134  </div>
135</div>
136
137
138<div class="cols">
139  <div class="col-5">
140  <h4>Watch face icon example</h4>
141<p>Template for creating watch face icons for the carousel on Android Wear devices.
142</p>
143
144  </div>
145  <div class="col-4">
146
147    <img src="{@docRoot}design/media/downloads_wear_Slide_IconExample.png" width="150"
148         style="width:150px;margin:0 auto;display:block">
149
150  </div>
151  <div class="col-4">
152  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');"
153    href="{@docRoot}downloads/design/Slide_IconExample.psd">Adobe&reg; Photoshop&reg; Icon</a>
154  </div>
155</div>