Dirk Dougherty | 3e529b4 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 1 | page.title=Your Branding |
Joe Fernandez | 33baa5a | 2013-11-14 11:41:19 -0800 | [diff] [blame] | 2 | page.tags=branding,logo |
Dirk Dougherty | 3e529b4 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 3 | @jd:body |
| 4 | |
| 5 | <p>Following Android design patterns doesn't mean that your app has to look the same as |
| 6 | everyone else's. In Android, your app can shine as an extension of your brand. </p> |
| 7 | |
| 8 | <h2 id="color">Color</h2> |
| 9 | |
| 10 | <p>Use your brand color for accent by overriding the Android framework's default blue in UI elements like checkboxes, progress bars, radio buttons, sliders, tabs, and scroll indicators.</p> |
| 11 | |
| 12 | <p>Look for opportunities to use high-contrast color for emphasis, for example, as the background color of the action bar or a primary button. But don't go overboard: not all actions are equal, so use it only for the one or two most important things.</p> |
| 13 | <p>When customizing colors, <a href="{@docRoot}design/style/touch-feedback.html">touch feedback</a> |
| 14 | should be subtle — just slightly lighter or darker than the untouched color.</p> |
| 15 | |
| 16 | <div class="vspace size-1"> </div> |
| 17 | |
| 18 | <div class="layout-content-row"> |
| 19 | <div class="layout-content-col span-6"> |
| 20 | <img src="{@docRoot}design/media/branding_wallet.png" style="width:94%"> |
| 21 | <div class="figure-caption"> |
| 22 | The four colors of the Google Wallet logo provide a playful accent to the four dots |
| 23 | that appear as the user enters a PIN. |
| 24 | </div> |
| 25 | </div> |
| 26 | <div class="layout-content-col span-6"> |
| 27 | <img src="{@docRoot}design/media/branding_googlemusic.png" style="width:94%"> |
| 28 | <div class="figure-caption"> |
| 29 | The Google Play Music app has an orange theme color, which is used for emphasis |
| 30 | in the action bar and for accent in the selected tab, scroll indicator, and |
| 31 | hyperlinks. |
| 32 | </div> |
| 33 | </div> |
| 34 | </div> |
| 35 | |
| 36 | <h2 id="logo">Logo</h2> |
| 37 | |
| 38 | <p>Your app's <a href="{@docRoot}design/style/iconography.html#launcher">launcher icon</a> is |
| 39 | a key place to incorporate your logo, because it's what |
| 40 | users will look for and touch to begin using your app. You can carry the launcher |
| 41 | icon through to all the screens in your app by showing it in the |
| 42 | <a href="{@docRoot}design/patterns/actionbar.html">action bar</a> along |
| 43 | with the name of the app.</p> |
| 44 | |
| 45 | <p>Another approach to consider is to have your logo take the place of the launcher icon |
| 46 | and app name in the action bar.</p> |
| 47 | |
| 48 | |
| 49 | <div class="vspace size-1"> </div> |
| 50 | |
| 51 | <div class="layout-content-row"> |
Dirk Dougherty | 2a91ecb | 2013-11-05 19:06:27 -0800 | [diff] [blame] | 52 | <div class="layout-content-col span-6" style="padding-top:24px;"> |
| 53 | <img src="{@docRoot}design/media/branding_launcher_icon.png" style="width:60px;float:left;padding-right:1em;"> |
| 54 | <div class="figure-caption" style="width:290px;margin-left:20px;"> |
| 55 | Google+ reinforces its brand by carrying its launcher icon through to the action bar. |
Dirk Dougherty | 3e529b4 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 56 | </div> |
Dirk Dougherty | 2a91ecb | 2013-11-05 19:06:27 -0800 | [diff] [blame] | 57 | <img src="{@docRoot}design/media/branding_logo_icon_action_bar.png" style="width:320px;float:left;padding-right:1em;"> |
Dirk Dougherty | 3e529b4 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 58 | </div> |
| 59 | <div class="layout-content-col span-6"> |
Dirk Dougherty | 2a91ecb | 2013-11-05 19:06:27 -0800 | [diff] [blame] | 60 | <img src="{@docRoot}design/media/yourbranding_app.png" style="width:320px;"> |
| 61 | <div class="figure-caption" style="width:320px;"> |
Dirk Dougherty | 3e529b4 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 62 | Example of a the logo in the action bar. This works well in cases where the brand's logo matches the name of the app. |
| 63 | </div> |
| 64 | </div> |
| 65 | </div> |
| 66 | |
| 67 | <h2 id="logo">Icons</h2> |
| 68 | |
| 69 | |
| 70 | <div class="layout-content-row"> |
| 71 | <div class="layout-content-col span-6"> |
| 72 | <p>If you have icons that you're already using for your app on other platforms |
| 73 | and they have a distinctive look intended to fit your brand, use them on your |
| 74 | Android app as well. <strong>If you take this approach, make sure your brand styling is |
| 75 | applied to every single icon in your app</strong>.</p> |
| 76 | |
| 77 | </div> |
| 78 | |
| 79 | <div class="layout-content-col span-6"> |
Dirk Dougherty | 2a91ecb | 2013-11-05 19:06:27 -0800 | [diff] [blame] | 80 | <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;"> |
Dirk Dougherty | 3e529b4 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 81 | </div> |
| 82 | </div> |
| 83 | </div> |
| 84 | <p>One exception: For any icon in your existing set where the symbol is different from |
| 85 | Android's, use Android's symbol but give it your brand's styling. That way, users will |
| 86 | understand what the purpose of the icon is based on what they've learned in other |
| 87 | Android apps (Design principle: |
| 88 | <a href="{@docRoot}design/get-started/principles.html#give-me-tricks">Give me tricks that |
| 89 | work everywhere</a>). But the icon will still look like it belongs with all of |
| 90 | your other icons as a part of your brand.</p> |
| 91 | |
| 92 | <div class="layout-content-row"> |
| 93 | <div class="layout-content-col span-6"> |
| 94 | <p><strong>Example</strong>:<br /> |
| 95 | </p> |
| 96 | <p>The brand's normal icon for sharing on other platforms is a right arrow. |
| 97 | </div> |
| 98 | |
| 99 | <div class="layout-content-col span-6 lasyout-with-list-item-margins"> |
| 100 | |
| 101 | <div style="margin-bottom:1em;"> |
| 102 | <span class="do-dont-label bad" style="margin-left:12px">Don't</span> |
Dirk Dougherty | 2a91ecb | 2013-11-05 19:06:27 -0800 | [diff] [blame] | 103 | <span style="margin-left: 64px;" class="do-dont-label good"><strong>Do</strong></span> |
Dirk Dougherty | 3e529b4 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 104 | </div> |
Dirk Dougherty | 2a91ecb | 2013-11-05 19:06:27 -0800 | [diff] [blame] | 105 | <img src="{@docRoot}design/media/yourbranding_sharing.png" style="width:180px;"> |
Dirk Dougherty | 3e529b4 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 106 | </div> |
| 107 | </div> |
| 108 | |
| 109 | <p>What if you don't already have your own icons — for example, if you're creating a |
| 110 | brand new app only for Android? In this case, use Android's standard icons and rely |
| 111 | more on color and logo for branding. Get the Action Bar Icon Pack, available for free |
| 112 | in <a href="{@docRoot}design/downloads/index.html">Downloads</a>.</p> |