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.
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.|
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.
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.
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.
Illustrations and photography should also reflect your brand. Reuse the same imagery and style from your company's other communications or websites.
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.
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.
Use your logo to help people quickly identify your app and recognize your brand.
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.
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.
The main brand communicates the passion of providing reliable global services by using the graphical elements, such as the map and the strip.
Led by the main brand, the logo for each service communicates the three levels of services.
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.
|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.
|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.
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.
|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.
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.
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.
|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.
|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.
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.
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.
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.
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.
|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 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.|
|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.|
|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.|
|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.|
|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 signs, 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 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.|
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.
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.
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.
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.
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.
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.
Simple icons and graphics make the content more fun and accessible and encourage interactivity and exploration throughout the app.
- 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
Build date: 11/16/2013