Refonte d'un site web

design • développement

Rôle

Webdesigner

Domaines

Design, développement CMS

Client

Auto-école Pilote

Date

2021

C’est pour le stage de fin d’année en Licence Info-Com – Produits et Services Multimédia que j’ai pu endosser le rôle de webdesigner pour la refonte du site internet de mon auto-école de l’époque. À la suite d’une conversation sur mon parcours, c’est le gérant lui-même qui m’avait parlé du projet que l’entreprise avait : effectuer la refonte de leur site web qui n’avait pas été retouché depuis de nombreuses années et cela se ressentait.

Outils : Adobe Photoshop, Illustrator, Figma.

Maquette

Après quelques recherches sur la concurrence locale et leur site web respectifs. Mon objectif, en tant que webdesigner, était de faire un site simple, qui ne soit pas surchargé d’informations et d’onglets. Le site devait être simple, épuré, moderne et informatif, ce qui distinguera l’entreprise de la concurrence locale. Les gérants ne m’avaient pas demandé de fonctionnalités particulières comme une inscription en ligne. Le site allait simplement servir de vitrine pour présenter l’auto-école et les services/tarifs qu’ils proposent.

Le point de départ

Diaporamma de dispositif présentant le site web avant la refonte.

Le site web avant la refonte sur la page d'accueil.

Le site web de l’entreprise avant la refonte.

La partie maquette

La première étape du projet consistait donc à créer une maquette de A à Z pour servir de base pour le développement du nouveau site web. J’ai fait le choix de la réaliser sur Figma (design + prototype), voici le résultat de la maquette fonctionnelle.

Lors de la confection de la maquette, j’ai essayé d’incorporer le logo de base mais il ne correspondait pas au reste du design. À l’aide d’Adobe Illustrator, j’ai choisi de changer le logo en conservant certains éléments de l’ancien comme les typographies. J’ai changé le logo Mercedes-Benz par un volant qui rappelle bien l’activité de l’entreprise. J’ai aussi retouché les couleurs en optant pour un bleu moins vif et un blanc au lieu de l’orange.

Outils : WordPress, Elementor

Développement web (CMS)

Si j’ai choisi WordPress c’est parce que la secrétaire de l’auto-école souhaitait pouvoir accéder facilement au site après mon stage, au cas où elle aurait à changer des informations telles que des changements de tarifs, d’adresses, d’horaires, etc.

Pour créer le site, j’ai choisi le thème nommé « Astra » et quelques widgets tels que « Elementor » comme constructeur de page, « Yoast SEO » pour le référencement et « Widgets d’avis Google » pour importer sur le site les excellents avis Google, créant ainsi un autre facteur de confiance

Vidéo présentant la version finie du site créé sur WordPress.

Si le site n’est pas en ligne, c’est suite à des problèmes qui ne m’ont pas été clairement communiqués. Ainsi, après des tentatives de prises de contact infructueuses et comme il me restait plusieurs semaines, je ne voulais pas perdre du temps. J’ai alors décidé de finir ma mission en créant le site sur le serveur local de mon université, tout en suivant le design de la maquette qui fut approuvé par la secrétaire. Dans l’optique d’un retour des gérants, j’avais également préparé un document de prise en main de WordPress pour faciliter le boulot à la secrétaire de l’entreprise.

projet précédent

voir tous les projets

projet suivant