Branding your app

Article
06/06/2012

[This documentation is preliminary and is subject to change.]

This topic shows how to incorporate your brand into your Metro style apps.

Communicating your brand by using Metro design style principles

A brand defines the qualities that a business wants to be known for. When designing your Metro style apps you need to make thoughtful decisions to ensure that your apps incorporate the essence of your brand.

When you design your apps, follow the principles described in Making great Metro style apps. Once you have a principled app, follow these branding guidelines to help infuse your apps with your brand.

Visual elements

Every brand, whether it's new or well-known, conforms to a brand guideline. Think of the brand guideline as a toolbox of visual elements with rules for applying them. A distinctive color palette, graphics, layout, and photography style all work together to create a repeatable and recognizable brand, regardless of whether they appear in broadcast, print, or a Metro style app.

You use a number of visual elements to design your brand. Think of these visual elements as the knobs and dials that you manipulate through code to create a unique look and feel in your Metro style app.

Visual element	Description
Colors	Color is one of the key attributes of any brand. Apply the primary color associated with your brand in ways that remind customers that this app comes from your business. Be selective in how color is used throughout your app. A carefully chosen color palette makes a simple, clean, and brand-appropriate presentation of content. Secondary colors should complement your brand's primary color. To ensure legibility, Ensure that your color choice, when applied to typography, maintains a 4.5:1 contrast ratio. For more info on color and accessibility in Metro style apps, see Guidelines and checklist for text and typography.
Icons	Metro style apps leave behind the "icons everywhere" approach to UI design. Icons are an integral part of navigating a touch-first system. Think of icons as touch targets. Icons aren't bullet points or detailed illustrations. Icons are graphic in nature, flat in perspective, and monochromatic. This approach reinforces the principle of "content over chrome".
Images	As most brands use a distinct color palette, they also use a unique set or style of images. The images in your Metro style apps must speak to your brand. Images should communicate what products and services your business is about. Images can be staged or modified to capture the emotions, feelings, and memories associated with your brand. Images in your Metro style apps can range from hand-drawn art to studio-quality photography.
Grid	The grid system is a design tool that helps achieve visual unity across different applications and features while providing a structure for variation and maintaining user interest. Adhere to the grid system. This helps align the UX of your apps with the rest of Windows. The grid is the underlying, and somewhat invisible, blueprint for how the visual elements of your Metro app will all come together. For more info on the grid system, see Understanding the Windows 8 silhouette.
Layout	A layout is the composition that results from the arrangement of visual elements on a page. Design your layout for both the landscape and portrait orientations. Mind the three different views which the content of your app appears in: Full screen, Snap, and Fill. Your brand needs to shine through in both orientations and in all three views. For more info on flexible layouts, see Designing flexible layouts.
Logo	Use a logo in your Metro app as a means to facilitate quick identification and public recognition. Your logo helps customers locate your app in the Windows Store and on the Start screen. Your logo is an anchor point throughout your app's user experience.
Typography	Well-crafted typefaces are a key part of Metro style apps. Use typography to emphasize content hierarchy and organization. Benefit from the capabilities, grace, and clarity of Segoe, or the alternate typeface, Cambria. Also, you can also use your own distinctive typefaces. For more info on typography, see Guidelines and checklist for text and typography.

Examples that evoke unique brands

Here are some examples that show how each visual element helps to evoke different emotions and feelings. Descriptions for each visual element provide specific details about how the layout was created, and why it's important for leveraging the Metro style.

Contoso French Bakery brand

The Contoso French Bakery brand is known as the destination people seek out to satisfy their sweet tooth and guilty pleasures. Since there are only a few Contoso French Bakeries in the area, every visit is memorable, and every customer is more than happy to place the diet on hold. This brand is not about Mom’s home-baked goods or sugary treats for the kids. The Contoso French Bakery brand is indulgent, heavenly, and perhaps even a bit devilish.

	Colors A color palette of just two colors - brown and pink - is enough to make customers think of a bakery. Both colors are appropriate and used in a purposeful way. Brown the primary color, and pink is an accent color. The brown is neutral enough to provide a rich background for full-color photography to stand out.
	Icons Icons aren't used for layout. The overall page design relies on photography and text to communicate content. Small, pink, flag icons call attention to certain content.
	Images Photography of bakery items is the focus of this design. Images are used pragmatically to categorize the content, despite their immersive subject matter.
	Grid The standard grid is used throughout this design. For example, the logo is top-left aligned and margins are maintained. The design suggests a specific brand without compromising the Metro style silhouette.
	Layout Compared to standard Metro style app designs, this example has a different feel. The most unique difference is the absence of square tiles. The tiles and grid still exist, but the images have been stylized to mimic the items that are likely to be found in a bakery, for example, the circular and scalloped shapes of a cupcake tin.
	Logo In this example, the logo serves two purposes. First, it identifies the business and labels the app. Second, it serves as an anchor point by denoting the top and left margins of the app. Simple alignment details like this help to frame your app's content.
	Typography Cambria, a serif font, feels more personal and less technical than a sans serif font. Cambria is the only typeface used throughout the app, which reinforces an open, clean layout. Also, the typeface is applied with restraint, which results in a look and feel that avoids being over stylized or busy.

