Branding your app

Applies to Windows and Windows Phone

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:

An example Windows Store app for the Contoso Bakery, 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:

An example Windows Store app for the Contoso Bakery, 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.

Visual elementDescription
Colors

Color is a key attribute for expressing brand. Apply the primary color associated with your brand in ways that tell people that this app comes from your business.

Graphics

Use graphics to reinforce your brand by adding character to the presentation of content. Too many graphics, however, can interfere with the flow of your content and seem mere decoration or distraction.

Images

Illustrations and photography should also reflect your brand. Reuse the same imagery and style from your company's other communications or websites.

Grid

The Windows Store app grid system helps unify the visual elements of your app's presentation. The grid aligns your branded app's UI to work with the rest of Windows.

Layout

The arrangement of visual elements for all pages needs to be relevant to your brand. You should also strive for consistency across page and content types.

Logo

Use your logo to help people quickly identify your app and recognize your brand.

Typography

Typefaces are a key part of Windows Store apps. The right choice can be as impactful to your brand as color, logo, or layout, so be thoughtful about the typography you use.

 

Example line-of-business app

Branding your line-of-business (LOB) apps is important from both retail and enterprise perspectives. This example demonstrates how brand can be infused in a retail and enterprise app for an express service company.

Elements of the company brand

Fabrikam Worldwide Logistics provides three levels of express services internationally. The target customers are small business owners who want to easily create and manage shipments. Reliable global shipping and frictionless transactions are the core messages to the customers.

Brand elementDescription

Main brand of example Fabrikam Worldwide Logistics Windows Store app

The main brand communicates the passion of providing reliable global services by using the graphical elements, such as the map and the strip.

Logos for example Fabrikam Worldwide Logistics Windows Store app

Led by the main brand, the logo for each service communicates the three levels of services.

Brand elements of example Fabrikam Worldwide Logistics Windows Store app

The brand elements, such as the dotted line and the map, on the packages are reused in the app design to create a cohesive branding story.

 

Creating a shipment

A small business customer logs on to his account to renew a shipment.

Login page including header branding of example Fabrikam Worldwide Logistics Windows Store app
The color, graphic, and logo carry through the header and pages as branding elements.

 

On the account page, the color, graphics (the strip and the dotted line), and the typeface communicate the main brand. The customer's identity is co-branded in the header.

Coho Craftsman page showing co-branding of example Fabrikam Worldwide Logistics Windows Store app
The customer co-brand takes inspiration from the typefaces in the main brand and uses the serif font Constantia for the title and the sans-serif font Corbel elsewhere throughout the app.

 

The transaction page uses a flat navigation pattern. A user can pan through each section to glance and modify the information.

Flat navigation pattern of example Fabrikam Worldwide Logistics Windows Store app, showing horizontal panning across a page

Flat navigation pattern of example Fabrikam Worldwide Logistics Windows Store app, showing horizontal panning, left side of a page

Flat navigation pattern of example Fabrikam Worldwide Logistics Windows Store app, showing horizontal panning, middle of a page

Flat navigation pattern of example Fabrikam Worldwide Logistics Windows Store app, showing horizontal panning, right side of a page

A user can quickly navigate to the semantic zoom view from the transaction page to view the history of all the transactions with summarized information.

Flat navigation pattern of example Fabrikam Worldwide Logistics Windows Store app, showing semantic zoom, zoomed out view

Flat navigation pattern of example Fabrikam Worldwide Logistics Windows Store app, showing semantic zoom, panning across zoomed out view
The brand elements, such as color, graphics, service logos, and typefaces, are used consistently to communicate the essence of the business.

 

A user navigates to other categories by using the navigation bar.

Navigation bar of example Fabrikam Worldwide Logistics Windows Store app

Delivering a shipment

A driver uses the app to deliver shipments to customers. Using the two column design to show the inventory on the left and the content on the right, a driver can easily navigate the detail information of a shipment. The branding elements, such as the strip and the common controls, are used consistently across the app.

Two column page of example Fabrikam Worldwide Logistics Windows Store app, showing inventory and map

When the driver arrives, the right column shows the details in a vertical scroll list. Both the inventory list and the detail content scroll in the same direction.

Two column page of example Fabrikam Worldwide Logistics Windows Store app, showing inventory list and detail
The info graphic that helps the driver locate the shipment in the truck leverages the same branding color as other parts of the app.

 

When the driver asks for customer's signature, the app shows the signature page in portrait view and exposes the branded navigation bar. It is easier for the driver to hand the device to the customer in portrait view.

Signature page of example Fabrikam Worldwide Logistics Windows Store app, portrait orientation
Asking for a signature is a critical branding moment. The user interfaces with the enterprise app and the brand.

 

Once the driver gets the signature, the app shows the remaining items and graphics of the progress.

