diff options
Diffstat (limited to 'docs/html/design/downloads/index.jd')
| -rw-r--r-- | docs/html/design/downloads/index.jd | 243 |
1 files changed, 35 insertions, 208 deletions
diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd index 4111bca..089a4af 100644 --- a/docs/html/design/downloads/index.jd +++ b/docs/html/design/downloads/index.jd @@ -3,121 +3,30 @@ page.tags=Icons,stencils,color swatches @jd:body -<p>You may use these materials without restriction to facilitate your app design -and implementation.</p> +<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> - -<h2 id="stencils">Phone & Tablet Stencils</h2> - -<div class="layout-content-row"> - <div class="layout-content-col span-5"> - - -<p>Drag and drop your way to beautifully designed Android apps. The stencils feature the -rich typography, colors, interactive controls, and icons found throughout Android, along with -phone and tablet outlines to frame your creations. Source files for icons and controls are also -available.</p> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/downloads_stencils.png"> - - </div> - - <div class="layout-content-col span-4"> - <a class="notice-designers-material" - style="width:218px;" - href="http://www.google.com/design/spec/resources/layout-templates.html"> - <div> - <h3>Material Design</h3> - <p>Layout Templates<p> - </div> - </a> - </div> - - <div class="layout-content-col span-4"> - <a class="notice-designers-material" - style="width:218px;" - href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html"> - <div> - <h3>Material Design</h3> - <p>Sticker Sheets<p> - </div> - </a> - </div> - - <div class="layout-content-col span-4"> -<p> - <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Photoshop Sources');" - href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe® Photoshop® Stencils and Sources</a> -</p> - - </div> -</div> - - - - - - -<h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2> - -<div class="layout-content-row"> - <div class="layout-content-col span-5"> - -<p>Action bar icons are graphic buttons that represent the most important actions people can take -within your app. <a href="{@docRoot}design/style/iconography.html">More on Action Bar Iconography</a></p> -<p>The download package includes icons that are scaled for various screen densities and suitable for -use with the Holo Light and Holo Dark themes. The package also includes unstyled icons that you can -modify to match your theme, plus source files.</p> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_style.png"> - - </div> - - <div class="layout-content-col span-4"> - <a class="notice-designers-material" - style="width:218px;" - href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html"> - <div> - <h3>Material Design</h3> - <p>Sticker Sheets<p> - </div> - </a> - </div> - - <div class="layout-content-col span-4"> - -<p> - <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Action Bar Icons');" - href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Action Bar Icon Pack</a> -</p> - - </div> + <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="layout-content-row"> - <div class="layout-content-col span-5"> +<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="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_toolkit.png" width="220"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit AI');" href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140722.ai">Adobe® Illustrator® Toolkit</a> @@ -127,18 +36,18 @@ modify to match your theme, plus source files.</p> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<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="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_flows.png" width="220"> </div> - <div class="layout-content-col span-4"> + <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® Illustrator® App Patterns</a> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns PDF');" @@ -147,182 +56,100 @@ modify to match your theme, plus source files.</p> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<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="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_psds.png" width="220"> </div> - <div class="layout-content-col span-4"> + <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® Photoshop® mocks</a> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<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="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_DesignSpec_Icon.png" width="220"> </div> - <div class="layout-content-col span-4"> + <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="layout-content-row"> - <div class="layout-content-col span-5"> +<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="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_Slide_Ai_Icon.png" width="150" style="width:150px;margin:0 auto;display:block"> </div> - <div class="layout-content-col span-4"> + <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® Illustrator® Design</a> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<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="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_Slide_Psd_Icon.png" width="150" style="width:150px;margin:0 auto;display:block"> </div> - <div class="layout-content-col span-4"> + <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® Photoshop® Specifications</a> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<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="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_Slide_IconExample.png" width="150" style="width:150px;margin:0 auto;display:block"> </div> - <div class="layout-content-col span-4"> + <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® Photoshop® Icon</a> </div> -</div> - - - - -<h2 id="style">Style</h2> - -<div class="layout-content-row"> - <div class="layout-content-col span-5"> - -<h4 id="roboto">Roboto</h4> -<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the -requirements of UI and high-resolution screens.</p> -<p>For Android Wear, Roboto Condensed is the system font and the Regular and Light variants should be used by all Wear apps.</p> -<p><a href="{@docRoot}design/style/typography.html">More on Roboto</a></p> -<p><a href="http://www.google.com/fonts/specimen/Roboto" class="external-link">Roboto on Google Fonts</a></p> -<p><a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed on Google Fonts</a></p> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png"> - - </div> - - <div class="layout-content-col span-4"> - <a class="notice-designers-material" - style="width:218px;" - href="http://www.google.com/design/spec/resources/roboto-noto-fonts.html"> - <div> - <h3>Material Design</h3> - <p>Roboto Font<p> - </div> - </a> - </div> - - <div class="layout-content-col span-4"> - -<p> - <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');" - href="{@docRoot}downloads/design/roboto-1.2.zip">Roboto</a> - <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto Specemin Book');" - href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a> -</p> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-5"> - -<h4>Color</h4> -<p>In Android's color palette, each color has a corresponding darker -shade that can be used as a complement when needed.</p> -<p><a href="{@docRoot}design/style/color.html">More on Color</a></p> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/downloads_color_swatches.png"> - - </div> - - <div class="layout-content-col span-4"> - <a class="notice-designers-material" - style="width:218px;" - href="http://www.google.com/design/spec/resources/color-palettes.html"> - <div> - <h3>Material Design</h3> - <p>Color Palettes<p> - </div> - </a> - </div> - - <div class="layout-content-col span-4"> - -<p> - <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Color Swatches');" - href="{@docRoot}downloads/design/Android_Design_Color_Swatches_20120229.zip">Color Swatches</a> -</p> - - </div> -</div> +</div>
\ No newline at end of file |