Stephane MasseyStephane Massey. Since I’ve been working closely with the Metro Ui and Isotope for a client here in London I thought id share with you what the Metro Ui is about and how I understand it.
When we talk about “Metro” we are generally referring to the design style developed by Microsoft. Metro isn’t exactly new, the style has been around and evolving as early as the mid 90′s with Encarta 95 and elements crept into MSN 2.0. Over the years we’ve seen it included in Windows Media Center and very much so into Zune. Later as this visual design language was refined, and found its way into the Windows Mobile operating system, Windows Phone 7 and recently into the Xbox 360 dashboard update, and Windows 8.
A specially-made version of Microsoft’s Segoe font family, Segoe WP, is used as the main font family for all typographical elements. Metro can be divided into two sections; the Metro Design Principles and the Metro Design Language. The tangible manifestation of a concept is called language. Typography Navigation. Plan for monetization (Metro style apps) The Windows Store provides a number of ways to make money with your apps.
You can choose from a variety of different business models, such as free ad-supported apps, or apps sold at a specific price (perhaps with a free trial offered). As you plan your apps, think about which business model makes the most sense for you, and design your app to support your monetization plans. You can adjust your pricing or business model later if you find you want to make changes. Selecting a business model The Windows Store enables several business models that can help you make money with your apps.
Collect full price before download The simplest business model in the Windows Store is to require that your customers pay the full price for your app before they can download it. Requiring a purchase in order for a customer to download your app may not be the most effective option unless potential customers already trust your app, or you charge a low price. Free trial versions of paid apps In-app purchases. Microsoft offers touch guidance to Windows 8 Metro-app developers. Since Metro-style applications for Windows 8 should all have a touch-first experience, Microsoft has recently released a brief but useful “Windows 8 Touch Guidance” documentation on how developers should think about touch in their applications.
The four-page PDF touches (pun) on some interesting touch characteristics of Windows 8 – including but not limited to drag-down/up for select/deselect, semantic zoom and panning and swipe from edge. The document also establishes some useful guidelines on content and interactive element placements for different grip positions – landscape and portrait, and positions – one hand, two hand, rested on surface or on stand. Through user research, Microsoft has also found a 7x7mm touch target optimal for the average index finger width of 11mm.
If you’re designing or developing a Metro-style app for Windows 8, make sure to add this document to your required reading list. UX guidelines for Metro style app development. The proliferation of rich interactive web applications across the cloud and mobile devices continues to create new opportunities for creative design and development.
As these technologies evolve, Microsoft is committed to providing best-in-class tools for building modern applications. In support of these industry trends Microsoft is consolidating our lead design and development offerings — Expression and Visual Studio — to offer all of our customers a unified solution that brings together the best of Web and modern development patterns. Blend continues to ship as a standalone tool with Visual Studio 2013, as part of a consolidated designer/developer offering. Blend for Visual Studio 2013 provides a rich design-centric environment for building applications for the Windows Store, Windows Phone, WPF, and Silverlight. Expression Studio 4 Ultimate and Expression Studio 4 Web Professional are no longer available for sale. Expression Blend Try Visual Studio 2013.
Design Guidelines for Windows 8 Metro apps - Laurent Duveau. Question I start to hear often: where to find good online resource for Metro UX design guidelines ?
1. Well, when first going to MSDN you’ll find this page “Designing Metro style apps” which I find a bit harsh (hello pictures?) : 2. Far better is the “UX guidelines for Metro style app development” article on the Blend Insider blog, which in fact is a well organized list of MSDN links grouped by topics: 3.