Analyse du nouveau Myspace et des codes du design web contemporains

Bonjour 🙂

Aujourd’hui c’est la déferlante sur les réseaux sociaux, tout le monde parle du nouveau Myspace. Pour l’instant il ne s’agit que d’une vidéo très prometteuse et d’une page d’accueil mais les ingrédients sont là, le design semble séduire tout le monde mais c’est avant tout l’expérience et la marque Myspace qui change une nouvelle fois. Comme quoi, l’histoire d’un site comme celui-ci semble ne jamais s’arrêter.

La vidéo de présentation

Mon analyse des codes du design de Myspace

L’identité visuelle :

En 2010, j’avais eu plaisir à me moquer gentillement du nouveau logo de Myspace en créant un site parodique. En effet, honteusement renommé « My ____ », Myspace perdait alors son identité avec une analyse marketing mal ficelée et en étant le Myspace de chacun et donc le Myspace de personne. Retour en images sur le logo de Myspace.

Le logo historique :

Un logo utilisant un pictogramme et du Helvetica Rounded.

Le logo en 2010 :

Un logotype évidé (de son sens?) avec une typo sans serif bien plus carrée.

Logo en 2012 :

En plus du retour du pictogramme historique, propre à l’identité de Myspace, voici un logotype utilisant une typo web (ça n’est plus une image!). La typo choisie est le Benton, dessiné à l’origine en 1903 par Morris Fuller Benton dans l’esprit des typos « nouvelles gothiques » puis revu par Tobias Frere-Jones et Cyrus Highsmith pour arriver au désormais célèbre Benton Sans, complète et très bien maîtrisée.

La page temporaire

La page temporaire (accessible sur http://new.myspace.com) est simple et possède une vidéo en plein écran. Le moteur de recherche Bing avait essayé de faire la même chose avec ses images en fond d’écran mais ça a été un beau raté car l’image n’était justement pas complètement en « plein écran ». Ici, c’est même une vidéo en html5 qui tourne, avec beaucoup de flou (la quintessence du Canon 5D Mark II est passé par là). Dans le même esprit nous avons le service de partage de photos sur smartphone qui a mis en place sur son site, Path.com, une vidéo en plein écran. C’est beau, c’est simple, ça bouge un peu mais pas trop (pour ne pas perturber la lecture), d’où ce flou de l’objectif qui dévoile un tout petit peu l’image et donc, la thématique de Myspace : la musique.

Le design d’interface… inspiration « Metro » de Microsoft (Modern UI Style)

C’est presque devenue la norme, l’interface Metro (renommée Modern UI Style) est propre, carrée, élégante, fluide, correspond également parfaitement aux grilles en responsive design… bref elle est le doux mélange entre le graphisme suisse et le design web contemporain. Je suis donc ravi de voir que l’expérience proposée n’a pas l’air trop confuse mais également que la clarté de ce type d’interfaces qui reposent sur une grille prend le pas sur le design web d’aujourd’hui.

L’inspiration Pinterest

Là encore c’est une grande tendance. L’influence du design de Pinterest est très forte et se retrouve sur de nombreux sites, notamment des sites d’images ou de contenus visuels. Un des intérêts du design de Pinterest est de reposer sur une grille, un peu comme la grille de Microsoft dont je viens de vous parler, mais d’offrir une dynamique visuelle supplémentaire en décalant l’alignement de ses modules pour qu’ils soient coupés vers le bas, ce qui donne l’envie de scroller la page en question. Et qui n’a jamais passé des heures à scroller sur Pinterest ? Ma souris s’en rappelle et moi aussi ;-) Bref, le découpage en module à la Pinterest correspond à un algorithme particulier, le même qui figure sur la nouvelle version de Myspace.

La « pensée tactile », l’exemple de l’élasticité

Dans la vidéo, on découvre la superposition de panneaux élastiques. Cela n’est pas sans rappeler l’interface très élégante de Twitter sur iPad. L’importance de présenter des panneaux qui semblent élastiques et qui se superposent est triple. Cela permet de mettre plus de contenu sur une même page, ensuite cela permet également de rajouter de la matérialité à notre page web. Toute plate, toute simple, elle offrira une impression de profondeur, de papier, de couches superposables. Pour cela il y a les ombres portées et la transparence. Enfin, le plaisir de masquer/dévoiler du contenu est assez intéressant pour l’utilisateur.

Myspace et la visualisation de données

Quelle ne fut pas ma surprise lorsque j’ai vu cette carte interactive qui est très belle, très simple. Cela n’est pas sans rappeler la datavisualisation contemporaine comme celle des rapports de Nicholas Felton (les fameux Feltron Reports). Des couleurs, des aplats et aujourd’hui des technologies web qui nous permettent d’afficher tout ceci de façon fluide et simple (SVG mon ami!)

À propos des codes contemporains du design web

• Créer un logotype utilisant le langage web (une typo avec la balise @font-face, un logo en SVG, un logo en html qui est changeant, mouvant, etc.) (comme ce que j’ai essayé de mettre en place sur Graphism.fr)
• Utiliser la photo et la vidéo en plein écran permet de donner une teinte, un esprit, un fond vivant à la page web
• Suivre certaines excellentes pratiques de l’interface Metro (Modern UI) de Microsoft, notamment sur ce site
• Se servir intelligemment des grilles modulaires de Pinterest pour organiser, diffuser, séparer le contenu tout en le rendant facile et navigable (scrolling vertical)
• Penser « tactile », penser l’expérience utilisateur, le design et l’ergonomie pour provoquer le plaisir de l’utilisateur et son confort dans l’interface
• Penser à l’importance de la visualisation de données, outil primordial de représentation des données aujourd’hui à l’ère numérique. Petit point important, sur le fait que la visualisation de données interactive n’est pas obligatoire, c’est utile parfois mais pas toujours.

Conclusion

Enfin, pour faire cette analyse, ce sont des dizaines et des dizaines de sites que je vois chaque jour et Myspace se rajoute à l’ensemble de ces sites. Porteur de tendance, mais pas encore d’innovation (pour l’instant), je pense que cette amélioration n’est pas uniquement « un coup de jeune », mais surtout une nouvelle expérience qui prendra forme sur tablette, téléphone et peut-être pourra conquérir un nouveau public. De mon côté, j’attends de recevoir une invitation de Myspace pour tester cette nouvelle version et surtout « hacker » ce pourquoi Myspace est fait afin d’en faire… tout autre chose 🙂