Inventory list page of example Fabrikam Worldwide Logistics Windows Store app, portrait orientation

Co-branding your app

A relationship between two or more brands is called co-branding. Keep in mind the following questions when you design an app that needs to accommodate multiple brands:

  • Which brand leads the communication?
  • What role does the supporting brand play in the communication?

A Windows Store app that is unsuccessful in addressing these questions runs the risk of confusing customers and diluting the brand.

Co-branding in example Fabrikam Worldwide Logistics Windows Store app

The Fabrikam example addresses co-branding by reinforcing its brand through a consistent implementation of visual elements. For example, the Fabrikam brand color, graphics, layout, and typeface appear across the app and adhere to a limited set of style variations. Each page of the app clearly communicates that the app is delivered by Fabrikam.

To communicate that the Coho Craftsman brand is secondary to the main brand, the Coho Craftsman logo, typeface, and image plug in to the Fabrikam layout. You can imagine, for example, how another of Fabrikam's small-business partners could fit into the area currently occupied by Coho Craftsman.

Co-branding in example Fabrikam Worldwide Logistics Windows Store app

Other brands also appear in this example. The credit card companies on the left-side of the page appear as lower-level brands due in part to their small size, content specific placement, and limited color. On the right-side of the page, the clothing product manufacturer’s brands appear in a one color logo that is scaled down in size, and conform to the main brand’s design styles. In all cases, the visual elements have been modified in such a way that the supporting brands remain clear, but are not as pronounced as the main brand.

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.

Contoso Downtown Café

An example Windows Store app for the Contoso Downtown Café, showing how the brand is expressed through color, grid, layout, and typography.
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.

 

An example color palette for branding a Windows Store app.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.
An example grid for branding a Windows Store app.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.
An example layout for branding a Windows Store 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.
Example typography for branding a Windows Store app.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

An example Windows Store app for the Contoso Downtown Café, showing how the brand is expressed through color, layout, and photography.
The Contoso French Bakery is a brand known for being indulgent. For many of its customers, it's the destination people seek out to satisfy their sweet tooth and guilty pleasures. In this example, colors, images, and layout are the visual elements that are used to evoke the brand.

 

An example color palette for branding a Windows Store app.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.
An example image for branding a Windows Store app.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.
An example layout for branding a Windows Store app.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

An example Windows Store app for the Contoso Sandwich Truck, showing how the brand is expressed through graphics, grid, and logo.
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.

 

Example graphics for branding a Windows Store app.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 signs, and the location-based info is set against a dark box that incorporates a gritty asphalt road graphic.
An example grid for branding a Windows Store app.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.
An example logo for branding a Windows Store app.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.
An example color palette for branding a Windows Store app.Colors   Black and yellow are used as accent colors. From a personality perspective, the black and yellow are colors found in urban settings, such as street signs and road markings.

 

Example that reinforces brand across app pages

Infusing your app with your brand in secondary, content-rich pages is just as important as branding the landing page. This example uses a fictional sports team app to demonstrate how you can incorporate brand throughout multiple app pages.

Fabrikam FC, professional soccer team

Fans of Fabrikam FC, a professional soccer team, want a behind the scenes look at their favorite team, all the details on their favorite players, and expect all the latest information from anywhere. The landing page design reflects the bold and dynamic nature of the brand.

Landing page of example Fabrikam FC team Windows Store app

Color, typography, and graphics highlight the bold and dynamic nature of the brand.

 

This app uses a flat navigational pattern. A user swipes in the navigation bar to navigate to other views of the app.

Navigation bar in example Fabrikam FC team Windows Store app

The color and logo carry through to the navigation app bar as branding elements. The electric team colors against the dark background create a strong contrast for a bold personality and the yellow is used throughout the app to indicate interactivity.

 

Using the navigation bar, the user views the players on the team.

Player page in example Fabrikam FC team Windows Store app

Fonts are consistent across the different views of the app. The sans serif typeface compliments the team’s high-energy and bold persona. The all-caps font style makes certain text labels look and feel more like a graphical element.

 

To quickly navigate to a given player, zoom out to the semantic zoom view of this page.

Semantic zoom in example Fabrikam FC team Windows Store app

The action shots of players break the grid to create a dynamic layout full of energy. They are used on the team page and the landing page.

 

Example Fabrikam FC team Windows Store app showing icons and graphics that reinforce the brand.

Simple icons and graphics make the content more fun and accessible and encourage interactivity and exploration throughout the app.

 

Related topics

Meet Windows Store apps
UX guidelines
Command patterns
Navigation patterns
Laying out an app page
Guidelines for window sizes and scaling to screens
Guidelines for fonts
How to brand your ListView
Gallery

 

 

Show:
© 2014 Microsoft