Throughout the years, we’ve grown to love the Metro UI for its fluidity, intuitiveness, and usability. Today, we are going to explore the principles of the Metro design and learn valuable lessons on building a futuristic interface.
The Metro user interface design was first introduced in 2006 by the Microsoft Corporation. The company decided to change the UI style of its support software Zune. It switched to a cleaner, more typography-focused design that targets simplicity and usability instead of complex appearance styles. Later on, the design concept of the new Zune desktop client was transferred to the Windows operating system. This resulted in the creation of the modern Metro design as we know it today.
The Key Principles of Metro UI Design And 5 Lessons You Can Learn From Them
#1: Content Before Chrome
Tile-based design of the Verge homepage that focuses on content
The signature look of the Metro UI differs with an elegant and fluid style that naturally translates between devices. The Metro UI is easily recognizable and acts as a branding look for the software and applications of the Microsoft Corporation. What makes this user interface different from iOS and Android is its plain authentic look. For the Metro UI, content is the king. Be it textual or visual, content is presented in it’s purest form. Every additional element only acts as an enhancement of the user experience.
Takeaway: The Metro design improves the UX by focusing more on content and cutting down the unnecessary graphic elements.
#2: Employ an Improved Information Architecture
The Metro design has strict rules when it comes to information architecture. Unlike other user interfaces, which present content on scrollable portrait pages, the Metro UI has a landscape layout. The metro UI for both mobile and desktop devices has implemented side-scrolling as a universal way of switching between content categories. While other OS interfaces have a dedicated menu on each page, the Metro layout uses a typographic menu which is stretched to the width of the whole UI layout.The innovations in the UI design also call for an improved information architecture.
The innovations in the UI design also call for an improved information architecture. The screen hierarchy of the Microsoft UI is limited to three structure levels: section pages, detail pages, and hub pages. The hub pages offer an overview of the content, section pages display different categories, and detail pages showcase textual and visual content.
Takeaway: Strict content hierarchy allows users to orientate easily in a new UI environment.
#3: Create a Digital Design Authenticity
Microsoft’s user interface is all about simplicity. From the smallest details to the main content, Metro design adopts a clean look that’s focused on necessity. This contemporary design reflects the current trends and answers the demands of the modern user.
The Metro UI cuts all unnecessary elements in favor of improved usability. This design style has a futuristic approach towards user experience. It’s focused on creating a genuine digital look, thus, it has cut out all realistic elements. It lacks heavy graphic elements, like shadows and textures, which results in a swift and highly responsive design.
Takeaway: Welcome an authentic digital approach and create a clean user interface that’s inspired by the modern lifestyle.
#4: Ditch Icons and Embrace Typography
If you’re paying close attention to the current web and print design trends you’ve probably noticed the overly increased interest towards minimalism. This design style reflects the modern understandings for high usability. It employs the use of easily readable typefaces, solid colors, and simple geometric shapes to display content.
The Metro UI has implemented many of the features of the minimalist style but with a few exceptions. The decreased amount of icons in the layout is a signature look for the Microsoft products. The menu takes all the virtual space of the combined width of the app screens which allows the display of the full page names.
Takeaway: The large headlines and sharp fonts of the Metro interface are inspired by public transportation signs. By ditching icons in favor of text, the Metro design aims at creating a universal look that’s easy to read.
#5: Create a Fluid Interface With Improved Motion Design
Source: https://medium.com/@evanknight/what-do-myspace-netflix-and-itunes-all-have-in-common-df00d467136e
One of the key features of Metro design, according to the Microsoft Corporation, is its fluidity. The page layouts are combined into a single, coherent page that’s conveniently separated into different sections. The universal textual menu covers the whole set of screens which encourages sidescrolling as a leading interaction movement. The different pages often share a uniform background and extend certain elements as guiding lines between screens. Yet, what makes the pages transitions truly fluid and intuitive is the optimized motion design. Motion is what makes the Metro style a consistent and intuitive interface.
Takeaway: Use motion to create a fluid and coherent design.
More on modern UI design:
