Branding your Windows Store apps

Let's look at a few of the many creative possibilities that app designers and developers can use to incorporate branding into Windows Store apps.

Why infuse your app with your brand?

A brand defines the qualities that a business wants to be known for. When designing your Windows Store apps, you need to make thoughtful decisions to ensure that your apps incorporate the essence of your brand. In the same way a brand defines a business, expressing your brand in your Windows Store app differentiates it from all other apps. Let’s take a look at one example.

Here's an example Windows Store app before branding:

The Contoso Bakery example illustrates how an app for a bakery might look if it adhered to the Microsoft design principles. This example is good at placing content front and center but doesn't convey the bakery's brand very effectively.

Here's the same example app after branding:

In this version of the Contoso Bakery app, some obvious changes make this app feel more compelling. By incorporating more of the bakery's brand, the content of the app is presented in a more persuasive way, and the overall feeling of the app evokes the essence of a bakery.

How to incorporate your brand

The expression of your brand is achieved through a set of visual elements. For example, a distinctive color palette, graphics, layout, and photography style all work together to create a repeatable and recognizable brand, across a variety of media, such as broadcast, print, web and Windows Store apps.

Think of these visual elements as the knobs and dials you manipulate through code to create a unique look and feel in your Windows Store app.

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.

Contoso Downtown Café

The Contoso Downtown Café is a brand known for being authentic. It boasts hand-crafted entrees and home-brewed specialty drinks. In this example, color, grid, layout, and typography are the visual elements used primarily to evoke the brand.

	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.
	Grid   In this example, content intentionally "breaks" the grid. The menu content is key to this brand, so the top margin is reduced to provide more room for the menu. The left margin is adjusted so the company name, introductory text, and location information feel more centered, giving the content room to breathe . All of these deviations have been applied consistently and carry through to all other pages in this app.
	Layout   The design is intended to feel like a menu, because it's the menu that brings people back to this café. Like its sandwiches and other menu items, the layout is intended to feel more handcrafted. The off-white background color is reminiscent of paper, the tone is inviting, and the content is orderly, with vertical separator rules and strong left-alignment of text.
	Typography   Copperplate Gothic Bold is the primary typeface used in this design, which gives the company name its unique look and feel, similar to a hand-carved wood sign. Script MT Bold and Segoe UI are the accompanying typefaces. The script font is used sparingly in the menu header and evokes a hand-written style. Segoe UI is used as the body text to increase legibility of menu choices.

Contoso French Bakery brand

The Contoso French Bakery is a brand known for being indulgent. For many of its customers, it is the destination people seek out to satisfy their sweet tooth and guilty pleasures. In this example, color, layout, and photography are the visual elements that are used to evoke the brand.

	Colors   A color palette of just two colors, brown and pink, is enough to make customers think of a bakery. Brown is the primary color, it and conjures images of chocolate, and pink is an accent color that evokes frosted cookies and cakes. Despite the flavors associated with both colors, both are also purposeful to the brand. The brown is neutral enough to provide a rich background for full-color photography to stand out, and the pink is bright enough to highlight specific pieces of content.
	Images   Photography is the focus of this design. It's clear that time and expertise were dedicated to ensure that each image looks good enough to eat. As a result, the images of bakery items make clear what this brand is about. Also, the images are used to define categories of content.
	Layout   Compared to standard Windows Store 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.

Contoso Sandwich Truck brand

The Contoso Sandwich Truck is a brand known for being urban, social, and location-aware. This brand is backed-up by a crew of excellent chefs and a fleet of trucks, all geared toward people on the go. In this example, graphics, grid, and logo are the visual elements that are used to evoke the brand.

	Graphics   Menu choices remain the focus and aren't cluttered by an excessive use of graphics. However, graphics do play a role in establishing this brand. For example, the ‘stars’ imply a customer rating system, the color and shapes are reminiscent of city street signage, and the location-based info is set against a dark box that incorporates a gritty asphalt road graphic.
	Grid   The standard grid anchors all aspects of this design, and mimics a structure similar to what you'd see in an overhead view of a city street map. To challenge this orderly presentation, full-bleed and overlapping content and graphics sets this example apart. The overall presentation of content is bold and direct as a means to appeal to people who on the go and needing to make quick decisions.
	Logo   A company logo is not used in this example. The company name appears in text, and where the logo would In this example, we see for the first time the company name embedded in the overall composition. The logo or name is not simply top left-aligned.
	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.

Related topics

Making great Windows Store apps

UX guidelines

Commanding design for Windows Store apps

Navigation design

Understanding the Windows 8 silhouette

Guidelines for layouts

Guidelines for text and typography

Build date: 3/12/2013