ACCUEIL
ENZO GERI-TANGUY

Web Design / Développement web

ITA
DAKIMASU

Baguettes chinoise

CONTEXTE

Projet Universitaire

ANNÉE

2025

RÔLE

Designer & Développeur front

LE CONCEPT

Les streaming s’envolent, les albums y résistent, mais dans cette lutte, un format revient : le Vinyle

L'objectif de ce projet, était de créer une page web qui permettrait de visualiser des données à propos d’un phénomène qui évolue, en décrivant cette évolution aux internautes de façon claire, attractive et percutante. Pour réaliser ce projet nous étions en groupe de trois.

01.

RECHERCHES

Pour commencer nous avons chercher différents thèmes qui pourrait nous intéressé pour pouvoir nous épanouir dans notre création de site. Nous étions tous d'accord pour le faire sur le thème de la musique mais nous ne savions pas quelle données récolter... Nous avons fini par nous mettre d'accord sur : "L'évolution des ventes de vinyles au cours des années".

Wireframe 1 Wireframe 2
02.

UI DESIGN

Une fois notre thème trouvé, nous avons commencé à créer notre maquette sur Figma pour se mettre d'accord sur le visuel de notre site. J'ai pu concevoir l'élément graphique principal de notre site : le logo. J'ai voulu lui donner un effet de chrome liquide avec un vinyle déformé à la place du premier "O". Je trouve que ce logo rentre parfaitement dans le thème vinyle/vintage de notre site.

Wireframe 1 Wireframe 2
03.

DÉVELOPPEMENT

La maquette étant finie, nous avons pu développer le site en langage HTML, CSS et JAVASCRIPT. Je me suis principalement occupé de la barre de navigation latérale et du style générale de la page. Nous avions voulu faire en sorte que les blocs de description et la barre de nav est une texture de verre transparent "glassmorphism".

Code 1 Code 2 Code 3

COMPÉTENCES ACQUISES

01

UI / UX DESIGN

Création d'interfaces immersives et parcours utilisateur.

02

COMMUNICATION

Travail collaboratif, communication obligatoire.

03

DÉVELOPPEMENT FRONT

Maîtrise du HTML, CSS et JavaScript moderne.

04

COORDINATION & COHÉSION

Utilisation de GitHub pour pouvoir collaborer de la meilleure façon et voir l'avancer de chaque membres sur le projet.

LOGICIELS UTILISÉ

Logo Figma FIGMA
Logo VS Code VS CODE
Logo Photoshop PHOTOSHOP
Logo html HTML
Logo css CSS
Logo javascript JAVASCRIPT

AUTRES PROJETS