Sélectionner une page

Refonte de l’interface Steam

,
Refonte de l’interface Steam

J’ai imaginé ce projet de refonte en Janvier 2017 afin de développer mes compétences en design d’interface, mais également en prototypage d’application. Il s’agit de dynamiser l’image de Steam par le biais de l’interface de son application et de son site web.

Voir le projet complet sur Behance

 

Charte Steam : travail de couleur

Plusieurs essais de couleur réalisés pour la charte 2017.

Modification de la charte graphique

A partir du brandbook de la marque Steam, j’ai décidé de renouveller la charte graphique de Steam en proposant de nouvelles couleurs, tout en conservant les formes. Ainsi, le logo obtient une couleur azur vive tandis que le fond est composé d’un bleu maastricht. Quand aux typographies il est toujours question d’utiliser la police déjà utilisée : FF DIN Pro, en deux variantes, bold pour les titres et light pour les contenus.

 

 

 

Refonte du client Steam

Le client de Steam sur PC et Mac n’a pas subi d’importante refonte depuis 2010. Les tendances en design d’interface évoluant très rapidement, cela fait maintenant 7 ans que l’interface de Steam n’a pas été revue. Il était intéressant d’imaginer une évolution cette dernière en tenant compte des évolutions en matière d’UX et d’UI.

J’ai décidé de concevoir une interface plus fluide, en apportant notamment du dynamisme avec des animations très simples. La nouvelle interface contient également beaucoup d’images et moins de texte, et laisse plus de place à la communauté.

Bienvenue sur Steam

« Vos plus belles aventures vous attendent ».

Page du jeu Counter Strike : Steam UI

Page de lancement du jeu CS:GO.

Ecran d'accueil du client Steam

Ecran d’accueil du client Steam.

 

Refonte du site internet

Dans un souci d’harmonie entre l’application et le site internet, j’ai décidé de revoir le design du site internet de la plateforme. Qui est assez similaire à l’écran « Marketplace » de l’application, puisque la notoriété de Steam n’étant plus à faire, le but premier du site internet est de mettre en avant les produits vendus sur la plateforme.

 

Voir le projet complet sur Behance