The ever-growing popularity of minimalist web design has further proven the adage that less really is more. By using limited design elements, it forces the user to focus their attention on only the most essential content within the user interface (UI). An aspect of minimalist web design is Metro design.

What is Metro?
Metro is a design language developed by Microsoft. Products like Windows 8, Zune, Xbox and the Windows Phone follow the Metro design style. Metro leaves drop shadows, subtle textures and gradients (known as chrome) in the dust, instead focusing on solid colors, clean layouts and sharp typography, allowing users to directly interact with content. It’s s all about the beauty of simplicity and having the same experience across multiple devices—mobile, tablet, laptop or desktop computer. There are only slight differences due to the uniqueness of each device, but the design aesthetic stays the same.

Metro design follows a set of fundamental principles. The four major principles are:

  1. Typography
  2. Content
  3. Motion
  4. Digital authenticity

Below are outlines of each aforementioned concept.

Typography—Swapping out traditional graphically-based designs for something solely made of text. The emphasis here is on cleanliness, readability and objectivity.

metro-web-design

Content—Not Chrome. Chrome refers to the frame of an application: flashy toolbars, title bars, 3D-looking buttons, and laser-light shows. Metro prefers to focus on the content being presented without any of these distractions. Using solid colors, clean layouts and sharp typography we have the ability to design an interface that can easily be scalable as part of a responsive design—responsive meaning the design will adapt to any device whether it be mobile or desktop.

metro-web-design

Motion— Brings experiences to life. Transitions are as important as the graphical design itself. By developing a set of motions, a system is created providing depth, improving the perceived performance of an interface.  This can be seen navigating through Apple’s new iOS7.

Digital authenticity—Metro design embraces its digital nature and doesn’t try to resemble something it’s not. For example, Apples iOS6 icons were designed to resemble their real life counterparts, a style known as skeuomorphism in the design world—the calendar looked like a real life calendar; the notepad looked like a real notepad (example below compares iOS6 to iOS7).

metro-web-design

While there are sites out there designed to directly resemble Microsoft operating systems, they’re just one translation of the language. Metro can inspire design on many levels but doesn’t necessarily need to look like they came from the Microsoft store. With the overwhelming flow of content currently bombarding the tech space, it’s nice to see design returning to the basics.

EXAMPLES

metro-web-design metro-web-design metro-web-design

 

photo credit