sapthaswaras

Metro Style Design

Metro Style Design Principles to Work

The term "Metro style" is a little ambiguous, as it refers both to a Windows Runtime (WinRT) application targeted at Windows 8 and an application or Web site that has a particular look and feel. In this article, I'll discuss the latter, drilling into the details of the style that characterizes a Metro-style application or Web site.

To get started, it's important to understand the vision and purpose of the Metro style. This is outlined in a set of Metro design principles, which can be found here and are displayed in Figure 1 as a mind map

Even if you only glanced over the list, you'd come away with the strong sense that the Metro style isn't just about UI, and it certainly isn't simply a list of rules (for instance, "Use this font," or, "Ensure the title bar is x pixels"). Rather, the principles are about inspiring quality -- about moving UI engineering from an afterthought to a primary activity. Even the principles themselves exemplify the principles: they're self-referentially coherent.

The principles indicate a pride in the craft of UI design; they inspire confidence and motivate toward accuracy (detail) that in turn builds a sense of safety and reliability. The principles are devoid of redundancy and are written as a series of bullet points (rather than paragraphs) to achieve the functional minimalism they advocate.

However, in spite of the quality of the principles themselves, they're too high-level to give rubber-meets-the-road guidance on what it means, in UI design, to create a Metro application or Web site. The details for that are instead found in the UX guidelines for Metro apps. Let's consider some of the guidelines focused on the UI look of the Metro style:

• Layout and navigation
• Typography
• App bars (toolbars)

Layout and Navigation
The first area of detail included in the UX guidelines is the navigation design for Metro apps. Using a hierarchical approach, the Metro navigation design enables a flow from top-level down to detail, but it also supports flat navigation (a wizard, for example). Figure 2 shows a hierarchical navigation example.

In addition to the navigational flow presented in Figure 2, also notice the layouts of each page. They're comprised of tiles, and the tiles themselves are defined within tile templates. However, in keeping with "the sweat the details, fit into the UI model, and use balance, symmetry and hierarchy" principles, the tiles themselves need to align with 20x20 pixel grid units (possibly broken further into a 5x5 pixel grid subunits). In addition, the left and top margins have specifications; the content itself should start at six units from the left and seven units from the top.

Typography
Another area given significant attention in the Metro UX guidelines is the typography -- the arrangement of text so as to accentuate the meaning of the content (consider the on-tech example). In keeping with the "content before chrome" principle, the typography's role is not to distract but rather augment the content -- to make it come alive and be immersive and compelling. To this end, Microsoft recommends specific fonts for roles:

• Segoe UI for Controls and UI Elements
• Calibri for Read/Write (for instance, a multiline text box)
• Cambria for Reading

And, more specifically, only four sizes of these fonts (none of which should be displayed italic):

• 11 pt. Segoe UI Semilight for most text
• 9 pt. Segoe UI for short text elements, such as button captions
• 20 pt. Segoe UI Light for text elements that need to be clearly visible and draw user attention, but are short and fit on a single line
• 42 pt. Segoe UI Light for prominent UI elements that consist of one or two words on a single line

Application Bars (Toolbars)
When it comes to the toolbar -- called the app bar in Metro -- there are guidelines, too. Icons are to be 48x48 pixels with a center graphic not to exceed 26x26 pixels, and generally without color. (There are several large Metro app bar icon packs available for free, including those from Syncfusion Inc., metro.windowswiki.info and icons8.com.) For some, this might seem overwhelmingly restrictive and creativity-stifling.

Please click here for more info...