It is very easy to associate a defined style with the release of software that marked the era. For example, we saw the appearance of vivid colors, gradients and simulated shading for the first time on the web with the skeuomorphism of the first version of the iPhone in 2007, the glossy and translucent design of Windows Vista in 2006 and the simplistic design of Google Mail in 2004.
Today, the design of technology giants has evolved and takes an important place on the web. Indeed, a lot of designers are inspired by Metro, Material and iOS design to determine the style of a web project. We will therefore analyze in a short series of thematic articles each of the three styles in order to demonstrate the advantages, identify examples and present several tools that will help in the development of a similar project.
Often combined with illustrations and several flat design techniques, the Metro style strictly adheres to the grid for an organized look, with bright colors to keep everything very dynamic. It's a style that is very modular and mixes easily with other techniques. Great importance is attached to typography, which is advantageous to ensure the hierarchy of elements.
Microsoft - Metro/Modern UI
History
2009 - Zune
Microsoft tried to compete with the iPod by releasing Zune. Although it was a sales failure, they still started a new trend by combining large, thin typefaces with bold colors.
2010 - Windows Phone 7
Microsoft revived the style of the Zune by integrating it with a tile design with bright colors in their redesign of Windows Mobile, with Windows Phone 7.
2012 - Windows 8
Microsoft has brought the biggest redesign in history to the world's most used operating system by releasing their eighth version which incorporates their new style. The interfaces are more colorful, larger and optimized for the use of a touch screen.
2015 - Windows 10
Today, Microsoft has transformed its operating system so that it is more suitable for use on different platforms. Windows 10 is as much for the computer, the tablet and the phone: the interface is transformed so that it is adapted to the size of the screen and the input mode used.
Style
Basics:
- Large simple squares
- No shadows
- No gradients
- Use of bright colors
Typography:
- Large thin typography
- Font of choice: Segoe UI
Funds:
- Neutral funds
- Desaturated colors, bring out the shapes in the foreground
Icons:
- Always white icons on color backgrounds
- Sometimes provided with a border around the symbol of a circle
- Shape of usually filled icons
Web examples:
Voici quelques exemples qui peuvent donner une idée comment intégrer le style Metro dans des projets web.
Etch Apps - Développement d’applications
Its a Shape Christmas - Événement
Metro Tools:
These tools can speed up front-end web development for those who want to adopt a basic Metro-style platform.
Metronic - Thème administrateur
Metro UI CSS 3.0 - Framework de dévelopement web
Metro Bootstrap - Variante de Bootstrap
In short, if you want to present a website in a structured way, with a style that is very modular and that gives great importance to typography, the use of the Metro style is advisable. In Part 2 of this series, we'll cover inspiration from Google's Material style to make your site dynamic.