Metro User Interface Implementation and Resources

Introduction

Metro is a new design language created for the Windows Phone 7 interface. Now, Metro concepts has propagated throughout a number of its products over the years. Zune, Media Center, Windows Phone, and Windows 8 all contain the principles, with Live Tiles marking an instant visual connection to a simplified interface. A great move for Microsoft towards simplicitic design. With the overwhelming flow of information, it's inevitable for us to move back to the basics by removing all the unnecessities and clutteredness of UI.

Metro focuses on four principles:

Typography. Type is beautiful. Not only is it attractive to the eye, but it can also be functional. The right balance of weight and positioning can create a visual hierarchy. Additionally, well placed type can help lead you to more content.

Motion is what brings the interface to life. Transitions are just as important as graphical design. By developing a consistent set of motions or animations, a system is created that provides context for usability, extra dimension and depth and improves the perceived performance of the whole interface.

Content not Chrome is one of the more unique principles of Metro. By removing all notions of extra chrome in the UI, the content becomes the main focus. This is especially relevant due to the smaller screen size and gesture-based interactions.

Honesty. Design explicitly for the form factor of a hand held device using touch, a high resolution screen and simplified and expedited forms of interaction. In other words, be "authentically digital".

Web-Based Implementation

Metro UI is really attractive, we have gathered a lot of resources so you can make your own easily.

• Metro UI CSSThis could be the earliest implementation of web based metro UI. The UI Coverage is very comprehensive, from global styles, grid, Base CSS to a large collection of Javascript components. Good documentation (similar to the one of Twitter bootstrap), if you're into metro design, you need to check this out.
• Metro.cssInspired by Twitter Bootstrap, metro.css inludes base css style and also a few UI controls such as Pivot tabs, Tiles and progress bar.
• BootmetroBootMetro is built on top of Twitter Bootstrap and inspired by the Metro UI CSS by Sergey Pimenov. So you can imagine it will have a comprehensive collection of styling, UI components and Javascript Components.
• Metro-BootstrapAnother metro design implementation using bootstrap. That means, all the UI components in Twitter Bootstrap are skinned into metro style.
• MetroUI by BrobotOut of topic. This isn't designed for web based implementation. Instead, you download it and skin your Android Tablets.
• Metro UI TemplatePretty good looking Metro UI Template. However, if you want to use all the features, you need to make a donation. It's reasonable and this Metro implementation looks really attractive.
• DroptilesDroptiles is an Open Source Windows 8 Start like Metro style Web 2.0 Dashboard. It builds the experience using Tiles. Tiles are mini apps that can fetch data from external sources. Clicking on a tile launches the full app. Droptiles is built almost entirely of HTML, Javascript and CSS and thus highly portable to any platform.
• BrowsertilesInspired by the Metro UI in Windows Phone 7, Paul Watson created some of it in a web-browser using CSS, HTML and JavaScript. Very early days and more of a concept than working code. This project hasn't been updated for 2 years now, could be still useful.
• jqMetrojQuery Metro UI Buttons is a easy way to build websites with a new Metro UI.
• MetroJsMetro 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).
• TileJsTileJs brings Windows 8 Tiles' subtle effects to the web with CSS3 and Javascript.
• jQuery UI Metro ThemejQUIT Builder allows us to build custom jQuery UI themes based on Metro UI easily.

Icons

Metro has its own unique style of icons, simple and minimal are the core design. Here we have 3 sets of metro icons.

• Metro UI Dock Icon SetSo far, the biggest Metro style icon collection. This set currently includes 678 512x512 Dock Icons for today's top applications, internet browsers, Operating Systems/system icons, manufacturers, 1-5 alternative icons for the top websites, and more will be added!
• MetroThis icon package features 130 icons inspired by Windows Phone 7.
• Windows 8 SetThe world largest original set of free icons for Windows8/Metro. Total of 1027 as of today. Also can be downloaded as font file for scalable version.

Premium Javascript Plugins

We searched throughout codecanyon, and we manage to find quite a few plugins built specifically to imitate the features of metro design.

• Metro TabsMetrotabs is a light jQuery plugin to create tabs with metro style.
• OneMenu Responsive Metro UI MenuOneMenu is a jQuery navigation menu plugin that is created for Metro UI themes. OneMenu supports responsive design, unlimited menus.
• Metro Flexible NavigationThe Metro Flexible Navigation is a minimal, clean grid layout inspired by the new Windows 8 interface. It can be customized to be laid out horizontally or vertically. It’s scrollable and dragable at the same time and contains useful sliding controls. Icons can be changed, there is a large collection available.
• MetroNav Metro Navigation BarMetro Navigation Bar is a flexiable plugin to make modern and cool navigation bars/menus for your templates, fit with both light and dark styles.
• Melon HTML5 Metro UIThis is a flexible and easy to integrate framework to build your one page website in Windows 8 Metro UI. It is fully powered by HTML5, CSS3 and JavaScript.
• Metro PlayerMetroplayer is a fullscreen jquery music player plugin. Built off the open source jplayer multimedia plugin. The GUI resembles the unique look and feel of the win8 metro interface.
• Metro LoginThis is a Login form that use CSS3 and jQuery Tricks to look like windows 8 login screen.

Metro Theme and Template

Here we have a few premium themes from Themeforest.

• MetroStrap Bootstrap SkinMetrostrap is a bootstrap minimalist (metro-like) skin that gives you a solid base to start your projects.
• Start Metro UI Responsive Admin TemplateStart is a new responsive admin template based on latest Windows 8 interface. This one, called Metro UI, has its roots in the design principles of classic Swiss graphic design – minimal, bold, high contrast and flat colors are some of its great features.
• Matrix Responsive Tile Based TemplateMatrix is a responsive, intuitive tile-based template which is inspired by Metro design. The tiles can be made ‘live’ to display more information on the screen without occupying more space.
• Metro Style Responsive vCardA personal professional metro style vcard.
• Retro Metro Email TemplateThis is a set of 5 modern email templates in 6 colors. It’s an universal email template, it is ok for Commerce, for news mailing, for portfolio demonstration and for individual letters also.

• TAGS:
• Javascript
• jQuery
• Layout
• Metro
• Plugin
• Template
• Trend
• WordPress