Design Web et développement Web : deux métiers différents

Intro

Le design Web, c’est le plan et l’aménagement de votre site. Le développement Web,c’est sa construction. Votre site a besoin des deux, et d’entretien une fois les clés remises.

Votre site a peut-être été monté à partir d’un gabarit il y a quelques années, et il ne vousressemble plus. Vous l’avez peut-être fait générer avec l’IA, et maintenant il faudrait lebrancher à votre CRM. Ou vous avez reçu deux soumissions pour un nouveau site, et l’écart est tellement grand que vous vous demandez si on parle de la même chose.

Souvent, la demande se résume à : « On a juste besoin de quelqu’un pour faire notre site. »

En réalité, « faire un site », c’est plusieurs métiers qui se suivent dans un ordre bien précis. Et quand on comprend cet ordre, les soumissions deviennent beaucoup plus faciles à comparer.

Notre programmeur Bobby, qui code depuis 2012, a une façon simple de l’expliquer : un site Web, c’est comme une maison. Vous ne demanderiez pas à l’entrepreneur de monter les murs avant que l’architecte ait dessiné le plan. Et vous ne demanderiez pas à l’architecte de choisir vos luminaires.

Le design Web et le développement Web, ce n’est pas le même métier.

UX, UI, maquettes fil de fer : on va utiliser quelques gros mots, mais ils veulent dire des choses assez simples.

Le plan : la stratégie et l’expérience utilisateur

Pour Bobby, tout part de là : « Un produit doit être bien géré et bien structuré pour avoir un impact. »

La première étape, c’est donc la stratégie : à qui s’adresse le site, ce qu’il doit accomplir pour votre entreprise, et ce qui irrite vos clients aujourd’hui quand ils cherchent une information. C’est l’étape où vous êtes le plus utile, parce que personne ne connaît vos
clients mieux que vous.

Ensuite vient l’expérience utilisateur, l’UX. « L’UX, c’est quand l’architecte dessine le plan », explique Bobby. « Il va y avoir un mur ici. Il va y avoir un garage là. » Ce sont les maquettes fil de fer : quelles pages il faut, dans quel ordre, ce qui va où sur chaque page. Par exemple, sur la page de recherche, on peut afficher les termes les plus recherchés pour que vos clients n’aient même pas à les taper.

C’est l’étape la plus facile à sauter, et celle qui coûte le plus cher quand on la saute.

L’aménagement : le design de l’interface

Une fois le plan approuvé, on passe à l’interface, l’UI. Pour reprendre l’image de Bobby, c’est là que le designer d’intérieur arrive : « Les rideaux vont être de cette couleur-là. » Les couleurs, la typographie, les images, les animations. C’est là que votre marque prend vie à l’écran.

Chez nous, ces maquettes sont faites dans Figma, et vous voyez votre site page par page avant qu’une seule ligne de code soit écrite. Ajouter une pièce ou déplacer le garage de l’autre côté de la maison, c’est beaucoup plus simple à l’étape du plan. C’est la même chose pour un site Web : une boutique en ligne, un espace client ou la prise de rendezvous, ça se prévoit dès le départ, pendant qu’on dessine le plan.

La construction : le développement Web

Une maquette, aussi belle soit-elle, n’est pas encore un site Web. On ne peut pas la mettre en ligne et dire aux gens d’aller naviguer dedans. Le travail de Bobby, c’est de la convertir en site fonctionnel. Comme il le résume : « Tout ce qui est fonctionnel, qui n’est pas visuel, mais qui fait que ça marche, c’est ce que je fais. » Dans la maison, ce sont les montants, le sous-plancher et le toit : ce qu’on ne voit pas, mais qui tient tout le reste.

Pour vous, ça veut dire :

• Un site qui s’adapte à tous les écrans, de l’ordinateur au cellulaire;
• Un site qui se charge vite;
• Des formulaires qui vous envoient vraiment les demandes de vos clients;
• Une base technique solide pour qu’on vous trouve sur Google;
• Un éditeur pour modifier vos textes et publier vos nouvelles sans appeler personne, et sans tout briser.

Puis vient le lancement. Dans la maison, c’est le jour où on vous remet les clés.

Préfabriqué ou sur mesure

