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.
Inspired by Twitter Bootstrap, metro.css inludes base css style and also a few UI controls such as Pivot tabs, Tiles and progress bar.
Another metro design implementation using bootstrap. That means, all the UI components in Twitter Bootstrap are skinned into metro style.
Out of topic. This isn't designed for web based implementation. Instead, you download it and skin your Android Tablets.
Pretty 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.
jQuery Metro UI Buttons is a easy way to build websites with a new Metro UI.
jQUIT 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.
So 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!
This icon package features 130 icons inspired by Windows Phone 7.
The 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.
Metrotabs is a light jQuery plugin to create tabs with metro style.
OneMenu is a jQuery navigation menu plugin that is created for Metro UI themes. OneMenu supports responsive design, unlimited menus.
The 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.
Metro Navigation Bar is a flexiable plugin to make modern and cool navigation bars/menus for your templates, fit with both light and dark styles.
Metroplayer 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.
This 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 is a bootstrap minimalist (metro-like) skin that gives you a solid base to start your projects.
Start 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 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.
A personal professional metro style vcard.
This 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.
Is it not a great idea to follow me to be recieve my last posts? Follow me now!