LaCerise
www.lacerise.blog
Conception de la maquette et du design system sur Figma. Développement Front-end et Back-end avec PHP et Twig. Mise en ligne et configuration d'un serveur partagé.
Le contexte
Une amie étudiante en droit humanitaire voulait publier ses travaux en ligne. Pas de budget, pas de connaissances techniques, pas envie de se battre avec WordPress. Elle a demandé autour d'elle, je me suis proposé.
Ce que j'ai fait
Conception et développement complets, seul : design system Figma, intégration, back-end, mise en production.
1. Cadrer avant de designer
Avant d'ouvrir Figma, j'ai envoyé un questionnaire à Janane pour recueillir sa vision : le ton, les rubriques, l'ambiance qu'elle imaginait. Les réponses sont revenues en quelques jours sur Google Docs. C'est ce document qui a servi de brief pour toute la maquette.
2. Designer le système, pas juste les pages
J'ai construit l'intégralité du design en amont : toutes les pages, tous les composants, le design system complet. Mais certaines pages ont demandé plus d'itérations que d'autres.
La page d'accueil, c'est celle sur laquelle je me suis le plus battu. Trois versions au total. La première était en dark mode le raisonnement était simple : les articles se lisent le soir, le dark mode a du sens le soir. Mais en regardant les sites de référence que je consultais Le Monde, Mediapart ils étaient tous en light mode. J'ai réalisé que pour un média, le light mode est plus lisible, moins renfermé, et visuellement plus proche de ce qu'on attend d'un journal. J'ai tout repris.
v1 
v2 
v3 (Actuelle) La page listant tous les articles a aussi eu droit à deux versions. Les retours de Janane combinés à mes propres insatisfactions ont guidé chaque changement pas des modifications cosmétiques, mais de vraies remises en question de la structure.
v1 
v2 (Actuelle) Travailler pour quelqu'un d'autre m'a forcé à justifier chaque décision visuelle plutôt que de faire confiance à mon instinct seul. Les anciennes versions sont toutes conservées dans Figma.
3. Structurer le code proprement
J'ai choisi PHP et MySQL, ma stack de formation. Mais quand j'ai présenté la V1 à mon prof, il m'a conseillé Twig et une architecture MVC. Je ne connaissais pas le pattern, je me suis renseigné et j'ai restructuré le projet. Résultat : un code beaucoup plus facile à maintenir et à faire évoluer.
4. Déployer pour la première fois
Première mise en ligne sur un vrai serveur. J'ai d'abord mal compris la structure d'Hostinger et envoyé mes fichiers au mauvais endroit. Ensuite, la réécriture d'URL via .htaccess mon prof m'a expliqué le principe des slugs pour avoir des URLs propres dans le navigateur. Des blocages qui paraissent évidents après coup, mais qu'on ne rencontre jamais dans les exercices.
Le résultat
Le site est en ligne et utilisé. Ce projet m'a appris ce que les exercices d'école ne donnent pas : prendre une décision quand personne ne te dit quoi faire, et assumer le résultat en production.