Baie-Sainte-Catherine

Design web - Intégration web HTML/CSS/JS

Démonstration du site web grâce à un mockup responsive

Résumé

Crédits:

Design et intégration web par Vincent Lachapelle.
Les images appartiennent à leurs propriétaires.

Année de réalisation:

Hiver 2023

Naviguez sur la refonte du site municipale de la Baie-Sainte-Catherine. J’ai effectué le design dans le cadre du cours de design d’expérience. Plus tard, dans le cadre du cours conception web IV, j’ai intégré la maquette en HTML/CSS en plus d’y ajouter du javascript.

HTML

CSS

JavaScript

Design web

Figma


Réalisation du projet

La planification du design

J’ai tout d’abord réalisé le design en m’inspirant d’autres sites municipaux. Ensuite, j’ai monté mes wireframes en priorisant le desktop, mais en les adaptants également pour tablette et mobile.

Wireframe de la page d'accueil du projet

Wireframes de la page principale

Wireframe de la nous joindre du projet

Wireframes de la page nous joindre

Le design

Grâce aux wireframes, à la palette de couleur et aux choix typographiques que j’ai établit plus tôt, j’ai pu facilement ajouter mes contenus au design du site tout en modifiant quelques détails pour l’améliorer.

Design de la page d'accueil du projet

Design de la page principale

Design de la nous joindre du projet

Design de la page nous joindre

L'intégration HTML/CSS

Plus tard, j’ai intégré les maquettes sur Visual Studio Code le plus fidèlement possible. Cette partie du projet était ma préférée puisque j’aime mieux coder que créer. Le site est responsive et je garde mon code organisé. Voici quelques extraits de code.

html de la page d'accueil

HTML de la page d’accueil

html du formulaire

HTML du formulaire

CSS actualite

SCSS de la section des actualités

Le JavaScript

Pour dynamiser mon site, j’y a ajouté du JavaScript. Il contient des composantes comme des caroussels et des accordéons.

Design de la nous joindre du projet

Javascript de l’accordéon

Design de la nous joindre du projet

Résultat de l’accordéon

Le responsive

Finalement, je me suis assuré que le site soit responsive pour qu’il soit accessible à plus de personnes.

Baie sainte-catherine sur desktop
Baie sainte-catherine sur desktop
Baie sainte-catherine sur desktop
Baie sainte-catherine sur desktop