Paul
 Le Flem

Agathe Verasdonck - Portfolio

Plus qu'un simple site, une veritable galerie

agathe-verasdonck.fr
Mockup du portfolio de Agathe Verasdonck

LE CLIENT

Agathe Verasdonck est actuellement en dernière année de Bachelor Création Numérique et souhaite poursuivre ses études pour obtenir un master dans le domaine de l'UI et UX design. Elle est par conséquent en recherche active d'une école dans laquelle elle puisse effectuer ces deux dernières années d'études en alternance. Pour faciliter ses entretiens, elle souhaitait réaliser une refonte de son portfolio afin qu'il soit plus conforme aux attendus des écoles et des entreprises.

CAHIER DES CHARGES

Agathe, UI / UX Designer, m'as transmis une maquette représentant le portfolio qu'elle souhaitait réaliser début décembre. À ce stade, la maquette n'était pas encore complète. Elle souhaitait une première version du site pour mi-janvier avec les éléments déjà présents sur la maquette. Elle désirait entre-temps compléter la maquette et m'informer pour que je puisse réaliser des ajustements dans le temps. Frustrée de devoir constamment faire appel à mes services pour rentrer ses nouveaux projets, elle m'a demandé de créer un back-office (espace depuis lequel on peut ajouter / modifier des projets) afin de gagner en autonomie.

Mon portrait
LA COLLAB
PAUL LE FLEM X AGATHE VERASDONCK
Portrait de Agathe Verasdonck

Technologies utilisées

  • Symfony 6.2
  • PHP 8.2
  • MySQL
  • Javascript
  • Scss

Conditions de travail

  • Réalisé à partir d'une maquette
  • Travail en duo avec une UI / UX Designer
  • Travail sur le long terme
  • Réalisé en méthode Agile

Rôle

  • Conception technique
  • Développement

Analyse de la maquette

Dans un premier temps, j'ai commencé à analyser la maquette transmise par Agathe. Durant cette phase d'observation, j'ai commencé à imaginer de quelle manière et avec quelles technologies il serait plus à même de coder ce projet. J'ai également noté toutes mes interrogations pour en parler avec Agathe et comprendre exactement ses envies. La maquette était essentiellement composée de blocs de texte et d'images illustrant ces différents projets. Ainsi, nous avons établi que je rentrerai moi-même les projets qu'elle souhaite au fil du temps.

Vidéo de la maquette

Début du développement

La cliente souhaitant voir le site en ligne le plus tôt possible, j'ai donc commencé par créer quelques pages projets en "dur" : cela m'as permis de créer les différents blocs composant les pages avant de concevoir le back-office. De cette manière, de premiers ajustements ont pu être réalisés avant même son développement, ce qui a permis de gagner du temps, et d'éviter des erreurs de conception.

Patchwork des pages du portfolio de Agathe Verasdonck

Responsive du site

Le site étant prévu pour le mobile-first, j'ai donc commencé le développement avec cette perspective en tête. J'ai donc utilisé bootstrap-grid, l'un des composants de la bibliothèque CSS Bootstrap. L'usage de cette librairie m'a permis de simplifier le passage en version responsive, grâce à son système de grille prédéfinit.

Responsive du portfolio

Le problème

Une fois les premiers projets intégrés, Agathe a continué de mettre en page d'autres pages projets. Elle m'a par conséquent demandé de rentrer ses nouveaux projets comme nous en avions convenu. Cependant, nous avons tous les deux vite remarqués que cette méthode n'était pas pratique. En effet, de mon côté, il était difficile de dégager du temps pour pouvoir mettre à jour son portfolio quand elle souhaitait. Et de son côté, Agathe était bien embêtée de ne pas pouvoir être autonome et de devoir continuellement faire appel à mes services pour modifier ou ajouter ses projets.

La solution

