Design1 — Music Web App

Claraxu
3 min readAug 16, 2022

Bonjour tout le monde,aujourd’hui, je vais vous présenter un travail que j’ai réalisé dans mon cursus, notre but était d’établir un web application qui affiche les informations en combinant au moins 3 plateformes musiques existantes dans le marché.

La demande de tâche est d’avoir un système d’inscription, les onglets séparé pour les plateformes différentes, le pouvoir d’ajouter nombre d’onglets que l’user souhaite sur la page accueil afin de donner la possibilité d’organiser et de designer leur propre page. C’est-à-dire que le client aura le droit de choisir quel genre d’onglet qu’il veut, en quel ordre, etc.

Selon ses besoins, j’ai donc conclu : cette application sera être visité sur les écrans d’ordinateur, c’est à dire les grands écrans. En même temps, ce genre d’application cible au gens qui ont n’importe quels âges.

Pour moi, un site clair, simple avec quelques couleurs actives sera une bonne idée. J’ai donc choisi les couleurs suivantes comme les couleurs principales de ce projet.

les couleurs servent à ce projet

Les couleurs du font sont les couleurs classiques, et les couleurs widgets sont surtout les couleurs « jeunes », active et pas lourd.

Selon le thème de ce projet, nous espérons que l’interface devrait être délicate et amiable. Pour cette raison, j’ai choisi donc de mettre les formes plus rondes pour montrer une atmosphère bien chaleureuse au niveau de visualisation.
Après d’avoir pris connaissance des applications populaires au marché, j’ai trouvé qu’il y a trois informations les plus importantes pour les utilisateurs de ce genre d’application.

Les nouvelles de chanteurs qu’ils suivent, les ranking du monde pour être à la mode et à la liste personnalisée (qui a donc la même fonctionnalité que la partie demandée dont les onglets personnalisable)

Voici donc ma démo design selon mon plan et les besoins de client.

Page principale de cette app

Nous pouvons donc voir qu’il y a un menu à gauche pour choisir les plateformes et les fonctionnalités sur notre site. En haut, nous montrons classiquement notre logo et simplement les boutons d’inscription qui nous navigue sur la page ci-dessous.

Pop up registration

Pour l’interface d’inscription, j’ai choisi d’utiliser un popup, afin de mettre la page web plus léger et aussi pour réduire le travail d’informaticien :)

Si vous voulez savoir plus d’informations sur la réalisation du projet, vous pourriez visiter sur mon github.

Merci de votre patience!

--

--