Le processus de création d’un site internet chez Purée Maison

Photo de profil de Paul Hunault

Par Paul Hunault

Image du cas client Le processus de création d’un site internet chez Purée Maison

1/ Le cahier des charges

La première étape consiste à rédiger un cahier des charges pour le site internet. Cette étape est importante car c’est sur ce document que nous basons nos estimations budgétaire, le planning et les différentes technologies utilisées. Le but étant de définir un périmètre le plus précis possible de vos besoins et attentes.

Le cahier des charges se présente sous la forme d’un simple document Word, pdf ou Powerpoint. Celui-ci doit contenir l’ensemble des informations nécessaires au bon déroulé du projet. Nous accompagnons très souvent nos clients dans la rédaction de celui-ci afin de garantir une réalisation conforme aux attentes du client.

Vous trouverez un guide à télécharger sur la rédaction d’un cahier des charges pour la création de site internet ici.

Les éléments importants de votre cahier des charges

Dans les grandes lignes, le cahier des charges doit contenir :

  • Une présentation globale de votre projet et le contexte dans lequel s’inscrit la création ou la refonte du site internet, vos principaux concurrents, les objectifs que devra remplir le site (site informatif, e-commerce, génération de leads…) et les cibles.
  • La liste des pages du futur site et leur hiérarchie, autrement dit le sitemap (exemples de sitemap sur Google)
  • Une charte graphique si vous en possédez une
  • Des informations relatives aux contenus de votre site
  • Une description la plus précise possible de l’ensemble de fonctionnalités que vous souhaitez sur votre site. C’est ce qu’on appelle le cahier des charges fonctionnel (description des fonctionnalités attendues) et le cahier des charges techniques (langages web imposés, contraintes de serveur, API externes, etc).
  • Les prestations attendues (planning, budget, webmarketing, etc)

En fonction de ce cahier des charges nous pourrons définir avec vous des orientations stratégiques, une première direction artistique, le choix de la technologie et très souvent, le CMS à utiliser.

N’hésitez pas à nous contacter si vous rencontrer des problèmes lors de la réalisation de votre cahier des charges

2/ La direction artistique

Un de nos Directeurs Artistiques (DA) est responsable de l’ensemble de la réalisation du design de votre site internet. Il est souvent épaulé par d’autres DA et il peut être présent aux rendez-vous préliminaires avec le client afin de bien comprendre les attentes et l’univers de celui-ci.

a) Le mood-board

Une fois le cahier des charges terminé, nous envoyons le plus souvent à nos clients un mood-board. Il s’agit d’une liste de sites, en adéquation avec les besoins du client, que nous sélectionnons pour des aspects spécifiques (design, expérience utilisateur, couleurs, typographies, structure des pages, storytelling…).

Cette étape nous permet de comprendre les attentes et les goûts du client tout en le conseillant sur des orientations graphiques intéressantes par rapport à ses objectifs.

b) L’expérience utilisateur (UX) : arborescence, zoning, wireframes et contenus.

La première étape de la création du site internet est de définir l’expérience utilisateur (UX) que l’on souhaite apporter aux internautes. Il s’agit de fixer les objectifs du site, d’identifier les parcours utilisateurs pour atteindre ces objectifs, de définir les messages à passer et leur ordre, de déterminer les interactions que l’internaute devra réaliser…
Tous ces points sont abordés au cours d’ateliers UX ou d’échanges avec le client qui aboutiront à :

  • Une arborescence permettant de lister les pages du site et les liens entre elles.
  • Un zoning et des wireframes, qui sont des maquettes plus ou moins détaillées des pages du site permettant de valider le discours du client, l’ordre des messages, les interactions…
  • La rédaction des contenus des pages du site par le client ou par l’agence.

c) L’identité visuelle ou la charte graphique

Pour les clients qui ne disposent pas de charte graphique, nous créons ensuite des éléments graphiques qui viendront agrémenter l’ensemble du site et qui seront réutilisables sur l’ensemble des supports de communication.

Exemple de charte graphique pour la réalisation d'un site web

Exemple de charte graphique pour la réalisation du site de Seine & Saône. Voir le cas client

d) La création du webdesign

