Main documentation index by microsoft.
Use this index to quickly find the user experience (UX) guidelines that can help you create a great Windows Store app. If you haven't already, you should start by reading Making great Windows Store apps and Planning Windows Store apps.
An article by microsoft for designing Metro UI based sites.
Designing websites has been a common practice for decades. With Windows 8, designers and developers can use the web technologies they are familiar with, including HTML5, Cascading Style Sheets, Level 3 (CSS3), and JavaScript, to build Windows Store apps. Here we explore how to expose the capabilities of a website to make it a great Windows Store app and show ways to provide additional value, personalization, and richer experiences using features of the Windows 8 platform.
You can use the layout pattern described here to lay out UI elements on your app pages. Following a consistent pattern for margins, page headers, gutter widths, and other such elements maintains unity across apps and helps people easily understand interactions across the system.
The proper use of font sizes, weights, colors, and tracking and space can help give your Windows Store app a clean, uncluttered look that makes it easier to use.
Learn how to organize the content in your Windows Store app so your users can navigate easily and intuitively. Using the right navigation patterns helps you limit the controls that are persistently on screen, such as tabs. This lets people focus on the current content.
This topic lists the tile templates available for use in a tile notification, with pictorial examples of each together with their XML content.
Note that when they are displayed on a computer set to a right-to-left (RTL) language, templates are flipped from their left and right descriptions here.
In the static or peek templates that display an image collection, the larger square image is not quite square; it is slightly wider than it is tall. If you supply a square image, the image will be scaled for width and slightly cropped on the top and bottom.
This topic describes best practices, troubleshooting, and globalization/localization recommendations for use when creating and updating your app's tile, both on the Start screen and on the lock screen, and lists any special tile-related requirements your app needs to meet to be accepted in the Windows Store.
Metro UI CSS is a pretty complete framework for building Metro-like websites. It is created with LESS and has a grid system, styles for typography, tables, forms, buttons, and images. There are also built-in JavaScript components for the popular tiles, menu, sidebar, accordion, progress bars, notices and more.
BootMetro is like a theme for Twitter Bootstrap that brings every feature of Bootstrap but with a Metro design. It is actually some more as there are custom styles for the tiles, application bar and some other components.
Similar to BootMetro above, metro-bootstrap is again a theme for Twitter Bootstrap. It has all the beauties of Bootstrap and also includes the LESS styles as well.
This is a website framework and template to create sites using the Windows 8 Metro UI style. It features very smooth transitions and many tiles (RSS, Twitter, weather, etc.) are included. The template is mobile-friendly and has a jQuery UI theme as well.
An open source Windows 8 Start-like Web 2.0 Dashboard (like iGoogle). It displays info in tiles where each tile is a mini app itself fetching data from external sources. The project is built with ASP.NET but can be ported to any other language with ease.
Metro JS is a JavaScript plugin for jQuery developed to easily enable Metro interfaces on the web. This release focuses on Live Tiles, the Application Bar and Theming. It's early in the development phase, but all features should work on at least IE7+(Win/WinPhone), Firefox, Chrome, Android, Opera, and Safari(OSX/iOS).
A standalone JavaScript code for creating the tiles and accomplishing the tilting effect onClick (with CSS3).
Handcrafted pixel perfect icons tailored for the Modern UI style. Each and every icon is carefully crafted in Expression Design with vector in mind. Now hosted on GitHub finding new icons and tracking your requests is easier than ever.
The icons are inspired from the Windows Phone 7 and still a good fit for Metro UI apps. Download pack consists of 130 .PNG icons.
I’m pleased to announce Cosmo, a brand new Bootstrap theme inspired by Metro. Cosmo features bright colors and no-frill components reminiscent of Windows 8.
You can jump right in and use it exactly like you would use standard Bootstrap. To really get the Metro look though, try using Font Awesome, sizing up your glyphicons, and combining them with the new .btn-block class.
Download all Icons for Windows 8 (Metro Style), wayfinding and web. The archive contains 26×26 icons in PNG. Commercial license cost 99$.
Get started writing Metro style apps using your existing HTML5, JavaScript, and CSS skills today! Discover how Metro style application development mirrors or differs from traditional web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime. Leave armed with shortcuts, tips, and expert advice that’ll accelerate your move from web to Windows Metro style apps.
A good list of links to websites for inspiration.
Open Source Adobe font, that could be used for Windows 8 Designs.
Another open source font.
A light-weight and easy-to-use CSS/JS library that uses CSS3 styles for rich button design.
Tile colors in hex code.
The Visual Studio Image Library contains application images that appear in Microsoft Visual Studio, Microsoft Windows, the Office system and other Microsoft software.