logo bustle

Création webdesign
Spotify Redesign

 Website redesign    |    User Interface

À Propos du Projet

Contexte et enjeux

projet

Création d’une application de musique en format desktop

DURÉE

2 semaines

logiciel
logo Figma
introduction

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.

Objectifs

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

trait-3
ETAPE 1

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.

Inspirations abstraites

L’inspiration abstraite, qui regroupe les icônes, les typographies, les couleurs et les images.

 

Inspirations concrêtes

L’inspiration concrète, rassemble les maquettes visuelles.

 

Etape 2

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.

wireframe-bustle
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.

Voir le projet Figma
maquette-bustle
Etape 3

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.

Télécharger le projet (PDF)

Effets et conséquences de ce travail

Figma

Connaitre le logiciel Figma et ainsi faire d’autres projet tels que Bienvenue à Gaïa

Projet UI

Prendre conscience des différentes étapes d’un projet (partie UI Design)

Créativité

Montrer mes compétences en matière de création UI

Rendu professionnel

Rendre un dossier professionnel avec une présentation, un document pdf  et des maquettes de sites.

Retours & témoignages

A modifier

Prénom NOM
Formateur
Vous souhaitez discuter du projet ou simplement m'envoyer un message ?Envoyer moi un message