Baie-Sainte-Catherine
Le projet de la Baie-Sainte-Catherine avait comme objectif la refonte du site de la ville de manière non officielle. Séparé en deux parties, la première consistait à mettre à jour le design du site pour créer une expérience utilisateur à la hauteur des attentes d’aujourd’hui. La deuxième partie était d’intégrer le site de façon front-end en HTML, CSS et JS.
Voir le site
Voir sur GitHub
Type de projet
Projet scolaire
Intégration front-end
Design
Languages / Logiciels
Figma
HTML / CSS / JS
Crédits
Réalisation complète: Derek Samson
identité visuelle
Palette de couleurs
Design système
Conceptualisation et Idéation
Pour ce projet, des moodboards étaient fournis dès le commencement, donc la plus grande partie de cette étape était de trouver des comparables de sites webs municipaux récents pour pouvoir s’inspirer de mises en pages modernes.
Inspirations pour le design système
Comparables
Design & prototypage
La prochaine étape réalisée est le design et le prototype. En partant des wireframes que j’ai faits, j’ai incorporé le nouveau logo ainsi que les différentes images et couleurs pour donner vie au site. Finalement, j’ai prototypé le design pour donner un meilleur aperçu du site réellement codé.
Design complété de la page accueil
Design complété de la page contact
Wireframe de la page accueil
Intégration html / css / js
La dernière étape du projet consistait simplement à intégrer le design en HTML, avec l’ajout de CSS et de JS pour les fonctionnalités et animations souhaitées.
Code HTML de la page d’accueil
Code SCSS des lecteurs vidéo