19
Microsoft stores badge guidelines February 2016

Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

  • Upload
    others

  • View
    12

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Microsoft stores badge guidelines

February 2016

Page 2: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Together we can do amazing things.Millions of fans, thousands of partners and developers across the world empower people and organizations do great things with Microsoft products.

Whether you are developing your own content and promoting it on your channels or linking to others in Microsoft stores – we want to make your experience easier. We have created these unified marketing guidelines to help you link to content in our stores and be successful in your campaigns. Thank you for developing on our platforms and helping your customers get to the right place on behalf of Microsoft.

Have fun and enjoy.

As always, please send us your feedback and questions at [email protected].

Welcome

Microsoft stores badge guidelines 2

Page 3: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Purpose

We ask you to feature store badges every time you promote content on our stores. As you know, historically our badges were product-centric, focusing on multiple touchpoints: Windows, Xbox and Microsoft store online. As we are shifting to a single store destination we are starting to unify our badge design around a single brand – Microsoft.

We ask you to use the new “Get it from Microsoft” badge design every time you promote content on our storefronts. It is intended for use when promoting movies, music, apps, games and other content available across Windows and services like Microsoft Movies & TV and Microsoft Groove Music.

As a bonus, we are also creating a new way to highlight Universal Windows Platform apps and games that work only on Windows 10. You can optionally use the new promotional badge “Get it on Windows 10” in your campaigns.

