Travail pratique réalisé en équipe de deux (avec Olivier Georges) dans le cadre du cours Conception Web IV, au Cégep Édouard-Montpetit. Le mandat : reconstruire en HTML/SCSS/JS réactif la maquette Figma de Boxotel conçue préalablement dans le cours Design d’expérience, en réutilisant notre librairie de composantes TimTools.
Travail d’équipe avec
Olivier Georges.
Yoan Robitaille
: Design de la page d'accueil, chambres, fiche de chambre et page service, intégrations HTML + CSS
Olivier Georges
: Design de la page services en mobile, intégration HTML + CSS
Yoan Robitaille
: Intégration (Header, Footer, Accueil, Liste des chambres, Carousel, YouTube, Component Factory, direction visuelle) Design complet de
toutes les pages
Olivier Georges
: Intégration (Page Services, Détail d’une chambre, Scrolly, Menu plein écran, Infolettre, Drawer, Formulaire)
L’intelligence artificielle a été utilisée pour le débogage de code, notamment les conflits de positionnement CSS, la configuration du carousel Swiper et la mise en page du header.
J’ai conçu l’ensemble de la maquette Figma de Boxotel dans le cadre de mon cours de Design d’expérience : structure de deux pages (accueil, liste des chambres), hiérarchie visuelle, palette et composantes, avant même d’entamer l’intégration. Par la suite, moi et Olivier avons finaliser le design des pages Services et Détails d’une chambre
Olivier et moi avons intégré la structure HTML et les styles SCSS des quatre pages à partir de la maquette, en réutilisant les gabarits de notre librairie TimTools pour garder une base cohérente entre nos sections respectives.
Nous avons programmé les comportements interactifs du site en JavaScript orienté objet (via TimTools) : carousel, scroll, menu plein écran, formulaire, composante YouTube, chacun prenant en charge la logique liée à ses propres pages.
Nous avons adapté chaque page en version mobile : j’ai pris en charge le responsive de l’accueil et de la liste des chambres , pendant qu’Olivier adaptait les pages Services et Détail d’une chambre.
Nous avons terminé par une phase de tests et de débogage sur les différentes pages et tailles d’écran, en corrigeant les derniers ajustements visuels et les comportements JS avant la remise finale sur GitHub.
