DaftPunk

Pour commencer le projet en bonne et due forme, il a fallu que je fasse une veille digitale pour voir ou revoir les tendances du moment.

J’ai tout de suite eu l’idée de m’inspirer des tendances synthwave et retro qui me faisaient penser à l’album Tron des Daft Punk prouvant ainsi qu’il s’agissait de quelque chose se rapprochant de leur univers artistique.

Une fois cette veille terminée, j’ai défini ma page libre et réalisé une répartition des différents contenus importants sur les pages : un « zoning ». Ainsi, pour la page libre, j’ai choisi de faire une discographie répertoriant tous leurs albums par ordre chronologique. Concernant la page d’accueil, le zoning s’est fait assez facilement : un passage sur leur histoire, un rappel aux deux autres pages du site étant donc « Discographie » et « Livre d’or », et quelques références telles que « Harder, Better, Faster, Stronger« .

J’ai par la suite réalisé les maquettes wireframe en prenant en considération les nombreuses règles d’UX design que j’ai pu apprendre au cours de mon cursus.

Le site est entièrement en anglais, car une fois encore, je trouvais cela plus cohérent de par le rayonnement mondial du duo.

Pour toutes les pages de la maquette, j’ai décidé de partir sur un thème sombre qui vient une nouvelle fois rappeler l’univers des Daft Punk.

Au début de la page d’accueil, on retrouve une image du duo avec leurs fameux casques connus mondialement. Leurs bustes me servent de transition pour ajouter le titre qui est le nom du groupe : « Daft Punk ». Par la suite, un court paragraphe de leur histoire avec un CTA (Call To Action) mène à la rubrique concernée.

Les contenus sont, pour la plupart, entourés de cadres et de lignes blanches faisant référence au style synthwave qu’on peut apercevoir sur la suite de la page.

Plus bas, un encart sur la page Discographie avec un album est mis en avant donne la possibilité à l’utilisateur d’accèder à d’autres albums en glissant vers la gauche. En fond, on peut observer un quadrillage de type synthwave avec un effet de perspective entièrement réalisée par mes soins sur Adobe XD avec des lignes. J’ai remarqué que mon site manquait un peu de couleur, alors j’ai ajouté celles des casques des DaftPunk en les intégrant à plusieurs endroits stratégiques ce qui, je trouve, relève le design.

Dans la continuité de la page, une rubrique avec la dernière vidéo Youtube du duo ( :'( ), la section « Histoire / A propos », un rappel à la page « Discographie » avec le jeu de mot « Discover the discography Harder, Better, Faster, Stronger » accompagné du casque du duo sur la droite, et enfin l’accès au « Guestbook » c’est-à-dire le livre d’or permettant aux utilisateurs de laisser un message d’amour ou d’adieu envers le duo sur le site.

Pour la page « Discographie » de la maquette, il était important de retrouver ce quadrillage synthwave pour rappeler le thème du site.

Au premier plan, on aperçoit les couvertures d’albums du duo avec encore une fois la possibilité de glisser vers la gauche ou la droite pour changer d’album.

Une fois l’album changé, la tracklist en dessous est également modifiée selon l’album. Sur cette tracklist, on retrouve le numéro d’apparition du morceau dans l’ordre de l’album, le nom du titre, les auteurs de la musique et leurs éventuels featurings, ainsi que la durée de la musique.

Pour terminer sur la page « Discographie », j’ai voulu qu’il soit possible d’écouter une partie du son avec un lecteur intégré en position fixe en bas de la page. On peut y écouter les 30 premières secondes de la musique et si l’utilisateur souhaite écouter la suite, il peut alors se diriger vers plusieurs plateformes de streaming proposées en cliquant sur les différents CTA positionnés sur toute la page.

Il est aussi possible de lire les musiques dans un ordre aléatoire.

La 3ème et dernière page était une page imposée avec un formulaire de type contact. Dans le cas des Daft Punk, ce n’était pas pertinent étant donné que le duo n’existe plus et donc ne peut pas répondre aux messages y compris dans l’hypothèse même où ils répondraient à quelques messages parmi des millions.

J’ai donc décidé de faire une page type « Livre d’or » permettant aux utilisateurs de laisser un petit message.

Celle-ci se découpe de la manière suivante : le titre, une image d’illustration suivie des différents messages accompagnés du nom de la personne qui l’a laissé. Les messages défilent automatiquement et il est possible d’arrêter le déroulement ou de passer au suivant au clic et glisser.

Sur la fin de la page, une rubrique incitant les utilisateurs à laisser, eux aussi, leur message sur ce livre d’or d’adieux. Un titre leur indiquant alors que c’est à leur tour est accompagné d’un formulaire ce qu’il y a de plus basique avec deux champs nécessaires, le nom ainsi que le message (limité à 140 caractères pour des raisons d’affichages et de stockage).