Solutions

Solutions industrielles

  • Transformation numérique dans le secteur bancaire
  • Développement et conformité d'applications pharmaceutiques
  • Traitement des données médicales
  • Transformation numérique dans le secteur de la vente au détail
  • Main d'œuvre de programmation

Services

Besoins d'entreprise

  • Intégration de systèmes
  • Stratégie
  • Image de marque
  • Commercialisation
  • Conformité GDPR
  • Conformité ADA (accessibilité)
  • Gestion des infrastructures

Produits

  • Docness
  • Nixa Go!
  • Resto Staff

Design des géants de la technologie, Partie 1: Metro et le style Modern UI

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 (http://etchapps.com/) - Développement d’applications

Its a Shape Christmas (http://itsashapechristmas.co.uk/) - É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 (http://keenthemes.com/metronic/) - Thème administrateur

Metro UI CSS 3.0 (https://metroui.org.ua/) - Framework de dévelopement web

Metro Bootstrap (http://talkslab.github.io/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.

Chez Nixa nous sommes des passionnés de design et de nouvelles technologies. Nous serions heureux de partager notre passion avec vous.

Nous contacter
spécialistes digital