docs/html/design/downloads/index.jd

page.title=Downloads
page.tags="icons","stencils","colors,"swatches"
meta.tags="downloads, design, tools"
section.landing=true
footer.hide=true
nonavpage=true
forcelocalnav=true
@jd:body
<p>For icons, sticker sheets, and other downloadable resources, visit the
<a href="http://www.google.com/design">Design site</a> or use the links below. </p>

  <div class="resource-widget resource-flow-layout col-16"
       data-query="collection:design/landing/resources"
       data-cardSizes="6x2"
       data-maxResults="6"></div>
</div>


<h2 id="Wear">Android Wear Materials</h2>

<div class="cols">
  <div class="col-5">
  <h4>UI toolkit</h4>
<p>The toolkit contains detailed specs and measurements of all of the primary Android Wear UI components. Available in PDF and Illustrator formats.</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_wear_toolkit.png" width="220">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit AI');"
    href="{@docRoot}downloads/design/Android_Wear_Toolkit_371.ai">Adobe&reg; Illustrator&reg; Toolkit</a>

  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit PDF');"
    href="{@docRoot}downloads/design/Android_Wear_Toolkit_371.pdf">PDF Toolkit</a>
  </div>
</div>


<div class="cols">
  <div class="col-5">
  <h4>Sample user flow patterns</h4>
<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.
</p>
  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_wear_flows.png" width="220">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns AI');"
    href="{@docRoot}downloads/design/Android_Wear_Patterns_20140722.ai">Adobe&reg; Illustrator&reg; App Patterns</a>
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns PDF');"
    href="{@docRoot}downloads/design/Android_Wear_Patterns_20140722.pdf">PDF App Patterns</a>
  </div>
</div>


<div class="cols">
  <div class="col-5">
  <h4>Sample app design mocks</h4>
<p>Stream cards and UI elements for some example apps in fully editable PSD format.
</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_wear_psds.png" width="220">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Sample PSD Mocks');"
    href="{@docRoot}downloads/design/Android_Wear_Sample_Assets.zip">Adobe&reg; Photoshop&reg; mocks</a>
  </div>
</div>


<div class="cols">
  <div class="col-5">
  <h4>Watch faces UI toolkit</h4>
<p>Detailed specifications and measurements for the the background canvas, notification cards, and
system indicators.
</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_wear_DesignSpec_Icon.png" width="220">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Specifications');"
    href="{@docRoot}downloads/design/AndroidWear_DesignSpec_11.13.pdf">PDF Toolkit</a>
  </div>
</div>


<div class="cols">
  <div class="col-5">
  <h4>Slide watch face</h4>
<p>Example of a watch face design in AI format.
</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_wear_Slide_Ai_Icon.png" width="150"
         style="width:150px;margin:0 auto 15px;display:block">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example');"
    href="{@docRoot}downloads/design/Slide.ai">Adobe&reg; Illustrator&reg; Design</a>
  </div>
</div>


<div class="cols">
  <div class="col-5">
  <h4>Slide watch face specifications</h4>
<p>Design specifications for the Slide watch face in PSD format.
</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_wear_Slide_Psd_Icon.png" width="150"
         style="width:150px;margin:0 auto 15px;display:block">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');"
    href="{@docRoot}downloads/design/Slide.psd">Adobe&reg; Photoshop&reg; Specifications</a>
  </div>
</div>


<div class="cols">
  <div class="col-5">
  <h4>Watch face icon example</h4>
<p>Template for creating watch face icons for the carousel on Android Wear devices.
</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/downloads_wear_Slide_IconExample.png" width="150"
         style="width:150px;margin:0 auto 20px;display:block">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');"
    href="{@docRoot}downloads/design/Slide_IconExample.psd">Adobe&reg; Photoshop&reg; Icon</a>
  </div>
</div>

<div class="cols">
  <div class="col-5">
  <h4>Hardware technical drawings</h4>
<p>Technical drawings and specifications for the latest Android Wear devices.
</p>

  </div>
  <div class="col-4">

    <img src="{@docRoot}design/media/nemo_preview.png" width="150"
         style="width:150px;margin:0 auto;display:block">

  </div>
  <div class="col-4">
  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Hardware Technical Drawings');"
    href="{@docRoot}downloads/design/AndroidWear_AllGear_TechDrawings&Spec_20151101_square.png">
PNG Toolkit (Square)</a>

  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Hardware Technical Drawings');"
    href="{@docRoot}downloads/design/AndroidWear_AllGear_TechDrawings&Spec_20151101_round.png">
PNG Toolkit (Round)</a>
  </div>
</div>