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".
Metro UI is really attractive, we have gathered a lot of resources so you can make your own easily.
- 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.
- 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.
- jqMetrojQuery Metro UI Buttons is a easy way to build websites with a new Metro UI.
- jQuery UI Metro ThemejQUIT Builder allows us to build custom jQuery UI themes based on Metro UI easily.
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.
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.
- 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.