Tous les sites Web sont faits de code. Quand vous téléchargez un gabarit, la programmation existe déjà; c’est simplement quelqu’un d’autre qui l’a faite. Et ce même gabarit a été téléchargé par des centaines de milliers de personnes. Il n’a pas été pensé pour votre marque.

Pour un petit site simple, un bon gabarit bien adapté à votre marque peut suffire, et on vous le dira. Pas besoin de tout réinventer.

Mais comme le dit Bobby : « Tu peux acheter une maison préfabriquée, et elle va faire le travail. Mais si tu veux le foyer suspendu au milieu du salon, tu ne l’auras pas avec du préfabriqué. »

Le sur-mesure devient nécessaire quand votre site doit en faire plus : envoyer chaque demande directement dans votre CRM, déclencher une action dans vos outils d’affaires, ou ressembler à votre marque au pixel près. Notre propre site en est un bon exemple. Le texte d’introduction animé, les yeux qui clignent, le graphique dans le pied de page : rien de ça ne vient d’un gabarit.

Quand on saute des étapes

Certains projets sont pensés pour commencer, finir et facturer le plus vite possible. Ça arrange le fournisseur, rarement le client.

Les sites que Bobby répare le plus ces temps-ci tombent dans deux catégories.

D’abord, les sites générés avec l’IA sans l’oeil d’un développeur. Ils ont l’air corrects au lancement. Mais le jour où vous voulez évoluer, brancher votre CRM ou automatiser quelque chose, le site ne suit pas. Il reste figé dans le temps.

Ensuite, les sites montés avec un constructeur de pages et une centaine d’extensions pour faire des choses de base. Chaque extension se met à jour de son côté, souvent chaque semaine, et un jour, une mise à jour en brise une autre. Avec un site développé sur mesure, WordPress peut rester à jour sans que votre code change à chaque fois.

Si vous vous reconnaissez, vous êtes loin d’être les seuls. « Je répare ça chaque semaine », dit Bobby. Et il ne blâme personne : c’est normal de vouloir être autonome et de bâtir son site soi-même. Souvent, c’est même comme ça qu’une relation commence. Bobby devient,
selon ses mots, « pratiquement le département Web ». On répare d’abord. Puis on bâtit le bon site, ensemble.

Après la remise des clés

Une maison, ça s’entretient. À l’automne, on nettoie les gouttières. On repeint les murs. Et une maison construite en 1970 ne ressemble probablement plus du tout à ce qu’elle était à l’époque.

« Un site Web, c’est la même chose », dit Bobby. Les correctifs de sécurité et les mises à jour de performance sortent maintenant presque tous les jours. Et votre entreprise évolue: vous ajoutez des sections, des pages, du contenu. On ne peut pas lancer un site et se croiser les doigts.

Quand vous planifiez votre budget, prévoyez l’entretien, pas seulement la construction.

On en parle plus en détail dans notre article sur l’entretien WordPress.

Avant de signer

Si vous comparez des soumissions, trois questions vous aideront à voir si tout le monde parle de la même maison :

• Qui s’occupe de la stratégie et du plan du site avant le design?
• Est-ce que le site sera développé sur mesure, ou monté à partir d’un gabarit ou d’un constructeur de pages?
• Qui s’occupe de l’entretien après le lancement?

Si une soumission ne répond pas à ces trois questions, demandez. Une bonne équipe sera contente d’en parler.

Comment on travaille chez Grafico

Chez nous, chaque projet Web suit le même ordre : la stratégie, l’UX, l’UI, puis le développement. C’est comme ça qu’on a fait notre propre site. Bobby a bâti la stratégie, avec les personas et la structure du site, ainsi que les premières maquettes fil de fer. Juline et Orlando les ont retravaillées et ont fait le design, animations comprises. Puis le tout est revenu à Bobby, qui l’a programmé. Comme tout le monde travaille ensemble dès le départ, personne ne se fait passer le projet à la fin en devinant comment une page
devrait se comporter sur mobile.

Et comme on s’occupe aussi de votre image de marque et de vos emballages, votre site ne devient pas un projet à part. Il fait partie de la même marque.

La vraie question n’est donc pas « Qui va faire notre site? », mais plutôt :

« Qu’est-ce que notre site doit accomplir pour notre entreprise? »

Parlons-en