Metro User Interface Implementation and Resources

Sunday, 20 January 2013
(2 votes)

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".

Microsoft TechEd Metro Layout

Web-Based Implementation


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

Metro UI CSS

Metro UI CSS

This 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.css

Metro.css

Inspired by Twitter Bootstrap, metro.css inludes base css style and also a few UI controls such as Pivot tabs, Tiles and progress bar.

Bootmetro

Bootmetro

BootMetro 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-Bootstrap

Metro-Bootstrap

Another metro design implementation using bootstrap. That means, all the UI components in Twitter Bootstrap are skinned into metro style.

MetroUI by Brobot

MetroUI by Brobot

Out of topic. This isn't designed for web based implementation. Instead, you download it and skin your Android Tablets.

Metro UI Template

Metro UI Template

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.

Droptiles

Droptiles

Droptiles 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.

Browsertiles

Browsertiles

Inspired 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.

jqMetro

jqMetro

jQuery Metro UI Buttons is a easy way to build websites with a new Metro UI.

MetroJs

MetroJs

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).

TileJs

TileJs

TileJs brings Windows 8 Tiles' subtle effects to the web with CSS3 and Javascript.

jQuery UI Metro Theme

jQuery UI Metro Theme

jQUIT 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 Set

Metro UI Dock Icon Set

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!

Metro

Metro

This icon package features 130 icons inspired by Windows Phone 7.

Windows 8 Set

Windows 8 Set

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.

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 Tabs

Metro Tabs

Metrotabs is a light jQuery plugin to create tabs with metro style.

OneMenu Responsive Metro UI Menu

OneMenu Responsive Metro UI Menu

OneMenu is a jQuery navigation menu plugin that is created for Metro UI themes. OneMenu supports responsive design, unlimited menus.

Metro Flexible Navigation

Metro Flexible Navigation

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.

MetroNav Metro Navigation Bar

MetroNav Metro

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.

Melon HTML5 Metro UI

Melon HTML5 Metro UI

This 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 Player

Metro Player

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.

Metro Login

Metro Login

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 Bootstrap Skin

MetroStrap Bootstrap Skin

Metrostrap is a bootstrap minimalist (metro-like) skin that gives you a solid base to start your projects.

Start Metro UI Responsive Admin Template

Start Metro UI Responsive Admin Template

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 Responsive Tile Based Template

Matrix Responsive Tile Based Template

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.

Metro Style Responsive vCard

Metro Style Responsive vCard

A personal professional metro style vcard.

Retro Metro Email Template

Retro Metro

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!

Follow me on Twitter, Like me on Facebook or Subscribe on YouTube

10107 times

Sunday, 05 October 2014

Ibrahim Jabbari

I am Ibrahim Jabbari Web Designer / Developer since 2006, This is my blog, I'll share my experiences, Useful resources and all update news from IT world with you all, I hope you enjoy surfing my blog. Connect with me on Facebook, Twitter and and Instagram.

www.ibrahimjabbari.com