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 2: Material et le style Google Now

Dans la première partie de cette série, nous avons abordé l'utilisation du style Metro pour 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. Il est conseillé de lire la première partie, qui se trouve ici, si vous ne l’avez pas déjà fait.

Dans la seconde partie de cette série, nous aborderons l'inspiration du style Material de Google. Le style Material est semblable au style Metro avec l’utilisation des couleurs vives et unies, mais le style de Google rajoute des ombres portées afin de différencier la profondeur des éléments. Ce qui distingue ce style parmi les autres est l'utilisation d'animations et de transitions fluides afin de rendre le contenu d'une page web plus dynamique.

Google - Material

Historique

2012 - Now Google apporte un vent de fraîcheur sur leur plateforme mobile, Android, en présentant Google Now, une application qui présente un résumé contextualisé basé sur la localisation de l’utilisateur. Google Now est la première application qui adopte un nouveau style illuminé, présentant l’information sous forme de cartes, avec des couleurs très vives et une typographie élégante.

2014 - Lollipop Google présente la cinquième version de son système d’exploitation mobile, Android Lollipop, changeant complètement de direction graphique. Depuis le tout début d’Android, le design était entièrement foncé, avec seulement quelques légères démarcations bleues. En suivant le style de Google Now, le système entier est devenu illuminé, avec des blancs purs et des couleurs vives.

Avec Lollipop, Google a misé beaucoup sur la métaphore des cartes, en combinant des ombres portées avec un style très plat et minimaliste. Il y a aussi un énorme travail qui a été fait sur la fluidité des animations, ce qui donne l’impression que tout ce qui est à l’écran peut être manipulé facilement. Cela fait un contraste notable avec les premières versions d’Android: alors que les animations auparavant étaient délaissées et non-fluides à cause du manque de performance du système.

2014 - Android Wear Google a apporté son nouveau style, maintenant sous le nom de Material, sur une plateforme entièrement différente.


Le style

Forme:

  • Cartes séparées entre niveaux avec ombrages
  • Ombrages
  • Pas de dégradés
  • Couleurs vives

Typographie:

  • Grandes typographies
  • Police de choix: Roboto

Fonds:

  • Sections séparées par différentes couleurs vives
  • La typographie devant les couleurs est souvent blanche ou noire afin de rester visible.

Iĉones:

  • Icônes contextuelles blanches
  • Icônes d’applications multicolores avec profondeur

Exemples du web

Google I/O (https://events.google.com/io2015/) - Conférence officielle de Google

Angular (https://angular.io/) - Plateforme de développement d’applications web

AndroidTO (http://androidto.com/) - Conférence sur Android

Outils Material

Material Design Lite (http://www.getmdl.io/) - Librairie de développement simplifiée

Polymer Project (https://www.polymer-project.org/) - Framework web officiel

MaterialUp (http://www.materialup.com/) - Communauté web de Material

Finalement, si vous voulez un site web qui présente le contenu de manière dynamique, avec un style qui met l'emphase sur des animations et des transitions fluides, l'utilisation du style Material est conseillée. Dans la dernière partie de cette série, nous aborderons l'inspiration du style translucide d'iOS et d'OSX de la compagnie Apple afin de rendre le design de votre site web plus raffiné.

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

Nous contacter
Logo Nixa spécialistes digital