Après réflexion et analyse de la charge de travail, je lui ai proposé de créer un espace administrateur. Grâce à cet espace, elle pourrait interagir avec la base de données de son portfolio et modifier ou ajouter ses projets comme bon lui semble, depuis une interface simple d'utilisation. Dans ce back-office, plusieurs blocs seraient mis à sa disposition, afin de correspondre à tous les blocs présents sur sa maquette. Ainsi, elle n'aurait qu'à choisir le bloc qu'elle désire et y copier coller son texte, ou joindre une image...

Entités du projet

Conception de la structure d'un projet

En analysant les pages projets de la maquette, on remarque qu'ils sont scindés en plusieurs "blocs", qui reviennent sur chacun d'eux. C'est à ce moment que j'ai décidé de la structure dans le code de l'application. Chaque projet est découpé en plusieurs entités, conçues de manière à être entièrement personnalisables.

La structure est la suivante :

  • Une classe Project, qui représente le projet dans sa globalité. Elle contient les informations telles que son nom, sa description, son image de couverture etc.
  • Une classe Block, générique, qui fait la relation entre les différents blocs disponibles pour la création du projet
  • Enfin, plusieurs classes *Type*Block (ImageBlock, TextBlock...) représentent les différents blocs existants

Conception du Back-office

Une fois les entités du projet crée, j'ai commencé à développer le back-office. J'ai décidé d'une mise en page simple (photo en dessous). Lorsque l'on crée un projet, on renseigne le minimum d'information, et c'est lors de la modification, que l'on peut alors commencer à remplir le projet.

Back office de agathe-verasdonck.fr

Page de création d'un projet dans le back-office

Formulaire générique

Pour me simplifier la tâche pendant le développement, j'ai souhaité utiliser une unique page pour la création des différents blocs. Pour ce faire, j'ai créé un controller (BlockController), qui utilise un switch pour déterminer le formulaire à utiliser en fonction d'un paramètre dans l'url.

Cependant, la conception m'oblige tout de même à devoir modifier ce controller à chaque ajout de bloc, ce qui n'est pas idéal.

BlockController

Extrait du code du BlockController

Vitesse et optimisations

Un beau site, c'est important. Un site rapide, ça l'est encore plus. Pour m'assurer que le portfolio le soit, tout un travail d'optimisation à dû être mis en place. En effet, le site comporte énormément d'images de grande taille, qui doivent conserver une qualité optimale.

Pour ce faire, j'ai utilisé le bundle Symfony/UX-turbo : il permet l'intégration de la librairie Javascript Turbo , développé par Hotwire. Cette librairie permet de donner au site un feeling de Single Page Application (SPA) : Turbo écoute les clics sur les balises <a>, les annule, et charge en arrière-plan la page demandée via fetch. Une fois la page chargée, il remplace alors le corps de la page actuelle (balise body) par celui qu'il vient de récupérer.

L'utilisation de Turbo permet donc de n'avoir qu'un seul chargement "complet" de la page, ce qui augmente les performances de manière significative.

Mise en cache

Les pages projet provenant de la base de données, une perte de performances est à prévoir en comparaison à un site statique. Cependant, ce défaut est mitigé par l'utilisation de règles de cache efficace dans le fichier .htaccess, ainsi que le cache mis en place par Twig, le moteur de template utilisé par Symfony

Résultats lighthouse en version mobile

Résultats du test lighthouse sur une page projet provenant de la base de donnée

Un grand merci à Paul pour le travail fourni ! le rendu est impeccable, je n'aurais pas espéré mieux. Paul a su répondre à toutes mes demandes et ce dans un temps record !

Difficultés rencontrés

Durant la conception du site, la plus grande difficulté était d'allier un back-office intuitif et simple d'utilisation, avec un front-end rapide, qui incite l'utilisateur final à rester sur le site et découvrir les projets. Il était nécessaire pour cela d'optimiser le fonctionnement du site, et le format des visuels affichés.

Ce que j'en retiens

  • La bibliothèque Turbo, qui est un excellent outil tant au niveau de la rapidité du site, que de l'expérience utilisateur avec le feeling de single page application (SPA)
  • Il est possible d'avoir un site à la fois dynamique et rapide, malgré que le contenu provienne de la base de données, grâce à une bonne optimisation et des règles de caches efficaces.