Création webdesign
Spotify Redesign
Website redesign | User Interface
Contexte et enjeux
Création d’une application de musique en format desktop
2 semaines
L’enjeu était de connaitre le workflow pour la création d’un site. Le tout sous le logiciel Figma. C’est un projet d’école qui a été demandé à l’origine en cours de UI Design pendant mon cursus de Bachelor 3 Webdesign. Nous avions 2 semaines pour création pour toutes étapes de la création du site.
Les buts du projets
Le premier objectif fût de passer de Adobe XD à Figma (logiciel de maquettage). Le second de développer mes compétences sur Figma. Le troisième de comprendre les différents étapes de la création d’un site (workflow). Et au final de présenter un rendu de qualité au client.
Déroulement du projet
Moodboard
Dans un premier temps, il a fallu élaborer un moodboard afin d’établir une base d’inspirations et définir ce qui existe et/ou fonctionne. Pour cela, nous avons identifier deux types d’inspirations, l’inspiration abstraite & l’inspiration concrète.
Création du design de l'application
La mise en page de la page web se décline en plusieurs parties (layout, zoning, wireframe, maquette).
Le layout
Le layout m’a permis de définir les différentes zones de ma future application. Les flèches indiquent le chemin que va parcourir l’utilisateur pour naviguer sur la page du site. Les blocs rouges définissent les zones où les utilisateurs vont pouvoir exécuter des actions et les zones vertes, soit des actions mineurs soit des zones où l’utilisateur ne peut pas interagir.
Le zoning
Le zoning va venir préciser mes zones en les remplaçant par différents blocs pour définir mes images, mes blocs de textes et icônes à venir. Je me suis inspirer de ce que faisait l’application Spotify d’origine mais également du moodboard que j’ai pu faire en amont.
Le wireframe
Le wireframe vient seulement préciser les icônes et remplacer mes blocs devant accueillir du texte par du texte de substitution (Loren ipsum). L’application commence petit à petit à se mettre en forme avec un aperçu général de ce à quoi va ressembler la maquette finale.
La maquette
Au final, voici le rendu de ma maquette avec les différents composants. J’ai fait un parti pris concernant l’artiste car j’apprécie son travail mais la maquette étant pensée avec des composants pouvant s’adapter au texte, il est possible de mettre des artistes/musiques avec des noms plus long.
Rendu du projet
Le but du rendu était montré un travail abouti et pour on pourrait le faire avec un client réel, j’ai choisi un pdf avec titres et laissant la possibilité aux personnes le souhaitant de voir directement les différentes étapes du projet sur Figma (via un bouton cliquable).
Le document final
Le document résume les différents étapes vu précédemment, le tout graphiquement. Le but étant que le client comprenne tout de suite de quoi on parle en lui montrant les différents aspects qui ont menés à bien ce projet.
Vous pouvez consulter ce document Spotify Redesign via le lien ci-dessous.
Effets et conséquences de ce travail
Connaitre le logiciel Figma et ainsi faire d’autres projet tels que Bienvenue à Gaïa
Prendre conscience des différentes étapes d’un projet (partie UI Design)
Montrer mes compétences en matière de création UI
Rendre un dossier professionnel avec une présentation, un document pdf et des maquettes de sites.
Retours & témoignages
A modifier