Contoso Sandwich Truck brand

The Contoso Sandwich Truck brand is known for being an inviting place to meet with friends and family. The hand-crafted entrees and specialty drinks make Contoso Sandwich Truck more than a great place for regulars. It's a popular destination for out-of-town guests. This brand is not about being a tourist hot spot. It's one of the city's original food trucks. This brand is authentic.

	Colors A warm dark gray, off-white, and copper color give this design a rich feel. The warm palette evokes some of the same colors you'd find in a homemade bread crust, soup, or pastry.
	Icons No icons are used in the design, because they're not needed. If icons were added, they'd appear as nothing more than ornamentation. Instead, typography does the heavy-lifting when it comes to presenting content in a clear way.
	Images No images are used in the design. Images could be used to accompany the text, but this layout relies entirely on typography to communicate the products offered and the brand itself.
	Grid If not for the grid, the typography would feel as if it were floating haphazardly on the page. In this example, content intentionally "breaks" the grid. The top margin is reduced to provide more room for menu content. The left margin has been adjusted so the company name, intro text, and location information feel more centered, giving the content room to breathe.
	Layout The design is intended to feel like a menu. Like the sandwiches and other menu items, the layout is intended to feel more handcrafted than the other examples that appear in this topic.
	Logo A company logo isn't used in this example. The company name appears where the logo would, in text. The company name in text is the logotype. A logotype is a mark made of words, not a graphic or symbol, that's used to identify a company or event.
	Typography Copperplate Gothic Bold is the primary typeface used in this design. It gives the company name its look and feel. Script MT Bold and Segoe UI are the accompanying typefaces. The script font is used sparingly in the menu header. Segoe UI is used as the body text.

Alternate Contoso Sandwich Truck brand

This is an alternative to the design of the Contoso Sandwich Truck brand. It's a brand known for cooking up great street food and being available almost everywhere. This brand is backed-up by a crew of excellent chefs and a fleet of trucks, all geared toward people on the go, like people downtown during the weekdays, and crowds at weekend festivals. This brand is not about fast food or fine dining. The Contoso Food Trucks brand is urban, social, and location-aware.

	Colors Full-color photography adds an array of colors to the app. To avoid competition between the color palette and the photography, black and yellow are used as accent colors. From a personality perspective, the black and yellow are also colors found in urban settings, such as; street signs, and road markings.
	Icons Icons appear only in star shapes, which indicate a customer rating system. Menu choices remain the focus and aren't cluttered by an excessive use of icons.
	Images For this business to get customers to visit them, enticing and persuasive images of the product are critical. All of the food photography is professionally staged. This makes it possible to showcase close-up images in the app.
	Grid The standard grid anchors all aspects of this design. Even though a company logo isn't used, the company name appears near the top-left and is aligned with the left margin.
	Layout The organization of content has the same structure that you'd see in an overhead view of a city street map. To challenge this structure, full-bleed and overlapping content sets this example apart. The overall presentation of content is bold and direct, based on the need to appeal to people who are on the go and need to make quick decisions.
	Logo A company logo is not used in this example. The company name appears where the logo would, and in text. One could argue the company name in text is the logotype. A logotype is a mark made of words, and not a graphic or symbol, used to identify a company or event.
	Typography Trebuchet is a sans serif font, and it feels clean and technical. It's not difficult to imagine this typeface appearing on municipal properties and signage. Only 3 point sizes are used, and only two colors, which minimizes the visual noise. Full-color photography is the focus, followed by the text box shapes, which add personality.