01 — Étape du projet
De l'intention visuelle à la maquette.
Rebirth est un projet conceptuel qui explore le rôle des livres dans la renaissance d'une civilisation en déclin. Inspiré par "Le Livre d'Eli" et "Fahrenheit 451", le site offre une expérience mobile immersive et interactive, développée en pur HTML, CSS et JavaScript.
Rebirth est un projet MMI autour du thème Préhistoire du futur. Il s’agit d’un site web imaginé à partir d’un objet choisi pour être envoyé dans un passé ou un futur, afin d’en réinventer le sens.
J’ai choisi le livre pour sa capacité à traverser le temps. Témoignage du passé et porteur de sens pour l’avenir, il incarne transmission, savoir et renaissance, et s’imposait comme un point de départ idéal pour Rebirth.
H1
Playfair Display
H2
Playfair Display
H3
Playfair Display
Body
Poppins
J’ai fait le choix d’utiliser Playfair Display pour les titres principaux afin d’apporter de l’élégance et de la singularité. Pour les sous-titres, j’ai retenu Poppins, une typographie moderne et lisible qui crée un bon contraste avec les titres. Enfin, Montserrat pour le corps de texte assure une lecture fluide et sobre, renforçant la clarté du projet.
J’ai fait le choix d’utiliser des teintes sobres afin de faciliter la lecture et de mettre en valeur le contenu. Les nuances de vert viennent, quant à elles, installer une ambiance sauvage et post-apocalyptique, en soulignant le contraste entre déclin et renaissance. Cet équilibre renforce à la fois la clarté fonctionnelle et l’atmosphère du projet.
Je suis assez rapidement venu à l’idée du phénix pour représenter Rebirth. Symbole universel de renaissance et de transformation, il s’est imposé naturellement comme le choix le plus cohérent avec le concept du projet. J’ai donc directement décidé de partir sur cette piste, en travaillant un design épuré qui exprime la force du symbole tout en restant lisible et marquant.
Ce design était destiné uniquement au mobile. J’ai donc travaillé à optimiser le contenu pour offrir une expérience fluide et responsive sur tous les types d’écrans mobiles. L’objectif était de garantir une accessibilité claire et agréable pour chaque utilisateur.
J’ai travaillé l’accessibilité de mon site en veillant à une gestion adaptée des tailles de texte et à un choix de couleurs respectueuses de tous les utilisateurs.
Le design a été pensé uniquement pour mobile, ce qui m’a permis de concentrer mon travail de responsivité sur un panel restreint d’appareils et ainsi proposer une expérience optimale.
02 — Étape du projet
Les fonctionnalités, les interfaces de gestion, la structure technique et le développement.
Technologies utilisées
Pour ce projet, je devais travailler uniquement avec HTML, CSS et JavaScript pur, sans framework ni librairie. Cette contrainte m’a appris à concevoir un site simple mais efficace, en soignant particulièrement sa structure afin d’améliorer son référencement et son accessibilité.
Je suis parti d’un code simple et clair en respectant les bases du HTML, du CSS et du JavaScript. J’ai travaillé la structure du site en utilisant les bonnes balises pour optimiser le seo de ma page ainsi que son accessibilité pour les lecteurs d’écran afin de rendre mon site accessible également aux personnes malvoyantes.
Ce projet m’a permis de consolider mes bases en HTML, CSS et JavaScript en travaillant sans frameworks ni librairies. J’ai appris à structurer un site de manière simple et efficace, tout en gardant en tête le référencement et l’accessibilité. J’ai également pris conscience de l’importance d’une bonne organisation du code et d’un design pensé avant tout pour l’utilisateur.
© 2026 Bryan Menoux. Tous droits réservés.