Le webdesign est la création du site internet en format statique. Nous commençons par créer la page d’accueil de votre site en format mobile et ordinateur (desktop). C’est une étape importante car c’est à partir de cette page d’accueil que nous déclinons l’ensemble des pages du site. Il est important de s’assurer que le client est à l’aise avec la direction artistique proposée.
Une fois la page d’accueil validé, nous déclinons le webdesign les autres pages du site, toujours sur 2 formats : un pour le mobile et l’autre pour le desktop.

Lorsque le webdesign est terminé, le client a à sa disposition l’ensemble de son site en format statique.

e) L’animation du webdesign

La spécialité de l’agence Purée Maison est de créer des sites imersifs et créatifs. Des animations bien pensées permettent de fluidifier la navigation et de créer un véritable univers de marque  qui améliorera l’expérience de vos client. Pour cela, nous réalisons des vidéos des principales animations de votre site afin que le client puisse se projeter sur son futur site.

3/ Le développement

Nous mettons à disposition pour chacun de nos projets une adresse web sur laquelle le client peut suivre régulièrement l’avancé de nos équipes de développement. Par exemple, pour notre projet ‘Toast of Paris’, un concours international de Barmans organisé par Courvoisier, les équipes de la marque ont pu suivre notre avancée en se rendant à l’adresse : https://courvoisier.pureemaison.com/

a) L’intégration HTML5/CSS3 et l’animation en JavaScript

Nous transformons le webdesign constitué d’images et de vidéos en code web. C’est une étape assez longue car il faut s’assurer que les pages codées respectent exactement ce qui était prévu et validé lors des phases précédentes. Et ce, aussi bien sur mobile que sur desktop.

Nous optimisons systématiquement notre code pour le référencement naturel (SEO) afin que les sites de nos clients soit bien indexés par les moteurs de recherche. Nous respectons également les règles mises en place par le W3C, l’organisme qui régit les bonnes pratiques en terme de développement informatique.

Nous animons ensuite l’ensemble des pages en JavaScript afin de recréer, en code, les animations du webdesign.

b) Le développement de l’administration et des fonctionnalités

Nous utilisons souvent des CMS tels que WordPress (et WooCommerce) ou Prestashop afin de fournir à nos clients des outils éprouvés et efficaces pour gérer l’ensemble de leur site internet. Cette étape consiste donc à relier les pages de code à une interface de gestion de contenu. Nous modifions cette interface afin qu’elle corresponde exactement au contenu du client et aux fonctionnalités qu’il souhaite.

Nous ajoutons ensuite l’ensemble des fonctionnalités listés dans le cahier des charges : formulaire de contact, outils CRM, système de newsletter, fonctionnalités spécifique pour le E-commerce, etc..

4/ La recette et la mise en ligne

Une fois le site terminé, nous vérifions sur une période plus ou moins longue l’ensemble des fonctionnalités avec le client et nous corrigeons les éventuels bugs qui peuvent apparaitre. C’est ce qu’on appelle « la recette ». Il est important à cette étape de vérifier l’ensemble des navigateurs web (Chrome, Safari, Firefox..) afin de s’assurer que le comportement du site est le même partout.

Une fois que l’ensemble des bugs ont été corrigé, nous mettons en ligne le site sur le serveur du client et assurons la transition pour une refonte entre l’ancien site et le nouveau. Nous installons également les outils analytiques tels que Google Analytics (maintenant appelé Analytics 360) et Google Search Console pour que le client puisse avoir des données sur l’activité de son site.

5/ La maintenance

Un site vie et son environnement change constamment, il est donc vivement conseillé d’être accompagné après le lancement de son site internet pour s’assurer que celui-ci continue de vivre normalement.

Nous proposons deux types de maintenance chez Purée Maison.

La maintenance corrective

Il s’agit de s’assurer que le site est toujours fonctionnel en effet, les langages informatique et les navigateurs évoluent et il faut donc s’assurer que le site soit toujours compatible. Il y a également des mises à jour de sécurité ou de nouvelles fonctionnalités pour les CMS. Nous nettoyons les éventuels spams, sauvegardons le site en cas d’attaque pour pouvoir le remettre en ligne très rapidement, etc.

La maintenance évolutive

Si le client sait qu’il veut ajouter au fur et à mesure des nouvelles fonctionnalités, nous proposons des volumes horaire mensuel dont le client peut disposer comme il l’entend pour ajouter de nouvelles fonctionnalités à son site internet.