The Metro style

Microsoft’s Metro design User Interface has become quite popular after the launch of Windows Phone. In this article, I’m going to give an introduction of Metro UI design of windows Phone and Windows 8 operating system.

What is Metro UI and how does it look?

Well, Metro UI is built based on Swiss design language and resembles like signboards that we see in our day-to-day life in traffic signals, coffee shops etc.

    

It mainly focuses on the content than UI elements. Windows 8 and windows phone has a unique interface that gives more information on a glance with minimal actions.

Simple info graphics and an ordered layout make a good Metro design.

Metro Design Principles: (Stated by Microsoft)

Microsoft follows the below design principles for its Metro based UI.

Clean, Light and Fast

Removing any elements in the UI that are unnecessary helps in focusing on the principal tasks of the UI, and makes the UI feel good, fast, and responsive.

Alive in Motion

The transitions between screens in a UI are as important the design of the screens themselves. Flip to back transition gives life to a UI and communicates well with the navigation system.

Typography

Giving importance to typography makes the content more visible, clear and straightforward. It pays attention to the scale and weight.

Content, Not Chrome

It’s the content on the phone that people want, not the polished buttons. Reducing the visuals on the phone that aren’t content will help in direct interaction with the content.

Authentically Digital

A user interface is created of pixels; With Metro design Microsoft avoids using the shading and glossiness used in most of the software interfaces.

User Interface Elements – Windows Phone 7 and Windows 8:

Information is organized in a Content hub. Accessing and navigating to the contents are done using a set of UI elements specified below.

Live Tiles

Tiles are bigger than icons and they are dynamic. Unlike static icons, live tiles gives brief information and dynamically changes its content based on events.

For example, a calendar tile shows up the today’s events and email tile will show you how many unread emails you have.

This is a screen shot of windows 8-pre beta. It resembles like windows phone. Applications are listed as tiles directly on the start screen than hiding in a Programs menu. Now Start menu is just another app in windows 8.

 Pivot and Panorama HUB

Pivots are more like a Tabbed control that splits the window in to several logical categories. It can be used to show multiple aspects of same content.

Panorama view gives a birds eye view of the available contents. It uses a combination of image blocks and texts that provides a visual communication.

So finally, Future Microsoft’s operating systems would have this Metro standard. You can download the Windows 8 developer preview to experience the interface by installing it in a virtual machine.

It comes with a pre installed Visual Studio 2011.So you can also get your hands on Windows 8 app development.

Happy designing, coding and engineering!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: