À propos
Ce projet a été réalisé dans un cadre scolaire, dans le cadre du cours Design d’expérience et de conception web 4, durant la session d’hiver 2025. Dans le cours de Design d’expérience, nous devions effectuer la refonte du site de la ville de Baie-Sainte-Catherine. Par la suite, dans le cours de Conception web 4, nous devions réaliser l’intégration web du design que nous avions créé.
Logiciels utilisés
-
Figma
-
VSCode
Techniques utilisées
-
Design
-
CSS
-
HTML
-
JS
Processus de création
Étape 1 - Moodboard et guide de style
Pour la première étape, deux moodboards nous étaient proposés, et il fallait en choisir un seul. Nous pouvions également rechercher d’autres images et sélectionner des typographies. Par la suite, il fallait créer notre guide de style, choisir nos couleurs et nos typographies.
Étape 2 - Wireframes et design
Pour la deuxième étape, il fallait réaliser les wireframes de toutes nos sections, à l’exception du formulaire. Par la suite, nous devions concevoir le design complet du site ainsi que sa version mobile. Cette étape nous a permis de mieux structurer le contenu et d’assurer une cohérence visuelle.
Étape 3 - Prototypage
Pour la troisième étape, il fallait réaliser le prototype de toutes les sections. Tous les hovers, les animations au défilement, ainsi que tous les boutons devaient être fonctionnels, de même que le formulaire et les accordéons présents dans le menu et dans la section Tourisme, entre autres.
Étape 4 - Intégration web
Finalement, pour la dernière étape, il fallait effectuer l’intégration web de toutes les pages et ajouter du scrollytelling ainsi que les effets de hover. Les accordéons n’étaient pas obligés d’être fonctionnels. Il fallait également rendre le site responsive afin qu’il demeure esthétique et fonctionnel en tout temps, peu importe la taille de l’écran.
