Il est très facile d’associer un style défini avec la parution d’un logiciel qui a marqué l’époque. Par exemple, nous avons vu l’apparition de couleurs vives, de dégradés et d’ombrages simulés pour la première fois sur le web avec le skeuomorphisme de la première version du iPhone en 2007, le design glossy et translucide de Windows Vista en 2006 et le design simpliste de Google Mail en 2004.
Aujourd’hui, le design des géants de la technologie a évolué et prends une place importante sur le web. En effet, énormément de designers s’inspirent du Metro, de Material et du design iOS afin de déterminer le style d’un projet web. Nous allons donc analyser dans une courte série d'articles thématiques chacun des trois styles afin de démontrer les avantages, dégager des exemples et présenter plusieurs outils qui aideront au développement d’un projet similaire.
Souvent combiné avec des illustrations et plusieurs techniques de flat design, le style Metro respecte strictement la grille pour une allure organisée, avec des couleurs vives pour garder le tout très dynamique. C'est un style qui est très modulaire et qui se mélange facilement à d'autres techniques. Une grande importance est attachée à la typographie, ce qui est avantageux pour assurer la hiérarchisation des éléments.
Microsoft - Metro/Modern UI
Historique
2009 - Zune
Microsoft a tenté d'être en compétition face à l'iPod en sortant Zune. Même si ce fut un échec au niveau des ventes, ils ont tout de même commencé une nouvelle tendance en combinant de grandes typographies minces avec des couleurs vives.
2010 - Windows Phone 7
Microsoft a fait revivre le style du Zune en l’intégrant à un design de tuiles avec couleurs vives dans leur refonte de Windows Mobile, avec Windows Phone 7.
2012 - Windows 8
Microsoft a apporté le plus grand redesign de l’histoire au système d’exploitation le plus utilisé au monde en sortant leur huitième version qui intègre leur nouveau style. Les interfaces sont plus colorées, plus grandes et optimisées pour l’utilisation d’un écran tactile.
2015 - Windows 10
Aujourd’hui, Microsoft a transformé son système d’exploitation afin qu’il soit plus adapté à l’utilisation sur différentes plateformes. Windows 10 est autant pour l’ordinateur, la tablette et le téléphone : l’interface se transforme afin qu’elle soit adapté à la taille de l’écran et au mode de saisie utilisé.
Le style
Forme:
- Grands carrés simples
- Pas d'ombrages
- Pas de dégradés
- Utilisation de couleurs vives
Typographie:
- Grandes typographies minces
- Police de choix: Segoe UI
Fonds:
- Fonds neutres
- Couleurs désaturées, font ressortir les formes en avant-plan
Icônes:
- Icônes toujours blanches sur fonds de couleur
- Parfois munie d’une bordure entourant le symbole d’un cercle
- Forme d’icônes habituellement pleines
Exemples du web:
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
Outils Metro:
Ces outils peuvent accélérer le développement web front end de ceux qui désirent adopter une plateforme de base avec le style Metro.
Metronic - Thème administrateur
Metro UI CSS 3.0 - Framework de dévelopement web
Metro Bootstrap - Variante de Bootstrap
En bref, si vous voulez présenter un site web de manière structurée, avec un style qui est très modulaire et qui accorde une grande importance à la typographie, l'utilisation du style Metro est conseillée. Dans la seconde partie de cette série, nous aborderons l'inspiration du style Material de Google afin de rendre votre site dynamique.