We defer to the “Get it from Microsoft” badge as the default badge and encourage you to update your existing badges to the new ones to unify your customers` experience and take full advantage of the Microsoft name.

What is this guide?

We created these guidelines to help you correctly and easily promote content on Microsoft stores.

We hope you enjoy the guidelines and find them easy to use in your work.

Microsoft stores badge guidelines 3Introduction How we look Examples

Page 4: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Badge introduction

Use the “Get it from Microsoft” badge whenever you link to content offered on Microsoft stores and for Microsoft services like Microsoft Movies & TV and Microsoft Groove. It should be included on all communications, such as TV commercials, print ads, video trailers, email, newsletters, banners, packaging and websites.

To promote apps and games made only for Windows 10 you can opt to use the promotional “Get it on Windows 10” badge.

The “Get it from Microsoft” badge should not be confused with the Microsoft brand logo, which is not intended for this use.

The “Get it from Microsoft” badge always appears in full color with white type and a black background as shown. The gray border surrounding the badge is part of the badge artwork and must be included. If you require artwork without a border – please let us know at [email protected].

Microsoft stores badge guidelines 4Introduction How we look Examples

Page 5: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Get it from Microsoft lockup

Badge artwork

The badge artwork is provided in .png format for low resolution web or onscreen communications and .pdf format for use in printed materials and high resolution web and onscreen placements. Only use the artwork provided here, never create your own badges or alter artwork in any way.

Requirements

The “Get it from Microsoft” badge must be legible on all marketing communications in which you promote content offered on Microsoft stores. For all web communications you must provide a link to content in the stores.

Minimum size

In print, the logo should never appear smaller than .27in or 7mm tall. On-screen, it must appear at least 32 pixels tall. The “Get” badge is for online use only. Minimum size is 14 pixels and up to 26 pixels tall. When larger than 26 pixels, use the “Get it from Microsoft” default badge.

Clear space

Preferred clear space is equal to one-quarter of the height of the badge.

When badge is placed within very limited space, such as mobile device banners, minimum clear space is equal to one-tenth of the height of the badge.

Badge Generator

The Badge Generator is a simple way to create and get all the badge and hyperlinks to Microsoft stores.

X

X

X

X

XX

X

X

XX

Preferred clear space is 1/4 of the height of the badge

Minimum clear space for limited space is 1/10 of the height of the badge

XX

X

X

X

X XX

X X

XX

For print: .27in or 7mm tall For online: 32px tall

Minimum: 14px tall Maximum: 26px tall

Microsoft stores badge guidelines 5Introduction How we look Examples

Page 6: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Get it on Windows 10 lockup

Requirements

The “Get it on Windows 10” badge is meant to be used for apps and games that are only available on Windows 10, whereas all other apps, games, and content types should be promoted using the “Get it from Microsoft” badge, or the “Get” badge if space is limited.

Minimum size

In print, the badge should never appear smaller than .27in or 7mm tall. On-screen, it must appear at least 32 pixels tall.

Clear space

Preferred clear space is equal to one-quarter of the height of the badge.

When badge is placed within very limited space, such as mobile device banners, minimum clear space is equal to one-tenth of the height of the badge.

Badge Generator

The Badge Generator makes it simple to create and get all the badges and hyperlinks needed to promote Windows Store content.

X

X

X

X

X

X

Preferred clear space is 1/4 of the height of the badge

X

X

XX

X

Minimum clear space for limited space is 1/10 of the height of the badge

For print: .27in or 7mm tall For online: 32px tall

Microsoft stores badge guidelines 6Introduction How we look Examples

Page 7: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Store references

Use store name such as Windows Store, Xbox Store to indicate content availability within copy.

For example, say:

“Get <app name> from Windows Store”;

“Get <game name> from Xbox Store”;

“Get <device> from Microsoft store online”.

If the content is available across multiple stores, say:

“Get <game name> from Windows and Xbox stores”.

If your app or game runs on Windows 10 only, say:

“Get <app/game name> from Microsoft for Windows 10”.

Universal app reference

When you are linking to a Universal Windows Platform app or game that works across multiple devices – use the Microsoft badge.

If you are linking to an app or game, that is available across multiple stores, but is not linked across them or not built on the Universal Windows Platform, then add the device designation underneath the badge if it is not designated otherwise:

For Windows phones

For Windows PCs

For Xbox One, For Xbox 360

Text reference

For Windows phones

For Windows PCs

Microsoft stores badge guidelines 7Introduction How we look Examples

Page 8: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Localizing badges

The localized badges may be downloaded from the Badge Generator. The Microsoft and Windows 10 brand names always appear in English. Never translate them. Do not create you own translation or localized badges.

Available languages

Arabic, Belarusian, Bengali, Bosnian, Bulgarian, Chinese Simplified, Chinese Traditional, Croatian, Czech, Danish, Dutch, English, Estonian, Filipino, Finnish, French, German, Greek, Hebrew, Hindi, Hungarian, Indonesian, Italian, Japanese, Korean, Latvian, Luthuanian, Malay, Norwegian, Polish, Portuguese - Brasil, Portuguese - Portugal, Romanian, Russian, Serbian, Slovak, Slovenian, Spanish, Swahili, Swedish, Thai, Turkish, Ukrainian, Vietnamese

Scaricalo inWindows 10

Windows 10احصل على ما تريد في Windows 10

এটি পান Doe meer metWindows 10

Get it onWindows 10

Hankige see Windows 10

Атрымайце гэта на

Windows 10Dobijate uzWindows 10

Вземетe го заWindows 10

Získat veWindows 10

Få det påWindows 10

Windows 10でダウンロード

Magkaroon nito sa

Windows 10Hanki seWindows 10

Hanki

Obtenir surWindows 10

Obtenir sur

Jetzt unterWindows 10

Nabavite zaWindows 10

Windows 10에서 받기

Αποκτήστε το σεWindows 10

Windows 10 קבל עם

Windows 10पर इसे प्रा� कर�

Szerezze beWindows 10

Dapatkan diWindows 10

Iegūstiet to operētājsistēmā

Windows 10

Microsoft stores badge guidelines 8Introduction How we look Examples

Page 9: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Additional guidance for the Microsoft badge lockup

Use only the Microsoft or Windows badge artwork provided by Microsoft.

Do not modify, angle, animate, rotate, or tilt the Microsoft badge.

Download from Get

DO NOT compress or strech the badge

DO NOT reverse background color

DO NOT use gradient colors

DO NOT change text

DO NOT use one-color badge

DO NOT change background color

DO NOT alter the border

DO NOT rearrange the badge

DO NOT rotate the badge

DO NOT add drop shadows

DO NOT distort the badge

Microsoft stores badge guidelines 9Introduction How we look Examples

Page 10: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Examples

Microsoft Store Badge Guidelines 10Introduction How we look Examples

Page 11: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Want to promote your product, but don`t know where to start? We`ve created these examples to showcase how a simple campaign might look.

Always center-align the badge. Use small badge when space is limited.

Banners

.

160 px x 600 px

250 px x 250 px300 px x 250 px

468 px x 60 px

728 px x 90 px

120 px x 600 px

Contoso Contoso

234 px x 60 px

Contoso

Contoso

Product shot

Contoso

Product shot

Contoso

Contoso

Microsoft stores badge guidelines 11Introduction How we look Examples

Page 12: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

The badge must be legible on all marketing communications where it is used to promote your app. Follow the minimum size guidelines located on page 5.

Mobile

Microsoft stores badge guidelines 12Introduction How we look Examples

Page 13: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Use the badges on content or in line with other badges.

Badge placement should be center-aligned, not in the corner. Treat it as a call to action.

Use the largest size badge that fits the layout.

Print and video

Microsoft stores badge guidelines 13Introduction How we look Examples

Page 14: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Websites

Microsoft stores badge guidelines 14Introduction How we look Examples

Page 15: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

The Get it from Microsoft badge may appear on either the side or back of the package.

Place the badge below or beside your app icon or the name of the app in text.

When designing for multiple languages, do not use multiple localized badges. Instead, display translations in text below the badge.

Product packaging

App artwork

Microsoft stores badge guidelines 15Introduction How we look Examples

Page 16: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Use these images to display your content on Windows devices. Windows device chassis can be displayed vertically or horizontally. Replace the blank screen with your promotable content. The downloadable files are layered, high resolution .psd files in three perspectives of each form factor.

Download the files here

Usage guidelines

The chassis of convertible, desktop, laptop, phone and tablet devices can be used only to promote content available in the Microsoft stores. Feature only device chassis for which your content is available. Do not use a chassis if your app is not designed to display on the screen size and resolution of that device. Do not display a device chassis with a blank screen.

You must show a screenshot of your content in the device. You may resize the images, but only use the perspectives provided.

Working with the files

Open the device chassis with Adobe Photoshop. To showcase your content in the screen area, double-click the icon in the “Open to Update Screen” layer. Open the “Replace Contents to Update Screen” nested layer and place the artwork for your content.

Device chassis

Microsoft stores badge guidelines 16Introduction How we look Examples

Page 17: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

Use device chassis at a size that is clearly legible. If you require high-resolution images send us an email at [email protected] and describe your media and requirements.

Do not display the product images smaller than the minimum size shown here.

Maintain the correct relative product sizes whenever multiple products are shown.

Image sizes

Desktop, laptop, convertible, tablet: 71px minimum.

Phone: 50px minimum.

Microsoft stores badge guidelines 17Introduction How we look Examples

Page 18: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

If you are a blog or news site, an app developer, a coupon site, a device company, a start-up or you just want to monetize the traffic you refer from your website or other marketing channels, the Microsoft Affiliate Program provides a great opportunity for you to partner with Microsoft to provide great content to your audience and make money along the way.

The Affiliate program gives you a unique way to feature various Microsoft products in your communications and earn up to 10% commission on qualifying sales. It’s FREE, it’s simple and it pays.

Learn more about the program: www.microsoft.com/affiliates

The Microsoft Affiliate Program

Microsoft stores badge guidelines 18Introduction How we look Examples

Page 19: Microsoft stores badge guidelinesdownload.microsoft.com/download/2/1/1/211E77B3-177...Badge Generator The Badge Generator is a simple way to create and get all the badge and hyperlinks

If you’ve just read these guidelines, you have our appreciation. It means you share our belief in details and quality. We know applying these principles takes time and effort, but the stories we tell in all our Microsoft communications will be stronger for it.