Créer Un Site Internet Sans Coder

Henri LOTIN
https://www. CRÉER UN SITE INTERNET SANS CODER .com
CRÉER
UN SITE
INTERNET
SANS
CODER
CRÉER
UN SITE
INTERNET
SANS
CODER
Créer un site Internet
sans coder
Auteur : Henri LOTIN
Édition 2023
© GERESO Édition 2023

Direction de collection : Catherine FOURMOND
Suivi éditorial et conception graphique intérieure : GERESO Édition
Illustration : © darkovujic/istockphoto.com
www.gereso.com/edition
e-mail : edition@gereso.fr
Tél. 02 43 23 03 53 - Fax 02 43 28 40 67
Reproduction, traduction, adaptation interdites

Tous droits réservés pour tous pays
Loi du 11 mars 1957
Dépôt légal : Octobre 2023

ISBN : 979-10-397-0471-7
EAN 13 : 9791039704717
ISBN numériques
ISBN eBook : 979-10-397-0687-2
ISBN ePub : 979-10-397-0688-9
GERESO SAS au capital de 465 920 euros - RCS Le MANS B 311 975 577
Siège social : 38 rue de la Teillaie - CS 81826 - 72018 Le Mans Cedex 2 - France
Parmi les « Hors collection » GERESO Édition :
• (Bien vivre son éco-anxiété

• Business Therapy
• Chaque journée est un chapitre de ta vie
• Écologaï
• Guide juridique de l'entrepreneur rebelle au droit
• Guide pratique du cahier des charges informatique
• J'ai pas fait bac + 5, et alors ?!
• Je suis bordélique, c'est grave ?
• L'entreprise à ciel ouvert
• Le super-pouvoir de la créativité
• Les rites et rituels professionnels
• Mieux se connaître pour rebondir en toutes circonstances
• On a toujours fait comme ça !
• Passe ton bonheur à ton voisin
• Préparer et réussir vos entretiens
• Restez connecté !
• Réussir son divorce
• Se connaître, s'accomplir
• Stratégies bouddhistes pour choisir le bonheur
• Vie minimale, expérience maximale
• Vive la pagaille relationnelle !
• Voyage au bout du deal
Retrouvez tous nos titres « Hors Collection » sur

librairie.gereso.com
Pour Aïcha, Zoe, Yasmine, Abdul Karim et Kathia.
Sommaire
Ressources en ligne.................................................................................11
Introduction..............................................................................................13
Partie 1 - PHASE STRATÉGIQUE..........................................................21
Chapitre 1 - C’est quoi, le design web ?..............................................23

Non, le design web n’est PAS QUE la création d’interfaces web............24
Le design centré sur l’utilisateur [user centered design, UCD]................25
Chapitre 2 - État des lieux : code, low-code ou no-code ?................31

Différences entre low-code et no-code....................................................32
Un aperçu du marché...............................................................................34
Avantages du low-code/no-code.............................................................34
Chapitre 3 - Choisissez votre plateforme no-code.............................37

Évaluez les plateformes............................................................................37
Serveurs & hébergement..........................................................................43
Chapitre 4 - Site web et écosystème de marketing digital................49

Qu’est-ce que l’écosystème de marketing digital ?.................................50
Les éléments de l’écosystème de marketing digital................................51
Pourquoi avez-vous besoin d’un écosystème de marketing digital ?......53
Chapitre 5 - Marque, branding et identité de marque.........................55

Différence entre marque, branding et identité de marque.......................56
7
https://www.CRÉER UN SITE INTERNET SANS CODER.com
Qu’est-ce que la marque, le branding, l’identité de marque ?.................58

Brand management et brand building......................................................60
Pour conclure...........................................................................................60
Chapitre 6 - L’approche Growth-Driven Design..................................61

Quels sont les avantages de la méthodologie GDD ?..............................62
Comment fonctionne le Growth-Driven Design (GDD) ?..........................63
La stratégie...............................................................................................64
La rampe de lancement [launch pad].......................................................66
L’amélioration continue............................................................................66
Pour récapituler........................................................................................70
Partie 2 - PHASE OPÉRATIONNELLE...................................................71
Chapitre 7 - Le document de spécifications........................................73

Pourquoi créer un site web ?...................................................................74
Le but et les objectifs du projet................................................................75
Profil de l’entreprise.................................................................................80
Position sur le marché et analyse de la concurrence...............................80
Analyse de l’audience cible, profils et scénarios d’utilisation..................81
Communiquer le message.......................................................................91
Contenu + Architecture de l’information..................................................92
Exigences technologiques et fonctionnelles............................................96
Coût..........................................................................................................96
Calendrier de production..........................................................................98
Chapitre 8 - Accélérez votre design de site web : High Speed UX... 101
Les différents types d’expérience..........................................................101
Livrables UX à connaître........................................................................104
Chapitre 9 - Le design d’interface utilisateur....................................113

Le design visuel......................................................................................114
Couleur...................................................................................................118
Typographie............................................................................................125
Mise en page..........................................................................................141
8
https://www.SOMMAIRE.com
Patterns essentiels de mise en page.....................................................165

Règles faciles de design d’interface utilisateur......................................179
Chapitre 10 - Votre site Internet avec le StoryBrand® Framework... 185

Contexte.................................................................................................186
Rédigez le contenu de votre site web....................................................189
Pour terminer..........................................................................................209
Chapitre 11 - Votre site Internet gratuit et sans codage, pas à pas... 211
Avec WordPress.com.............................................................................212
Avec Webflow.........................................................................................230
Avec Systeme.io.....................................................................................239
Chapitre 12 - Mesurez et améliorez les performances

de votre site internet............................................................................245
Créez une stratégie d’analyse web centrée sur le client........................246
Outils d’analyse web pour améliorer votre site et développer
votre entreprise......................................................................................256
Recommandations d’ouvrages pour le marketing digital......................268
Partie 3 - PROJET.................................................................................271
Chapitre 13 - Document de spécifications free move......................273

But et objectifs du projet........................................................................274
Profil de l’entreprise...............................................................................277
Position sur le marché et analyse de la concurrence.............................279
Analyse de l’audience cible, profils et scénarios d’utilisation................287
Communiquer le message.....................................................................291
Contenu + Architecture de l’information................................................300
Exigences technologiques et fonctionnelles..........................................321
Coût........................................................................................................324
Calendrier de production........................................................................324
Conclusion.............................................................................................325
À propos de l'auteur...............................................................................327
9
Introduction
Quand Raphaëlle, mon éditrice, m’a contacté pour ce livre, il était question de
rendre le précédent, Les étapes de création d’un site web, plus abordable pour
les débutants et surtout plus abordable pour les non-codeurs [no-coders].
Mon idée de départ était de refondre le livre pour l’adapter. Mais il n’avait pas
été rédigé dans l’intention que j’ai évoquée au paragraphe précédent. J’ai ain-
si pris la peine d’écrire un nouvel ouvrage à l’attention des professionnels qui
souhaitent eux-mêmes réaliser leur site web sans coder, sans avoir à recruter
un professionnel du design web, ou une agence.
Votre site web est de loin l’atout le plus important de votre entreprise. Le visage
de votre entreprise. Votre site web est très probablement la première chance
que vous aurez de faire une bonne impression sur vos clients ou clients poten-
tiels. Et, qu’on le veuille ou non, ils vont à 100 % juger de la qualité de votre
entreprise en fonction de la qualité de votre site web.
C’est pourquoi il est important d’investir dans la création d’un site web qui
non seulement impressionnera vos visiteurs, mais les transformera en clients.
Votre site web est aussi, et surtout, votre principal vendeur. Un vendeur qui
travaille 24 heures sur 24, 7 jours sur 7, 365 jours par an et qui n’a jamais
besoin de faire une pause, de se faire porter pâle ou de quitter la ville pendant
deux semaines pour aller en vacances.
Si vous voulez un site web qui fonctionne, vous devez comprendre comment
prendre le trafic de votre site web et le convertir en argent dans votre poche.
Parce que peu importe que votre site web soit joli, c’est essentiel qu’il soit
efficace.
C’est la raison pour laquelle, j’aborderai avec vous dans cet ouvrage, votre
site web comme un actif marketing qui doit conduire à la conversion (achat,
inscription, abonnement…).
13
Le livre est divisé en trois parties :

1. Une partie stratégique, très orientée sur le marketing. Elle s’étend du cha-
pitre 1 au chapitre 6.
Si votre intention n’est pas de faire de votre site un actif marketing, vous
n’avez pas besoin de la lire.
2. Une partie opérationnelle, si vous souhaitez avoir de solides bases tech-
niques pour un site web no-code. Elle s’étend du chapitre 7 au chapitre 12.
3. Une partie projet, qui est un exemple pratique de travail préparatoire à
effectuer avant de passer à une plateforme no-code pour commencer la
création de votre site web. Si vous êtes vraiment pressé, commencez par là.
Et vous pouvez mettre votre site web en ligne en quelques heures seulement.
Rassurez-vous, le livre est doté d'un site compagnon :
https://academy.lotincorp.biz/gereso-site-internet-no-code/
(Avec des liens vers des ressources supplémentaires) et de didacticiels vidéos.
Alors, si les étapes préparatoires ne vous intéressent pas, sautez direc-

tement au chapitre 11 et accédez aux vidéos.
Mais si réaliser un site web au service de votre entreprise et de votre activité

commerciale est important pour vous, lisez ce livre dans l’ordre, et vous ne le
regretterez pas.
Toutefois, le livre est rédigé de telle manière que chaque chapitre soit indépen-
dant. Vous pouvez donc le consulter en fonction de vos besoins ponctuels.
Pourquoi une phase stratégique

avec des aspects théoriques ?
Dans « design web », il y a le mot « design ». Et pour moi :
« Le design est à la fois un outil et un processus
de résolution de problèmes. »
La première question qui occupe les designers est de découvrir quel est le
problème, pour ensuite innover dans la solution. Le design a développé sa
propre méthode pour y parvenir : le design thinking, qui s’applique, quel que
soit l’objet. Que ce soit un produit, un service ou un système.
Le design thinking consiste à ouvrir le champ à toutes les solutions possibles

pour ensuite sélectionner et affiner, sur un mode itératif1, la meilleure solution
1. Ce concept sera couvert en détail dans le chapitre 1.
14
https://www.INTRODUCTION.com
au problème posé. C’est cette méthode qui fonde la démarche du design cen-
tré sur l’utilisateur et garantit l’innovation plutôt que la copie et la réplication
de solutions existantes.
Le but ici est de vous amener à penser différemment :

« Au lieu de vous concentrer à essayer de pousser les gens à vouloir un pro-
duit, concevez un produit que les gens veulent. »
Pour ce faire, vous devez commencer par penser les aspects business et
marketing de votre entreprise avant de produire des extrants. Même les entre-
prises derrière les meilleurs outils no-code l’ont compris.
No-code et académies en ligne

Si vous regardez attentivement les contenus en ligne des principaux outils
no-code du marché, vous remarquerez qu’ils ont carrément des académies ou
des universités. Dans ces académies en ligne, ils n’enseignent pas seulement
comment utiliser leur solution, ils apprennent surtout comment la transformer
en actif économique rentable.
WordPress.org et WordPress.com
WordPress.org a une approche plus technique de l’apprentissage, sachant
que son premier public, ce sont les développeurs web :
https://learn.wordpress.org/
15
https://wordpress.com/fr/support/
WordPress.com s’adresse en premier aux entrepreneurs qui veulent lancer

leur business en ligne. De ce fait, il y a quelques catégories qui me sautent aux
yeux dans leurs guides :
Démarrer
- Commencer
- Ai-je besoin d’un site web, d’un blog ou d’un site web incluant un blog ?
- Démarrer avec WordPress.com
- + 13 autres guides
Élargir votre public

- Accroître le nombre de vues et le trafic
- Services de vérification de site
- Google Analytics
- + 6 autres guides
Générer des revenus

- Monétisation de votre site
- Bloc de contenu Premium
- Connecter un compte Stripe
- + 9 autres guides
16
Shopify Academy
https://academy.shopify.com/
Dans le cas de Shopify Academy (exclusivement en anglais) par exemple, les

principaux cours portent sur les conversions de clients, la vente transfronta-
lière, les points de vente et le commerce de détail, la collaboration avec les
marchands, la data et l’analytics, le marketing, et les opportunités de dévelop-
pement de produits.
Shopify Learn
Shopify va encore plus loin avec ses ressources « Business Courses: Learn
from Experts » :
https://www.shopify.com/learn
17
Dans Shopify Learn (exclusivement en anglais), vous trouverez un ensemble

de vidéos qui vous aideront à bâtir et développer votre business en ligne.
Deux niveaux d’apprentissage sont mis en avant :

- Apprentissage essentiel pour démarrer votre entreprise.
- Apprentissage essentiel pour marketer et vendre votre produit.
Dans les catégories, vous allez trouver divers sujets qui tournent autour du
business et du marketing.
Wix Learn
https://fr.wix.com/learn
Chez Wix, ils divisent les formations en fonction de votre parcours

entrepreneurial :
1. Créer votre site (débutant).
2. Gérer votre entreprise (intermédiaire).
3. Développer votre marque (en croissance).
Et les catégories de cours sont les suivantes : création, management et

développement.
Je dois vous dire néanmoins que la version en anglais est beaucoup, beau-
coup plus riche que celle en français.
18
Webflow University
https://university.webflow.com/
Chez Webflow (exclusivement en anglais), ils répartissent également les for-

mations par niveau : débutant et avancé.
Au sujet des cours pour les débutants, ils proposent :

- Accessibilité sur le web.
- Déplacement de votre entreprise en ligne.
- Commerce électronique avec Webflow.
- Fondamentaux du référencement.
- CMS & contenu dynamique.
- Cours ultime de design web.
Quand vous regardez de près les contenus de ces différentes académies,

vous remarquez qu’il y a des sujets qui reviennent, et ils tournent tous autour
du même thème : le marketing.
Pourquoi ?
Parce que le site web est un outil au service de votre marketing. Voilà la raison
derrière la première partie de ce livre : phase stratégique.
19
Partie 1
PHASE
STRATÉGIQUE
Dans cette première partie, je vais commencer par l’aspect « théorique » du

design de site web, ainsi que par les fondations marketing qui motivent la
création d’un site web.
Au chapitre 1, je vous ferai découvrir le design web et en quoi il consiste.
Au chapitre 2, je ferai un état des lieux des technologies low-code et no-code.
Au chapitre 3, je vous donnerai les meilleurs trucs et astuces pour choisir la

meilleure plateforme no-code pour votre site web, en fonction de vos besoins.
J’irai même plus loin, en vous fournissant des pistes sur l’infrastructure qui
vous permettra d’avoir votre site en ligne.
Au chapitre 4, je parlerai de l’écosystème de marketing digital, parce que

votre site web ne devrait pas fonctionner seul dans son coin. En réalité, il fait
21
partie d’un tout dont il est le centre. J’ai fait l’erreur de penser le contraire
au début, et mon site web n’a pas apporté grand-chose à mon business. Au
contraire, il m’a consommé énormément de ressources. Ce chapitre est fait
pour vous aider à éviter de commettre la même erreur que moi.
Au chapitre 5, je ferai un petit point sur la marque et le branding. Pourquoi ?

Parce que le site web est un actif important de l’identité de marque (notam-
ment de l’expression de la marque). Il est donc crucial de savoir quel rôle il
aura à jouer dans le brand building1.
Au chapitre 6, je parlerai de l’approche Growth-Driven Design. Pourquoi ?

Parce qu’elle est importante à mettre en place pour votre projet, afin que vous
sachiez comment réduire le temps passé à créer votre site web, et à tirer profit
de la stratégie et de l’amélioration continue. D’ailleurs, le document de spéci-
fications évoqué ici est conçu sur la base de cette approche.
1. On verra cette notion en détail dans le chapitre 5.
22
Chapitre 1
C’est quoi,
le design web ?
J’ai écrit en 2018 un long article2 pour expliquer ce qu’est le design web. À
la suite des commentaires, je m’étais alors rendu compte que très peu de
personnes savaient en réalité ce que c’était.
Je rappelle une définition très courte et très succincte de HubSpot3 ici :

« Le design de site web est le processus de planification, d’idéation et d’orga-
nisation de contenu pour l’Internet. »
Il est évident que le contenu est roi. Mais ce qui m’intéresse ici, c’est le mot
« processus ».
2. LOTIN Henri, C’est quoi le design web ou web design ?, https://lotincorp.biz/cest-quoi-le-design-web/

3. DEUWEL Alexis, Webdesign : Qu’est-ce que c’est et comment faire ?, https://blog.hubspot.fr/website/
site-web-design
23
Pourquoi je commence par là ?

Parce que je ne veux pas que vous soyez surpris par la manière dont le livre
est organisé : je passerai beaucoup de temps sur la phase de planification.
Abraham Lincoln disait :

« Que l’on me donne six heures pour couper un arbre, j’en passerai quatre à
préparer ma hache. »
Alors, en quoi consiste le design de site web ?
Non, le design web n’est PAS QUE la création

d’interfaces web
Vous savez quoi ? Le design web n’est pas seulement la création de l’inter-
face. En fait, l’interface est la finalité du processus du design web.
Même Wikipédia en français4 a commis cette erreur :

« La création et le design de sites web ou web design est le design de l’inter-
face web : l’architecture interactionnelle, l’organisation des pages, l’arbores-
cence et la navigation dans un site web. Le design d’un site web tient compte
des contraintes spécifiques du support Internet, notamment en termes d’er-
gonomie, d’utilisabilité et d’accessibilité. »
La définition de 99design5 dans un article rédigé en 2019 précise :

« Le design web est le processus de planification et de construction des élé-
ments de votre site internet, de la structure à la mise en page, en passant par
les couleurs, les polices, et les images. »
J’aime beaucoup l’aspect planification qu’elle fait apparaître.
Treefrog6, une agence digitale au Canada me met du baume au cœur avec son
approche :
« Le design est le processus de collecte d’idées, d’organisation et de mise en
œuvre esthétique, guidé par certains principes dans un but précis. Le design
web est un processus de création similaire, avec l’intention de présenter le
contenu sur des pages web électroniques, auxquelles les utilisateurs finaux
peuvent accéder via Internet à l’aide d’un navigateur web. »
4. Wikipédia, Conception de site web, https://fr.wikipedia.org/wiki/Conception_de_site_web

5. KRAMER Lindsay, Qu’est-ce que le design de site web (et comment le réussir) ?, https://99designs.fr/blog/
design-web-digital/quest-ce-que-design-de-site-web/
6. Treefrog, What is Web Design?, https://www.treefrog.ca/what-is-web-design
24
https://www.C’EST QUOI, LE DESIGN WEB ?.com
Tous les éléments s’y retrouvent : processus, principes, but, contenu, création,
utilisateurs et web.
Je vais maintenant parler de deux grands principes sur lesquels s’appuie le

design web moderne : le design centré sur l’utilisateur et le design d’expé-
rience utilisateur.
Le design centré sur l’utilisateur

[user centered design, UCD]
Nous ne pouvons parler de design web sans évoquer les principes du design
centré sur l’utilisateur qui est la fondation sur laquelle est bâtie la grande partie
des disciplines nécessaires à l’existence du design web.
L’origine des principes du design centré sur l’utilisateur

Beaucoup de principes du design centré sur l’utilisateur sont basés sur la
compréhension de la manière dont les utilisateurs pensent (réfléchissent) et
prennent des décisions, quel genre de choses influencent ou inhibent la prise
de décision, et comment les utilisateurs évaluent les options et la pertinence
ou la signification de l’information.
Cette compréhension provient de deux sciences :

- Les sciences cognitives – l’étude de la manière dont les humains pensent.
- L’interaction homme-machine – l’étude de la manière dont les humains se
servent des ordinateurs.
On doit cette façon de penser à Donald Norman, qui est un chercheur et pro-
fesseur américain en sciences cognitives, en design et en ergonomie. Il est
surtout connu pour ses travaux sur le design centré sur l’utilisateur et la psy-
chologie cognitive, ainsi que pour son livre, The Design of Everyday Things (La
psychologie cognitive du design), publié en 1988.
Dans ce livre, il a popularisé le concept de « mauvais design [bad design] » et

a expliqué comment les objets mal conçus peuvent créer de la confusion et de
la frustration chez les utilisateurs. Il est également cofondateur de la société
de conseil en design Nielsen Norman Group.
25
Le design centré sur l’utilisateur, en bref

Le design centré sur l’utilisateur est une approche itérative7 de design qui vise
à développer une compréhension des besoins des utilisateurs, en faisant ainsi
un mélange de méthodes et d’outils d’investigation (par exemple, enquêtes et
interviews) et génératifs (brainstorming, par exemple).
Fondamentalement, le design centré sur l’utilisateur implique fortement les uti-

lisateurs dans toutes les phases de design et d’évaluation. En général, chaque
itération (cycle d’amélioration) de l’approche design centrée sur l’utilisateur
suppose quatre phases distinctes.
1. Tout d’abord, les designers tentent de comprendre le contexte dans lequel
un système peut être utilisé.
2. Par la suite, les exigences des utilisateurs sont spécifiées.
3. Une phase de design suit.
4. Suivie d’une phase d’évaluation.
Fig 1.1. Le processus du design centré sur l’utilisateur,

cyclique et itératif !
7. Qui fonctionne par cycles d’amélioration continue.
26
Les résultats de l’évaluation sont appréciés en fonction du contexte et des

exigences des utilisateurs afin de vérifier le bon fonctionnement d’un design,
à savoir s’il est proche d’un niveau correspondant au contexte spécifique des
utilisateurs et satisfait tous leurs besoins pertinents.
De là, d’autres itérations (améliorations par cycles) de ces quatre phases sont
faites, jusqu’à ce que les résultats de l’évaluation soient satisfaisants.
Le design d’expérience utilisateur

Cette définition du design d’expérience utilisateur ou design UX par Blind8 est
satisfaisante :
« Le design d’expérience utilisateur ou design UX est le processus visant à
influencer des variables contrôlables pour provoquer une réponse émotion-
nelle positive lorsqu’une personne interagit avec un produit, un environnement
ou une marque. »
Pour bien comprendre le design UX, il est important de connaître les cinq
disciplines principales qui le régissent, car techniquement, le design d’expé-
rience utilisateur est un ensemble de disciplines :
1. L’architecture de l’information connecte les gens au contenu d’une ma-
nière plus compréhensible pour eux.
2. Le design d’interaction traite des interactions spécifiques entre les uti-
lisateurs et un écran (en se basant sur les principes de l’Interaction
Homme-Machine).
3. L’utilisabilité traite du fait de s’appuyer sur des données pour déterminer le
bien-fondé des décisions de design. Elle est définie par la norme ISO 9241-
11 : 1998.
4. Le prototypage peut être défini comme la création d’une version prélimi-
naire à partir de laquelle les autres formes sont développées.
5. Le design visuel porte sur l’utilisation de l’aspect visuel d’un produit pour
en améliorer l’expérience utilisateur.
Tout au long de votre projet de création de site web, vous devrez vous mettre
dans la peau d’un designer web. Et un designer web possède plusieurs com-
pétences qu’il met au service du projet.
Je vous propose de découvrir une vue globale des activités autour de la créa-
tion d’un site web.
8. Blind est un studio de création basé en Californie. Cette définition est extraite de leur vidéo « What is UX
Design », sur YouTube : https://www.youtube.com/watch?v=nV1I_098dzg.
27
Opérations de design et de développement web

Les deux opérations principales dans la création d’un site web sont le design
et le développement.
Opérations de design web

Les opérations de design web consistent en :
1. La conceptualisation (production du document de spécification du projet
– le but et les objectifs du projet, recherches sur la concurrence et pistes
visuelles à explorer grâce notamment aux mood boards ou planches émo-
tionnelles, définition des profils d’utilisateurs, création de scénarios d’utili-
sation, budget et planning inclus).
2. La création d’une liste de contenu (inventaire de contenu).
3. La création d’un diagramme structurel (flowchart, organigramme9).
4. Le développement de la taxinomie10 et du système organisationnel.
5. La création d’idées de story-board d’interaction.
6. Préparation graphique des écrans web : croquis ou ébauches sommaires et
fil de fer graphique [wireframe].
7. Design graphique de l’interface (mock up ou maquette graphique).
8. Export des composants concernés des écrans web en images pour la
phase d’intégration (création des livrables de l’interface).
Mais tout ceci ne suffit pas à rendre le site web fonctionnel. C’est pour cela
qu’il faut du code HTML et CSS. Et si vous voulez être moderne, vous allez
avoir besoin de JavaScript.
Opérations de développement web

Ajouter des interactions aux pages web en codant à la main (grâce à un édi-
teur de texte) ou en utilisant une interface WYSIWYG [What You See Is What
You Get] comme WordPress, Dreamweaver, Webflow ou Systeme.io. Il existe
plusieurs services d’intégration web en ligne, proposant de convertir une ma-
quette graphique en HTML.
Webflow propose d’ailleurs une méthode assez simple pour passer de Figma11
à Webflow12.
9. Représentation synthétique des diverses parties d’un ensemble organisé et de leurs relations mutuelles ;
représentation graphique des sous-ensembles d’un système et des relations qui les lient entre eux.
10. Étude théorique des bases, lois, règles, principes d’une classification.
11. Figma est une plateforme de design de bout en bout, conçue pour aider les équipes à comprendre les
problèmes, à explorer leurs options et à construire des solutions ensemble. https://www.figma.com/fr
12. https://webflow.com/figma-to-webflow
28
Spécifiquement on aura à travailler sur le balisage des pages, leur mise en

page par les CSS et l’ajout d’interaction grâce au JavaScript ; ceci est la phase
d’intégration ou de design de la maquette fonctionnelle.
Elle peut être précédée si besoin, et en fonction du budget, de la phase de pro-

totypage13, qui est une phase intermédiaire réalisée sous Figma ou Adobe XD.
La bonne nouvelle pour vous, c’est que le but de ce livre n’est pas de faire
de vous un designer web (peut-être que si, un peu quand même ; rires), mais
de vous amener à réaliser un site web professionnel qui vous permettra de
convertir vos visiteurs en clients. Tout ceci, sans passer par les aspects tech-
niques en rapport avec le code.
Ce qui signifie que vous n’êtes pas dispensé des autres activités en rapport
avec la création d’un site web de qualité professionnelle.
13. Première réalisation d’un projet destiné à former une série.
29
Chapitre 2
État des lieux :

code, low-code
ou no-code ?
L’idée de ce chapitre est de dresser un état des lieux sur la base des datas,
et de s’assurer que les technologies no-code ne vont pas disparaître du jour
au lendemain. Même si la plupart des acteurs du low-code/no-code mettent
beaucoup plus l’accent sur les plateformes de développement d’application
mobile, certains restent concentrés sur la création de sites web.
En 2025, jusqu’à 70 %14 des nouvelles applications développées par les orga-
nisations utiliseront des technologies low-code ou no-code.
Ces dernières années ont vu un changement radical dans la façon dont les
entreprises fonctionnent. Cela inclut une évolution vers le commerce élec-
tronique, le travail à distance et l’automatisation. Et ce développement de
14. Toutes les statistiques sont tirées de cet article : AppMySite, Low-code & No-code development platforms:
Market share & size, https://www.appmysite.com/blog/low-code-no-code-development-platforms-market-
share-size
31
l’infrastructure en ligne a été grandement facilité par la montée en puissance

de l’IA et des outils low-code/no-code.
Le développement de différents types de logiciels, en particulier de sites web

et d’applications, est devenu plus faisable et beaucoup plus facile qu’il y a
quelques années. Ce changement se produit en raison de la prolifération des
plateformes de développement low-code et no-code.
Des constructeurs de sites web aux créateurs d’applications gratuites, la

technologie de développement low-code et no-code est partout. Les termes
low-code et no-code sont souvent utilisés ensemble et sont abrégés LCNC
(Low-Code & No-Code). Les outils et plateformes fonctionnant sur une tech-
nologie low-code et no-code éliminent le besoin de codage technique intensif
et simplifient le développement.
Différences entre low-code et no-code

Bien qu’elles soient utilisées ensemble, les plateformes low-code et no-code
diffèrent en réalité dans leur approche.
« Alors que les plateformes low-code nécessitent ou autorisent encore une

certaine quantité de connaissances et d’efforts en matière de codage, les pla-
teformes no-code éliminent totalement le besoin de tout type de codage. »
Nous parlons ici de votre point de vue, celui de l’utilisateur final. Vous aurez
affaire à une interface graphique, généralement avec des modules en glisser-
déposer, comme des briques de Lego.
Essayons avec des exemples.
D’un côté, des plateformes comme WordPress vous permettent de créer un

site web à partir de rien. Bien que vous puissiez implémenter un maximum
de fonctionnalités sur WordPress sans codage, les codeurs professionnels
peuvent toujours atteindre des niveaux élevés de personnalisation en utilisant
le backend15 pour écrire et modifier des codes.
15. Le backend est la partie d’un logiciel que les utilisateurs ne peuvent pas voir ou avec laquelle ils ne
peuvent pas interagir et qui contient toutes les fonctionnalités. Il couvre les aspects suivants d’un programme :
ressources matérielles, technologie du logiciel, infrastructure du réseau.
Le frontend est la partie que les utilisateurs peuvent voir et avec laquelle ils peuvent interagir.
32
https://www.ÉTAT DES LIEUX : CODE, LOW-CODE OU NO-CODE ?.com
D’un autre côté, il existe des outils comme AppMySite16 ou FlutterFlow17 qui
offrent un environnement entièrement no-code où chaque fonctionnalité peut
être consultée et implémentée sans écrire une seule ligne de code.
Fig 2.1. FlutterFlow vous permet de créer

des applications incroyablement vite dans votre navigateur.
Le précurseur dans ce domaine est sans aucun doute Dreamweaver18 avec son
interface WYSIWYG. On lui reprochait alors la production d’un code « sale ». Il
s’est beaucoup amélioré avec le temps, et d’autres applications low-code/no-
code avec… Aujourd’hui, en regardant le code produit par ces applications,
vous ne verrez pas la différence avec un travail réalisé par un codeur.
De ce fait, ces outils peuvent s’avérer plus fiables, plus abordables et plus
rapides que les solutions personnalisées et même low-code.
Considérons par exemple le prix du développement d’applications :

- Le développement d’applications personnalisées peut coûter environ
300 000 € par an.
- Le développement d’applications low-code peut coûter environ 5 000 €
par an.
- Le développement d’applications no-code peut coûter habituellement moins
de 1 000 € par an.
16. AppMySite vous permet de transformer votre site web en application mobile, quel que soit le contenu de
votre site web. https://www.appmysite.com/
17. FlutterFlow vous permet de créer des applications incroyablement vite dans votre navigateur. https://
flutterflow.io/
18. Anciennement Macromedia, Dreamweaver a ensuite été racheté par Adobe. C’est un éditeur pour créer,
développer et gérer facilement des sites web dynamiques avec un moteur de programmation intelligent et
simplifié. https://www.adobe.com/fr/products/dreamweaver.html
33
Un aperçu du marché
Fig 2.2. Croissance globale moyenne prévisionnelle du marché

des plateformes de développement low-code/no-code
Gartner est une société de conseil en management basée dans le Connecti-

cut qui mène des recherches sur la technologie sous son extension « Gartner
Magic Quadrant19 ». Selon l’entreprise, dans son rapport de décembre 202220 :
« Les plateformes d’applications low-code seront utilisées pour 65 % de

toutes les activités de développement d’applications d’ici 2024 ».
Ce rapport suffit à lui seul, à mettre en évidence l’influence croissante des

technologies de développement low-code et no-code partout dans le monde.
Avantages du low-code/no-code
Pourquoi, comme tant d’entreprises, devriez-vous adopter des outils no-code
pour créer et lancer votre site web ? La raison est simple :
Le no-code offre plusieurs avantages que le développement traditionnel

n’offre tout simplement pas.
Jetez un coup d’œil à certains de ces avantages.
19. Gartner, https://www.gartner.com/en/research/methodologies/magic-quadrants-research

20. Gartner, https://www.gartner.com/en/newsroom/press-releases/2022-12-13-gartner-forecasts-worldwide
-low-code-development-technologies-market-to-grow-20-percent-in-2023
34
https://www.ÉTAT DES LIEUX : CODE, LOW-CODE OU NO-CODE ?.com
Croissance plus rapide

Le développement no-code réduit le délai d’exécution des projets qui néces-
sitent généralement des semaines ou des mois pour être achevés. Les outils
no-code permettent aux organisations de créer et de lancer de nouvelles
applications plus vite et avec beaucoup moins de contretemps en cours de
route.
En fait, les plateformes low-code/no-code ont le potentiel de rendre le

développement de logiciels jusqu’à 10 fois plus rapide que les méthodes
traditionnelles.
Moins de pression sur les développeurs

Selon Stack Overflow, 2 développeurs sur 5 risquent le burn-out21 ! Être déve-
loppeur de logiciels est un travail stressant. Travailler dans des délais serrés,
corriger les bogues, diminuer les erreurs et maintenir un code hérité touffu
n’est pas facile.
Les outils no-code peuvent atténuer la pression et le stress exercés sur les
ingénieurs en accélérant le processus de construction, en réduisant la com-
plexité et en permettant au personnel non technique de contribuer au projet.
Accessibilité améliorée
Les outils low-code/no-code contribuent à rendre le travail informatique plus
accessible dans les différents départements de l’entreprise.
Traditionnellement, le développement de logiciels était un domaine isolé, ré-

servé à ceux qui avaient des connaissances spécialisées. Les outils no-code
aident à réduire la fracture technique et à créer un paysage plus intégré pour
la formation de nouvelles idées, le développement et l’innovation.
Coûts réduits
Le codage d’applications personnalisées nécessite des designers, des ingé-
nieurs et des testeurs. Non seulement les organisations doivent embaucher
des talents spécialisés, mais elles doivent investir des ressources continues
dans la maintenance des systèmes hérités.
21. Toutes les statistiques proviennent de cet article.

Gravity Kit, WordPress and the Future of No-code: Must-Know Statistics for 2023, https://www.gravitykit.com/
wordpress-no-code/
35
Le développement no-code élimine le besoin de maintenance héritée. Il per-

met aux entreprises de réaliser des économies et de réduire le temps qu’elles
passent à réparer et à mettre à niveau leurs systèmes opérationnels.
Vous savez maintenant à quoi vous attendre quant au futur du no-code. Mais
comment faites-vous votre choix ?
36
Chapitre 3
Choisissez votre
plateforme no-code
Quel niveau de contrôle souhaitez-vous sur les fonctionnalités, le design, les

données et les processus du système de création de votre site web ?
Tout aussi important. De quel degré de contrôle avez-vous réellement besoin

pour atteindre vos objectifs commerciaux et vos KPI22 [Key Performance Indi-
cators] ou indicateurs clés de performance (ICP) ?
Évaluez les plateformes

Le choix du système auto-hébergé, personnalisé ou open source offre le plus
haut niveau de contrôle, mais nécessite également la plus grande responsabi-
lité pour la mise en ligne et la maintenance.
22. Un indicateur clé de performance – en anglais : key performance indicator – est un indicateur utilisé pour
l’aide à la décision dans les organisations. Les ICP sont utilisés particulièrement en gestion de la performance
organisationnelle.
37
Par ailleurs, vous pouvez choisir une plateforme prête à l’emploi pour gérer
beaucoup de choses pour vous, même si vous sacrifiez ensuite votre capa-
cité à personnaliser entièrement le système, à interconnecter les choses et à
confier le contrôle de vos données à un tiers.
En termes simples, cela peut se résumer en deux questions :

1. Quel degré de contrôle sur vos systèmes souhaitez-vous, ou de quel degré
de contrôle avez-vous besoin ?
2. Est-ce que vous et/ou votre équipe êtes en mesure d’assumer la responsa-
bilité de son entretien ?
Une bonne analogie pour la technologie est une voiture.
Option 1
Parfois, tout ce que vous voulez et dont vous avez besoin, c’est quelque chose
sans fioritures pour vous rendre facilement du point A au point B, rien de plus
et rien de moins. Cela pourrait être l’équivalent en ligne du modèle de base
de la Toyota Yaris : un simple site web de style brochure. Si c’est tout ce dont
vous avez besoin, c’est parfait !
Option 2
Vous pouvez également acheter quelque chose de plus sophistiqué, comme
une BMW ou une Mercedes, qui offre plus de performances, de luxe et de
fonctionnalités. Ce serait les Systeme.io, Shopify ou Webflow du monde
no-code.
Option 3
Il y a aussi la possibilité d’acheter une voiture de course F1, extrêmement ra-
pide, qui nécessite des spécialistes juste pour le fonctionnement et l’entretien.
Mais elle vous amènera très certainement à votre destination en un rien de
temps. Construire un site web personnalisé haut de gamme, c’est comme une
voiture de course F1 modifiée et configurée personnellement. Tout est exacte-
ment comme vous en avez besoin, même si vous devez investir une quantité
décente de ressources pour obtenir ce niveau de perfection et de qualité.
Option 4
La plupart d’entre nous choisiront un compromis entre toutes ces options.
Un modèle intermédiaire, une voiture de conduite quotidienne avec certaines
fonctionnalités. Et nous y ajouterons notre propre saveur et nos personnalisa-
tions. WordPress est un exemple qui correspond à cette idée. Il a quelques
goodies intégrés, et il lui est facile de s’adapter à vos besoins, bien que vous
38
https://www.CHOISISSEZ VOTRE PLATEFORME NO-CODE.com
puissiez le personnaliser relativement simplement pour une quantité raison-

nable de ressources.
Les questions à se poser

Afin de vous aider à choisir un bon système à utiliser, il y a deux questions
supplémentaires à considérer :
1. Quelle fonctionnalité recherchez-vous actuellement (pour le lancement) ?
2. Le système a-t-il des fonctionnalités qui vous aideront à grandir et à évoluer,
et/ou a-t-il des addons/plugins/extensions ou des intégrations pour faciliter
cela ?
Quel que soit votre choix, tous les systèmes vous coûteront quelque chose.
Que ce soit du temps, de l’argent, du talent, de l’intelligence, du personnel ou
une combinaison de ces éléments.
Pour vous aider à décider ou au moins à rechercher vos options, considérez

les points de recherche suivants :
- Quelle est votre utilisation prévue ? Allez-vous vendre des produits ? Par-
tagerez-vous des informations sur l’entreprise ? Afficherez-vous des œuvres
d’art ? Allez-vous collecter des prospects, etc. ? Choisissez une plateforme
avec des fonctionnalités qui prennent en charge l’expérience utilisateur sou-
haitée et dispose des fonctionnalités de base que vous voulez ou pouvez
facilement ajouter. Je vous en dirai plus au sujet des fonctionnalités dans le
document de spécifications.
- Combien d’efforts êtes-vous prêt à mettre dans l’apprentissage du
système ? Cela s’applique à vous, votre équipe, vos partenaires et vos
utilisateurs.
- Le système est-il difficile à configurer et à utiliser ? Êtes-vous capable de
« gérer » le système au niveau opérationnel ?
- Combien êtes-vous prêt à investir dans ce système particulier ? Il
y a le prix d’utilisation du système, le coût des personnalisations et de la
maintenance, et même le « coût » d’apprendre à l’utiliser, puis celui de son
utilisation.
- Le système est-il suffisamment flexible pour vos besoins et votre plan
de croissance ? Certains systèmes sont très difficiles (voire impossibles) à
personnaliser, mais extrêmement efficaces pour la seule chose pour laquelle
ils sont conçus. D’autres sont vraiment personnalisables, mais nécessitent
l’aide d’une équipe.
39
- Dans l’ensemble, est-il suffisamment flexible pour que vous puissiez

l’emmener à un état qui vous convient et que vous puissiez utiliser pour
grandir ?
- Quelle quantité de technophilie23 est nécessaire ? Certaines choses
peuvent être gérées par à peu près n’importe qui sait utiliser un clavier et une
souris. D’autres systèmes requièrent un doctorat en science aéronautique.
À quel point quelqu’un doit-il être geek et technique pour tout configurer,
continuer à l’utiliser et le maintenir ?
- Est-il facile de l’utiliser au jour le jour et d’y apporter des modifications ?
Parfois, tout ce dont vous avez besoin est un blog dans lequel vous publierez
des articles simples. D’autres systèmes comportent de nombreuses pièces
mobiles qui le rendent généralement très flexible, mais s’agit-il d’un système
et d’une expérience utilisateur conviviaux et globalement faciles à utiliser ou
du moins logiques ?
- Fournit-il des analyses et des métriques intégrées ? Certains systèmes
ne fournissent que les informations les plus élémentaires et ne vous per-
mettent pas d’approfondir les données. D’autres ont beaucoup de données
intégrées et s’intègrent bien aux systèmes tiers. La question devient alors :
de combien de données avez-vous vraiment besoin pour prendre des
décisions efficaces ?
Jetez un œil à la liste suivante pour un aperçu des systèmes potentiels et de

leurs points forts. Il ne s’agit en aucun cas d’une liste exhaustive, même si
elle devait vous aider à trouver une direction technologique. Il existe de nom-
breuses autres plateformes et technologies disponibles.
23. Votre degré d’aisance avec la technologie en général.
40
Pour faire simple, si je devais prendre la décision de commencer quelque part

avec l’un des éléments ci-dessus, je pourrais résumer comme suit :
WordPress Shopify Webflow Site personnalisé

Quoi que ce soit. Commerce Blog, com- Tout ce que vous
Les utilisations électronique merce léger, voulez
Utilisations
typiques incluent site marketing

le site marketing,
le commerce, les
cours, la commu-
nauté, le blog
Moyenne Facile à Facile Élevée
d’appren-
Courbe
moyenne
tissage
Gratuit pour le Frais de ser- Frais de service Les projets person-

cœur WordPress. vice mensuels mensuels nalisés de démar-
Mais les coûts basés sur les basés sur les rage typiques vont
Prix
augmentent rapi- fonctionnalités fonctionnalités de 32 000 € à

dement, plus vous et le plan et le plan 175 000 € selon ce
voulez qu’il soit sélectionnés sélectionnés qui est inclus
personnalisé
Infinie Moyenne Assez flexible Infiniment flexible
Flexibilité
à très flexible
selon les
connaissances
techniques
Très codable et Nécessite Très codable Nécessite beau-
modifiable, néces- une quantité et modifiable, coup de connais-
Codabilité
site des connais- décente de nécessite des sances techniques

sances techniques connais- connaissances ou une équipe
sances techniques technique pour
techniques personnaliser
pour coder
Difficulté moyenne Facile Facile Difficile
Mainte-
nabilité
Oui, avec des Oui Oui, avec cer- Oui

e-com-
merce
plugins tains forfaits
41
WordPress Shopify Webflow Site personnalisé

Oui Non, bien Oui, avec des Oui, si codé à
utilisateurs
que des plans de niveau l’intérieur

Comptes
extensions supérieur
tierces via les
applications
puissent aider
Peut être hébergé Uniquement Uniquement via Partout
Héberge-
n’importe où ou via via le service le service de

ment
un fournisseur de de Shopify Webflow

services cloud
Difficile Prise en Prise en charge Vous en êtes
Sécurité
charge pour pour vous entièrement

vous responsable
Oui, avec des Plutôt Plutôt Oui, si codé à

Multilingue
plugins ou du code disponible disponible l’intérieur

personnalisé (ou
beaucoup de ges-
tion de données)
Leur support client Leur support Leur support Aussi bonne que
Assistance
est raisonnable- client est rai- client est rai- l’équipe qui vous
ment bon sonnablement sonnablement aide
bon bon
Fig 3.1. Comparatif des solutions de développement de site web :

WordPress, Shopify, Webflow et solution personnalisée.
Source : Made to Sell: Creating Websites That Convert, 2022.
Pour résumer
- Si vous voulez quelque chose de personnalisable à l’infini avec un énorme
support communautaire, optez pour WordPress.
- Si vous recherchez quelque chose d’axé sur le commerce électronique et
que vous ne voulez pas vous occuper de problèmes de serveur, utilisez
Shopify.
- Si vous voulez un mélange des deux précédents, il y a Webflow.
- Si vous recherchez quelque chose de vraiment unique et que vous pouvez y
consacrer des ressources, la personnalisation complète est la voie à suivre.
42
En espérant que cela vous aide dans votre choix. Notez que j’ai comparé les
outils les plus populaires sur le marché. Mais tous ceux qui sont sur ce tableau
ont des alternatives.
Voici toutefois les choses à considérer lorsque vous pensez aux alternatives :
- Le nombre d’utilisateurs. Plus il y a d’utilisateurs, plus la communauté pour
l’assistance est grande.
- Le système est-il open source ou propriétaire ? Y a-t-il une communauté qui
contribue au code, ou bien le code est-il centralisé par une seule entité ?
- Le système est-il soutenu par une grande entreprise ? Ceci est important,
pour éviter de le voir disparaître du jour au lendemain et avoir à migrer vers
un autre système.
- Le système offre-t-il la possibilité d’exporter vos données vers un autre
système ?
Ce sont des pistes supplémentaires à considérer avant de penser à une alter-

native aux outils présentés et évalués ici.
Personnellement, je suis passé par les quatre options. Et la plus équilibrée et

flexible que je peux vous recommander, c’est WordPress. Ce qui pose ainsi
le problème de l’achat de nom de domaine, des certificats de sécurité (SSL24
ou TSL25) de l’hébergement, en plus de leurs configurations respectives.
Serveurs & hébergement

Je ne conseillerai à personne d’acheter et de maintenir son propre serveur26.
Je ne vais pas vous donner tous les inconvénients, mais ce n’est pas la voie
à suivre. J’ai essayé un VPS [Virtual Private Server] ou serveur virtuel privé
autogéré et j’ai failli devenir fou.
Envisagez plutôt d’acheter de l’espace auprès d’une société d’hébergement,

un hébergeur.
24. SSL (Secure Sockets Layer) est une technologie standard destinée à la sécurité de la connexion internet et
à la protection des données sensibles qui sont transmises entre deux systèmes, empêchant les criminels de
lire et de modifier les informations transférées, y compris d’éventuelles informations personnelles.
25. TLS (Transport Layer Security) est simplement une nouvelle version, plus sûre, de SSL.
26. Un serveur web est soit un logiciel de service de ressources web (serveur HTTP), soit un serveur
informatique (ordinateur) qui répond à des requêtes du World Wide Web sur un réseau public (internet) ou privé
(intranet), en utilisant principalement le protocole HTTP [HyperText Transfer Protocol].
43
Tarification et frais de serveur

Les services les moins chers sont les VPS [Virtual Private Servers] et peuvent
commencer à partir de 5 € par mois ; ce qui, honnêtement, pourrait être parfait
pour vos besoins de départ. Ce ne sera pas puissant, mais si vous ne travaillez
que sur une petite application ou un site, ces 5 € vous mèneront très loin.
Voici les éléments dont il faudra tenir compte pour le choix de votre serveur
chez un fournisseur d’hébergement.
Puissance de traitement
Ceci est généralement appelé « vCPU » ou virtual-CPU [virtual Central Proces-
sing Unit]. C’est la quantité de capacité de traitement à laquelle vous aurez
accès. Avec des vCPU plus gros et plus nombreux, vous serez en mesure de
gérer beaucoup plus de transactions et de processus simultanés.
Bande passante
Une mesure de la quantité de « trucs » internet que vous envoyez à la fois IN et
OUT du serveur. Selon ce que vous achetez, ces deux entrée et sortie peuvent
être facturées séparément.
Mémoire
Également connue sous le nom de RAM [Random Access Memory], il s’agit de
la quantité de stockage à accès rapide à laquelle votre serveur a accès pour
effectuer un travail à la volée et « en ce moment ». Plus vous avez de RAM,
plus votre serveur peut gérer de processus simultanés.
Espace de stockage
Disques durs… Combien de fichiers (et taille des fichiers) vous pouvez mettre
sur le serveur.
Trop technique ? Essayez l’hébergement géré !

Si vous ne voulez pas vous encombrer l’esprit avec toutes ces notions tech-
niques, vous pouvez opter pour une solution entièrement gérée [managed
hosting] et un fournisseur de services.
Ces services, pour la plupart, sont semblables à un petit déjeuner servi au lit.
Ils gèrent à peu près toute l’infrastructure et les éléments d’hébergement trop
techniques pour vous, bien que vous payiez pour ce luxe.
La plupart des fournisseurs de solutions gérées s’appuient sur l’infrastructure

existante d’entreprises comme AWS [Amazon Web Services] d’Amazon, ou la
44
plateforme GCP [Google Cloud Platform] de Google, et ajoutent leurs propres

outils, optimisations et configurations afin de faciliter l’opération par l’utilisa-
teur lambda, entre autres choses telles que des améliorations de la sécurité et
des performances.
Quelle que soit la société que vous sélectionnez pour l’hébergement, assurez-
vous qu’elle dispose d’une option évolutive.
La capacité de votre site web et la capacité de son infrastructure à être agran-

die ou réduite pour les performances et les coûts en réponse aux change-
ments de ses charges de travail est connue sous le nom d’évolutivité.
L’évolutivité est également importante à mesure que votre entreprise se déve-

loppe, car vous aurez affaire à des clients, des données et des ressources
supplémentaires. Si votre site web arrive soudainement sur la première page
de Google et commence à générer beaucoup de trafic, vous devrez vous
assurer que vous pouvez effectuer une mise à niveau pour accueillir ces utili-
sateurs supplémentaires.
Si vous n’avez pas de plan en place pour faire face à ces augmentations, vous
risquez de perdre en efficacité ou de compromettre la qualité de votre produit
ou service. Cela pourrait entraîner des relations tendues avec les clients et
ternir la réputation de l’entreprise.
Ça m’est arrivé, et il nous a fallu mon équipe à Lotin Corp. et moi, près de
18 mois pour réparer les dégâts. Je vous épargne les milliers d’euros d’inves-
tissements supplémentaires.
Je ne saurais donc trop souligner l’importance de cette décision : choisissez

avec soin votre fournisseur d’hébergement.
Je vous présente ici les offres les plus populaires sur le marché27 des ser-
vices gérés pour WordPress. Sachant que Shopify, Webflow et Systeme.io
hébergent sur leurs serveurs respectifs.
WordPress.com
À tout seigneur tout honneur, je commence donc par la solution d’Automattic
(maison mère de WordPress), qui se définit comme le meilleur hébergement
géré WordPress de la planète.
27. Source : Belov Digital, Kinsta vs WP Engine vs Cloudways vs FlyWheel vs SiteGround: Hosting providers
detailed comparison 2022, https://belovdigital.agency/blog/kinsta-wpengine-cloudways-flywheel-siteground-
wordpress-hosting-comparison-2022/
45
On peut les croire sur parole, car ce sont eux qui sont à l’origine de WordPress.
Mais avant de se positionner comme une plateforme d’hébergement Wor-
dPress, WordPress.com a longtemps été une sorte de fournisseur de service
de plateforme de blogging.
Aujourd’hui, ils n’ont rien à envier aux autres fournisseurs de services gérés,
car ils proposent toutes les options qu’on peut attendre d’un tel service : CDN28
[Content Delivery Network], optimisation des images, évolutivité (montées en
charge), sécurité, sauvegarde en temps réel et assistance.
L’avantage est qu’ils connaissent WordPress de fond en comble, ils pourront

donc détecter les pannes plus rapidement, ainsi que les failles de sécurité.
Au départ, je leur reprochais un choix trop réduit de thèmes et l’impossibilité

d’installer des extensions. Ce problème étant géré grâce à des plans à partir
de Business, il n’y a plus de différence en matière de contrôle avec une plate-
forme WordPress auto-hébergée.
Kinsta
Kinsta offre les dernières et meilleures options d’hébergement.
Fig 3.2. Page d’accueil de Kinsta, kinsta.com/fr
Bien sûr, quand je dis dernier et meilleur, j’entends par rapport à WordPress. Et
il faut dire d’emblée que Kinsta offrait uniquement un hébergement WordPress
28. Un réseau de diffusion de contenu (RDC) ou en anglais content delivery network (CDN) est constitué
d’ordinateurs reliés en réseau à travers internet et qui coopèrent afin de mettre à disposition du contenu ou
des données à des utilisateurs.
46
géré, jusqu’en décembre 202229. Tous les membres de leur personnel sont des
experts WordPress.
Le forfait de base que propose Kinsta coûte un peu plus cher que ceux de
ses concurrents. Si vous recherchez une société d’hébergement qui connaît
WordPress de fond en comble, il est difficile de faire mieux.
Cloudways
Cloudways n’est pas une société d’hébergement WordPress moyenne. Les
services d’hébergement qu’ils proposent sont basés sur le cloud.
Fig 3.3. Page d’accueil de Cloudways, cloudways.com/en
La méthode Cloudways élimine essentiellement les temps d’arrêt [downtime].

Votre contenu est généralement servi plus vite en utilisant le système basé sur
le cloud. Car Cloudways peut détecter où se trouve un visiteur et fournir une
copie de votre site qui se trouve sur le serveur le plus proche de lui. Couplé à
leur vaste réseau CDN, cela se traduit par certains des temps de chargement
les plus rapides offerts par n’importe quelle société d’hébergement WordPress.
29. Kinsta lance l’hébergement d’applications et l’hébergement de bases de données, https://kinsta.com/fr/

mises-a-jour-de-fonctionnalites/hebergement-application-base-donnees/
47
À NOTER
Je ne suis sponsorisé par aucune des solutions que je vous recommande. Je
m’appuie uniquement sur mon expérience avec ces produits. Toutefois, ce qui
marche bien pour moi ne va pas forcément marcher pour vous. Alors, faites
vos choix en fonction de votre situation.
Pour les besoins de l’ouvrage, je vais utiliser WordPress.com comme système

et solution d’hébergement géré ; en plus de Webflow et Systeme.io. Même si
dans les faits, j’utilise WordPress.org comme système et Kinsta comme solu-
tion d’hébergement géré.
L’avantage avec WordPress.com, Webflow et Systeme.io est que vous pouvez

expérimenter les conseils de ce livre en dépensant 0,00 €. Et je trouve ça plu-
tôt sympa. WordPress, Shopify et Système.io, contrairement à Webflow, sont
traduits en français.
Rappelez-vous, une fois de plus, que votre site web existe dans votre stratégie
d’entreprise globale.
Si pour une raison ou une autre, les performances commerciales de cet

outil qu’est votre site web ne vous intéressent pas, rendez-vous directe-
ment au chapitre 11 : Votre site web gratuit et sans coder, pas à pas.
Par contre, si vous souhaitez rentabiliser l’investissement en temps à l’étude

de ce livre et aux recherches faites pour votre site web, continuez la lecture.
48
Chapitre 4
Site web
et écosystème
de marketing digital
Les plateformes de médias sociaux sont importantes pour déployer votre

stratégie marketing web. Malheureusement, elles n’offrent que très peu de
flexibilité quant à la présentation de vos contenus, sans compter la distraction
qui va avec.
Je recommande ainsi la mise en place d’un écosystème marketing digital cen-

tré sur le site web.
L’écosystème de marketing digital aide les propriétaires d’entreprise et les

entrepreneurs à atteindre une présence en ligne holistique30 qui leur permettra
ensuite d’attirer de nouveaux clients et même de former de nouveaux parte-
nariats qui n’étaient pas possibles auparavant.
Cependant, cet « écosystème » est complexe. Il a beaucoup de ramifications

qui doivent être comprises afin d’en tirer le meilleur parti.
30. Qui couvre tous les aspects/domaines de la vie.
49
Fig 4.1. Écosystème de marketing digital. Source : defined Creative.31
Qu’est-ce que l’écosystème

de marketing digital ?
L’écosystème de marketing digital est connu comme l’ensemble du processus
impliqué dans la création d’une campagne de marketing digital pour améliorer
le positionnement des marques sur le marché, que ce soit au niveau local ou
international.
31. SOURCES DES DONNÉES : Eloqua 1 (http:/www.eloqua.com/resources/marketing-insights) HubSpot 1

(http:/ /www.hubspot.com/marketingresources/marketing-statistics) NetMarketShare 1 (http:/ /marketshare.
hitslink.com) AberdeenGroup I http:/ /www.aberdeen.com/
50
https://www.SITE WEB ET ÉCOSYSTÈME DE MARKETING DIGITAL.com
On l’appelle « écosystème » parce que l’ensemble du processus impliqué se

fait de manière unifiée. L’objectif principal de tout ce processus est de s’assu-
rer que les marques fidélisent davantage leurs clients, améliorent considéra-
blement le trafic sur leur site web et, finalement, obtiennent plus de prospects.
Le concept principal de ce type de stratégie marketing est défini par l’intention

de diriger l’attention de tous les clients vers le site web de votre entreprise, ce
qui en fait le point central de toutes les stratégies marketing en ligne.
Les éléments de l’écosystème

de marketing digital
Cet écosystème est composé d’une série d’éléments que vous devez garder à
l’esprit lors de la création de tout type de campagne ou de stratégie de médias
digitaux, garantissant que les clients sont dirigés d’une manière ou d’une autre
vers votre site web.
Site internet
Le site web sera l’élément principal de tout ce système puisqu’il est totale-
ment sous votre contrôle. Sur votre site web, vous pouvez appliquer la straté-
gie marketing de votre choix et vendre le produit ou le service de votre choix.
En outre, vous pouvez l’optimiser pour maximiser les conversions32.
Marque
Votre marque est la façon dont vos utilisateurs ou clients potentiels identifient
vos produits ou services. C’est le visage de votre entreprise, et elle doit trans-
mettre un message clair sur ce que vous proposez, et comment.
D’après Marty Neumeier, auteur de The Brand Gap : « une marque est l’intui-
tion d’une personne à propos d’un produit, d’un service ou d’une entreprise ».
Plus intéressant encore, d’après David Kincaid, auteur de The Brand Driven
CEO : « une marque est la valeur d’une promesse tenue de manière constante ».
Cet élément est essentiel car, sans marque, un site web ou une stratégie mar-
keting ne peuvent se différencier du reste des entreprises.
32. Ce concept est couvert en profondeur dans le chapitre 12.
51
Buts
Dans tous les domaines, il faut toujours préciser les objectifs que l’on veut
atteindre et comment on va les atteindre. Voulez-vous obtenir plus de clients ?
Ou peut-être, développer votre marque ?
Avoir des buts clairs est absolument indispensable avant de planifier tout
type de stratégie de marketing digital pour éviter de perdre des ressources
précieuses.
Plateformes digitales
Les plateformes digitales sont un élément primordial de l’écosystème du
marketing en ligne puisqu’elles existent pour renforcer la présence de votre
marque.
Outre votre site web (qui devrait être la plateforme principale), vous pouvez
également tirer parti des plateformes de messagerie (Telegram, WhatsApp,
Messenger) et de médias sociaux (Facebook, LinkedIn ou Twitter).
Optimisation pour les moteurs de recherche (SEO)

L’optimisation pour les moteurs de recherche [SEO or Search Engine Optimi-
zation] est l’un des outils de marketing digital les plus efficaces que les entre-
prises peuvent exploiter pour réussir leurs initiatives de marketing en ligne.
En bref, le référencement est un canal qui aide les entreprises à attirer des visi-
teurs, et finalement des clients, via des moteurs de recherche comme Google,
Yandex ou Bing.
La différence entre le référencement et d’autres canaux de marketing comme

le PPC [Pay Per Click] est que les stratégies de référencement sont conçues
pour attirer des visiteurs (et des clients) de manière organique.
L’optimisation pour les moteurs de recherche est très efficace car, une fois
que vous aurez construit des bases solides grâce à votre autorité et à votre
contenu, votre site web deviendra une machine qui qualifiera automatique-
ment les leads33.
33. D’après les définitions marketing, l’association professionnelle CPA définit un lead comme « un
prospect ayant exprimé une intention claire d’achat d’un produit ou d’un service et ayant confirmé
sa volonté explicite d’être contacté ». La CPA a une orientation BtoC [Business to Consumer].
Le terme de lead est essentiellement utilisé dans un contexte marketing BtoB [Business to Business], mais
s’applique aussi au BtoC notamment lorsque le cycle d’achat est long et nécessite des pratiques de lead
management. Un contact commercial ou lead peut être plus ou moins qualifié.
52
https://www.SITE WEB ET ÉCOSYSTÈME DE MARKETING DIGITAL.com
Publicité au paiement par clic (PPC)

En utilisant Google Adwords, les publicités Facebook, LinkedIn, Yahoo, etc.,
vous pouvez obtenir l’une des méthodes publicitaires les plus avantageuses
et les plus innovantes, dans laquelle vous ne payez que comme son nom
l’indique « lorsqu’un utilisateur clique sur votre annonce », connue sous l’ap-
pellation de PPC. C’est un moyen très intéressant d’attirer des prospects.
Si vous avez les ressources, combiner SEO et PPC peut apporter d’énormes
avantages à votre entreprise. Le SEO est axé sur le long terme, mais le PPC
est axé sur le court terme. Si vous utilisez correctement ces deux outils, il est
possible de générer régulièrement des revenus considérables.
Analyses d’audience internet

L’analyse web est une combinaison d’outils qui vous permettent de mesurer la
performance de vos initiatives de marketing digital.
L’analyse web est essentielle et doit être bien comprise car, avec l’aide de ces
outils, vous pouvez obtenir suffisamment de données pour prendre des déci-
sions business éclairées afin que votre stratégie marketing puisse produire de
meilleurs résultats au fil du temps.
Certains des outils d’analyse web les plus populaires sont Google Analytics,
Google Search Console, HubSpot, Google Trends et Google Data Studio.
Plus de détails à ce sujet au chapitre 12. Mesurez et améliorez les perfor-

mances de votre site web.
Pourquoi avez-vous besoin d’un écosystème

de marketing digital ?
En bref, un écosystème de marketing digital permet à votre marque de se
développer et d’acquérir une présence, et plus tard cette présence tourne en
votre faveur pour obtenir plus de clients.
Selon bussines2community.com34 :
« Les grandes entreprises investissent environ 55 % de leur revenu annuel
dans des stratégies de marketing digital. »
34. Business 2 Community, Why Digital Marketing Is an Essential Investment, https://www.business2community.

com/digital-marketing/why-digital-marketing-is-an-essential-investment-02129487
53
De plus, un écosystème de marketing en ligne vous permettra d’élargir votre

gamme de produits et services en fonction de la taille et de la variété de votre
public.
Cependant, rappelez-vous que cela nécessite une énorme quantité de travail

et que tout le monde n’a pas suffisamment de connaissances et d’expertise
pour mettre en œuvre correctement une stratégie marketing de haut niveau.
N’hésitez donc pas à demander de l’aide auprès de professionnels.
54
Chapitre 5
Marque, branding
et identité de marque
Parmi les éléments de l’écosystème marketing digital, j’ai parlé de la marque.

Cette section est pour moi l’occasion de faire le point sur certains des concepts
les plus importants pour votre entreprise et votre site web.
Lorsque vous regardez un symbole de logo, pouvez-vous dire de quelle entre-

prise il s’agit sans aucun indice ?
Le branding, la marque et l’identité de marque jouent tous un rôle dans la

reconnaissance du logo. Beaucoup de ces termes sont balancés çà et là. Et
certains pensent que l’un de ces termes peut englober les trois.
Mais ils ont tort.
Bien que les trois travaillent ensemble, ils ont tous leur fonction et leur objectif
en ce qui concerne le succès ou la reconnaissance d’une entreprise.
55
Différence entre marque, branding

et identité de marque
Fig 5.1. Marque, branding, identité et logo35.
Beaucoup de gens, lorsqu’ils commencent à penser au branding de leur en-

treprise, arrivent généralement à un moment où un collègue ou un ami leur
recommande de consacrer du temps et de l’argent à leur identité de marque
et de créer leur marque en ligne pour aider à développer leur entreprise.
Si vous effectuez une recherche Google pour brand, vous obtiendrez facile-
ment plus de neuf milliards de résultats. Oui, des milliards de résultats pour
brand. Il n’est donc pas étonnant que de nombreuses personnes aient plus de
questions que de réponses :
- Le branding signifie-t-il avoir un logo professionnel ?
- Que signifie branding et comment le faire ?
J’ai souvent entendu les gens dire : « Apple a un super branding ! »
Je me pose alors la question de savoir si l’on devrait considérer le branding

comme le design. À la fois comme un processus et comme un résultat (ou ré-
sultante) de ce processus ? Je crois qu’y répondre mériterait son propre livre.
Mais je crois surtout que cette expression naît de la confusion qui existe entre
le branding et l’identité de marque ; et plus explicitement le processus de
design d’identité de marque.
35. Source : LOTIN Henri, Différence marque, branding et identité de marque, https://lotincorp.biz/apprenez-
a-faire-la-difference-entre-la-marque-le-branding-et-identite-de-marque/
56
https://www.MARQUE, BRANDING ET IDENTITÉ DE MARQUE.com
Je définis le branding comme :

« Le processus intentionnel de création d’une marque. Il est soutenu par le
brand marketing, qui est l’ensemble des actions mises en œuvre pour installer
la marque dans l’esprit des consommateurs. »
Pensez à certains des plus grands noms : Apple, Microsoft, Facebook, Coca-
Cola. Leur logo vous vient à l’esprit presque immédiatement, n’est-ce pas ? Et
tout aussi rapidement, vous avez une association avec l’une de ces marques,
qu’elle soit bonne ou mauvaise. Vous obtenez une réponse émotionnelle
quand vous la voyez.
« Votre logo n’est pas votre marque ou votre identité.

En fait, votre logo représente moins de 10 % de votre marque. »
Cela peut être difficile à comprendre pour les gens. Mais les trois aspects ont
leur rôle dans le processus et influencent ensemble l’image de l’entreprise.
Cette image, c’est ce qui est perçu par les consommateurs.
Fig 5.2. Comment le brand building influence la perception

qu’ont les consommateurs de la marque.
Source : Building a Brand by The Futur, Ep. 1.
En comprenant ce que signifie chaque terme, vous pouvez commencer à sai-

sir le potentiel illimité de chaque concept.
57
Qu’est-ce que la marque, le branding, l’identité

de marque ?
Marque
Le sens que les gens attachent à votre organisation, produit ou service.
Branding
La création et la gestion du sens d’une marque.
Identité
Les éléments sensoriels qui sont utilisés pour identifier une marque.
Logo
Un signe (symbolique, iconique ou indiciel) qui identifie l’entreprise dans sa
forme la plus simple.
Les marques sont bâties un peu comme les humains.
Vous avez un cœur intérieur : votre caractère, votre personnalité, vos

croyances, ce que vous voulez accomplir dans votre vie.
Cela s’exprime à travers votre identité : à quoi vous ressemblez, ce que vous
dites, comment vous le dites.
Votre cœur et votre identité façonnent vos interactions avec le monde exté-
rieur et la façon dont les gens pensent et se sentent à votre sujet, des tweets
que vous envoyez, aux événements auxquels vous assistez ou que vous orga-
nisez, aux amis dont vous vous entourez, aux choses que vous faites (ou ne
faites pas) pour les autres.
Les signaux que les gens reçoivent de l’extérieur les aident à se forger une
opinion sur ce qui se trouve à l’intérieur.
C’est exactement ce que vous faites en tant que marque : vous souhaitez
nouer des relations avec votre public. Vous voulez qu’ils vous préfèrent et
vous soient fidèles afin de développer votre impact social ou environnemental
et votre activité.
Vous devez avoir un cœur qui vous anime, une identité qui vous rend
reconnaissable et des interactions qui créent une relation entre vous et
votre audience.
58
https://www.MARQUE, BRANDING ET IDENTITÉ DE MARQUE.com
Fig 5.3. Construction humaine de la marque.

Source : Brand the Change.
59
Brand management et brand building

La gestion de marque [brand management] porte sur les choix stratégiques
comme l’architecture de marque et le positionnement de marque, alors que
le brand building se met en place en utilisant des campagnes publicitaires
conçues pour avoir un thème cohérent.
Le branding est également accompli en saisissant chaque occasion de dire

aux gens pourquoi ils devraient vous choisir plutôt que vos concurrents et
ceci est aidé par l’utilisation logique de l’identité de marque ainsi que par une
stratégie de marque solide.
Le branding est à la fois tangible (identité de marque) et émotionnel/intangible

(marque), et il est la somme de tous les attributs que l’entreprise apporte sur le
marché. Le branding y arrive en communiquant le caractère et les valeurs de
ce qu’est et n’est pas une marque.
Chose curieuse avec le branding, c’est qu’il n’est pas à taille unique.
Votre intention peut être de vous présenter, ainsi que la marque de votre entre-
prise, comme étant amicaux, dignes de confiance et compréhensifs, mais la
façon dont vos clients vous voient (image de marque) peut être différente.
Vous voulez donc vous assurer que votre stratégie de marque est cohérente
et guide votre entreprise à faire des affaires ainsi qu’à comprendre les besoins
de votre client.
Pour conclure
Le mot marque est beaucoup trop utilisé par les gourous du marketing et
d’autres personnes qui pensent savoir quelle est la meilleure chose pour votre
entreprise. Votre logo n’est pas votre marque ou votre identité. Il y a tout un
processus derrière le branding, et ce n’est qu’avec une bonne compréhension
de l’aspect émotionnel et de l’aspect physique de votre entreprise que vous
pouvez construire une marque qui réussira.
60
Chapitre 6
L’approche
Growth-Driven
Design
Dans ce chapitre, je vais décrire ici une version allégée de la méthode Growth-
Driven Design (GDD) ou design axé sur la croissance. Elle consiste plus ou
moins à livrer un projet de site web en plusieurs cycles, qu’on améliore ensuite
de manière continue.
L’idée de ce chapitre est de vous introduire à la méthode, car le document

de spécifications du projet et le template vierge fournis sont conçus sur ce
modèle. Même s’ils proposent une version allégée pour rester cohérents avec
les objectifs du livre.
61
Quels sont les avantages

de la méthodologie GDD ?
Si travailler sur un site web de manière classique passe par 9 étapes et prend
12 semaines, avec la méthodologie Growth-Driven Design, vous passez par
4 étapes et cela nécessite à peine 4 semaines.
Fig 6.1. Comparaison de la vitesse de création de valeur entre le GDD

et le web design traditionnel. © HubSpot, CC BY-SA 3.0
Ce tableau comparatif pourrait également être très utile pour comprendre

l’intérêt de cette approche :
Risques Résultats
Coûts initiaux Ressources et Basés sur des Fixés et

Design web temps suppositions oubliés
traditionnel (hors scope36, hors budget,
en retard)
Design axé Étalés sur le Lancer vite et Décisions Amélioration
sur la temps améliorer basées sur des continue
croissance (agile, à temps et dans le budget) données
(GDD)
Fig 6.2. Comparaison des risques et des résultats des différentes méthodes de
design de site web (traditionnelle vs GDD).
36. Portée ou envergure du projet.
62
https://www.L’APPROCHE GROWTH-DRIVEN DESIGN.com
De plus, quand on compare les processus, on se rend compte qu’avec le

GDD, le site web est un investissement qui devient rentable très rapidement :
Fig 6.3. Impact en fonction du temps des différentes méthodes

de design de site web (traditionnelle vs GDD) sur le marketing
et les ventes. © HubSpot, CC BY-SA 3.0
Comment fonctionne le Growth-Driven Design

(GDD) ?
La méthodologie Growth-Driven Design (GDD) ou design axé sur la croissance
comporte trois étapes principales : la stratégie, la rampe de lancement et le
cycle d’amélioration continue.
Fig 6.4. Les différentes phases de la méthode GDD.

© HubSpot, CC BY-SA 3.0
63
La stratégie
La première étape est la phase de stratégie. L’objectif de celle-ci est de déve-
lopper une compréhension empathique de votre public et de la manière dont
le site web peut résoudre ses problèmes tout au long de son parcours.
Fig 6.5. Phase d’amélioration continue de la méthode GDD.

Essayez d’imaginer le monde du point de vue de votre public.

- Qui sont-ils ?
- À quels défis sont-ils confrontés ?
- Quels sont leurs objectifs et où le site web s’intègre-t-il ?
Dans ce cadre, vous devrez suivre plusieurs étapes pour terminer la phase de
la stratégie.
Définissez les objectifs du site web

Tout d’abord, définissez les objectifs du site web en procédant à l’ingénierie
inverse des objectifs commerciaux globaux et en identifiant comment le site
web influencera particulièrement chacun d’eux.
Les objectifs du site web doivent être SMART37, c’est-à-dire spécifiques, me-
surables, atteignables, pertinents et basés sur le temps ; pour aider à évaluer
correctement l’impact du site web sur l’entreprise.
Comprenez votre public

Ensuite, vous devrez comprendre votre public, vous devrez donc faire des
recherches sur l’expérience utilisateur. La recherche peut être qualitative,
37. Vous trouverez des ressources supplémentaires dans le document de spécifications pour créer des
objectifs SMART.
64
quantitative ou observationnelle. Ou il peut s’agir d’une combinaison afin de

découvrir des informations sur les utilisateurs qui vous guideront tout au long
de la phase de stratégie.
Définissez les Jobs To Be Done (JTBD)

L’étape suivante s’appelle les Jobs To Be Done. Ce framework vous aide à
identifier les besoins sous-jacents et les résultats souhaités qui motivent votre
public et ce qu’il faut pour qu’il adopte les produits et services de votre entre-
prise en guise de solution. Vous suivez les Jobs To Be Done, puis vous les
affinez ensuite en hypothèses fondamentales.
Cette étape consiste à résumer ce que vous savez déjà sur votre marché, sur
votre entreprise et sur votre site web. Des hypothèses plus fondamentales
sont au cœur de la réussite de vos utilisateurs, de votre entreprise et de votre
site web.
Développez des personas

L’étape suivante de la phase de stratégie consiste à développer des personas
en utilisant une compréhension approfondie de l’audience que vous avez ac-
quise au cours des étapes précédentes. Un buyer persona une représentation
semi-fictive de votre client idéal, qui se base sur des études de marché et sur
les données relatives à vos clients actuels.
Cartographiez le parcours de votre persona

Ensuite, vous devrez faire une cartographie du parcours. Ici, vous cartogra-
phiez le parcours de cette personne et tout ce qui se passe avant, pendant et
après son interaction avec votre entreprise.
En cartographiant le parcours de votre persona, vous saurez comment intégrer

le site web à ce parcours et résoudre les problèmes en cours de route. Après
cela, vous développerez une stratégie spécifique au site web.
Ce sont probablement des choses que vous avez l’habitude de regarder pour
une refonte de site web, comme l’architecture du site, le référencement du
site, les sections et pages clés, les intégrations, les exigences techniques, etc.
Réfléchissez à une wishlist

La dernière étape de la phase de stratégie du GDD consiste à réfléchir à une
liste de souhaits [wishlist] initiale. Celle-ci contiendra des idées créatives de
sites web et percutantes où vous pouvez viser à résoudre les défis des utilisa-
teurs, à leur apporter de la valeur et, en fin de compte, à aider votre entreprise
à atteindre ses objectifs.
65
La liste de souhaits du site web contiendra entre 75 et 200 idées différentes,

y compris des éléments de site, des sections, des pages, des fonctionna-
lités spécifiques, des modules, des intégrations, etc. Avec une solide liste
de souhaits d’idées à fort impact, vous commencerez ensuite la deuxième
phase de la méthodologie de design axé sur la croissance, qui est la rampe
de lancement.
La rampe de lancement [launch pad]

L’objectif de la rampe de lancement ou launch pad est de créer rapidement un
site web plus beau, et plus performant que ce que vous avez aujourd’hui, mais
qui n’est pas le produit final.
Fig 6.6. Phase de rampe de lancement de la méthode GDD.

Au contraire, ce site est la base sur laquelle vous construisez et optimisez. La

principale motivation d’un lancement rapide sans sacrifier la qualité est de col-
lecter des données utilisateur auprès d’utilisateurs réels interagissant avec le
site réel. Ainsi, vous êtes équipé pour prendre de meilleures décisions basées
sur les données en rapport avec la manière d’améliorer le site web.
Un lancement rapide crée également un délai de rentabilisation plus rapide

par rapport aux trois à six mois du design web traditionnel où vous ne voyez
aucune valeur pour l’entreprise.
L’amélioration continue
L’objectif de la phase d’amélioration continue est de commencer à identifier
les éléments d’action à fort impact que vous pouvez entreprendre pour déve-
lopper votre entreprise en utilisant des données utilisateur réelles.
66
Fig 6.7. Phase d’amélioration continue de la méthode GDD.

Et une fois que vous avez lancé le site web, il peut être difficile de rester
concentré sur l’amélioration des éléments les plus impactants à un moment
donné, afin que vous puissiez suivre un processus agile, simple, mais puissant
de planification, de construction, d’apprentissage et de transfert.
Fig 6.8. Différentes étapes et éléments afférents de la phase d’amélioration conti-

nue de la méthode GDD. © HubSpot, CC BY-SA 3.0
67
L’étape de planification
Dans l’étape de planification du cycle d’amélioration continue, vous définirez
les éléments les plus percutants à créer et à optimiser à ce moment précis
pour vous rapprocher de vos objectifs commerciaux. Il s’agit tout d’abord de
déterminer un domaine d’intérêt autour duquel l’équipe peut se rallier pour
leurs efforts d’amélioration. Le focus est absolument essentiel ici.
Maintenant, le défi est qu’il y a de nombreux domaines sur lesquels vous pou-
vez travailler. Des choses comme la messagerie aux mises en page, la créa-
tion de nouvelles pages, l’optimisation des pages existantes. Le large éventail
d’options peut rendre écrasant ou difficile d’estimer où se trouve le meilleur
endroit pour que votre équipe concentre son temps.
Feuille de route des performances

Pour résoudre ce problème, vous devez utiliser la feuille de route des perfor-
mances du site web. Il s’agit d’un framework pour vous et votre équipe afin de
vous assurer que vous consacrez votre temps et votre énergie à l’amélioration
des domaines les plus impactants.
La feuille de route vous aide à définir des attentes claires avec votre équipe,
vos parties prenantes ou vos clients sur exactement ce sur quoi vous devriez
travailler et, plus important encore, sur ce sur quoi vous ne devriez pas travail-
ler et pourquoi.
En effet, il existe des indicateurs spécifiques à évaluer dans chaque domaine

d’intervention et vous pouvez facilement mesurer ce rapport sur vos progrès
et créer un site web performant.
L’étape de construction
L’objectif de l’étape de construction est d’héberger un work sprint38 avec une
équipe interfonctionnelle pour compléter tous ces éléments d’action à fort
impact. Et tout comme une équipe sportive, votre équipe se déploiera sur
n’importe lequel des éléments d’action pour les aborder en collaboration.
Ces éléments d’action et leur objectif seront synchronisés avec les horaires,
les réunions et le temps de travail. En plus de créer ces éléments d’action,
l’équipe devra également mettre en place des expériences comme indiqué
dans le design expérimental. Ceci afin de mesurer correctement l’impact de
ces actions et de valider ou d’invalider votre hypothèse de départ.
38. Séance de travail collaborative sous forme de design sprint.
68
Vous lancerez ce que vous avez construit. Vous laisserez votre public interagir
avec vos expériences, et après une période qui pourrait être différente pour
chaque expérience, vous passerez ensuite à l’étape d’apprentissage du cycle.
L’étape d’apprentissage
Dans l’étape d’apprentissage, vous allez prendre du recul afin d’examiner les
expériences que vous exécutez et d’extraire les apprentissages des utilisa-
teurs sur ce avec quoi vous voyez vos utilisateurs interagir. Votre hypothèse de
départ était-elle correcte ou avez-vous prouvé qu’elle était fausse ?
Si elle s’est révélée fausse et que tout va bien, c’est assez courant, surtout
lorsque vous débutez et que vous essayez différentes idées audacieuses, il
est essentiel que vous évaluiez pourquoi cela s’est mal passé. Évaluez les
résultats pour en savoir plus sur votre public. Qu’est-ce que leurs actions ou
comportements vous ont appris à leur sujet ? Et comment pourriez-vous inté-
grer ces apprentissages dans de futurs éléments d’action ?
Il s’agit maintenant d’une étape critique, car à mesure que vous répétez ce
cycle et que vous en apprenez de plus en plus sur votre public, plus vous
aurez de chances de réussir à fournir de la valeur et à atteindre ces objectifs.
La dernière étape du cycle d’amélioration continue est l’étape de transfert.
L’étape de transfert
L’objectif de l’étape de transfert est de partager vos apprentissages et
d’échanger des idées dans toute l’entreprise afin d’améliorer l’ensemble de
l’entreprise, pas seulement une partie. Entre communications internes et réu-
nions. Vous pourrez partager les apprentissages des utilisateurs à partir des
expériences que vous avez effectuées au cours du mois précédent.
Vous pouvez faire des recommandations à d’autres équipes en fonction des

choses que vous avez assimilées et de ce qu’elles pourraient éventuellement
perfectionner. Vous pouvez poser des questions à ces autres départements
afin d’obtenir des informations et de combler les lacunes de votre recherche
d’utilisateurs. Vous pouvez également utiliser ce temps pour parler de la créa-
tion d’une expérience utilisateur plus cohérente à travers toutes les interac-
tions au sein de votre entreprise.
69
Pour récapituler
La méthodologie GDD commence par la planification et la recherche au stade
de la stratégie, qui se termine ensuite par la création d’une liste solide de sou-
haits. Celle-ci sera intégrée plus tard à une rampe de lancement.
À ce stade, vous construisez un site web qui ressemble et fonctionne mieux

que ce que vous avez aujourd’hui, mais qui n’est que votre point de départ
pour le succès de votre site web. Et enfin, vous entreprendrez l’étape d’amé-
lioration continue où, mois après mois, vous progresserez en vous basant sur
des données utilisateur réelles.
Ensuite, vous améliorerez continuellement l’utilisation du site web pour aider

tous les aspects de l’entreprise à se développer et à voir des résultats chaque
mois. Bien sûr, le marketing et les ventes sont une couche qui s’ajoute au
GDD.
Pensez au design axé sur la croissance comme à une voiture de sport, vous
avez toujours besoin d’essence pour que cette voiture de sport fonctionne et
c’est ce que sont le marketing et les ventes. Le GDD est l’avenir du design
web, et c’est le playbook pour créer un site web performant.
Il est temps de construire votre site web, avec les aspects pratiques de la
préparation.
70
Partie 2
PHASE
OPÉRATIONNELLE
Dans cette deuxième partie, nous passons directement à l’aspect « pratique »,

sans transgresser les fondamentaux.
- Si ces fondamentaux ne vous intéressent pas, allez immédiatement au
chapitre 11 : Votre site web gratuit et sans codage, pas à pas.
- Si vous souhaitez donner toutes les chances de succès à votre projet, je
vous recommande de lire dans l’ordre, les chapitres qui suivent.
Au chapitre 7, je commence par des aspects plus pratiques et plus action-

nables de la création de sites web : le document de spécifications. C’est la
base de travail sur laquelle vous partirez pour créer votre site web. Grâce à
l’exemple de free move en troisième partie, et au template vierge de docu-
ment de spécifications fourni, vous pourrez très facilement, et très rapidement
amorcer le travail sur votre site web.
71
Au chapitre 8, je vous présente les bases du design d’expérience utilisa-

teur (design UX) qui vous permettront de compléter des aspects essentiels
de votre document de spécifications : user/buyer personas, plan de site, flux
d’utilisation et parcours utilisateur. Notez bien que ce chapitre n’est pas indis-
pensable. Mais il reste utile pour éviter des blocages lors de la construction
de votre site web.
Au chapitre 9, j’aborde les aspects pratiques de la création de la partie visuelle

de votre site web, l’interface utilisateur. Pour éviter la théorie, je vous pro-
pose ici de tirer profit des conventions et des patterns (schémas graphiques)
couramment utilisés dans les différents types de sites web. En plus, je vous
présenterai un ensemble de directives de bon sens pour corriger les divers
problèmes d’interface utilisateur auxquels vous pourriez être confronté.
Au chapitre 10, je vous dévoile une méthode que j’utilise pour mes clients et
moi, afin de connecter mes visiteurs à mon contenu, et leur permettant ainsi
de passer à l’action. Cette méthode, le StoryBrand® Framework développée
par Donald Miller, est construite en 7 étapes. Je vous guiderai donc, étape par
étape dans la rédaction du contenu de votre page d’accueil en vue de pousser
vos visiteurs à l’action.
Au chapitre 11, qui devrait être le seul chapitre de ce livre en réalité, je vous
guiderai pas à pas dans les solutions WordPress, Webflow et Systeme.io pour
la création de votre site web. Cette partie, en dehors du template du document
de spécifications, est agrémentée d’un site web d’exemple et de didacticiels
vidéo qui vous accompagneront dans la création effective et efficiente de votre
site web, sans saisir une seule ligne de code.
Enfin, au chapitre 12, je vous dirai pourquoi et comment vous devrez suivre
les performances de votre site web en vue de les améliorer. Quoi mesurer,
comment y arriver, et comment agir sur les informations recueillies.
72
Chapitre 7
Le document
de spécifications
Le document de spécifications est l’ensemble des informations en rapport

avec la création de votre site web. Il rassemble des informations sur qui vous
êtes, à qui vous vous adressez (profils clients), le but du projet, l’analyse
concurrentielle, l’inventaire de contenu, le coût, les délais…
Avant tout, vous avez besoin d’identifier, de faire des recherches sûres, et
cibler votre audience prospective. Vous y arrivez en faisant un brainstorming
sur les éléments importants dont vous aurez besoin pour le projet web que
vous planifiez de créer.
Vous allez ainsi préparer une formulation de concept écrite ou un document

de spécifications du projet.
Ce document définit les buts, l’audience, le concept, le message, les

images, le style et les thèmes du site web.
73
Avant de commencer à créer un site web, vous devez déterminer la portée

[scope] du projet. Exactement ce qui entre en ligne de compte et requis dans
le design, et la construction du projet (paramètres) – et rédiger le descriptif du
projet.
Un document de spécifications complet et bien formé :

- Est crucial pour le bon déroulement d’un projet de site web.
- Rend le processus de design et le processus de développement efficaces.
- Veille à ce que le projet soit mené à bien de manière efficace et efficiente.
- Est très détaillé et contient des informations spécifiques à chaque aspect du
projet afin que chaque membre de l’équipe sache ce dont il a besoin pour
développer le projet.
- Sera utilisé par un large éventail de personnes impliquées dans le projet, de
l’équipe de design aux programmeurs.
À NOTER
Servez-vous du document de spécifications d’exemples pour free move dans
la partie III pour mieux comprendre chaque section. Puis à votre tour, utilisez
le template pour le compléter avec vos informations.
Pourquoi créer un site web ?

Un site web peut être utilisé pour augmenter les revenus, attirer des clients,
faire connaître votre nom, rassembler les gens, vendre des produits, fournir
des informations et avoir de nombreuses autres utilisations. Quel que soit
l’objectif, vous devez le définir du mieux que vous le pouvez, car il guidera ce
qui est nécessaire pour un lancement réussi.
Pour vous aider à répondre à cette question, je vais vous parler de quelques
utilisations courantes du site web et passer en revue quelques idées :
Marque médiatique personnelle

Utilisée pour promouvoir votre marque personnelle en tant que personnalité
médiatique, en informant les autres de vos opportunités de prise de parole, de
vos livres, de vos cours, etc.
Informations sur l’entreprise et génération de prospects

Il s’agit d’un type général de site web d’entreprise utilisé pour informer les
prospects potentiels sur l’entreprise, établir la confiance, puis faire avancer
ces prospects d’une étape dans l’entonnoir.
74
https://www.LE DOCUMENT DE SPÉCIFICATIONS.com
E-commerce
Vendre des produits, qu’ils soient physiques, comme des grains de café, ou
numériques, comme des PDF téléchargeables ou des cours ponctuels.
Communauté et adhésion
Un espace privé pour le contenu réservé aux membres/étudiants/utilisateurs,
qui peut inclure des cours, des forums de discussion, des événements privés
et des offres exclusives pour des produits ou des promotions.
Blog
Axé sur le contenu et fournissant généralement une combinaison de contenu
écrit, vidéo et audio adapté à un sujet spécifique ou même sur l’auteur lui-
même. Il peut être informatif, divertissant ou une combinaison des deux. Il
a généralement pour objectif de générer du trafic vers les inscriptions et de
guider les gens à travers un entonnoir de génération de leads.
Génération de leads et entonnoir

Ces types de sites web sont conçus dans le but d’optimiser les conversions et
de créer des entonnoirs et des processus en plusieurs étapes.
Application web
Lorsque vous proposez un logiciel en tant que service [SaaS ou Software as
a Service].
Connaître le but de votre projet de site web vous donne plus de clarté sur
l’ensemble des éléments dont vous aurez besoin, mais surtout vous permettra
de savoir comment orienter votre stratégie.
Je vais me baser sur le document de spécifications fourni dans le projet, pour

vous accompagner pas à pas dans la réalisation de celui de votre site web.
Le but et les objectifs du projet

Le but décrit ce qu’est le projet, à quoi il sert et pourquoi il est entrepris.
Les objectifs représentent les résultats souhaités pour le site web. Quelle
action nous voulons que les utilisateurs prennent ou ce que nous voulons que
les utilisateurs tirent de l’utilisation du site web.
75
Déterminer le but et les objectifs du projet est particulièrement important lors

de la refonte d’un site web existant ou du design de sections supplémentaires
ou d’extensions de projets de sites web existants.
Petit rappel sur la hiérarchie des buts

et des objectifs en entreprise
Je vais rester dans le domaine spécifique du marketing ici, puisque c’est le
département le plus concerné par le site web.
Stratégie marketing : le « pourquoi » global du marketing de votre entreprise.

Exemple : le but de vos activités marketing : génération de prospects, aug-
mentation des ventes ou exposition de la marque ?
Plan marketing : la feuille de route documentée pour atteindre vos objectifs

stratégiques, y compris les budgets et les échéanciers.
Exemple : « Pour augmenter la génération de prospects ce trimestre, nous
lancerons trois campagnes axées sur trois nouveaux publics cibles. »
Campagne marketing : « campagnes » et « plans » sont des termes qui sont

employés de manière interchangeable, mais une campagne utilise un marke-
ting ciblé limité dans le temps autour d’un concept créatif, d’un canal ou d’une
offre.
Exemple : « Nous menons une campagne BOGO1 en avril ciblant un nouveau
public. »
Tactiques marketing : les outils, plateformes et canaux que vous utilisez pour
exécuter vos campagnes marketing.
Exemple : « Nous menons notre campagne BOGO sur Meta Ads et offrons un
code BOGO à notre base de données d’influenceurs. »
Voilà approximativement comment ça s’échelonne du haut vers le bas.
1. Buy One Get One : un acheté, un offert.
76
Les objectifs SMART2

Quand il s’agit d’objectif, il doit être fixé en utilisant l’approche SMART.
SMART est un acronyme qui définit des critères permettant d’établir des buts
et objectifs idéaux pour la gestion de personnel ou d’entreprise. Un objectif
SMART doit être spécifique, mesurable, atteignable, réaliste et temporel.
Exemple d’objectif SMART

Voici l’exemple d’un responsable marketing web, et dont les ventes en ligne
de l’entreprise pour laquelle il travaille sont de 100 000 € :
« Pour le prochain exercice financier, augmenter les ventes de 50 % pour
atteindre 150 000 €. »
Les lettres de l’acronyme SMART se définissent de la façon suivante :

- Spécifique : il s’agit d’un projet spécifique puisque les ventes en ligne sont
une portion des activités qui permettent d’insuffler une bonne croissance à
l’entreprise.
- Mesurable : la hausse de 50 % est facile à mesurer. Il suffit de faire le suivi
des ventes.
- Atteignable : compte tenu de la somme de travail nécessaire pour effectuer
une vente, il s’agit d’un objectif ambitieux, mais il est atteignable selon une
étude de marché.
- Réaliste : l’objectif est réaliste étant donné que les ventes en ligne de l’en-
treprise affichent une tendance à la hausse.
- Temporel : en exigeant que l’accroissement des ventes soit réalisé d’ici la fin
de l’exercice, on donne un caractère temporel de 12 mois à l’objectif.
L’approche OKR
SI vous souhaitez aller plus loin, l’approche OKR3 est une bonne manière
d’aborder cette partie. Voici une façon de l’exprimer en une phrase :
Je vais ________ mesuré par ________.
2. Se fixer des objectifs SMART permet de déterminer où vous voulez aller et de bien le communiquer afin que
tout le monde avance dans la même direction. https://www.bdc.ca/fr/articles-outils/boite-outils-entrepreneur/
gabarits-documents-guides-affaires/glossaire/objectifs-smart
3. OKR : Objective and Key Results. Un OKR est une stratégie de management populaire, qui définit des
objectifs et suit les résultats. Elle permet de créer un alignement et un engagement autour d’objectifs
mesurables. En savoir plus : https://www.atlassian.com/fr/agile/agile-at-scale/okr
77
Les OKR comportent deux composantes importantes : l’objectif que vous

souhaitez atteindre et les résultats clés, qui vous permettent de mesurer la
réalisation de l’objectif.
Felipe Castro (coach OKR, auteur, conférencier et évangéliste) résume comme

suit les deux composantes d’un modèle OKR :
- Objectifs : descriptions qualitatives et mémorables des objectifs à atteindre.
Ces derniers doivent être courts, inspirants et attrayants. Un objectif doit
motiver et stimuler l’équipe.
- Résultats clés : ensemble de métriques (indicateurs) qui permettent d’éva-
luer votre avancement vers l’objectif. Pour chaque objectif, vous devez avoir
un ensemble de deux à cinq résultats clés. Si vous en visez plus, personne
ne les retiendra.
Cette définition comporte quelques points clés. Premièrement, l’objectif doit

être concis et engageant, afin qu’une équipe puisse facilement le mémoriser.
Il y a deux écoles au sujet des résultats clés :

La première consiste à définir les résultats comme la conséquence des actions
entreprises pour atteindre l’objectif, qui ici est le « quoi ».
La deuxième consiste à définir un petit nombre de métriques qui doivent être

mis en place pour suivre les principaux résultats.
Dans les deux cas, des indicateurs (métriques) sont déterminés et doivent
pouvoir être mesurés en temps utile. Si vous ne pouvez voir les résultats qu’au
bout de deux ans, vous ne pourrez pas examiner votre avancement sur une
base trimestrielle.
Je vais utiliser la première approche, celle qui mentionne le « comment ».
Lors de l’établissement des OKR, il est important de ne pas perdre de vue ce

qui guide votre organisation. C’est pourquoi vous devez aligner les OKR sur la
vision, la mission et les valeurs de votre organisation. Lorsque les OKR aident
à définir le « quoi » et le « comment », votre vision doit pousser à respecter le
« pourquoi ».
78
Fig 7.1. La place des OKR dans la stratégie globale de l’entreprise.

Ce diagramme en cascade permet d’illustrer comment la vision
d’une entreprise doit être liée à vos OKR annuels et trimestriels.
Il montre également la place des OKR dans l’exercice
de planification stratégique global. Source : Atlassian
Trouvez un exemple dans l’illustration en page suivante.
79
Fig 7.2. Exemple de piles OKR.

Source : OnStrategy - Your Ultimate Guide to OKRs
Profil de l’entreprise
Cela inclut des informations pertinentes sur vous, notamment l’historique de
l’entreprise, son emplacement, son offre de produits et sa mission.
Connaître votre entreprise garantit que le design que vous créez sera adapté
à ses besoins.
Position sur le marché et analyse

de la concurrence
Vous ferez ici, une évaluation réaliste de votre entreprise, de votre service ou
de votre marque par rapport à la concurrence. Une analyse de la concurrence
consiste à rechercher en ligne les activités de vos concurrents et à évaluer :
- À quoi ressemble leur site web.
- Quelle est leur stratégie web.
- Comment ils abordent leurs utilisateurs.
- Quels sont le message, le ton et le langage utilisés.
- Quels types de technologies web ils utilisent.
80
Les informations que vous obtenez sur votre concurrence vous permettent de
différencier votre site web de ceux de la concurrence.
Dans l’exemple de la partie III, je vous montrerai en détail comment y parvenir.
Analyse de l’audience cible, profils

et scénarios d’utilisation
Comprendre votre public cible est essentiel pour garantir que votre design
web est centré sur l’utilisateur et qu’il répond efficacement à ses besoins.
Les informations démographiques (âge, sexe, revenu, emploi, géographie,

style de vie), les profils d’utilisateurs et les scénarios d’utilisation […] four-
nissent des données utiles pour vous aider à comprendre ce dont les utilisa-
teurs pourraient avoir besoin. Et vous renseignent sur comment ils pourraient
utiliser un site web pour rechercher des informations ou acheter des produits.
Un buyer persona ou profil de client idéal est une représentation semi-

fictive de votre client idéal ; elle est basée sur des données réelles et cer-
taines spéculations informées sur la démographie, les comportements,
les motivations et les buts.
Catégories de clients
Les catégories de clients sont les différents types de personnes que vous êtes
appelés à servir.
Elles représentent généralement les divers segments de clientèle que vous

souhaitez servir, ou que vous servez déjà.
Une approche intéressante serait d’utiliser ce type de catégorisation pour un

salon de thé, par exemple :
Client actuel Client idéal Employés Influenceurs
D’où la grande Qui vous L’équipe actuelle Critique de cuisine
partie du revenu voulez le plus qui s’occupe de locale
provient comme client vos clients
Fig 7.3. Différentes catégories possibles de « clients » pour un salon de thé. Ils
sont aussi bien internes qu’externes.
Ce que vous visez à faire ici, c’est établir le profil du client idéal.
81
Profils clients
Les 4 colonnes du profil client créent un récit qui aide à établir pourquoi vos
solutions seront pertinentes pour votre client. En commençant par les bases
de qui ils sont, leur histoire et ce dont ils ont besoin.
Démographie Récit Besoins Solution

Un aperçu de base Les traits, les événe- De quoi ce client Comment pouvez-
de qui est votre ments, le comporte- a-t-il besoin pour vous répondre à
client. Ce sont des ment et les défis qui résoudre ces ses besoins et aller
faits : définissent la façon défis ? De quoi au-delà ? Considérez
qui, où, quand. dont ce client se lie à a-t-il besoin venant cela comme la solu-
vous. de vous ? tion idéale.
Fig 7.4. Les éléments qui constituent le profil client.
Données démographiques
Les données démographiques sont les faits quantifiables de base sur votre
client. Pour votre projet, ceux-ci incluent un nom et un archétype d’utilisateur
en plus de l’âge, du sexe, du revenu, de l’emplacement et d’autres faits.
- Un nom inventé qui semble plausible pour cet utilisateur en fonction du lieu
d’origine.
- Un « archétype » client. Cela décrit son expérience. Par exemple : « La ma-
man occupée. »
- Le sexe, l’âge et le revenu sont également essentiels pour la plupart des
profils.
- Vous pouvez aussi inclure les conjoints, les enfants, le collège, la profession,
les marques qu’il achète, les endroits où il achète.
- Soyez créatif !
Récit
La trame de fond est l’information psychographique4 sur un utilisateur. La per-
sonnalité, les valeurs, les opinions, les attitudes, les intérêts, le mode de vie et
les défis qui motivent votre utilisateur.
- Commencez par des traits généraux qui décrivent comment il se trouve
dans sa vie / son travail. Par exemple : « Orienté vers la famille, travaillant
dur et élégant. »
- Intégrez des activités physiques et des passe-temps. Par exemple : « Ran-
donnée, tennis et cinéma. »
4. Une information psychographique est en rapport avec les motivations de l’utilisateur/acheteur…
82
- Les facteurs qui expliquent pourquoi il a besoin de votre produit, service ou

programme devraient être inclus dans cette liste. Par exemple : « Occupé,
motivé, veut gagner plus d’argent », etc.
Besoins
Sur la base de l’historique et de la façon dont il se lie à votre produit, service
ou programme, de quoi votre client a-t-il besoin ? Pourquoi en a-t-il besoin ?
Connectez-les autant que possible à votre trame de fond.
- Créez une relation de cause à effet entre votre histoire et vos besoins. Par
exemple : si votre client est « occupé et élégant », il a besoin d’un contenu
« succinct, simple et bien conçu ».
- Si vous faites un site web, essayez d’éviter que les besoins ne soient que
des fonctionnalités. Par exemple : au lieu de dire « Capacité d’ajouter des
images au profil », dites plutôt : « Partager son style de vie et son identité
personnelle avec les autres ».
- Les fonctionnalités vont se matérialiser dans les solutions.
Une autre approche que certains préfèrent aujourd’hui aux personas, ce sont
les Jobs to Be Done (JTBD). Pour ma part, je ne pense pas qu’il faudrait les
utiliser séparément, mais plutôt de manière complémentaire.
Les Jobs to Be Done (JTBD) pour mieux définir les besoins

Je vais aborder les JTBD dans le cadre du design de proposition de valeur.
Le design de proposition de valeur concerne deux aspects de votre business
model5 (modèle économique) : le segment clientèle et la proposition de valeur.
Segments de clientèle : le bloc de construction « segments de clientèle »

définit les différents groupes de personnes ou d’organisations qu’une entre-
prise vise à atteindre et à servir. Les clients sont au cœur de tout business
model. Sans clients (rentables), aucune entreprise ne peut survivre longtemps.
Afin de mieux satisfaire les clients, une entreprise peut les regrouper en seg-
ments distincts ayant des besoins communs, des comportements communs
ou d’autres attributs. Un business model peut définir un ou plusieurs grands
ou petits segments de clientèle.
Une organisation doit prendre une décision consciente sur les segments à
desservir et ceux à ignorer. Une fois cette décision prise, un business model
5. Un business model (ou modèle économique) décrit la manière dont une organisation crée, fournit et capture
de la valeur. https://lotincorp.biz/le-business-model-canvas-de-strategyzer/
83
peut être soigneusement conçu autour d’une solide compréhension des be-
soins spécifiques des clients.
Proposition de valeur : le bloc de construction « proposition de valeur » décrit

l’ensemble de produits et de services qui créent de la valeur pour un segment
de clientèle particulier. La proposition de valeur est la raison pour laquelle
les clients se tournent vers une entreprise plutôt qu’une autre. Elle résout un
problème client ou satisfait un besoin client.
Chaque proposition de valeur consiste en un ensemble sélectionné de pro-

duits et/ou de services qui répondent aux exigences d’un segment de clientèle
spécifique.
En ce sens, la proposition de valeur est une agrégation, ou un ensemble

d’avantages qu’une entreprise offre à ses clients. Certaines propositions de
valeur peuvent être innovantes et représenter une offre nouvelle ou disruptive.
D’autres peuvent être similaires aux offres existantes du marché, mais avec
des fonctionnalités et des attributs supplémentaires.
Fig 7.5. Relation entre la carte de proposition de valeur

et le business model canvas. © Strategyzer AG, CC BY-SA 3.0
Le profil client (le cercle dans l’illustration) décrit un segment de clientèle spé-
cifique dans votre business model de manière plus structurée et détaillée.
84
Fig 7.6. La value proposition canvas de Strategyzer. Le carré représente

la carte de valeur, et le cercle représente le profil client.
© Strategyzer AG, CC BY-SA 3.0
Il divise le profil client en tâches, douleurs et gains. Ce sont les tâches qui nous
intéressent ici. Si vous souhaitez approfondir ce concept, je vous suggère
l’excellent livre La méthode value proposition design6 de Alex Osterwalder.
Les tâches (ou emplois) client (ou jobs to be done) décrivent ce que vos
clients essaient de faire dans leur travail ou dans leur vie.
Une tâche client peut être les tâches qu’il essaie d’exécuter et de terminer, les
problèmes qu’il essaie de résoudre ou les besoins qu’il essaie de satisfaire.
Assurez-vous de prendre en compte le point de vue du client lorsque vous

recherchez une tâche. Ce que vous considérez comme important de votre
point de vue n’est peut-être pas une tâche que les clients essaient réellement
de faire.
Faites la distinction entre trois types principaux de tâches à exécuter et de

tâches d’appui pour les clients :
Tâches fonctionnelles
Lorsque vos clients essaient d’exécuter ou de mener à bien une tâche spéci-
fique ou de résoudre un problème spécifique. Par exemple : tondre le gazon,
manger sainement en tant que consommateur, rédiger un rapport ou aider les
clients en tant que professionnel.
6. https://www.amazon.fr/m%C3%A9thode-Value-Proposition-Design-produits/dp/2744066311
85
Tâches sociales
Lorsque vos clients veulent bien paraître ou gagner en puissance ou en statut.
Ces tâches décrivent comment les clients veulent être perçus par les autres.
Par exemple : avoir l’air tendance en tant que consommateurs ou être perçus
comme compétents en tant que professionnels.
Tâches personnelles/émotionnelles
Lorsque vos clients aspirent à un état émotionnel spécifique, comme se sentir
bien ou en sécurité. Par exemple : rechercher la tranquillité d’esprit quant à
ses investissements en tant que consommateur ou obtenir le sentiment de
sécurité d’emploi sur son lieu de travail.
Tâches d’appui
Les clients effectuent également des tâches d’appui dans le cadre de l’achat
et de la consommation, en tant que consommateurs ou professionnels. Ces
tâches découlent de trois rôles différents :
- Acheteur de valeur : tâches liées à l’achat de valeur, telles que la compa-
raison d’offres, le choix des produits à acheter, le passage à la caisse, la
conclusion d’un achat ou la livraison d’un produit ou d’un service.
- Co-créateur de valeur : tâches liées à la création de valeur avec votre orga-
nisation, telles que la publication de critiques et d’avis sur des produits, voire
la participation au design d’un produit ou d’un service.
- Transfert de valeur : tâches liées à la fin du cycle de vie d’une proposition
de valeur telles que l’annulation d’un abonnement, la cession d’un produit,
son transfert à d’autres personnes ou sa revente.
Contexte de la tâche
Les tâches client dépendent souvent du contexte spécifique dans lequel elles
sont effectuées. Le contexte peut imposer certaines contraintes ou limitations.
Par exemple, appeler quelqu’un à la volée est différent, selon que vous voya-
gez en train ou que vous conduisez une voiture. De même, aller au cinéma
avec vos enfants n’est pas la même chose qu’y aller avec votre partenaire.
Importance de la tâche
Il est essentiel de reconnaître que toutes les tâches n’ont pas la même impor-
tance pour votre client.
Certaines occupent une place plus conséquente dans le travail ou la vie d’un
client, car leur échec pourrait avoir de graves conséquences.
86
D’autres sont insignifiantes parce que le client se soucie davantage d’autres

choses.
Parfois, un client jugera un travail crucial parce que celui-ci est fréquent ou
qu’il en ressortira un résultat souhaité ou indésirable.
Solutions
Ce sont les solutions que vous utiliserez pour dépasser les besoins de vos
clients. C’est là que le caoutchouc rencontre la route. Plus que de simplement
répondre aux besoins de vos clients, vous voulez dépasser leurs besoins !
- Cette catégorie concerne la qualification de la solution d’une manière qui la
rend « meilleure que ». Soyez spécifique. Par exemple : si le besoin est « un
endroit pour échapper aux enfants », votre solution devrait être « un superbe
design intérieur, une oasis au quotidien ».
- La solution peut être des fonctionnalités dans le logiciel, le contenu, les ser-
vices et la manière dont un service est fourni.
- Ne limitez pas les solutions à ce que vous pouvez faire. Voyez grand !
Pour le salon de thé de l’exemple précédent, le résultat pourrait ressembler à

ceci :
Besoins & solutions de l’utilisateur
Démographie Récit
sexe, âge, revenu, statut matri- défis, emplois, ambitions
monial, conjoint. e, enfants, + Maman occupée
emploi
+ CEO du foyer
+ 39 ans
+ Occupée à conduire les
+ Mariée enfants à travers la ville pour
+ Son mari, Bill, CEO de le foot, l’école et les activités
Nom
Medium Corp extrascolaires
Jane Karp
+ 2 enfants : 10 et 13 ans, un + Aime le yoga
garçon et une fille + Amoureuse de thé
+ Thousand Oaks, CA + Cherche une évasion
+ $ 175,000 temporaire
87
Type d’utilisateur Besoins Solutions

La citadine De quoi a-t-il besoin pour faire Que lui proposons-nous pour
La maman yoga face à ses défis ? satisfaire ses besoins ?
+ Super ambiance pour échap- + Super design d’intérieur
per aux enfants + Thé importé le plus cher
+ Produit de qualité, car elle est + Personnel expérimenté bien
une connaisseuse de thé formé
+ Excellent service parce qu’elle + Site mobile incroyable avec
veut se sentir spéciale des heures d’ouverture
+ Pour savoir si elle peut venir + Programme de fidélité
avant le yoga du matin
+ Design sophistiqué
+ Se sentir appréciée
Fig 7.7. Exemple de fiche persona pour un salon de thé.
Les scénarios utilisateur

Un scénario utilisateur décrit simplement un récit de base d’une action ou
d’un objectif qu’un utilisateur souhaite accomplir. Voilà pourquoi Henri doit
trouver et télécharger une application de mobilité qui lui permettrait d’éviter les
embouteillages et faire plus de courses avec plus de clients. Bien entendu, les
scénarios peuvent être beaucoup plus détaillés.
L’idée est de déterminer : qui, quoi, quand, où, pourquoi et comment du scé-
nario de l’utilisateur.
Les scénarios peuvent être utilisés pour décrire à la fois ce qui se passe ac-
tuellement dans un système ou un environnement ou plus généralement le
comportement souhaité dans un système ou un environnement.
Les scénarios utilisateur peuvent également être utiles lors de la définition du

test d’utilisabilité. Ils permettent aux testeurs de se concentrer sur les tâches
clés d’un système.
Comme l’a dit Steve Jobs, le fondateur d’Apple : « Le design n’est pas ce à
quoi ça ressemble et donne l’impression. Le design, c’est comment ça fonc-
tionne. » Les scénarios utilisateur vous aident à examiner le fonctionnement
de votre design.
88
Création de scénarios utilisateur

Les scénarios utilisateur présentent un certain nombre d’avantages et d’appli-
cations dans le design centré sur l’utilisateur et l’expérience utilisateur. Ils vous
permettent :
- D’explorer et expliquer les motivations de certains besoins et comporte-
ments des utilisateurs.
- De décrire explicitement comment votre persona s’attend à ce que les inte-
ractions se déroulent, avec des attentes concernant la séquence des évé-
nements, les formats d’entrée et de sortie, et les détails des informations
nécessaires pour réaliser efficacement ce scénario.
- D’attirer l’attention sur les « points douloureux » [pain points] d’un processus
existant ou sur la complexité anticipée des nouveaux processus.
Pour chaque scénario, vous devez présenter non seulement l’objectif du per-
sona, mais également le contexte en termes :
- De personne impliquée et son rôle (le cas échéant).
- D’événements qui ont conduit au scénario, en particulier ceux qui ont créé
le besoin de réaliser ce scénario.
- D’environnement dans lequel le scénario est exécuté. Notez qu’il ne s’agit
pas seulement de l’environnement physique, mais aussi des environnements
sociaux, juridiques et organisationnels.
Les scénarios utilisateur sont écrits sous forme d’histoires riches en détails.
Mais veillez à ne pas trop inclure d’informations superflues. Par exemple, ce
que porte le personnage ne serait pertinent que s’il y avait un problème impor-
tant avec l’environnement physique qui devait être expliqué.
Pendant des années, AirBnB a décrit le parcours pour devenir un hôte ou un

invité en termes de « story-boards » pour aider son équipe à se rappeler qu’il
s’agit d’un parcours humain, pas seulement d’un « flux d’utilisateurs ».
89
Fig 7.8. Story-board de flux d’utilisateur invité sur l’application mobile AirBnB.
© Nick Sung & AirBnB, CC BY-SA 3.0
Fig 7.9. Story-board de flux d’utilisateur hôte sur l’application mobile AirBnB.
© Nick Sung & AirBnB, CC BY-SA 3.0
Rassurez-vous, je ne vous demande pas d’aller jusque-là. C’est juste pour

vous expliquer à quel point ça peut être puissant.
90
Communiquer le message
Connaître le marché cible vous aide à identifier le message et les objectifs de
communication du projet.
Le message général est très souvent fourni par vous, mais le marketing peut
avoir besoin d’apporter des informations sur la tonalité et le langage, les titres
principaux, les étiquettes et les instructions pour aider à donner un contexte
et une signification au message.
Portez une attention particulière aux objectifs de communication du produit.

Le message est-il de vendre, d’informer ou de persuader ? Les objectifs de
communication pour un site web seront très différents des objectifs de com-
munication pour un design de packaging.
Il est très important que la méthode de communication du message reste

cohérente tout au long du projet de site web.
Quel que soit le message, assurez-vous que vous comprenez clairement le

message général requis par votre projet avant de commencer.
Un moyen simple d’y arriver est de développer votre plateforme de marque7.
La plateforme de marque incarne l’identité d’une marque ou d’une entreprise,

à la fois sur la forme et sur le fond. Elle apporte des réponses à des questions
essentielles comme :
- L’identité : qui sommes-nous ? Comment se définir ?
- La vision : quelle est notre raison d’être ? À quoi servons-nous ?
- La mission : vers quoi allons-nous ? Quel est le but à atteindre dans les
prochaines années ?
- Les valeurs : quelles sont les valeurs que nous défendons ? Nos atouts, nos
qualités ?
- La promesse : quelle est notre valeur ajoutée ? En quoi sommes-nous
uniques pour nos clients ?
Pour simplifier, cela nécessite de disposer d’une stratégie de marque. Je vous

donnerai plus de détails et de ressources à ce sujet dans l’exemple de docu-
ment de spécifications.
7. emarketing.fr, Fiche 01 : La plateforme de marque, https://www.e-marketing.fr/Thematique/academie-1078/

fiche-outils-10154/La-plateforme-de-marque-314748.htm
91
Contenu + Architecture de l’information

Il est particulièrement important d’avoir le contenu avant de commencer par
un site web. Ce contenu déterminera l’architecture de l’information et le de-
sign de la navigation pour le site.
Le contenu inclut tous les éléments (logos, images, illustrations) ou informa-

tions (texte, numéros de téléphone, ingrédients, poids, mesures, etc.) qui
doivent figurer dans le projet.
Inventaire de contenu
Un inventaire de contenu est une liste de tous les articles d’information néces-
saires au site web et des images qui leur correspondent, généralement créées
sous forme de tableur. Chaque article peut devenir une page dans le site web,
ou il peut y avoir plusieurs articles par page.
L’inventaire de contenu répertorie toutes les informations requises et les élé-

ments visuels à inclure dans le site web.
Il est utile d’avoir les éléments et le contenu avant de commencer afin de

savoir avec quoi vous devez travailler. Lorsque cela n’est pas possible, assu-
rez-vous d’en être conscient afin de pouvoir le planifier lors du design de votre
site web.
Il est beaucoup plus facile de mettre un espace réservé [placeholder] dans

votre design que d’avoir à revenir plus tard et à lui faire de la place. D’autres
exigences de contenu que vous devrez peut-être inclure ici sont les exigences
audiovisuelles, d’animation et d’autres multimédias qui doivent être créées et
produites, les couleurs d’entreprise ou les palettes de couleurs qui doivent
être utilisées et tout autre paramètre de contenu spécifique pour le projet.
Architecture de l’information
L’architecture de l’information8 porte sur comment vous allez organiser le
contenu de votre site web.
Commencez par regarder l’inventaire de contenu.

- Combien d’articles de contenu y a-t-il sur le site (en cas de refonte) ?
8. LOTIN Henri, Guide du débutant à l’architecture de l’information, https://lotincorp.biz/guide-debutant-

architecture-information/
92
- Les titres de chaque article suggèrent-ils un principe d’organisation ou un

vocabulaire que vous pourriez utiliser ?
- Quelles informations sont liées les unes aux autres ?
- Existe-t-il différentes manières de regrouper et de classer le contenu ?
Tous les sites web ont une page d’accueil. La prochaine considération sera ce
à quoi les utilisateurs devraient pouvoir accéder directement à partir de cette
page d’accueil. Revenez en arrière et examinez vos profils utilisateur et vos
scénarios utilisateur. Quels sont leurs besoins en termes de types d’informa-
tions qu’ils recherchent ?
Imaginez le chemin qu’ils peuvent emprunter pour rechercher des informa-

tions spécifiques. Comment pourraient-ils s’attendre à se déplacer logique-
ment sur le site ? Certains de ces besoins et attentes suggèrent-ils un principe
d’organisation pour structurer le site web et l’information ?
Maintenant, regardez le type d’informations présentées.

- Qu’est-ce qui est communiqué ?
- Quels sont le style et le ton du langage utilisés dans les informations ?
- Y a-t-il des mots-clés ou des concepts inclus dans le contenu que vous
pourriez utiliser pour créer un vocabulaire à partir de votre système de clas-
sification et de ses étiquettes ?
Une fois que vous avez déterminé votre système organisationnel9 et les éti-
quettes de vos regroupements, développez un sitemap pour cartographier
votre design de l’information. À partir de cet organigramme, identifiez les types
de systèmes de navigation que vous devrez utiliser dans le design du site web
et définissez les éléments qui devront être inclus dans chaque système.
Par exemple, les étiquettes des groupes principaux – ou sections – peuvent

devenir les éléments de la barre de menu principal, tandis que les étiquettes
des catégories dans l’une des sections principales peuvent devenir les élé-
ments d’une barre de navigation locale pour cette section.
Les 8 principes de Dan Brown pour l’architecture

de l’information
Avec Nathan Curtis, Dan Brown a fondé EightShapes en 2006. Bien que
spécialisée dans l’architecture de l’information, la recherche utilisateur et la
9. LOTIN Henri, Étape 3 : Architecture de l’information, https://lotincorp.biz/les-etapes-de-creation-dun-site-

web-etape-3-architecture-de-linformation/
93
découverte de design, la carrière de Dan couvre la plupart des aspects du

design UX.
Dan a écrit trois livres sur la pratique de l’expérience utilisateur, dont Commu-
nicating Design, largement considéré comme essentiel au canon UX. Il est à
l’origine des huit principes dont je vais vous parler ici :
1. Principe des objets : le contenu doit être traité comme une chose vivante
et respirante avec un cycle de vie, des comportements et des attributs.
Un contenu différent a des attributs et des comportements différents. Un
architecte de l’information doit commencer chaque projet en identifiant les
types de contenu qui seront présents.
2. Principe des choix : il est important de créer des pages qui offrent des
choix signifiants aux utilisateurs. Dans le même temps, la gamme de choix
disponibles pour l’utilisateur doit être axée sur une tâche particulière. Selon
le livre The Paradox of Choice de Barry Schwartz, trop de choix peuvent
submerger un utilisateur et affecter négativement son expérience d’utili-
sation d’un produit. Plus d’options signifient plus d’effort cognitif, et plus
d’effort peut parfois signifier plus d’anxiété.
3. Principe de divulgation : montrez juste assez d’informations pour aider
les gens à comprendre quels types d’informations ils trouveront en fouillant
plus profondément. En limitant les informations qu’il voit à tout moment,
vous permettez à votre utilisateur de mieux absorber ce qu’il voit. Si les
utilisateurs sont intéressés par les informations, ils peuvent les approfondir
en passant de l’aperçu aux informations détaillées.
4. Principe des exemplaires : affichez des exemples de contenu lors de la
description du contenu des catégories. Par exemple, lorsque vous par-
courez des catégories sur eBay, chaque catégorie est représentée par une
image d’un produit qui entre dans cette catégorie. Cela permet aux utilisa-
teurs d’identifier facilement la catégorie.
5. Principe des portes d’entrée : supposez qu’au moins la moitié des visi-
teurs du site web passeront par une page autre que la page d’accueil. Cela
signifie que chaque page doit inclure des informations de base afin qu’ils
sachent où ils se trouvent. Cela signifie également que chaque page doit
comporter au moins une navigation de niveau supérieur afin que les utilisa-
teurs sachent ce qu’ils peuvent faire ensuite.
6. Principe de classification multiple : la classification multiple signifie qu’il
doit y avoir différentes façons pour vos utilisateurs de parcourir le contenu
de votre site. Différentes personnes sont susceptibles d’utiliser diverses
méthodes pour trouver les informations sur votre site. Par exemple, cer-
94
tains utilisateurs peuvent employer une fonction de recherche pour trouver

le contenu tandis que d’autres peuvent vouloir explorer en naviguant.
7. Principe de navigation ciblée : la navigation ciblée signifie que les menus
de navigation ne doivent pas être définis par l’endroit où ils apparaissent,
mais plutôt par ce qu’ils contiennent.
8. Principe de croissance : supposez que le contenu du site web augmen-
tera. La quantité de contenu que vous avez sur un site aujourd’hui peut ne
représenter qu’une petite fraction de ce que vous aurez demain, la semaine
prochaine ou l’année prochaine. Assurez-vous que le site web est évolutif.
Bien que ces principes soient adaptés à la création d’architecture de l’infor-

mation pour un site web, il est possible de les ajuster à d’autres produits
numériques ou non numériques.
Les wireframes
Développez ensuite des wireframes pour chaque page, en indiquant ce qui
sera nécessaire sur celles-ci. Par exemple :
- Quels systèmes de navigation apparaîtront sur chaque page ?
- Quels éléments seront nécessaires pour chaque système de navigation ?
- Y aura-t-il des contrôles de formulaire sur toutes les pages ?
- Comment les différents éléments de contenu seront-ils présentés sur la
page ?
- Y aura-t-il de l’audio/vidéo, de l’animation, des images sur les pages ?
- Qu’en est-il des diaporamas, des carrousels d’images ou des galeries
d’images ?
- Le site web a-t-il besoin de commerce électronique ?
- Comment fonctionnera le panier ?
- Quels éléments devront figurer sur le catalogue de produits et les pages
d’informations sur les produits ?
N’oubliez pas que les wireframes sont censés être des représentations sché-
matiques en noir et blanc de ce qui est nécessaire sur la page, et non une
indication de l’apparence visuelle ou des qualités esthétiques de la page.
Enfin, une fois que vous avez cartographié chaque page, vous devriez avoir un
story-board complet de la structure du site web et une bonne idée du nombre
de modèles d’interface que vous devrez créer.
95
Exigences technologiques et fonctionnelles

Cela inclut les outils et les applications que vous devrez utiliser pour construire
le projet selon vos spécifications et pour répondre aux besoins des utilisateurs,
tels que des bases de données et des systèmes de gestion de contenu (CMS).
En tant que responsable du projet, vous ne savez peut-être pas exactement

quels seront les meilleurs besoins technologiques pour le projet. Vous devrez
peut-être consulter un programmeur pour cette partie du document.
Il est très important d’inclure les besoins technologiques dans le document

de spécifications, car ils auront une incidence sur le calendrier de développe-
ment, le coût, l’architecture de l’information et les exigences de design d’inter-
face pour le projet, ainsi que sur les besoins et les coûts d’hébergement.
J’en ai parlé dans le chapitre 3 : choisissez votre plateforme no-code.
Coût
Vous devez savoir combien de temps vous pouvez consacrer au projet et les
contraintes du coût de développement. Par exemple, un grand site web à forte
intensité d’informations et basé sur une base de données est beaucoup plus
cher qu’un simple site web HTML de 5 pages développé en Webflow, tandis
qu’un site web multimédia de 10 pages développé en GSAP10 peut se situer
quelque part au milieu.
Les exigences de contenu telles que l’audio/vidéo, l’animation et la photogra-

phie professionnelle peuvent augmenter considérablement à la fois le budget
et le délai requis dans le calendrier de production. Plus vous en savez sur le
coût à l’avance, plus vous pouvez résoudre le problème de manière créative
lors de la phase de design.
L’équipe
Il est très rare que vous créiez et développiez un site web complet seul. Il y a
généralement une équipe impliquée. Et chaque expert requis doit être chiffré.
Pour les tâches liées au site web, nous avons :
Stratège technique et chef d’équipe
Pour exécuter le projet, s’assurer que la stratégie est correcte et amener les
designers et les développeurs à discuter ensemble pour faire correspondre ce
qu’ils font avec vos exigences.
10. GSAP est un ensemble d’ou tils JavaScript robuste qui permet de créer des animations hautes
performances qui fonctionnent dans tous les principaux navigateurs. https://greensock.com/gsap/
96
Designer web
Pour créer une bonne expérience utilisateur et la rendre attrayante.
Développeur web
Pour faire le codage du design, la configuration du site, les optimisations de
sécurité et de vitesse, et d’autres étapes de mise en œuvre pour l’héberge-
ment, le courrier électronique, etc.
Comme vous aurez besoin de contenu, vous voudrez peut-être également

envisager :
Rédacteur
Pour créer le langage de vente sur vos pages, tout en aidant à écrire des
articles de blogs et les publications des réseaux sociaux.
Photographe/vidéaste
Pour créer des photos et des vidéos de marque, afin de créer une expérience
visuelle transparente pour les utilisateurs ou les consommateurs.
Pour les besoins particuliers d’une application web, envisagez :

Chef de produit
Pour la gestion de la création, de la structure, de l’organisation du produit et
de la communication des besoins sur la manière dont le produit s’intégrera à
la marque sur le digital, et sur la manière d’y accéder.
Les principaux coûts

Les principaux coûts associés au design web sont du temps pour les experts en
design, car l’extrant est virtuel. Cependant, plusieurs designers différents peuvent
être impliqués : architectes de l’information, designers d’utilisabilité, rédacteurs
de contenu, designers d’interface, producteurs (intégrateurs), programmeurs.
Les coûts de développement peuvent être élevés, en fonction des besoins tech-
nologiques du projet. Par exemple, le développement de systèmes de base de
données personnalisés prend beaucoup plus de temps et d’argent que l’utilisa-
tion d’un système existant, et l’achat d’une licence d’utilisation pour un système
professionnel est plus coûteux que l’utilisation d’un système open source.
Les coûts supplémentaires liés au design et au développement web incluent

les coûts de configuration et d’hébergement. Un site web doit être hébergé
par un fournisseur de services internet sur un serveur et, pour être accessible
aux utilisateurs, un nom de domaine doit être acheté.
97
Les coûts d’hébergement varient en fonction des exigences technologiques

d’un site web. Par exemple, l’hébergement d’un système de gestion de conte-
nu ou d’un système de commerce électronique est généralement plus onéreux
qu’un site web ordinaire dépourvu de technologie back-end.
Ceci a également été évoqué dans le chapitre 3 : Choisissez votre plateforme

no-code.
Dans le cadre de ce livre, je considère que vous êtes seul. Le coût de départ
est donc 0,00 €.
Calendrier de production
Le planning de production trace le calendrier et identifie les échéances critiques
(jalons) pour les différentes étapes du projet. Chaque étape est généralement in-
diquée avec une présentation du client et complétée par une signature d’appro-
bation du client lui permettant de passer à la prochaine étape de la production.
Le développement d’un projet web étant basé sur la collaboration, il est très
important d’évaluer chaque étape du processus de design afin de vous assu-
rer que votre calendrier de production et votre planification sont aussi précis
que possible. Si une échéance n’est pas respectée, cela aura un effet domino
indésirable sur l’ensemble du projet.
Fig 7.10. Planning pour le site web Design & Lifestyle Magazine.
98
Je conseille très souvent d’utiliser une solution de gestion de projet qui est à
la fois simple et collaborative.
Depuis des années, je me sers de Trello11 pour la gestion de mes projets :
Fig 7.11. Exemple de planification de projet dans Trello.
Si d’autres personnes travaillant sur votre projet ont d’autres projets réservés,
toute modification apportée à votre emploi du temps peut signifier qu’elles
sont incapables d’entreprendre leur part du projet.
Les sites web prennent souvent plus de temps et de coordination que les
autres projets de design. Il est donc important de fixer des délais réalistes pour
les jalons. Il est également important de s’assurer à partir de vos attentes que :
- La portée du projet est réalisable pour votre budget.
- Le calendrier de réalisation est réaliste.
Ne vous fixez jamais des délais que vous ne pouvez pas tenir.
11. Trello est un outil de gestion de projet en ligne, lancé en septembre 2011 et inspiré par la méthode Kanban
de Toyota. Il repose sur une organisation des projets en planches listant des cartes, chacune représentant
des tâches.
99
Les étapes du planning de production peuvent inclure :

1. Consultation (recherche, stratégie, développement brief).
2. Portée du projet.
3. Architecture de l’information et design de la navigation.
4. Design de l’interface.
5. Prototypage du site web.
6. Développement et mise en œuvre des exigences techniques.
7. Cycle de test du site web : tests > modifications > tests, etc.
8. Livraison – mise en ligne du site web.
Dans le cadre d’un projet mené par vous en mode Growth-Driven Design (cha-
pitre 7) et no-code, ce calendrier devient :
1. Recherche, stratégie, document de spécifications…
2. Architecture de l’information et design de la navigation.
3. Design de l’interface.
4. Rampe de lancement [launch pad].
5. Cycle d’amélioration du site web : tests > modifications > tests, etc.
Vous n’aurez pas d’obligation à chaque étape, de créer un livrable (ceci est
expliqué dans le chapitre 8 : Accélérez votre design de site web) de contrôle
de l’état d’avancement du projet, de recevoir des feed-back et/ou une quel-
conque approbation d’un client.
C’est vous le patron, c’est votre projet. Mais ne dépassez pas 30 jours
pour arriver au launch pad.
100
Chapitre 8
Accélérez
votre design
de site web :
High Speed UX
Dans ce chapitre, vous apprendrez des raccourcis pour livrer rapidement le

design d’expérience utilisateur (UX) de votre projet de site web.
Si c’est la première fois que vous entendez le terme « expérience utilisateur »

(surtout si vous n’avez pas lu le chapitre 1 de ce livre), permettez-moi de le
mettre en contexte.
Les différents types d’expérience

Brand Experience (BX) ou expérience de marque, l’expérience qu’un utili-
sateur devrait avoir avant, pendant et après avec la plateforme (entreprise) :
- Comment cela s’intègre-t-il dans mon mode de vie ?
- Où cela ajoute-t-il de la valeur ?
- Quelle valeur ajoute-t-il ?
101
- Qu’est-ce que je ressens ?

- Qu’est-ce que je dis aux gens ?
La Brand Experience (BX) se concentre sur la différenciation.
Expérience utilisateur (UX) : toute l’expérience d’une personne utilisant un

produit, un système ou un service particulier. L’UX est axée sur l’utilisabilité.
Expérience client (CX) : l’individu + la somme de toutes les interactions dans

la plateforme (entreprise) à chaque moment de vérité12. La CX est axée sur la
désirabilité.
Je vais maintenant vous expliquer les nuances de chaque domaine et com-

ment une meilleure compréhension de la CX vous donnera une meilleure pers-
pective de l’expérience utilisateur sur votre site web.
Qu’est-ce que l’expérience utilisateur ?

L’UX est l’expérience du client/utilisateur avec un produit spécifique, tel qu’un
site web, une application ou un logiciel. Le design de l’interface – son utili-
sabilité, son architecture de l’information, sa navigation, sa compréhension,
son apprentissage, sa hiérarchie visuelle, etc. – se combinent pour créer l’UX,
qu’elle soit positive ou négative.
Votre objectif est donc de vous assurer que la marque conçoit des pro-
duits qui résolvent le bon problème de manière efficace et agréable.
Qu’est-ce que l’expérience client ?

La CX a une plus grande portée : ce sont les expériences du client avec tous
les canaux de la marque, y compris un produit spécifique comme une appli-
cation. La CX est un concept général englobant tous les canaux et tous les
produits d’une même marque, et ce que l’utilisateur ressent à son sujet.
En règle générale, la CX se réfère à la façon dont les utilisateurs perçoivent :

- Le service client.
- La publicité.
- La réputation de la marque.
- Le processus de vente.
- L’équité de la tarification.
12. Le moment de vérité ou moment of truth (MOT) en marketing est le moment où un client/utilisateur interagit
avec une marque, un produit ou un service pour former ou changer une impression sur cette marque, ce
produit ou ce service particulier. https://en.wikipedia.org/wiki/Moment_of_truth_(marketing)
102
https://www.ACCÉLÉREZ VOTRE DESIGN DE SITE WEB : HIGH SPEED UX.com
- La livraison de produit.
- Et même l’UX de chaque produit individuel.
Votre objectif ici est d’aligner les stratégies d’entreprise sur l’expérience
globale du client, en gardant à l’esprit le bonheur du client.
Les différences : expérience client et expérience

utilisateur
Je vais illustrer les différences avec deux exemples.
Mauvaise expérience utilisateur & bonne expérience client

Tout d’abord, imaginez que vous avez acheté une application qui édite des
photos sur votre téléphone.
Vous l’avez achetée parce que vous aimez les programmes comme Photoshop,
et vous vouliez de telles fonctionnalités détaillées pour votre téléphone, sur-
tout une en particulier. Cependant, lorsque vous commencez réellement à uti-
liser l’application, vous trouvez l’interface confuse et vous ne pouvez même
pas trouver la fonctionnalité que vous vouliez. (UX)
Heureusement, ils ont une ligne d’assistance. Vous appelez, et un représen-

tant amical du service à la clientèle répond rapidement et explique, étape par
étape, comment accéder à la fonctionnalité que vous vouliez. Tout semble
clair maintenant. En outre, ils vous donnent un crédit de 25 € pour vos pro-
blèmes. (CX)
C’est un bon exemple d’une mauvaise UX mais d’une bonne CX. L’interface
de l’application était confuse et mal orchestrée, ce qui rendait l’utilisation de
l’application mauvaise. Cependant, votre expérience avec les autres aspects
de la marque de l’application – le service à la clientèle et le crédit gratuit – était
excellente.
Mais cela peut fonctionner dans les deux sens. Le deuxième exemple ci-des-
sous est courant, également.
Bonne expérience utilisateur & mauvaise expérience client

Vous voulez commander des billets d’avion. Vous pensez qu’il est plus facile
de télécharger l’application d’une compagnie aérienne pour la parcourir et
acheter des billets. Vous avez raison.
103
Même si vous n’avez jamais utilisé une application de compagnie aérienne

auparavant, l’interface intuitive, la navigation claire et le temps de charge-
ment rapide vous permettent de trouver et réserver le vol parfait en moins de
10 minutes. (UX)
Une fois que vous arrivez à l’aéroport, cependant, c’est une histoire totale-
ment différente. La cabine d’enregistrement manque de personnel et la file est
inutilement longue. Le préposé est désagréable et impatient, et vous n’aimez
pas la façon dont le personnel jette vos bagages enregistrés. Sur le vol lui-
même, le service n’est pas beaucoup mieux. (CX)
Alors qu’un aspect de la marque, l’application, vous satisfait, ce n'est pas

le cas des autres aspects. Peu importe la qualité de l’UX de l’application,
elle n’a pas compensé les autres services, ce qui a finalement endommagé
l’ensemble des CX. Résultat : vous n’êtes pas heureux avec l’argent dépensé
par rapport au service reçu.
Pour avoir des clients satisfaits, vous avez besoin de cohérence entre l’UX et
la CX.
Les clients interprètent tous les événements comme l’expérience globale de la

marque (BX). Ils sont soit satisfaits, soit insatisfaits.
Livrables UX à connaître
Ici, j’expliquerai le concept de livrables UX13, un terme qui décrit les résultats
d’un processus de design UX au cours de ses différentes étapes. Je donnerai
ensuite un aperçu de certains des types de livrables les plus courants.
Bien qu’il n’y ait pas de processus de design UX unique et de référence, le pro-
cessus de la plupart des équipes respecte les 5 éléments de l’expérience uti-
lisateur de Jesse James Garrett14. Du plus abstrait, stratégie, au plus concret,
surface, chaque élément a quelques activités associées.
Tout comme un iceberg, le design visuel n’est que la surface de l’expérience

utilisateur. En dessous, il y a tellement plus, y compris le squelette, la struc-
ture, la portée et la stratégie.
13. Interaction Design Foundation, 14 UX Deliverables: What will I be making as a UX designer?, https://www.
interaction-design.org/literature/article/7-ux-deliverables-what-will-i-be-making-as-a-ux-designer
14. Jesse James Garrett ou JJG est un architecte de l’information particulièrement connu pour son diagramme
« The Elements of User Experience » ainsi que pour l’invention du terme « Ajax » introduit le 18 février 2005,
dans un article sur le site Web Adaptive Path. Il est l’auteur de The Elements of User Experience.
104
Ces couches ne sont en aucun cas autonomes et s’influencent

mutuellement.
Les décisions prises sur un plan peuvent se répercuter en cascade vers le haut
ou vers le bas de ces couches. Il y aura probablement d’autres considérations
qui émergeront plus tard, ce qui pourrait avoir un impact sur l’expérience.
Fig 8.1. Les 5 éléments du design d’expérience utilisateur d’après Jesse James
Garrett. © Interaction Design Foundation, CC BY-SA 3.0
105
Besoins des utilisateurs et objectifs du produit

« Si j’avais une heure pour résoudre un problème, je passerais 55 minutes à
réfléchir au problème et 5 minutes à réfléchir aux solutions. »
Albert Einstein
Les mots d’Albert Einstein sont vrais pour tout nouveau projet que vous entre-
prenez, et particulièrement pour le design UX.
Quelle que soit l’étape ou la forme du produit ou du service, vous devrez

creuser et comprendre les objectifs du produit et les besoins des utilisateurs
avant de commencer votre travail. En créant (et en lisant) des personas, des
story-boards et des cartes de parcours client, vous pouvez mieux comprendre
pourquoi vous créez, et pour qui.
Personas
Un persona est un individu fictif que les designers construisent comme une
sorte d’archétype de l’utilisateur. Et j’insiste sur le mot archétype, parce que
beaucoup le confondent au stéréotype, ce qui dénature profondément l’esprit
de cet outil. Il représente les utilisateurs types, leurs objectifs, leurs motiva-
tions, leurs frustrations et leurs compétences.
D’autres informations telles que la démographie et les antécédents scolaires

complètent le persona. En fonction de la portée des projets, les designers
généreront un certain nombre de personas différents pour capter une partie
la plus large possible du public. La génération de personas aide les designers
à sympathiser avec les utilisateurs et à démontrer une compréhension appro-
fondie de qui ils sont et de ce qu’ils veulent réaliser.
106
Fig 8.2. Exemple de persona utilisateur. Les données démographiques, les com-
pétences, les objectifs et les frustrations sont représentés visuellement ou sous
forme de texte. © Interaction Design Foundation, CC BY-SA 3.0
Cartes du parcours client

Une carte du parcours client est un diagramme qui représente les étapes
prises (c’est-à-dire le processus) par un utilisateur pour atteindre un objectif
spécifique. En présentant le processus le long d’une chronologie, les desi-
gners peuvent appréhender les changements dans le contexte de l’utilisateur,
ainsi que leurs motivations, problèmes et besoins en cours de route.
En identifiant les principales pierres d’achoppement pour les utilisateurs, les

designers peuvent mieux comprendre leurs difficultés et commencer à voir
où un produit ou un service pourrait s’intégrer en cours de route pour aider
l’utilisateur.
107
Fig 8.3. Carte du parcours client de l’expérience de cours d’un étudiant

à l’Interaction Design Foundation.
© Interaction Design Foundation, CC BY-SA 3.0
108
Architecture de l’information et design d’interaction

L’architecture de l’information est analogue au plan d’une maison. Les desi-
gners utilisent souvent différents types d’organigrammes pour visualiser les
informations et les interactions, tels que les plans de site [sitemaps] et les flux
utilisateur [user flows].
Plans de site
Vous avez peut-être rencontré des plans de site en parcourant différents sites.
Comme les plans physiques, ils vous aident à vous repérer sur un site web.
Les designers UX créent souvent des sitemaps similaires pour montrer la hié-
rarchie et la structure de navigation d’un site web ou d’une application.
Ces plans sont fréquemment produits pour les applications mobiles. Ils
montrent comment le contenu sera organisé en « écrans » ou sections lo-
giques, et comment l’utilisateur peut passer d’une section de votre service à
une autre.
Fig 8.4. Un exemple de sitemap qui montre comment le contenu d’un site web
est organisé et comment un utilisateur peut naviguer dans chaque
section. © Interaction Design Foundation, CC BY-SA 3.0
Flux utilisateur
Un diagramme de flux utilisateur (également appelé flux de tâches) est un
graphique simple décrivant les étapes qu’un utilisateur doit suivre avec votre
produit ou service afin d’atteindre un objectif. Contrairement à la carte du par-
cours client, le diagramme de flux utilisateur ne considère que ce qui se passe
avec votre produit (c’est-à-dire en ignorant tous les facteurs externes).
Ces diagrammes peuvent aider les designers à évaluer rapidement l’efficacité

du processus nécessaire pour atteindre un objectif utilisateur et peuvent aider
à identifier le « comment » (c’est-à-dire l’exécution) des grandes idées ciblées
par le brainstorming.
109
Fig 8.5. Un exemple de flux utilisateur montrant les actions de l’utilisateur dans
une application. © Interaction Design Foundation, CC BY-SA 3.0
Design d’interface
Wireframes (ou maquettes filaires ou fils de fer graphiques)
Tout comme un sculpteur crée une structure filaire avant de taper sur de l’ar-
gile pour fabriquer une statue, un designer d’interface conçoit également une
structure filaire avant d’ajouter les détails.
Les wireframes sont les premiers livrables liés à l’interface dans le processus
de design UX et ne sont qu’à un pas de la couche de surface et du design
visuel. Ce sont les premiers éléments tangibles des idées ou des solutions
proposées.
Un exemple de wireframe peut rassembler la structure, la navigation, l’archi-

tecture de l’information, les détails de mise en page, etc.
Les designers s’appuient sur des croquis dessinés à la main, des plans de site
et des flux d’utilisateurs pour créer une structure filaire. Ils peuvent être une
étape entre les croquis et les prototypes.
Un bon wireframing est la compétence de créer des mises en page allégées

afin que votre équipe et les parties prenantes puissent rapidement déterminer
si les concepts valent la peine d’être développés. Ils sont généralement en
niveaux de gris et n’incluent pas d’éléments visuels ou d’identité visuelle.
110
Fig 8.6. Exemple de wireframe pour un job board.

Ce livre s’adresse aux débutants, je ne vais donc pas m’appesantir sur les
différents types de wireframes, les outils et les techniques pour les réaliser. À
la place, je vous recommande cet e-book gratuit de UXPin15.
Design Systems
Un design system est une bibliothèque de composants et de directives réu-
tilisables que les personnes au sein d’une entreprise peuvent combiner dans
des interfaces et des interactions. Ce qui entre dans un design system et la
15. UXPin, The Guide to Wireframing: For Designers, PMs, Engineers and Anyone Who Touches Product,
https://www.uxpin.com/studio/ebooks/guide-to-wireframing/
111
façon dont il est mis en œuvre peut varier considérablement d’une entreprise
à l’autre ; en fonction de la taille et de la maturité de la pratique de design et
des besoins de l’équipe produit.
À la base, les design systems fournissent des directives cohérentes en matière

de style et d’interaction pour les équipes. Un design system robuste accé-
lère grandement le processus d’assemblage des interfaces, car les designers
n’ont pas besoin de créer des éléments à partir de zéro.
Le design system d’IxDF permet à leur équipe de créer des designs cohérents
et basés sur des principes qui répondent aux besoins de leurs utilisateurs.
Avec une bibliothèque de composants et de directives, le design system
permet une collaboration plus étroite et plus claire entre les designers et les
développeurs.
Fig 8.8. Design system d’IxDF. Vous pouvez consulter ce système

et les processus de design sur https://system.interaction-design.org
Idéalement, les différents éléments d’un design system sont en fait des mor-
ceaux de code que les développeurs peuvent déposer dans les interfaces afin
de créer une fonctionnalité ou un prototype plus rapidement. Alternativement,
ce sont simplement des éléments de design dans un outil de prototypage que
les designers peuvent réutiliser.
Voilà dans les grandes lignes ce dont vous aurez besoin en termes de design
UX pour votre projet de site web. Ce n’est pas indispensable, mais c’est utile
pour éviter les blocages lors de la création de votre interface.
112
Chapitre 9
Le design
d’interface
utilisateur
Vous avez maintenant toutes les informations nécessaires pour passer au

design de votre site web.
Retenez à votre niveau que les seuls livrables UX dont vous aurez besoin dans
le cadre de votre projet de site web sont :
- Les personas.
- Le plan de site.
- Les flux utilisateur (pas indispensables à votre niveau d’expertise, mais très
utiles).
- Les wireframes (dessinés à la main ou créés grâce au tableau d’un traite-
ment de texte comme vous pourrez le faire dans le template vierge fourni).
Pas besoin de logiciel de graphisme pour soigner la présentation, un bloc de

papier et un crayon/stylo suffisent amplement.
113
Le design visuel
Le design visuel vise à façonner et à améliorer l’expérience de l’utilisateur en
considérant les effets des illustrations, de la photographie, de la typographie16,
de l’espace, de la disposition (mise en page) et de la couleur sur l’utilisabilité
des produits et leur attrait esthétique.
Pour aider les designers à atteindre cet objectif, le design visuel considère
une variété de principes, y compris l’unité, les propriétés Gestalt17, l’espace,
la hiérarchie, l’équilibre, le contraste18, l’échelle, la dominance et la similarité.
Le design visuel en tant que champ a grandi à la fois à partir du design de l’in-
terface utilisateur (UI) et du design graphique19. En tant que tel, il se concentre
sur l’esthétique d’un produit et de ses matériaux connexes en mettant en
œuvre de façon stratégique des images, des couleurs, des polices et d’autres
éléments.
L’inspiration
Vous vous rappelez que j’ai parlé d’étudier la concurrence, non ? C’est parce
qu’en réalité, on ne réinvente pas la roue, on doit pouvoir tirer profit des stan-
dards et des conventions.
Aujourd’hui, les interfaces tendent à se ressembler. Et comme le rappelle Paul

Boag dans son article20 « Design convergence is not a dirty word » :
« Plus longtemps un objet est dans les parages, plus son design est standar-
disé. Prenons l’exemple de l’automobile ou du vélo. Quand ceux-ci ont été
inventés pour la première fois, leurs designs variaient beaucoup. Mais avec le
temps, ils ont commencé à converger. Ils ont convergé vers un design optimal,
mais aussi vers un modèle familier à la majorité des gens. »
Je vais donc vous montrer comment tirer profit des conventions, en analysant
les patterns (motifs qui se répètent) courants, puis les directives logiques pour
les interfaces utilisateur. Mais avant ça, il est important de savoir comment est
structurée une page web.
16. Ensemble des règles d’utilisation des polices de caractère.

17. Ou psychologie de la forme. C’est l’étude de la manière dont le cerveau humain voit et interprète les
formes.
18. Le contraste est une mesure de la différence de luminosité perçue entre deux couleurs.
19. LOTIN Henri, Design graphique : devenir designer graphique, https://lotincorp.biz/cest-quoi-le-design-
graphique/
20. BOAG Paul, Design convergence is not a dirty word, https://boagworld.com/design/design-convergence-
not-dirty-word/
114
https://www.LE DESIGN D’INTERFACE UTILISATEUR.com
La structure d’une page web

Pour que vous puissiez vous retrouver dans la partie technique de création de
pages web, je souhaiterais établir les fondations.
Je ne vais pas réinventer la roue ici. Je vous proposerai donc un extrait de

l’article « Structure de site web et de document » du MDN21.
Une page web est généralement composée de 3 parties : l’en-tête [header],

le corps de page [main] et le pied de page [footer]. C’est sur la base de cette
nomenclature que fonctionnent les modèles [templates] et les motifs répétés
[patterns] dans les différents outils no-code du marché.
Les pages web peuvent sembler assez différentes les unes des autres, mais
elles ont toutes tendance à partager des composantes standards similaires,
sauf si la page affiche une vidéo ou un jeu en plein écran. Mais ça relève alors
ici d’une sorte de projet artistique ou… d’une mauvaise structuration, tout
simplement :
En‑tête [header]
Généralement une grande bande placée en travers au haut de la page avec
un titre ou un logo. C’est là où les principales informations du site se trouvent
d’une page à l’autre.
Fig 9.1. Exemple d’en-tête de site web.
Dans cette image, vous pouvez voir l’en-tête du site web de free move. Il
comporte le logo de la société, le menu de navigation et un appel à l’action.
21. MDN Web Docs, Structure de Site Web et de document, https://developer.mozilla.org/fr/docs/Learn/
HTML/Introduction_to_HTML/Document_and_website_structure
115
Barre de navigation [nav]

Elle fait le lien vers les principales parties du site. D’habitude, elle est présen-
tée sous forme de boutons de menu, de liens ou d’onglets. Comme l’en‑tête,
la barre de navigation reste souvent cohérente d’une page à l’autre – avoir une
navigation mal structurée ne peut conduire qu’à la confusion et à la frustration
du lecteur.
Beaucoup de créateurs de site considèrent la barre de navigation comme fai-

sant partie de l’en‑tête et non comme un composant individuel, mais ce n’est
pas une exigence. En fait, certains soutiennent également que le fait d’avoir
les deux séparés est préférable pour l’accessibilité, car les lecteurs d’écran
lisent mieux les deux éléments s’ils sont dissociés.
Contenu principal ou corps de page [main]

Une grande zone au centre comprenant la majeure partie du contenu unique
de la page web. Par exemple, la vidéo à regarder, ou le corps de l’article à
parcourir, ou la carte à lire, ou les dernières nouvelles, etc. C’est la partie du
site qui varie de page en page.
Fig 9.2. Exemple de corps de site web.
Barre latérale [sidebar]

Quelques informations autour du sujet, liens, citations, annonces, etc. Elle est
habituellement contextuelle au contenu principal (par exemple, sur une page
116
d’informations, la barre latérale peut comporter la biographie de l’auteur, ou

des liens vers des articles connexes), mais il y a aussi des cas où vous trou-
verez des éléments récurrents comme un système de navigation secondaire.
Pied de page [footer]

Une bande au bas de la page qui contient généralement, en petits caractères,
des avis de droit d’auteur ou des coordonnées de contact. C’est un endroit pour
mettre de l’information commune (comme l’en-tête), mais il s’agit dans ce cas
d’informations non critiques, voire secondaires par rapport au site web lui-même.
Pour connaître les mentions légales obligatoires à afficher sur votre site web, je
vous invite à consulter le site web du ministère de l’Économie de France22, qui
reprend dans les grandes lignes les mêmes obligations que l’Union européenne.
Le pied de page est aussi parfois utilisé à des fins de SEO, en fournissant des
liens pour un accès rapide à des contenus prisés.
Fig 9.3. Exemple de pied de page.
Dans l’exemple, vous pouvez voir comment free move utilise le pied de page.
J’y ai placé un bref paragraphe sur qui est ClayverApp et ce qu’ils font.
J’ai mis plusieurs liens que je juge pertinents pour les différents profils de
visiteurs que j’ai définis dans les personas. Enfin, vous pouvez voir les icônes
de divers comptes de réseaux sociaux. Et les boutons de téléchargement de
l’application dans les différents stores.
Si je mets toutes les pièces du puzzle ensemble, une « page web typique »
pourrait ressembler à quelque chose comme l'exemple page suivante.
22. https://www.economie.gouv.fr/entreprises/site-internet-mentions-obligatoires#
117
Fig 9.4. Anatomie d’une page web.
Avant de passer aux différentes mises en page de section : les patterns23,

je souhaiterais rappeler quelques règles fondamentales du design visuel en
rapport avec la couleur, la typographie et la mise en page (ou composition).
Couleur24
La théorie sous-jacente à la couleur n’est pas trop difficile à comprendre, mais
elle est essentielle pour produire un bon design. Les trois principales couleurs
(appelées « primaires ») sont le bleu, le jaune et le rouge. Au moins en théorie,
elles peuvent être mélangées pour créer n’importe quelle autre nuance.
Si vous vous intéressez particulièrement à la manière dont tout cela fonctionne,

je vous recommande de jouer avec les dispositifs de couleur d’un outil comme
23. Schémas récurrents ou motifs.
24. Pour rappel, tous les visuels proposés dans l'ouvrage sont disponibles en couleur à cette adresse : https://
bit.ly/illustrations-csisc
118
Adobe Color25. Observer comment les curseurs de saturation, de teinte et de

contraste fonctionnent sur une image réelle vous donnera une assez bonne
idée de ce que chacun fait.
Relations entre les couleurs

La combinaison de différentes couleurs peut donner des résultats variés.
Lorsque vous recherchez un jeu de couleurs plus calme et minimaliste, vous
allez utiliser des nuances monochromes. Pour obtenir un look plus puissant ou
dynamique, vous choisirez des couleurs contrastées.
Contraste
Il s’avère que les zèbres sont, en fait, blancs avec des rayures noires. Mais l’en-
vironnement dans lequel ils vivent – la savane – est loin d’être noir et blanc. Il
semble que leurs couleurs ne les aident pas à se fondre dans l’environnement.
Les zèbres vivent généralement dans les troupeaux. Certains pensent que les
rayures ne les aident pas à se fondre dans l’arrière-plan, mais plutôt dans
le troupeau. Le motif brouille le contour d’un animal individuel – et l’énorme
tache de zèbre devient une cible trop grande pour un lion affamé.
Nous ne sommes pas si différents, les lions et nous. S’il n’y a pas assez de
contraste entre deux nuances, nous ne verrons pas de contour. S’il n’y a pas
assez de silence dans une chanson, nous n’entendrons pas la musique. Les
livres sont imprimés avec de l’encre noire sur du papier blanc à fort contraste
afin que les lettres soient aussi visibles qu’elles peuvent l’être.
Les contrastes sont utilisés dans l’art depuis aussi longtemps que l’art existe.
C’est un principe important dans le design graphique. Si vous voulez que
quelque chose soit très visible, faites en sorte qu’elle soit différente de tout le
reste. Si elle a besoin de se fondre dans les autres zèbres, alors faites-la similaire.
Vous pouvez lire des paires contrastantes d’une roue chromatique – elles
résident sur les côtés opposés. Outre le noir et le blanc, les trois contrastes de
couleur les plus communs que vous devez mémoriser sont le rouge et le vert,
le jaune et le violet, et l’orange et le bleu.
Je vous recommande de regarder ma vidéo26 sur la théorie de la couleur, pour

une meilleure compréhension.
La couleur en design contient une grande quantité d’informations.

25. https://color.adobe.com/fr/create
26. https://www.youtube.com/watch?v=eZH5kS9xGrM
119
Maintenant que vous avez une connaissance générale de la façon dont les
couleurs fonctionnent, voici quelques conseils pratiques sur la construction
d’une palette de couleurs pour votre prochain design.
Utilisez l’espace colorimétrique approprié

Avant de commencer à planifier un élément de design, tenez toujours compte
des circonstances. Est-ce pour une publication imprimée ou un site (une appli-
cation) web ?
Espace colorimétrique CMJN ou Cyan – Magenta – Jaune – Noir (avec des

teintes pour l’impression).
Espace colorimétrique RVB ou Rouge – Vert – Bleu (avec la lumière pour

l’écran).
Je sais que cela semble basique, mais c’est là que de nombreux designers
font une erreur et se retrouvent avec une mise en page bizarre à la fin.
Le cercle chromatique
Les publications et livres de beaucoup de designers recommanderont des
cercles chromatiques pour établir une palette de couleurs pour vos créations.
C’est également mon opinion.
Mais pour un début, ne vous prenez pas la tête avec ça ! Le cercle chromatique
vous donne beaucoup trop d’options. Surtout si vous ne savez quoi en faire.
Fig 9.5. Exemple de palette (harmonie) de couleurs monochromatiques. Source :

Le processus de conception d’un logo27.
27. LOTIN Henri, https://lotincorp.biz/downloads/le-processus-de-conception-logo/
120
C’est la paralysie du choix qui attend de se produire. D’ailleurs, pensez-vous

que les designers savent exactement de quelle nuance de bleu ils ont besoin
pour chaque design ? Non. Mon flux de travail personnel pour les couleurs est
le suivant :
1. Je choisis une couleur générique (par exemple « rouge » – et c’est juste un
rouge, sauf si le client est précis et évoque un rouge chinon ou terracotta) à
partir de laquelle commencer.
2. Je continue à changer la nuance de cette couleur au fur et à mesure que le
design progresse.
Le fait est que même les designers expérimentés ont du mal à sélection-
ner la bonne teinte de couleur, et le choix n’est souvent pas gravé dans la
pierre. Alors, faites-vous une faveur et évitez les outils du cercle chromatique,
quoique…
Si je dois y aller avec des palettes de couleurs (ou harmonies de couleurs) :

1. Je choisis une couleur générique (par exemple « rouge » – et c’est juste un
rouge, sauf si le client est précis et évoque un rouge chinon ou terracotta) à
partir de laquelle commencer.
2. J’ouvre Adobe Color, je colle la valeur hexadécimale de la couleur générique
et j’expérimente avec les différentes palettes.
Si vous êtes à l’aise avec ça, n’hésitez pas.
Inspirez-vous d’ailleurs
Je recommande toujours de tirer l’inspiration de l’extérieur. Les couleurs, ce-
pendant, peuvent être délicates, car elles ajoutent beaucoup à l’impact visuel
global d’une marque.
Il y a quelques options à votre disposition.
L’une consiste à rechercher la couleur à partir de photographies ou d’illus-

trations. La plupart des outils de cercle chromatique vous permettront de
télécharger une image et de faire glisser autour des sélecteurs de couleurs
pour construire une palette de couleurs. Cette méthode nécessite une certaine
habileté pour faire le bon choix. Je vous recommande l’outil gratuit d’Adobe,
Adobe Color.
121
Fig 9.6. Brand Colors est un répertoire

des palettes de couleurs de marques connues.
Une autre option consiste à copier les couleurs de marque d’une société exis-
tante28 et à la modifier légèrement. Il y a un nombre limité de couleurs (propres)
disponibles, il est donc peu probable que votre identité visuelle soit entière-
ment unique de toute façon. Pour modifier la palette de couleurs, effectuez
l’une des opérations suivantes, expliquée dans l’exemple d’Amazon :
Fig 9.7. La palette de couleurs d’Amazon à partir de la page d’accueil.
28. http://brandcolors.net/
122
Fig 9.8. Modification de la palette de couleurs d’Amazon.
Limitez-vous à 2 couleurs
Au cœur des principes du design réside la simplicité.
Une couleur fonctionne bien avec elle-même. La combinaison de deux cou-

leurs ne devrait pas être trop difficile. Mais introduire une troisième couleur
peut créer un problème. Soudain, vous devez prendre en compte trois rela-
tions. C’est beaucoup de tracas.
Fig 9.9. Palettes de couleurs d’entreprises technologiques
Une meilleure façon de traiter les couleurs est simplement de limiter vos créa-
tions à une ou deux couleurs et de les combiner seulement avec du noir et du
blanc. Vous pouvez toujours jouer avec différentes nuances de vos couleurs
principales.
Choisissez des couleurs « propres »

Les couleurs propres sont des couleurs qui ne contiennent pas (ou très peu)
de noir/gris.
123
Une erreur commune que je vois sur les sites de start-up est que les couleurs
utilisées sont atténuées et presque « sales ». Je me souviens d’avoir recouru à
ce genre de couleurs quand j’ai commencé à désigner parce qu’il me semblait
que toutes les autres couleurs vives et saturées avaient déjà été « prises » par
de grandes marques comme Mailchimp ou Twitter.
Fig 9.10. Palette de couleurs de Twitter
Il y a une raison pour laquelle de grandes entreprises bien conçues emploient

ces couleurs. Elles fonctionnent. Elles sont mémorisables et dégagent un
message positif.
Je vous recommande d’utiliser un outil comme Flat UI Color Picker29 pour

trouver vos couleurs de base.
Introduction à la hiérarchie des couleurs

Vous devez choisir l’une des couleurs comme couleur principale de votre
identité visuelle. Sinon, vous n’avez aucun système en place pour renforcer
la cohérence et votre identité de marque finira par utiliser les couleurs d’une
manière aujourd’hui, et d’une autre manière demain.
Optez pour l’une des couleurs qui sera utilisée pour 80 % de l’espace de
toutes les créations (sans compter l’espace dominé par le blanc et le gris) et
combinez-la avec la couleur secondaire.
Vous pouvez prendre exemple sur le site de Lotin Corp.
N’utilisez pas le noir comme couleur

Saviez-vous que le noir absolu n’existait pas ? Le noir signifie l’absence de
lumière, et en particulier dans le design d’écran (sites web, applications) où les
images sont dessinées avec la lumière, ce n’est pas réalisable.
Vous verrez rarement du noir dans les designs professionnels. Même quand il
semble noir, il est en fait gris. Le noir se comporte très agressivement lorsqu’il
29. https://www.flatuicolorpicker.com/
124
est combiné avec d’autres couleurs. De ce fait, vous ne devriez jamais l’utiliser
(surtout en aplat). Utilisez 80 % de gris si vous voulez de l’effet.
Typographie
La typographie accompagne l’humanité depuis le début même de l’histoire
humaine.
Des rouleaux mésopotamiens aux transcriptions des moines médiévaux, les

gens ont utilisé le texte pour communiquer des informations littéralement
depuis le début des civilisations.
L’écriture est encore fondamentalement le moyen le plus répandu de transmis-

sion de connaissances et d’informations d'une partie du monde à une autre.
Gutenberg et la typographie
L’invention ingénieuse de la machine d’impression de Johannes Gutenberg
a marqué le début d’une nouvelle ère passionnante. Non seulement pour un
partage plus facile des connaissances, mais aussi pour le design typogra-
phique. Les lettres (appelées « fontes mobiles ») ont d’abord été sculptées
dans du bois, puis fondues dans du métal (caractères en plomb).
L’empilage des lettres sur des barrettes de composition et l’estampage de

l’encre sur papier est resté la technique d’impression la plus populaire jusqu’à
l’introduction de l’impression offset dans les années 1870.
Au XXe siècle, les ordinateurs ont révolutionné la façon dont la police est conçue.
Les typographes30 n’ont plus besoin de fonctionner avec des blocs de fonte
physique. Mais aujourd’hui, ils dessinent des lettres individuelles à l’écran.
Le travail est encore très long. Le design d’une seule police de caractères peut
prendre jusqu’à 9 ans. Et, par conséquent, les polices peuvent devenir très
coûteuses.
La typographie est sans aucun doute la partie la plus fondamentale du design

graphique. Elle transmet directement l’information. Mais en même temps, elle
possède la capacité de magnifier ou d’inhiber une composition.
Dans cette section, je vais vous faire découvrir différents types de polices ainsi
que leurs différences. Cela vous aidera à apprendre à travailler avec succès
et à les combiner.
30. Wikipédia, Typographe, https://fr.wikipedia.org/wiki/Typographe
125
Qu’est-ce qu’une police en typographie ?

La plupart des gens utilisent indifféremment les termes « police de carac-
tères » et « fonte », mais ce n’est vraiment pas la même chose.
En typographie, une police de caractères (également appelée famille de po-

lices) est un ensemble d’une ou de plusieurs polices composées chacune de
glyphes partageant une même caractéristique de design.
Une police de caractères peut inclure un certain nombre de styles de police

différents. Par exemple, la famille de polices Helvetica a un certain nombre de
styles différents : gras, moyen, italique, léger, extra-gras… Ils sont très diffé-
rents les uns des autres, mais suivent toujours une fondation similaire.
Fig 9.11. Spécimen de la police de caractère Roboto.
126
Une police peut inclure un certain nombre de glyphes différents, de lettres,

chiffres, icônes, à la ponctuation. Il est important de sélectionner une police
qui prend en charge la langue que nous utilisons, mais plus sur cela bientôt.
La fonte est le fichier électronique (mini-logiciel) qui nous permet d’installer et

d’afficher une police de caractères particulière.
Typographie et structure des lettres

C’est la partie où je vous montre le fameux diagramme « Anatomie des carac-
tères », alors allons-y tout de suite.
Fig 9.12. Anatomie des caractères.

Source : Le processus de conception d’un logo.
127
- La hauteur d’x est généralement la hauteur de la lettre minuscule « x ». Cette

donnée est utile pour combiner les polices.
- La ligne de base est la ligne de fond sur laquelle toutes les lettres sont ali-
gnées. Certaines lettres (à savoir o, g, b, etc.) peuvent s’étendre légèrement
sur celle-ci pour obtenir un meilleur équilibre.
- Les ascendantes sont les parties verticales ou diagonales des lettres minus-
cules qui s’étendent au-dessus de la hauteur d’x.
- Les descendantes sont les parties verticales ou diagonales des lettres mi-
nuscules qui s’étendent en dessous de la ligne de base.
Lisibilité
Avant de plonger dans la science de l’esthétique typographique, vous devez
cocher une autre case très importante : faire lire et comprendre votre message.
L’exigence la plus élémentaire pour que les polices soient visibles consiste à
appliquer un contraste suffisant entre l’objet et son arrière-plan.
En règle générale, le texte noir sur fond blanc est plus lisible que le texte blanc
sur fond noir.
Fig 9.13. Texte noir sur fond blanc et texte blanc sur fond noir
Vous devez éviter de combiner de gros blocs de texte avec un arrière-plan

sombre et, dans les cas où vous devez simplement l’utiliser, prenez des dis-
positions supplémentaires pour améliorer la lisibilité (par exemple, augmenter
l’interlignage, l’approche, etc.). Certaines polices plus légères ne fonctionnent
pas bien sur des arrière-plans sombres.
128
Préférez les minuscules aux majuscules.
De nombreuses études ont été faites sur la lisibilité de toutes les capitales par
rapport aux minuscules dans le texte. Il s’avère que nous sommes en train
de lire des mots dans les prétendues « unités de mots ». La dynamique des
formes des mots en minuscules nous permet de survoler une phrase au lieu
de la lire lettre par lettre.
Fig 9.14. Texte en minuscule. « Élémentaire, mon cher Watson ! »
Dans les capitales, il n’y a pas de dynamique apparente. Nous lisons des
lettres majuscules, et donc beaucoup plus lentement.
La lisibilité dépend en grande partie de la police de caractères. Cependant,

il existe quelques dispositions que nous pouvons prendre pour améliorer la
lisibilité des plus gros blocs de texte.
Interligne en typographie
L’interligne tire son nom des blocs d’espacement qui étaient utilisés dans
l’impression traditionnelle et étaient fabriqués à partir de plomb. Un autre mot
commun avec un sens similaire est « hauteur de ligne », utilisé principalement
dans le design et le développement de sites web.
Fig 9.15. Différents réglages d’interligne
L’interlignage donne à vos créations un espace vertical et améliore la lisibilité.

La règle générale est : « plus large est le bloc de texte, plus il faut d’interli-
gnage pour aider l’œil à passer à la ligne suivante sans erreur ».
129
Indentation (retrait)
L’indentation de paragraphe aide les lecteurs à distinguer la fin d’un para-
graphe et le début d’un autre.
Fig 9.16. Avec ou sans retrait, le paragraphe ?
Il existe deux façons de commencer un nouveau paragraphe : en indentant la

première ligne ou en laissant un espace entre les blocs de texte.
Hiérarchie en typographie : la composition typographique

« Sur le web, une grande partie de notre contenu est du texte.
Cela signifie qu’il est important de comprendre comment renforcer
typographiquement cette hiérarchie. Une compréhension claire
de la hiérarchie aboutit à des créations plus belles,
signifiantes et communicantes qui servent mieux leur audience. »
M andy B rown 31
L’application de la hiérarchie entre les différents titres et le corps de texte

va grandement aider à améliorer la compréhension de votre communication
écrite.
Pour appliquer la hiérarchie, nous pouvons adapter l’espacement, l’échelle et

le contraste de graisse dans le texte.
31. Mandy Brown est cofondatrice et rédactrice en chef de A Book Apart, rédactrice en chef de A List Apart
et directrice de la communication chez Typekit.
130
Fig 9.17. Espacement, échelle et contraste
Le même principe est utilisé sur les pages de destination, et avec beaucoup
de succès. Le titre principal peut faire ou défaire un e-mail de vente, et com-
ment il est conçu est tout aussi important.
Classification de polices
Au sens le plus large, les polices peuvent être regroupées en deux types dif-
férents : serif et sans-serif. La différence réside dans les « empattements » :
Fig 9.18. Empattements [serifs]
131
Les polices sans empattement [sans-serif] sont considérées comme plus

applicables à l’écran, tandis que les polices à empattement [serif] sont géné-
ralement utilisées dans les documents imprimés, en particulier les livres.
Comme toutes les règles de design, la règle « serif pour imprimer, sans-se-
rif pour l’écran » peut également être brisée – un exemple est la police serif
Georgia, la police qui a été développée pour Microsoft exclusivement pour les
écrans basse résolution.
Il y a eu beaucoup de débats pour savoir si les serif sont plus facilement

lisibles que les sans-serif. Après avoir inspecté plus de 50 études différentes
sur le sujet, Alex Poole32 a conclu qu’il n’y avait pas assez de preuves pour
soutenir la supériorité supposée des polices de caractères serif en ce qui
concerne la lisibilité.
Ces deux types de polices n’ont pas été introduits en même temps. En fait,
ce n’est que dans les années 1800 que les fontes sans-serif sont apparues, et
c’est pourquoi l’utilisation d’une police serif peut ajouter quelque chose d’un
style archaïque ou classique au design.
Fig 9.19. Logos Pull & Bear (sans-serif) et Ralph Lauren (serif)
32. POOL Alex, Which Are More Legible: Serif or Sans Serif Typefaces?, http://alexpoole.info/blog/which-are-
more-legible-serif-or-sans-serif-typefaces/
132
Pull & Bear s’adresse à un public plus jeune avec des budgets plus réduits. De
l’autre côté, Ralph Lauren est l’une des marques de vêtements les plus haut
de gamme, et son logo au look classique permet de le distinguer des autres.
Les polices peuvent modifier votre création dans un certain sens. Pour déve-
lopper cela, les polices sont regroupées en diverses classifications basées
sur l’ère et le style. Il existe deux classifications courantes : Vox–ATypI33 et
Deutsche Normenausschuss34.
Même si elle est souvent négligée, la typographie peut affecter directement le

nombre de personnes qui lisent votre message. Et si elles ne le lisent même
pas, elles n’achèteront certainement pas. C’est vraiment simple.
Dans cette section, je vous montrerai comment sélectionner les bonnes po-
lices et comment les combiner avec d’autres.
Choisir les bonnes polices pour votre typographie

Assurez-vous de tester la police dans l’environnement dans lequel elle sera
utilisée, et vérifiez sa lisibilité avant d’effectuer un achat.
Bien sûr, il existe également des questions d’achat typiques comme :

- L’achat par police dans une famille de police de caractères.
- Ou l’achat global de la famille de police de caractères.
Toutes les polices ne sont pas intégrables sur le web. Alors, avant d’en ache-
ter une à utiliser pour votre site web, assurez-vous qu’il existe une licence
pour le web disponible et abordable pour vous.
Vérifiez également de nouveau si tous les glyphes (types de caractères) dont

vous avez besoin sont effectivement inclus dans la police, ainsi que toutes les
graisses (léger, normal, gras…) dont vous aurez besoin dans vos créations.
Mais bien sûr, il y a beaucoup plus dans le choix des polices que les détails
techniques.
Prenez le contenu en compte :

Votre typographie doit correspondre parfaitement à votre contenu. Par
exemple, une police display lourde sera illisible dans les blocs de texte, et une
police sans empattement pourrait paraître trop légère pour les titres.
33. http://www.tnformation.com/lettre/pdf/Classification_VOX_ATyp.pdf
34. https://www.din.de/de/ueber-normen-und-standards/din-norm
133
Encore une fois, les polices display doivent au mieux être évitées, tout comme
la grande majorité des polices gratuites.
Fig 9.20. Le bon choix de police est important.
La police du corps de texte sur l’image ci-dessus n’est pas facilement lisible
et ne convient donc pas pour cet usage.
Si une fonte a beaucoup de polices différentes, c’est bon signe. Quelqu’un

(un typographe) doit avoir passé beaucoup de temps à la concevoir. Une autre
façon de choisir les bonnes polices à chaque fois est de simplement s’en tenir
à celles qui ont fait leurs preuves.
Restez avec les classiques

Chacun des meilleurs graphistes n’utilise généralement qu’une poignée de
polices dans tous ses projets. Principalement, c’est parce qu’il est très familier
avec la façon dont la police se comporte dans toutes les occurrences.
Beaucoup de ces polices se classent également sur les listes des « meilleures
polices » et certaines, comme Helvetica et Rockwell, sont considérées comme
des classiques. N’hésitez pas à voler cette liste !
Une autre raison est que même s’il y a une tonne de polices disponibles, la
grande majorité est inutilisable.
134
Fig 9.21. 14 polices « classiques ».
Vous avez besoin d’un œil exercé pour reconnaître les bonnes polices ou vous
pouvez simplement utiliser les classiques intemporelles qui ont été reconnues
par les designers depuis des lustres.
Comment combiner les polices

Typiquement, vous aurez besoin de deux polices différentes pour chaque
design que vous créez : une pour le corps de texte et une pour les titres. N’es-
sayez pas d’en ajouter une troisième à moins de savoir ce que vous faites.
La clé, tout comme avec les couleurs, est de rester simple. Chaque nouvelle
police que vous introduisez dans la combinaison est une autre chance que
quelque chose se passe mal et plombe votre design entier.
135
Contraste
Fig 9.22. Contraste dans la combinaison de deux polices.
Deux polices doivent être contrastées pour que la combinaison fonctionne.

Nous pouvons associer des polices de largeur, d’épaisseur et de style diffé-
rents. Généralement, la combinaison d’une police serif et d’une police sans-
serif peut très bien fonctionner.
Fonderie
Fig 9.23. Combinaison de polices issues de la même fonderie.
Décider si une combinaison de polices a effectivement assez de contraste ou

non peut être assez difficile pour un œil non averti. Vous pouvez essayer d’uti-
136
liser deux polices faites par la même fonderie. Typiquement, celles-ci auront
assez de fonctionnalités similaires pour être belles ensemble.
Famille de police
Alternativement, vous pouvez utiliser une famille de polices et choisir sim-
plement deux graisses très différentes, par exemple Light et Heavy. Voici un
exemple de ce que je veux dire :
Fig 9.24. Différentes graisses pour la combinaison de polices.
Hauteur d’x
Fig 9.25. Prise en considération de la hauteur

d’x pour la combinaison de police.
137
Une astuce que de nombreux designers professionnels utilisent est de les

comparer selon leur hauteur d’x. Il y a une grande chance que les polices
assorties donnent bien ensemble.
Voler une palette de polices

C’est probablement le moyen le plus simple. Vous pouvez soit « voler » une
combinaison de polices d’une autre marque, soit utiliser un outil tel que Type-
Genius35 pour vous aider à en générer une qui soit unique.
Fig 9.26. Combinaison de polices inspirée

du site web Business Made Simple.
Mathématiques de la typographie
Les principes de design sont en fait un tas d’équations mathématiques.
Comme vous le verrez, ceci est particulièrement vrai pour la typographie.
Titres
Pour que la hiérarchie fonctionne, il doit y avoir une sorte de contraste entre
les paragraphes et les titres.
Ce contraste varie fortement d’une création à l’autre et il est difficile d’établir

ce qui est suffisant. Une chose est cependant cruciale – plus le contraste
visuel entre les deux polices est important, moins le contraste d’échelle est
important.
35. Canva, Canva’s ultimate guide to font combinations, https://www.canva.com/learn/the-ultimate-guide-
to-font-pairing/
138
Smashing Magazine a conclu que le ratio optimal entre les titres et le corps
de texte est de 1,9636. La formule pour calculer la taille de la police du titre en
fonction de la taille de la police du corps de texte est alors :
taille de la police du corps de texte x 1,96 = taille de la police du titre
Interligne
L’interlignage ou la hauteur de ligne améliore non seulement la lisibilité, mais
rend également vos créations beaucoup plus professionnelles.
Vous obtiendrez toujours un très bon résultat avec un interligne de 1,6. Ce

ratio, cependant, ne fonctionnera pas dans les titres, où le texte est beaucoup
plus grand et il y a moins de lignes. La hauteur de ligne recommandée pour les
titres en majuscules est de 1 et de 1,2 pour les petites capitales.
Paragraphes
Plus les lignes sont longues, plus l’interligne est grand, d’après une règle typo-
graphique. Une autre dit que les lignes devraient avoir environ 55 caractères
pour maintenir une bonne lisibilité.
Une autre mesure à garder à l’esprit est l’espacement entre les paragraphes.
Si le rythme de la page doit être maintenu, l’espacement des paragraphes doit

être lié à l’interlignage de base. Par exemple, le texte sur une page est défini
à 12 px avec une hauteur de ligne de 1.5 em, faisant de chaque ligne 18 px
de hauteur. Afin de garder le rythme du texte, l’espacement vertical entre les
blocs devrait également être de 18 px.
Ceci est réalisé en définissant les marges hautes et bas égales à la hauteur
de la ligne.
Taille des caractères

En règle générale, le caractère ne doit jamais être inférieur à 6-8 pt pour une
impression à 300 dpi. Pour le web, les polices les plus petites commencent
généralement à 12 px, mais les tendances de création actuelles commandent
des tailles plus grandes à partir de 16 px pour le corps de texte.
Crimes typographiques
Vous rappelez-vous qu’on a dit que les règles de design peuvent être bri-
sées ? Oubliez ça. Les règles suivantes doivent être strictement respectées,
sauf si vous voulez un design à l’apparence non professionnelle.
36. https://www.smashingmagazine.com/2016/03/meaningful-web-typography/
139
Ne comprimez pas ou n’étirez pas les polices

Même si techniquement Photoshop le permet, vous ne devriez jamais le faire.
Les polices sont soigneusement conçues lettre par lettre pour avoir le meilleur
aspect possible. Le redimensionnement non professionnel ne fera que déte-
riorer les formes et rendre votre design non professionnel.
Évitez les polices display

Vous connaissez probablement déjà la haine contre Comic Sans. Cependant,
la plupart des polices display partagent les mêmes caractéristiques défec-
tueuses. Il est préférable d’éviter les polices avec trop de caractère – rap-
pelez-vous, la typographie est là pour laisser les gens lire le texte, pas pour
attirer l’attention sur elle-même.
Ignorez le Faux Bold et le Faux Italique

Une police n’a pas de gras, pas de problème, il y a une fonction Photoshop
qui ajoute de la graisse. N’est-ce pas ?
Connaissez vos guillemets

C’est un genre de niveau supérieur en typographie, mais important néan-
moins. Ignorer cette règle peut donner un air amateur à vos créations.
Fig 9.27. Crime typographique – Utilisez les bons guillemets

dans le bon contexte.
140
N’utilisez pas la justification
Fig 9.28. Crime typographique – N’utilisez pas la justification.
Alignez à gauche (ou du côté à partir duquel votre texte se lit). Le justifier ou
l’aligner sur les deux côtés ajoutera un espacement supplémentaire entre les
mots, ce qui affecte la lisibilité.
Il arrive très souvent que vous ayez l’embarras du choix. Entre votre bon sens,
et les tendances du moment, tout se bouscule dans votre tête. Ne cédez pas
à la panique, respectez simplement ces bonnes pratiques.
Mise en page
La mise en page ou la composition est le processus de placement et d’orga-
nisation du contenu sur un plan de travail. Il peut s’agir d’un site web, d’une
interface d’application ou d’une page dans un journal. Une bonne composi-
tion est non seulement agréable à regarder, mais transmet aussi efficacement
le message du texte et des graphiques au public.
Il s’agit sans doute de l’ensemble de principes le plus difficile à maîtriser en

matière de design graphique.
Mais il est absolument essentiel pour les interfaces conviviales et les sites
web lisibles.
Dans cette section, je vais présenter les principes les plus importants qui vous
aideront à créer vos mises en page.
Hiérarchie
Une hiérarchie visuelle aide les lecteurs à analyser un texte, à savoir où entrer
et sortir et comment choisir parmi ses offres.
141
Les humains sont très influencés par la façon dont les choses sont organisées.
Que ce soit sur un site web, dans un livre ou sur les tablettes des magasins.
Les produits placés à la hauteur des yeux se vendent beaucoup plus que ceux
disposés sur l’étagère inférieure.
Les journaux présentent les dernières nouvelles sur la première page en gros
titres épais. Les nouvelles de moindre importance reçoivent moins de poids
visuel et ne seront lues qu’après l’histoire principale.
Si ces principes de hiérarchie dans les communications n’étaient pas appli-

qués, beaucoup d’informations essentielles finiraient par être non transmises
ou mal comprises. L’exemple des produits « vedette » dans les boutiques en
ligne en témoigne.
Les tests A/B37 prouvent que le fait de marquer l’un des produits dans la sélec-
tion comme « recommandé », « mis en vedette » ou « populaire » (et donc de
l’augmenter hiérarchiquement parmi les autres options) augmente les conver-
sions de chiffre d’affaires.
C’est pourquoi il est important de guider les yeux de vos clients avec la
hiérarchie.
Vous pouvez le faire avec l’échelle ou le contraste. Vous rappelez-vous quand

nous avons parlé de contraste de couleurs ? De même, le contraste des tailles
de police et de l’épaisseur peut affecter la manière dont les éléments d’une
page sont expérimentés.
Par règle, l’élément le plus différent du reste d’une composition se démar-

quera le plus. Si le titre est relativement grand par rapport au texte de l’article,
nos yeux se poseront d’abord sur le titre.
37. Le test A/B est une technique de marketing qui consiste à proposer plusieurs variantes d’un même objet
qui diffèrent selon un seul critère afin de déterminer la version qui donne les meilleurs résultats auprès des
consommateurs.
142
Fig 9.29. WordPress met un accent visuel supplémentaire

sur son plan le plus important et le plus rentable.
Examinez l’exemple de la figure 9.30. Pouvez-vous dire en un coup d’œil

quelles sont les informations les plus importantes dans l’exemple A ? Pouvez-
vous dire quelle est l’information la plus importante dans l’exemple B ?
La plupart des gens trouveront que l’exemple B est la mise en page la plus
facile à comprendre, même avec seulement des rectangles et des carrés. En
effet, la disposition des éléments de l’écran, la taille relative et la proportion
des éléments impliquent leur importance et guident le spectateur sur ce à quoi
il faut prêter le plus d’attention.
Fig 9.30. A. Exemple sans hiérarchie visuelle,

B. Exemple d’une hiérarchie visuelle.
143
Taille
La taille des titres et des sous-titres donne au spectateur un indice sur l’ordre
et l’importance. Les titres auront tendance à être plus grands et plus impo-
sants en raison de la taille contrastée, du poids visuel ou de la couleur. En
revanche, une petite bande de texte au bas de la page dit tranquillement : « Je
ne suis qu’un pied de page », donc moins importante. (Figure 9.31)
Fig 9.31. Exemple de taille
144
Position
En regardant simplement la taille, la position et les couleurs de la mise en page
de la figure 9.32, vous pouvez deviner les éléments les plus importants de
chacun des quatre exemples.
Fig 9.32. Façons de distinguer l’importance par position, taille ou couleur.
Densité
La densité fait référence à la quantité d’espace entre les éléments de l’écran.
Examinez l’exemple de la figure 9.33. La gauche montre une mise en page
plus dense où le contenu est étroitement rassemblé. L’exemple de droite a un
aspect plus ouvert avec un contenu réparti uniformément.
L’exemple moins dense sera également légèrement plus difficile à lire et pour
le spectateur à distinguer quels éléments sont liés les uns aux autres.
145
Fig 9.33. Exemple de plus de densité et de moins de densité
Couleur de l’arrière-plan
L’ajout d’une nuance ou d’une couleur d’arrière-plan attirera l’attention sur un
bloc de texte et le distinguera des autres textes. L’exemple de gauche dans la
figure 9.34 a un arrière-plan cohérent pour tous les éléments.
Cela n’implique aucune distinction et une continuité de l’importance des élé-

ments. En comparaison, dans l’exemple sur le côté droit de la figure, l’arrière-
plan et les éléments de contraste au milieu attirent immédiatement le regard,
ce qui implique plus d’importance. Le contraste attire l’attention.
Fig 9.34. Exemple sans couleur d’arrière-plan et couleur d’arrière-plan
146
Rythme
Les listes, les grilles, les espaces et les éléments alternés tels que les titres et
les résumés peuvent créer un rythme visuel fort qui attire irrésistiblement l’œil,
comme le montre la figure 9.35.
Fig 9.35. Listes et grilles pour créer un rythme visuel.
Mettre en valeur les petits objets

Pour faire ressortir les petits objets, placez-les en haut, le long du côté gauche
ou dans le coin supérieur droit. Donnez-leur un contraste élevé et un poids
visuel, et mettez-les en valeur avec des espaces blancs. Mais notez que dans
un écran contenant beaucoup de texte, comme la plupart des sites web,
certains contrôles – en particulier les champs de recherche, les champs de
connexion et les gros boutons – ont tendance à se démarquer de toute façon.
Il s’agit moins de caractéristiques visuelles brutes que de sens : si quelqu’un

recherche une zone de recherche, par exemple, ses yeux iront directement sur
les champs de texte de la page. (Ils pourraient même ne pas lire les étiquettes
de ces champs de texte.) Une autre façon de mettre en évidence les petits
éléments consiste à utiliser l’espacement et le contraste pour les distinguer,
comme illustré à la figure 9.36.
147
Fig 9.36. Techniques pour attirer l’attention sur de petits objets.
Quatre principes importants de Gestalt

« Gestalt » est un terme issu d’une théorie psychologique qui s’est imposée
dans les années vingt. « Gestalt » est un mot allemand qui signifie « forme »
ou « figure ». En design, on se réfère souvent aux principes de Gestalt qui
font référence à un ensemble de règles montrant la façon dont les humains
perçoivent les objets visuels.
La théorie du regroupement et de l’alignement a été développée au début du

XXe siècle par les psychologues de la Gestalt. Ils ont décrit plusieurs proprié-
tés de mise en page qui semblent être câblées dans nos systèmes visuels.
Proximité
Lorsque vous rapprochez les choses, les téléspectateurs les associent les
unes aux autres. C’est la base d’un regroupement solide de contenu et de
contrôles sur une interface utilisateur (UI). Les éléments groupés semblent
liés. Inversement, l’isolement implique une distinction.
148
Fig 9.37. Le principe Gestalt de proximité
Similarité
Les objets de forme, de taille ou de couleur similaires sont perçus comme
étant liés les uns aux autres. Si vous avez quelques éléments « d’un type »
et que vous souhaitez que les visiteurs les voient comme des alternatives
tout aussi intéressantes, donnez-leur un traitement graphique identique (et
distinctif).
Une liste de nombreux éléments similaires, disposés en une ligne ou une co-
lonne forte, devient un ensemble d’éléments pairs à afficher dans un certain
ordre. Alignez ces éléments très précisément les uns avec les autres pour
créer une ligne visuelle. Les exemples incluent les listes à puces, les menus
de navigation, les champs de texte dans un formulaire, les tableaux à lignes et
les listes de paires de titres et de résumés.
Est-ce qu’un ou plusieurs articles sont plus « spéciaux » que les autres ? Don-
nez-lui un traitement légèrement différent, comme une couleur d’arrière-plan
contrastée, mais sinon, gardez-le cohérent avec ses pairs (voir l’exemple à
droite dans la figure 9.38). Ou utilisez un élément graphique pour perturber
la ligne le long de laquelle les éléments sont alignés, comme une bosse, un
chevauchement, ou quelque chose à un angle.
149
Fig 9.38. Regroupement d’éléments pairs liés (à gauche)

et distinction de deux éléments parmi les pairs (à droite).
Continuité
Nos yeux suivront naturellement les lignes et les courbes perçues formées par
l’alignement d’autres éléments, comme le montre la figure 9.39.
Fig 9.39. Deux exemples de continuité visuelle.
Clôture
Le cerveau va naturellement « fermer » les lignes pour créer de simples formes
fermées telles que des rectangles et des taches d’espaces blancs, même si
elles ne sont pas explicitement dessinées pour nous.
Dans l’exemple de la figure 9.40, vous verrez probablement un chien. Mais

cette forme n’est pas réellement représentée dans l’image, toutefois l’œil
complète les parties manquantes dans votre cerveau.
150
Fig 9.40. Exemple de la loi de clôture en Gestalt.
Ces principes sont mieux utilisés en combinaison les uns avec les autres.
La continuité et la clôture expliquent l’alignement. Lorsque vous alignez des
éléments, vous formez une ligne continue avec leurs bords, et les utilisateurs
suivront cette ligne et supposeront une relation. Si les éléments alignés sont
suffisamment cohérents pour former une forme – ou pour en constituer une à
partir de l’espace vierge ou « espace négatif » qui l’entoure – la fermeture est
également à l’œuvre, ajoutant à l’effet.
Espace vierge
Une mise en page peut être facilement ruinée si elle n’a pas assez d’espace
pour « respirer ». Dans une certaine mesure, comprendre la hiérarchie et l’ap-
pliquer de la bonne manière vous aidera à éviter l’encombrement, mais il y a
plus à savoir sur l’espacement.
151
C’est ainsi que la première distinction à comprendre c’est entre les espaces
vierges micro et macro. La hauteur de ligne (ou interligne) est un espace vierge.
Les espaces macro séparent les éléments à plus grande échelle.
L’espace vierge est un outil puissant pour introduire un effet visuel spécifique
dans les designs. Les designers utilisent les espaces vierges pour créer un
sentiment de sophistication et d’élégance pour les marques haut de gamme.
Couplés à une utilisation sensible de la typographie et de la photographie, les
espaces généreux sont visibles sur les marchés du luxe.
Proximité, espacement et regroupement

La proximité (dont j’ai déjà parlé au niveau de la section sur la Gestalt) entre
les éléments donne un autre ensemble d’informations non écrites au lecteur.
Les éléments qui sont regroupés en étant proches les uns des autres (séparés
par un espace vierge) et éloignés du reste (séparés par des espaces macro)
créent une seule unité. Une unité aide les observateurs ou les lecteurs à trou-
ver rapidement ce qu’ils recherchent.
Les outils d’édition dans les interfaces illustrent tout à fait ce principe :
Fig 9.41. Utilisation d’espace dans le design d’interface.
Vous pourriez regrouper des éléments en les entourant simplement d’une

ligne, mais ce serait un moyen de regroupement beaucoup moins efficace et
qui pourrait ne pas correspondre à la marque. Même la science le dit :
- La couleur, l’arrière-plan partagé et la colocalisation sont des indices de
regroupement plus forts que des contours.
- Le groupement peut également donner des informations supplémentaires
sur les éléments (comme leur fonction).
Équilibre
La dernière partie de la théorie de la mise en page est l’équilibre. Cet ensemble
de principes est là où des mises en page entières se rejoignent et est généra-
lement assez difficile à comprendre pour les designers débutants. L’utilisation
152
correcte du principe d’équilibre assurera que les informations présentées sur

une page sont professionnelles et esthétiques.
L’équilibre ne signifie pas nécessairement qu’une mise en page est symé-

trique, même s’il est beaucoup plus complexe de créer des motifs asymé-
triques. Voici deux exemples équilibrés :
Fig 9.42. L’alignement centré n’est pas le seul moyen d’atteindre l’équilibre dans
une mise en page. Source : Design for Founders : The Book.
Notez que les différents éléments n’ont pas toujours exactement le même
poids visuel. Un bloc de texte peut sembler beaucoup plus léger qu’un gros
titre épais, ce qui peut rendre l’ensemble déséquilibré.
Par exemple, des polices plus épaisses et avec moins de micro-espace-

ment entre les lignes rendront le texte plus foncé et plus lourd. Ce qui devra
être compensé par un grand nombre d’espaces ou d’éléments également
« lourds » dans la mise en page.
La clé pour équilibrer vos créations est l’utilisation correcte des espaces.
Les techniques de mise en page en lean design sont l’application des notions
fondamentales comme l’espacement, l’équilibre, la hiérarchie…
L’espacement a déjà été discuté dans une certaine mesure dans les articles
(et la vidéo) sur la typographie. En particulier, l’espacement entre les lignes de
texte et les différentes parties du corps de texte.
153
Maintenant, il nous reste à hacker l’espacement dans les mises en pages au

niveau macro. Mais aussi à mettre en œuvre les principes de design graphique
dans des exemples concrets.
Hiérarchie en 3 étapes faciles

L’application de la hiérarchie mettra en avant votre contenu le plus important.
Cela vous aidera à augmenter les inscriptions à votre application ou à vendre
plus de t-shirts, par exemple.
Cela améliorera la lisibilité de vos articles de blog et aidera les visiteurs à

exécuter l’action que vous voulez qu’ils fassent.
Le principe de la hiérarchie peut être difficile à comprendre. J’ai donc déve-

loppé un processus simple à suivre lorsque vous voulez l’utiliser. Suivre ces
étapes vous assurera de ne rien oublier et de séparer le processus de prise de
décision du design.
Voici comment appliquer systématiquement la bonne quantité de hiérarchie

dans vos créations :
Fig 9.43. Liste des éléments de l’interface visuelle.

1. Proposition de valeur 2. Appel à l’action 3. Image en vedette
4. Preuve sociale 5. Fonctionnalité détaillée 6. Logo 7. Navigation.
154
Créez une liste de tous les éléments

Supposons que vous souhaitiez concevoir une page de destination. Sur celle-
ci, vous aurez besoin d’un certain nombre d’éléments :
1. Le titre.
2. Les différentes parties du corps de texte.
3. L’image du produit.
4. Le bouton d’appel à l’action.
5. Les témoignages.
6. Etc.
Au lieu de commencer à dessiner des wireframes ou plonger dans Figma, il

suffit de mettre tous les éléments sur une liste.
Organisez les éléments par importance

La prochaine étape consiste à prendre les éléments et à les classer par ordre
d’importance. Demandez-vous :
Quel est l’élément le plus important ici ?
Dans l’exemple d’une page de destination, le must de toute page de desti-

nation est un appel à l’action. Sans cela, il ne vous reste qu’une présentation
PowerPoint sans but. Le sommet de votre liste est donc l’appel à l’action.
Triez les éléments dans l’ordre d’importance avant de passer à l’étape suivante.
Suivez la liste pour créer la mise en page

Vous avez maintenant suffisamment de données pour commencer à faire
le design. Vous devez à présent utiliser des principes graphiques tels que
l’échelle, la couleur et le contraste pour ajouter et supprimer l’accent mis sur
divers éléments.
L’appel à l’action doit être assez différent du reste du site pour encourager
autant que possible les clics.
155
Fig 9.44. Cette page de destination est facile à scanner et axée sur l’offre.
Elle pourrait très bien avoir été créée en utilisant la technique
de la hiérarchie en trois étapes.
156
Faites preuve de bon sens et référez-vous à des éléments de design similaires

pour vous aider à prendre certaines décisions. Par exemple, même si l’appel
à l’action est en haut de la liste, il n’est pas logique de le placer en haut de la
page et de le rendre plus grand que le titre principal.
Grilles et ratios
Les grilles sont un petit outil puissant dans la boîte à outils du designer dé-
butant. Si vous avez une expérience dans le développement front-end, vous
reconnaîtrez les noms des systèmes de grille CSS comme Bootstrap38 et Un-
semantic39. Vous savez probablement aussi que le développement d’une page
web sans un plan est un vrai cauchemar.
Les systèmes de grille sont également utilisés dans le design d’impression et

ailleurs. Une grille vous donne un plan sur lequel vous pouvez placer et orga-
niser les éléments d’une mise en page.
Elle supprime un ensemble de décisions difficiles comme l’application des

espaces et de l’équilibre du flux de travail. De plus, elle vous permet de vous
concentrer sur d’autres aspects du design graphique.
Faire simplement attention à aligner tous les éléments sur les mêmes lignes
verticales peut immensément améliorer toute composition.
Alignement et grille
Dans le design numérique, la lisibilité est essentielle. Aider à guider le visiteur
vers l’information et l’action est essentiel. La création d’un design basé sur une
grille (figure 9.45) permet au designer de se concentrer sur le contenu, étant
assuré que la mise en page aura cohérence visuelle et équilibre (Figure 9.46).
Les grilles aident également plusieurs designers à travailler sur des mises en
page distinctes mais liées.
38. https://bootstrapstudio.io/
39. https://unsemantic.com/
157
Fig 9.45. Mise en page sans grille (à gauche)

et mise en page conçue sur une grille (à droite).
Fig 9.46. Grille superposée sur les exemples de la figure 9.45.
Les grilles se retrouvent dans toutes les créations numériques, et elles sont
fondamentales pour créer des designs qui seront réactifs et capables d’ac-
cueillir un contenu dynamique.
Il existe quatre types de grilles : en bloc, en colonne, modulaire et hiérarchique.
Mais les designers les combinent généralement pour avoir des dispositions
sophistiquées.
158
Fig 9.47. Différents types de grille.
Fig 9.48. Anatomie d’une grille en colonne.
159
L’utilisation d’une grille est un bon moyen de s’assurer que le contenu créera
une composition visuellement harmonieuse et contribuera à réduire la charge
cognitive de votre visiteur.
Pour les designers débutants, les grilles de 12 ou 16 colonnes que vous trou-
verez dans la plupart des systèmes de grilles peuvent être assez déroutantes.
En réalité, elles offrent trop de marge de manœuvre.
Vous pouvez simplifier ces systèmes de grille en utilisant des grilles à 3 et

à 4 colonnes. Puis créer l’une des mises en pages classiques que je vais
décomposer dans cette section.
N’ayez pas peur d’utiliser ensemble ces combinaisons de colonnes dans la

même mise en page.
Tiers
Fig 9.49. Grille de tiers appliquée à l’interface graphique.

Plus d’inspiration sur https://www.niceverynice.com/
Les combinaisons de grilles les plus simples sont les tiers. Vous reconnaîtrez
cette disposition à partir d’un certain nombre de sites web de start-up.
Vous pouvez vous référer aux Patterns #2A et #2B dans la section suivante.
160
Ce type de grille est souvent utilisé pour organiser des éléments tels que des
témoignages, des billets de blog ou des grilles de prix, parfois pour comparer
ces dernières les unes aux autres.
Nombre d’or et techniques de mise en page
Fig 9.50. Pour en savoir plus sur le nombre d’or, les grilles
et les autres ratios, cette présentation Slideshare40 est assez détaillée.
Dans toute mon école de design, nous avons été fascinés par le nombre d’or.
Alors que l’idée est assez intéressante en soi (que tout dans la nature se rap-
porte en quelque sorte au 1:1,618), elle est loin d’être exacte.
En optant pour la règle des tiers41 » beaucoup moins mystérieuse, mais beau-
coup plus simple et utilisée en photographie, vos mises en page sembleront
presque aussi bonnes que les statues de la Renaissance.
Quarts
Les quarts sont la petite sœur des tiers. Ils peuvent contenir des unités d’infor-
mation plus petites. Je les ai vus utilisés pour signaler les caractéristiques
40. LOTIN Henri, Géométrie sacrée : Principes & applications, https://fr.slideshare.net/atnhenri/gomtrie-sacre-

principes-et-applications
41. LOTIN Henri, La règle des tiers en mise en page, https://academy.lotincorp.biz/la-regle-des-tiers-
connaissez-les-points-forts-de-vos-mises-en-pages/
161
d’un produit SaaS sur une page de destination ou pour décomposer l’infor-
mation dans le pied de page.
Vous pouvez vous inspirer du Pattern #7 dans la section suivante pour les
exécuter correctement et de manière originale.
Barre latérale [sidebar]

Cette disposition est basée sur les tiers et les quarts. Sauf qu’elle destine l’une
des deux colonnes les plus périphériques à être une « barre latérale ». Cela ne
doit pas être une barre latérale littérale, juste un placement asymétrique des
éléments.
Elle est utilisée pour rendre les mises en page plus dynamiques et pour casser
la grille symétrique centrale des sites web. Veillez à alterner l’alignement à
droite et à gauche pour équilibrer l’asymétrie. Voir la barre latérale sur le côté
droit de cette page par exemple.
Vous verrez très souvent des barres latérales dans des sites de nouvelles ou
d’annonces.
Techniques de mise en page en une colonne

Très commune dans le type « long letter » des pages d’atterrissage et le de-
sign moderne d’articles de blog. Elle permet aux lecteurs de se plonger dans
le contenu sans les distractions des bannières de la barre latérale, des boîtes
d’inscription et autres appels secondaires à l’action.
Comme nous l’avons appris dans les articles sur la typographie, les colonnes
de texte ne peuvent pas être trop larges sans que la lisibilité en prenne un
coup. C’est pourquoi vous devez introduire une marge des deux côtés de la
colonne de contenu.
162
Fig 9.51. Une colonne est une stratégie de grille commune pour les pages
de destination, car elle permet au visiteur de rester concentré sur l’offre.
Hacks d’espacement
Comme nous l’avons établi dans l’article précédent, l’espacement peut aider
à rendre vos créations plus professionnelles. L’utilisation de grilles vous don-
nera un plan solide à suivre et supprimera certains des travaux requis. Les
quelques conseils ci-après vous permettront de comprendre le reste.
163
Padding vs margin
La marge intérieure (padding) est l’espace à l’intérieur d’un élément. Dans les
bannières web, le padding est la distance entre le bord de la bannière et son
contenu (marqué en rose sur le graphique ci-dessous). La marge est l’espace-
ment extérieur des autres éléments d’une mise en page.
Fig 9.52. Le modèle de boîte42 : margin, border, padding, élément.
Pour les boîtes d’interface dans lesquelles le contenu est utilisé pour envelop-
per le contenu associé, le moyen le plus simple d’appliquer la marge intérieure
consiste uniquement à ajouter une quantité uniforme de padding à tous les
côtés.
Mais dans certains cas, pour donner une impression de design plus sophis-
tiqué, vous pouvez étendre la marge intérieure [padding] pour ajouter plus
d’espace à la création.
42. En CSS, tout élément est inclus dans une boîte (box en anglais). Comprendre le fonctionnement de ces
boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionnement des éléments d’une page
HTML.
164
Patterns essentiels de mise en page

Comme je le dis depuis le début de cet ouvrage, je ne suis pas très fan de la
réinvention de la roue. Alors ce que je fais, c’est observer pour apprendre et
ensuite, j’implémente.
D’après la loi de Jakob sur l’expérience de l’utilisateur d’internet :

« Les utilisateurs passent la plupart de leur temps sur d’autres sites web. Cela
signifie qu’ils préfèrent que votre site web fonctionne de la même manière que
tous les autres sites web qu’ils connaissent déjà. Créez des patterns auxquels
les utilisateurs sont déjà accoutumés. »
Dans cette section, je souhaiterais vous guider à travers onze mises en page ou
dispositions de sections différentes43 que vous pouvez « voler » ; et utiliser dans
vos créations pour que tout ce que vous construisez ait l’air super personnalisé.
Pattern UI #1A & #1B

Ces deux premières sections sont les plus basiques.
Fig 9.53. Mise en page de section de site web #1A.
Il y a une raison pour laquelle ce sont les plus courantes et les plus populaires.
Bien qu’il soit important pour vous de les utiliser et de savoir quand les utiliser,
vous ne devez tout simplement pas en abuser.
La première chose qu’il y a dans la mise en page #1A, c’est une disposition
« gauche droite » de base à deux colonnes où vous pouvez avoir le texte et
l’appel à l’action sur la gauche et l’image sur la droite.
43. Inspirés par la vidéo “11 Sections Layouts To Make Your Website Ultra Unique” de Payton Clark Smith.
165
Fig 9.54. Mise en page de section de site web #1B.
La variante #1B propose de commencer plutôt par l’image. Si vous l’utilisez

comme bannière de héros44, au début de votre page, je ne vous la recom-
mande pas, pour des raisons de performance. Utilisez plutôt la variante #1A.
Pattern UI #2A et #2B

Ceci est une disposition de base à trois colonnes.
44. Partie d’en-tête de votre site web, généralement constituée d’images et de textes. Parfois l’image ou la
vidéo peut être en arrière-plan, parfois la section peut se présenter comme les patterns #1A et #1B.
166
Vous allez la voir plusieurs fois en défilant dans des sites web, car c’est un
excellent moyen de présenter vos deux, trois, quatre points les plus impor-
tants avec une image ou une icône.
Parfois, les gens utilisent quatre colonnes. Mais si vous faites ça, vous devez
vraiment réduire la taille des éléments. Toutefois, cette disposition va vous
donner beaucoup de liberté pour faire tout ce dont vous avez besoin.
En #2B, la mise en page a été travaillée davantage comme une grille où vous
avez une ligne supplémentaire. De plus, vous avez la possibilité de mixer la
façon dont vous utilisez l’image ou l’icône. L’avantage est que vous vous éloi-
gnez du style basique et du template.
Parfois, certains auront neuf points. Ils utilisent dans ce cas-là une grille 3x3.
Je n’irai jamais plus que cela. Et personnellement, j’ai l’impression que six
c’est en quelque sorte extrême.
Pattern UI #3A & #3B

Il s’agit d’une disposition de base centrée verticalement et vous allez la voir
souvent. En particulier dans les pages de vente, les pages de destination45
[landing pages].
45. Une page de destination ou page d’atterrissage est une page sur laquelle le visiteur « atterrit » littéralement
lorsqu’il clique sur une annonce. Elle a pour but de nourrir l’argumentaire afin de pousser le visiteur à l’action.
167
Dans la variante, vous pouvez mettre l’image et le texte dans n’importe quel
ordre, selon vos besoins ou votre intuition.
168
Mais à la fin de la journée, tout cela va être très similaire parce que c’est juste
le look centré et aligné. La disposition #3B est donc une excellente option.
Pattern UI #4
Cette disposition est une façon vraiment sympa d’utiliser un diaporama [car-
rousel] dans une très petite section. Comme vous pouvez le voir dans l’illus-
tration, il y a un titre, un sous-texte et un appel à l’action sur la gauche.
Fig 9.59. Mise en page de section de site web #4.
Il devrait surtout y avoir un moyen de faire glisser et de voir ces éléments

supplémentaires : un indice visuel. Quelque chose comme un pointeur unique
sur lequel l’utilisateur peut cliquer et faire glisser. Car à ce stade, les gens ne
savent pas quoi faire, puisqu’il n’y a aucune sorte de flèche cliquable.
Pour cette raison, j’essaie parfois d’éviter les diaporamas autant que possible.
Mais c’est une façon vraiment intéressante d’incorporer beaucoup de contenu
dans une très petite section.
Pattern UI #5
Cette mise en page est un peu extrême, et c’est quelque chose que je n’em-
ploierais probablement pas sur tous les sites web que je construis. Mais
j’adore la façon dont ça fonctionne.
169
Dans l’exemple ici avec un produit, ils ont utilisé une image du produit au
milieu, avec différentes icônes et du sous-texte tout autour du produit.
Fig 9.61. Exemple d’application de la mise en page de section

de site web #5. Source : https://onepagelove.com/ackee-how-it-works
170
Ils auraient pu facilement utiliser la section #2A, avec de multiples colonnes à

droite. Et ils auraient pu avoir les icônes, le titre, le sous-texte, puis peut-être
une grande image du produit au-dessus.
Mais j’adore le fait qu’ils soient un peu uniques ici. Et cela donne l’impression
que c’est plus une expérience. Ça donne surtout l’impression d’être un site
web très personnalisé.
Vous pouvez voir ici qu’en gros, il ne s’agit que de trois colonnes et de quatre
lignes. C’est donc une très belle mise en page, si vous avez une image de
produit et beaucoup de puces différentes.
Pattern UI #6
Cette mise en page est une façon plus récente et plus fraîche d’afficher beau-
coup de contenu, surtout si vous avez de superbes images ou encore mieux
si vous avez des vidéos.
Il y a un élément (image ou vidéo) sur la gauche, et trois puces à droite. Et

vous pouvez voir que les deux puces en dessous ont une opacité plus faible,
indiquant que celle du haut est « active ».
171
Dans l’exemple, vous pouvez remarquer que non seulement il y a ce texte

plus sombre, mais il y a aussi la puce mise en valeur avec la couleur d’accent.
Fig 9.63. Exemple d’application de la mise en page de section de site web #6.
Source : https://dribbble.com/shots/18127362-Atomic-Website-Redesign
Fig 9.64. Exemple d’application de la variante de la mise en page de section

de site web #6. Source : https ://atomic. financial/
172
Au niveau de l’interaction, soit vous cliquez dessus, soit vous scrollez ; et

chaque nouvelle puce sur laquelle vous cliquez va changer l’image et « acti-
ver » le texte.
Pattern UI #7
Il s’agit simplement ici de prendre deux colonnes, puis dans l’une d’elles,
vous ajoutez une grille 2x2. Et à l’intérieur de cette grille, vous avez des icônes
centrées verticalement.
Fig 9.65. Mise en page de section de site web #7
En réalité, vous ne faites que prendre une variante de quelques mises en page
différentes pour les mixer en une seule.
Voici un exemple réellement intéressant. Vous pouvez voir ici qu’ils ont utilisé
des icônes 3D vraiment sympas, avec leur contenu sur la droite. Et puis en
bas à droite, ils ont leurs icônes de médias sociaux.
Ce que j’aime particulièrement ici, c’est que ça démontre à quel point vous
pouvez facilement assembler plusieurs dispositions et modèles de section
différents et en faire simplement ce que vous voulez.
173
Source : https://www.ladingpage.tk/
Pattern UI #8
C’est probablement ma préférée parmi toutes les mises en page présentées
ici. Elle est à la fois basique, et vraiment bien pensée et exécutée.
174
C’est quelque chose que l’on retrouve sur de nombreux sites web tels que
ceux de solutions technologiques. Cet exemple aux illustrations vraiment
sympas en témoigne.
Source : https://www.tokenex.com/token-services-api/
Ils ont des icônes, avec beaucoup d’informations. Des sites web comme celui
de Stripe font également un très bon travail à cet égard :
Fig 9.69. Exemple d’application de la variante de la mise en page de section de

site web #8. Source : https://stripe.com/fr-us
175
Mais essentiellement, ce qu’ils font, c’est qu’ils utilisent une combinaison

d’alignement vertical et horizontal, puis les emboîtent les uns dans les autres.
De ce fait, si vous regardez à l’essentiel, c’est une disposition à deux co-
lonnes. Il y a une colonne à gauche avec des informations et une colonne à
droite avec une image.
Pattern UI #9
Ceci est un autre excellent exemple de ce dont j’ai parlé plus haut. Il y a l’image
sur la gauche. Puis sur la droite, il y a une mise en page à deux colonnes.
C’est, encore une fois, une excellente façon d’utiliser un besoin de mettre en
évidence 2, 3, 4, 5, 6 points différents.
Et au lieu de simplement les mettre dans des puces sur une disposition de
colonne très basique, vous pouvez placer une image sur la gauche, ajouter
un titre en haut. Puis encore une fois, imbriquer les éléments et apporter une
certaine complexité à cette mise en page.
176
Pattern UI #10
Cette mise en page est un peu plus unique. Quand vous la regardez, elle vous
met légèrement mal à l’aise, comme si rien n’était vraiment aligné.
Mais plus vous y regardez de près, plus vous vous rendez compte que les
choses sont très bien alignées. Il y a juste un peu plus de fluidité. Et même si
ça peut être inconfortable à observer du point de vue du design, je pense que
c’est plutôt bien fait et c’est engageant.
C’est une façon unique d’aborder ce problème d’avoir simplement ces trois
puces avec trois images ou trois icônes. Et il vous sera très utile de rechercher
différentes manières d’afficher cela, à moins de toujours exploiter par défaut
cet aspect à trois colonnes.
Pattern UI #11
J’ai l’impression qu’il y a beaucoup de grandes entreprises qui font ça. Et,
elles utilisent essentiellement une grille qu’elles redimensionnent pour que
chaque élément de grille soit de taille différente. Ensuite, elles peuvent signa-
177
ler la priorité sur l’élément le plus important. Peut-être en le plaçant sur la

gauche, puis en ajoutant de la couleur, et enfin en en faisant la plus grande
zone de grille. De plus, cela donne également de nombreuses possibilités
différentes de disposer les choses.
Mais en utilisant ce type de grille, puis en plaçant vos images et votre texte à
l’intérieur de blocs de styles, c’est une façon vraiment intéressante d’être unique
tout en faisant en sorte que vos mises en page soient aussi simplistes que
possible.
Pour conclure sur les patterns

Travaillez de la manière dont les utilisateurs s’attendent à expérimenter les
sites web de votre secteur d’activité. Pour cela, une analyse de la concurrence
est nécessaire, pour pouvoir profiter des conventions.
Souvenez-vous de la loi de Jakob sur l’utilisateur d’internet.
J’espère que vous pourrez vous inspirer de toutes ces mises en page que j’ai
présentées ici, pour les mettre en œuvre sur votre site web.
178
Règles faciles de design d’interface utilisateur

Je vous propose ici une étude de cas de design d’interface utilisateur. L’objec-
tif est de refaire le design d’une interface utilisateur à l’aide de règles ou de
directives logiques.
À NOTER
Tous les textes et les images de cette section sont une traduction de l’ar-
ticle 16 UI Design Rules de Adham Dannaway46.
Disposer d’un système de règles logiques vous aide à prendre efficacement des
décisions de design éclairées. Sans système logique, vous utilisez simplement
votre intuition pour faire bouger les choses jusqu’à ce qu’elles soient jolies.
C’est bien d’aimer les règles et la logique, mais les décisions de design sont
rarement en noir et blanc. Plutôt que des règles strictes que vous devez suivre,
considérez les conseils ci-après comme des directives utiles qui fonctionnent
bien dans la plupart des cas.
Le moyen le plus rapide d’apprendre est de pratiquer. Je vais corriger avec

vous cet exemple en utilisant des règles logiques.
46. https://www.adhamdannaway.com/blog/ui-design/16-ui-design-rules
179
Fig 9.73. Exemple de design d’interface utilisateur avant et après.

© Adham Dannaway. Illustration reproduite avec l’autorisation de l’auteur.
Ci-dessous, j’ai résumé les problèmes avec le design original et décrit le ratio-
nale (raisons logiques) derrière le design mis à jour. Vous trouverez toutes
ces directives, et des centaines d’autres, clairement expliquées dans le livre
d’Adham Dannaway : Practical UI : Quick and practical UI design guidelines to
design intuitive, accessible and beautiful interfaces.
180
Problèmes avec le design original
Fig 9.74. Interface utilisateur avec erreurs.

181
1. Le contraste des icônes est trop faible. Conformément aux directives

WCAG 2.1 de niveau AA47, les éléments de l’interface utilisateur doivent
avoir un rapport de contraste d’au moins 3:1 pour permettre aux personnes
malvoyantes de les voir clairement.
2. L’espace blanc autour de l’image ajoute une complexité visuelle inutile qui
peut augmenter la charge cognitive.
3. Le contraste du texte est trop faible, de sorte que les personnes mal-
voyantes pourraient avoir du mal à lire. Le petit texte (18 pixels et moins)
nécessite un contraste minimum de 4,5 : 1.
4. L’utilisation de la couleur n’a pas de but. Le bleu est utilisé pour indiquer les
liens, ce qui rend le titre interactif. La police de caractères est également un
peu difficile à lire en raison de sa complexité.
5. Le texte d’emplacement est difficile à lire car il est en majuscules, à faible
contraste et il a un poids léger.
6. Il pourrait ne pas être clair pour les daltoniens que les « avis » sont un lien,
car ils s’appuient uniquement sur la couleur comme indicateur.
7. Les styles d’icônes sont incohérents, car certains sont remplis et d’autres
non. Les icônes ne sont pas étiquetées, ce qui rend leur signification floue.
Les conteneurs d’icônes ont également un style visuel similaire au bouton
« réserver maintenant », ce qui les rend interactifs de manière trompeuse.
8. Le manque d’espace entre les groupes de contenu rend le design encom-
bré et difficile à comprendre.
9. Plusieurs problèmes se combinent pour réduire la lisibilité du texte de des-
cription : alignement au centre, hauteur de ligne courte, couleur noir pur et
hauteur d’x courte.
10. Le contraste des boutons est trop faible, de sorte que les personnes mal-
voyantes peuvent ne pas l’identifier comme un bouton. Cela confond éga-
lement la hiérarchie visuelle, car l’action principale devrait être l’élément
le plus important.
47. W3C, Vue d’ensemble des règles pour l’accessibilité des contenus web (WCAG), https://www.w3.org/
WAI/standards-guidelines/wcag/fr
182
Rationale du design mis à jour
Fig 9.75. Interface utilisateur corrigée.

183
1. L’ajout d’une ombre à l’icône et d’une superposition de dégradé en haut de

l’image donne à l’icône un contraste suffisant de 3:1.
2. La complexité visuelle inutile a été supprimée pour diminuer la charge
cognitive (la quantité de puissance cérébrale nécessaire pour utiliser une
interface).
3. Le rapport de contraste a été augmenté à 4,5 : 1 pour garantir sa lisibilité
pour les malvoyants.
4. Le bleu a été supprimé et la nuance de couleur la plus foncée a été utilisée
à la place pour la proéminence. La police de caractères a également été
simplifiée en une police sans empattement, car elle est généralement la
plus lisible, la plus neutre et la plus simple.
5. Pour améliorer la lisibilité, le texte d’emplacement a été remplacé par la
casse normale de la phrase, le contraste a été augmenté au-dessus de 4,5 :
1 et le poids de la police a été augmenté à normal.
6. La couleur et le soulignement ont été utilisés pour indiquer clairement le lien
avec les personnes daltoniennes. Le bleu a été utilisé systématiquement
pour signaler les éléments interactifs.
7. Les icônes ont été décrites avec un poids de trait de 2 points et des coins
arrondis pour plus de cohérence. Elles ont également été étiquetées pour
plus de clarté. La couleur bleue et le style des boutons ont été supprimés,
elles ne sont donc pas confondues avec le fait d’être interactifs.
8. L’espacement et les bordures accrus permettent de regrouper clairement le
contenu, de le simplifier et de le rendre plus facile à comprendre.
9. Pour améliorer la lisibilité, le corps du texte a été aligné à gauche, la hauteur
de ligne a été augmentée au-dessus de 1,5 et la police a été remplacée par
une police avec une hauteur d’x élevée. Au lieu du noir pur, une nuance de
couleur plus claire aide à réduire la fatigue oculaire et à corriger la hiérarchie
visuelle.
10. Le rapport de contraste des boutons a été augmenté au-dessus de 3:1,
ce qui corrige également la hiérarchie visuelle. Le bleu a été utilisé systé-
matiquement pour indiquer les éléments interactifs.
Voilà, vous avez toutes les bases nécessaires pour créer de belles interfaces
pour votre site web. Alors, qu’est-ce que vous allez écrire dessus ?
184
Chapitre 10
Votre
site Internet avec
le StoryBrand®
Framework
Voici maintenant l’application des principes appris depuis le début.
Je prendrai l’exemple de l’application de mobilité free move dont je dois créer

le site de promotion. La bonne nouvelle est qu’elle dispose déjà d’une straté-
gie de marque48. Ce qui suppose que sa stratégie d’entreprise49 est déjà OK.
Vous pouvez suivre à partir des informations du document de spécification

dans l’exemple présenté dans le projet. Vous pourrez ensuite remplir le tem-
plate que je vous ai fourni.
48. Pour en savoir plus sur la stratégie de marque, je vous recommande : Le guide ultime pour créer une
stratégie de marque, https://lotincorp.biz/le-guide-ultime-pour-creer-une-strategie-de-marque/
49. Si vous n’avez pas encore défini votre stratégie d’entreprise, je vous recommande : Créez votre stratégie
d’entreprise, https://lotincorp.biz/creez-votre-strategie-d-entreprise/
185
C’est volontairement que j’ai éliminé tout outil de design qui nécessiterait une
période de prise en main plus ou moins longue. De plus, c’est hors de la
portée de cet ouvrage.
Contexte
Je ne vais pas vous mentir, les conversions au départ (en 2012), je ne savais
même pas ce que ça signifiait. Je voulais avoir une adresse web, et partager
mes connaissances. Tant que les gens lisaient, ça me suffisait. Puis je me suis
mis à diffuser la publicité des cours de mon académie : Lotin Corp. Academy.
Et ça n’a pas bien marché.
J'ai vraiment su pourquoi quand j’ai commencé à m’intéresser à l’analytique

et aux conversions. Près de 50 % de mes lecteurs sont basés en France, et
mes cours sont en présentiel à… Douala, au Cameroun.
Les lecteurs basés au Cameroun représentent moins de 10 % de ma base de

visiteurs. Ce n’est pas beaucoup. Mais me suis-je concentré sur eux pour les
convertir en clients ?
Ce n’est pas ainsi que les sites web sont censés fonctionner. Ils sont censés
apporter des prospects et des ventes, en plus de bâtir la notoriété de votre
marque/entreprise.
Votre site web devrait augmenter vos revenus.
Il existe des méthodes éprouvées pour accroître le trafic, l’engagement et les

conversions, tout cela pour que votre entreprise et vos revenus augmentent.
Dans cette section, je vous donne le secret pour que votre site web fonctionne
pour vous. Mais d’abord, vous devez comprendre le cerveau des clients.
Les cerveaux humains

Les cerveaux des clients sont câblés pour survivre, tout comme le vôtre. Le
travail principal de notre cerveau est de garder chacun de nous en vie.
Afin de vous maintenir en vie, votre cerveau a appris à prioriser et à se

concentrer sur ce qui est essentiel pour sa survie et à ignorer tout ce qui
n’a pas d’importance.
186
https://www.VOTRE SITE INTERNET AVEC LE STORYBRAND® FRAMEWORK.com
Pensez à la dernière fois que vous êtes allé au restaurant. Savez-vous com-
bien de personnes y travaillaient ? Combien y avait-il de chaises dans la
salle ? Probablement pas. Votre cerveau s’en fichait parce que ces choses
n’ont rien à voir avec votre survie. Cependant, vous saviez sans doute où se
trouvait la sortie la plus proche. Parce que c’est important – en cas d’urgence,
votre cerveau est prêt à vous faire sortir.
Qu’est-ce que tout cela signifie pour votre site web ?
Cela signifie que si vous ne voyez pas les ventes que vous souhaitez, il est
probable que le cerveau de vos internautes vous catégorise comme le nombre
de chaises dans un restaurant – c’est-à-dire, pas important.
Si vous ne communiquez pas pourquoi vous comptez pour la survie de vos

clients (ou clients potentiels), ils n’y prêtent pas attention. Ils ne sont pas
intéressés.
Et c’est bien pire si votre site web prête à confusion. Le cerveau de vos clients
ne veut pas brûler de précieuses calories en essayant de comprendre ce que
vous dites. Brûler des calories met leur survie en danger.
Comment changez-vous cela ? Comment convaincre vos clients potentiels

que vous êtes important pour leur survie ?
La clarté est la clé

Vous devez réduire le bruit que le reste du monde fait exploser sur vos clients
en permanence. Et vous n’y arrivez pas en créant plus de bruit.
Pensez à votre groupe de musique préféré. Bruit ou pas de bruit ? Certaine-

ment pas de bruit. En fait, j’appellerais ça de la musique.
Pourquoi un groupe de sons ressemble-t-il à du bruit et un autre groupe de

sons ressemble à de la musique ?
La structure.
Ce qui rend les chansons belles et pleines de sens, c’est la structure appli-
quée aux sons.
Lorsque vous prenez des sons et que vous leur appliquez une structure et
des règles, ils peuvent devenir de la musique. Notre cerveau sait ce qu’ils
signifient et ce qui les rend beaux.
187
La structure crée la clarté

C’est également vrai pour votre site web. En fait, c’est vrai pour tout votre
marketing et votre communication.
Lorsque vous prenez votre message ou vos mots et que vous leur appliquez
une structure, ils deviennent signifiants pour vos clients. Vous vous rappelez
la définition que j’ai donnée de la marque au chapitre 5 ? La marque est le
sens que les gens attachent à votre organisation, produit ou service.
Vos clients savent pourquoi vous êtes important pour leur survie. Et ils
écoutent ! Ils se penchent et en redemandent.
Ils achètent plus chez vous.
Je souhaiterais expliquer exactement comment ça fonctionne, afin que vous

puissiez le faire aussi. Je vais parcourir avec vous le StoryBrand® Framework
brique par brique, mais je voudrais d’abord vous montrer la vue d’ensemble,
afin que vous sachiez où je vais :
Fig 10.1. Résumé du StoryBrand® Framework50.

© Donald Miller Words, LLC.Un personnage
1. Un personnage
2. Avec un problème
3. Rencontre un guide
4. Qui lui donne un plan
5. Et l’appelle à l’action
6. Qui l’aide à éviter l’échec
7. Et se termine en succès
50. MILLER Donald, StoryBrand : Scénarisez votre marque et faites-vous entendre.
188
À NOTER
Je propose une version simplifiée de ce framework dans le document de spé-
cifications. Je voulais ici vous donner une version un peu plus fouillée, avec
des exemples de sites web StoryBrand®.
L’histoire aide votre message à donner un sens

Pour créer de la clarté pour vos clients, afin qu’ils sachent pourquoi vous
comptez pour leur survie et achètent davantage chez vous, vous devez struc-
turer votre message. Alors, rendez-vous dans le template du document de
spécification, à la section Contenu > Accueil.
https://bit.ly/specsdoc-csisc
L’histoire est l’outil le plus puissant au monde pour captiver le cerveau humain.
Lorsque vous apprendrez à utiliser l’histoire dans la communication de votre
marque, vos clients prêteront enfin attention à ce que vous dites. Vous pouvez
apprendre à utiliser l’histoire pour clarifier votre message.
Un message clair est au cœur de tout ce processus. Sans un message clair, il

vous sera extrêmement difficile d’appliquer le StoryBrand® Framework à votre
site web.
Bien que tout cela puisse sembler être une entreprise intimidante, ça en vaut
la peine ! À la fin de cette section, vous disposerez d’un contenu de site web
clair que vous pourrez utiliser pour augmenter les conversions et développer
votre entreprise.
Rédigez le contenu de votre site web

De nos jours, la plupart des sites web sont formatés comme une longue page
avec plusieurs sections. C’est parfait pour raconter votre histoire. Je vais
consacrer chaque section à une partie du framework.
189
Munissez-vous d’une feuille de papier et imaginez-la comme votre site web.

Elle vous sera utile pour prendre des notes ou réfléchir avant de mettre votre
contenu sur votre template.
Dans chaque section, vous écrivez l’idée principale sous forme de titre, puis
vous pouvez décider si vous souhaitez avoir un sous-titre et comment vous
présenterez le reste du contenu. Après avoir terminé chaque section, tracez
une ligne sur votre feuille pour représenter la transition vers la section suivante.
Lorsque vous dessinez votre site web comme ce que je m'apprête à faire ici,
ça s’appelle un wireframe. C’est comme un plan pour une maison. C’est le
plan de base de votre site web.
Pour vous faciliter la tâche, vous trouverez dans le template le lien vers un
wireframe haute-fidélité dont vous pouvez vous inspirer. Je l’ai découpé en
morceaux qui correspondent aux parties du StoryBrand® Framework.
De plus, grâce au document de spécification de l’exemple, vous saurez com-

ment créer vos propres wireframes avec le tableau d’un outil de traitement de
texte.
Un personnage
Chaque histoire parle de quelqu’un. C’est le personnage principal, le héros.
Mais une histoire n’est pas intéressante si elle suit un gars au hasard pendant
deux heures. Le personnage doit vouloir quelque chose. L’histoire doit claire-
ment démontrer ce que le personnage veut dans les premiers instants, ou bien
elle va perdre l’intérêt du public.
Il en va de même pour votre site web. La première chose que votre site web
doit faire est de dire à votre client que vous avez ce qu’il veut. Posez-vous
ces questions :
- Par rapport à ce que vous vendez, que veulent vos clients ?
- Si votre client obtient ce qu’il veut, comment sa vie sera-t-elle meilleure ?
- Si votre client est prêt à acheter maintenant, comment fait-il ?
Notez vos réponses sur votre feuille de papier.
Toutes ces questions sont importantes, car votre client doit savoir ce que vous
vendez. Mais il ne veut pas seulement la chose que vous vendez, il veut aussi
la vie que cette chose l’aidera à avoir. Imaginer comment sa vie sera meilleure
fait partie de ce qui le pousse à rechercher votre produit.
190
S’il est prêt à acheter maintenant, vous ne voulez pas qu’il cherche sans com-
prendre comment faire. Si votre bouton « Acheter maintenant » n’est pas clair,
vous risquez de perdre des clients.
Voici un exemple de site web dont le message est clair :
Fig 10.2. Un personnage. Exemple de StoryBrand®.

https://storybrand.com/learn-the-framework/ © Donald Miller Words, LLC.
- Savez-vous ce qu’ils proposent ? Oui.

- Savez-vous comment cela rendra votre vie meilleure ? Oui.
Parfait.
Maintenant, place aux points bonus : et si vous êtes prêt à acheter ? Savez-
vous comment vous feriez cela ? Oui.
Vos clients devraient avoir des réponses à ces trois questions :

- Qu’offrez-vous ?
- Comment cela améliore-t-il leur vie ?
- Comment achètent-ils ?
191
Maintenant que vous avez vos réponses, allez-y et mettez-les dans le template.
Fig 10.3. Template StoryBrand® Framework – un personnage.
Je recommande que le texte du titre corresponde à ce que votre client sou-

haite le plus, puis que vous utilisiez le texte de paragraphe pour être encore
plus clair afin qu’il n’y ait aucune question sur ce que vous faites ou offrez.
ACTION D’ÉTAPE
1. Notez ce que votre client veut par rapport à ce que vous proposez.
2. Ensuite, écrivez comment acheter votre produit rendra sa vie meilleure.
3. Assurez-vous que votre bouton « Acheter maintenant » soit très clair.
Tracez une ligne de séparation sur votre feuille de papier, et passez à la sec-
tion suivante.
Le personnage a un problème
Avez-vous déjà vu un film dans lequel il n’y a pas une sorte de conflit ? Ça
n’existe pas. Les scénaristes et les storytellers connaissent un fait impor-
192
tant sur les histoires : l’histoire est le problème. Sans problème, il n’y a pas
d’histoire.
Cela vaut également pour vos clients. Ils ne seraient pas sur votre site web
s’ils n’avaient pas un problème qu’ils espéraient résoudre. Ne manquez pas
ça. C’est vraiment important. Vos clients sont sur votre site web parce qu’ils
ont un problème. Si vous ne parlez pas du problème que vous résolvez, vos
clients n’ont aucune raison d’être là.
RAPPELEZ-VOUS
L’histoire est le problème. Alors, parlez-en. Lorsque vos clients vous voient
parler du problème qu’ils ont, ils se penchent. Ils s’y intéressent. Lorsque vous
parlez du problème rencontré par vos clients, ils associent votre produit à leur
survie.
Fig 10.4. Template StoryBrand® Framework – Le personnage

a un problème…
193
Sur votre feuille de notes, répondez à ces questions :

1. Quel problème vos clients rencontrent-ils et qui les pousse à rechercher un
produit comme le vôtre ?
2. Comment ce problème les fait-il se sentir ? (Référez-vous à vos personas
ici.)
Je sais, les émotions ne sont pas toujours un sujet de prédilection. Mais per-
mettez-moi de vous dévoiler un secret qui manque à la plupart des marketers
et chefs d’entreprise.
Les gens achètent des solutions à leurs émotions négatives, c’est-à-dire

à leurs problèmes internes, et non à leurs problèmes externes.
Oui, vous vendez un produit qui résout le problème externe rencontré par vos
clients. Mais ce n’est pas pour ça qu’ils achètent. Ils achètent parce qu’ils
n’aiment pas la façon dont ce problème externe les fait se sentir. Ils achètent
pour résoudre leur problème interne.
Sur votre site web, vous devez parler à la fois des problèmes externes et
internes.
Voici l’exemple de mon site web :
Fig 10.5. Le personnage a un problème…

Exemple de Lotin Corp., https://lotincorp.biz
Les listes aussi fonctionnent très bien ici car elles vous permettent d’être précis
sans avoir à vous soucier de la grammaire ou du formatage d’un paragraphe.
Le texte du titre de section pourrait aussi être le problème principal et avoir
des puces ou des listes de problèmes spécifiques que les gens pourraient
rencontrer à cause de cela.
194
En voici un exemple :
Fig 10.6. Le personnage a un problème… Exemple de Business Made Simple,

https://businessmadesimple.com/ © Donald Miller Words, LLC.
ACTION D’ÉTAPE
Assurez-vous d’inclure à la fois les problèmes externes et les émotions que les
gens ressentent à cause de ces problèmes. Référez-vous aux emplois dans
votre fiche de persona.
Transférez une partie de vos idées et de votre contenu sur votre template,
puis tracez une ligne sur toute votre feuille de notes, enfin passez à la section
suivante.
Le personnage rencontre un guide

Dans une histoire, si le personnage (le héros) peut résoudre son propre pro-
blème, ce n’est pas vraiment un problème. C’est comme une perte de temps.
Les storytellers ont donc créé un autre personnage qui vient aux côtés du
héros pour l’aider à résoudre son problème. Ce personnage s’appelle le guide.
Dans Star Wars, le guide est Yoda. Le rôle du guide est d’aider le person-
nage principal (Luke Skywalker) à gagner. En affaires, vous êtes le guide. Votre
entreprise est le guide. Et votre travail consiste à aider vos clients, le héros, à
gagner.
195
Lorsque vous vous positionnez comme guide, vos clients associent votre
entreprise à leur survie.
Ils veulent faire affaire avec vous parce qu’ils savent que vous voulez les aider
à résoudre leur problème et à réussir.
Pour être le guide, il n’y a que deux façons de parler de vous. Si vous sortez
de ces deux catégories dans votre marketing ou sur votre site internet, vous
risquez d’entrer en concurrence avec vos clients pour le rôle de héros dans
l’histoire. Vous ne voulez pas faire ça, n’est-ce pas ?
Voici les deux questions auxquelles répondre pour vous positionner comme le
guide dans les histoires de vos clients :
1. En quoi êtes-vous similaire à vos clients ?
2. Pourquoi peuvent-ils vous faire confiance pour les aider à résoudre leur
problème ?
Notez qu’il n’y a rien là-dedans sur la difficulté de démarrer votre entreprise.
Il n’y a rien là-dedans sur la façon dont vous voulez être un excellent leader
pour votre personnel.
Il ne s’agit pas de vous.
Fig 10.7. Template StoryBrand® Framework – Le personnage

rencontre un guide.
196
Même ici, lorsque vous arrivez enfin à parler de vous, l’histoire concerne tou-
jours vos clients. Ils n’ont pas besoin de savoir à quel point vous êtes cool ou
à quel point vous avez travaillé dur. Ils veulent que vous exprimiez :
- De l’empathie (la première question).
- Et de l’autorité (la deuxième question).
Voilà.
Cela peut être quelques phrases sur votre site web, une biographie, ou vous
pouvez faire preuve d’empathie et d’autorité dans d’autres éléments de votre
site web.
Voici quelques exemples d’excellentes sections de guide pour un site web

StoryBrand® :
Fig 10.8. Le personnage rencontre un guide. Exemple de Business Made Simple,

https://businessmadesimple.com/ © Donald Miller Words, LLC.
197
Fig 10.9. Le personnage rencontre un guide.

Exemple de StroryBrand® Messanging Framework,
https://businessmadesimple.com/storybrand-messaging-framework/
© Donald Miller Words, LLC.
ACTION D’ÉTAPE
Notez quelques raisons pour lesquelles les gens peuvent vous faire confiance
et ajoutez-les à cette section sur votre feuille, puis dans votre template. Vous
pouvez utiliser l’expérience, les logos des personnes avec lesquelles vous
avez travaillé, ou des statistiques convaincantes.
Ensuite, tracez une ligne sur votre feuille de notes et passons à autre chose.
Qui lui donne un plan

En tant que guide de vos clients, vous avez deux responsabilités.
Tout d’abord, leur donner un plan pour résoudre leur problème.

Votre produit ou service fait partie du plan, mais ce n’est pas tout. Avoir des
boutons « Acheter maintenant » partout, c’est bien. Mais pour beaucoup de
gens, ils ne sont peut-être pas prêts à cliquer. Ils peuvent avoir des questions
ou des préoccupations auxquelles ils doivent d’abord répondre. Ou bien, ils ne
comprennent pas comment l’utiliser.
198
Décomposez le processus en 3 à 5 petites étapes qui font dire à vos clients :

« Je peux le faire ! »
Fig 10.10. Template StoryBrand® Framework – qui lui donne un plan.
Voici un exemple :
Fig 10.11. Qui lui donne un plan. Exemple de StoryBrand®,

199
Votre plan peut concerner le processus d’achat, la façon d’utiliser le produit,

votre processus d’intégration ou autre chose.
Avoir un plan simple est plus important que ce que votre plan est.
Ne vous attardez pas à rédiger le plan parfait. Il est plus important que vous
en ayez un, même s’il n’est pas parfait. Les plans simples fonctionnent mieux.
Votre processus peut comporter 37 étapes, mais vos clients ne veulent pas le
savoir dès le départ. Ils comptent sur vous pour les accompagner. Divisez vos
37 étapes en trois étapes simples.
Pensez au processus d’achat d’une voiture. Il y a plusieurs étapes :

- Conduisez jusqu’au concessionnaire.
- Soyez mis en relation avec un commercial.
- Remplissez un questionnaire.
- Choisissez des voitures à tester.
- Testez chaque voiture.
- Regardez les spécifications de chaque voiture.
- Parlez à votre conjoint.e.
- Choisissez une voiture.
- Marchandez sur le prix.
- Remplissez quelques papiers.
- Remplissez plus de papiers.
- Attendez qu’ils lavent ou préparent la voiture.
- Partez avec votre nouvelle voiture.
Voici comment un concessionnaire automobile décompose son processus :

1. Trouvez votre voiture.
2. Voyez vos options.
3. Prenez votre décision.
Bien plus facile ! C’est ce que vous visez. Ne soyez pas littéral sur les étapes
exactes que les gens traversent. N’oubliez pas que votre objectif est de faire
dire à vos clients potentiels : « Je peux le faire ! »
Prenez 60 secondes sur cet exercice simple. Demandez-vous :

1. Est-il plus difficile de s’engager avec moi ou d’utiliser mon produit ?
2. Peu importe ce que c’est, puis-je le décomposer en trois étapes faciles ?
200
Le lendemain, réexaminez ces étapes et simplifiez-les.
Si vous regardez le wireframe en PDF, vous remarquerez qu’après ce « plan de

processus », il y a un autre plan.
Leur donner un plan d’accord.
Fig 10.12. Template StoryBrand® Framework – Qui lui donne

un plan + garantie.
Le plan d’accord est l’endroit idéal pour établir la confiance avec votre client.
De nombreuses entreprises l’utilisent comme « Notre promesse envers vous »,
d’autres énumèrent les avantages de travailler avec elles.
Votre objectif principal avec cette section est d’accroître la confiance vis-à-vis
de vos clients. Il y a deux façons que je recommande pour y arriver.
Répondez aux objections

Parfois, les gens ont du mal à surmonter la difficulté et à cliquer sur le bouton
« Acheter maintenant ». Quelles sont certaines des questions ou objections
qu’ils ont ? Sur votre feuille de notes, écrivez-les. Maintenant, à côté de cha-
cune, notez comment vous réagiriez si vous parliez à un client face à face.
201
Sont-ils inquiets que vous n’ayez pas leur taille ? Votre réponse pourrait être :
« Notre [produit] à taille unique convient à toutes les tailles ! »
Sont-ils inquiets qu’il se casse ? Vous pouvez déclarer : « Nous garantissons

qu’il ne se cassera pas, ou nous le remplacerons gratuitement ! »
Sont-ils inquiets que cela ne fonctionne pas pour eux ? Donnez-leur les appro-
bations des autres en réponse à leur préoccupation : « Plus de 10 000 avis
cinq étoiles sur Amazon ! » Sur votre feuille, écrivez votre réponse à leur pré-
occupation. N’écrivez pas leur objection, seulement votre réponse positive.
2.2. Faites une liste des avantages de travailler avec vous ou des carac-
téristiques positives de votre entreprise.
Peut-être que vos clients n’ont pas d’objections, mais ils veulent savoir pour-
quoi ils peuvent vous faire confiance par rapport à vos concurrents. Faites
une liste des raisons pour lesquelles ils peuvent vous faire confiance. Ensuite,
choisissez vos 4 à 6 principales raisons et mettez-les sur votre template.
Fig 10.13. Template StoryBrand® Framework – Qui lui donne un plan

+ réponse à ses objections.
202
Et l’appelle à l’action
Les gens n’agissent pas à moins qu’on leur dise d’agir. C’est la deuxième
responsabilité du guide dans une histoire, appeler le héros à l’action.
Ceci tue tant d’entreprises.
Les gentils propriétaires d’entreprise, qui ne veulent pas « être trop insistants »,
qui omettent de demander l’achat, soit font faillite, soit se payent la moitié de
ce qu’ils devraient.
Je ne veux pas que ce soit vous. Lorsque vous ne demandez pas l’achat,
les gens ne vous voient pas comme gentil, ils vous voient comme quelqu’un
qui manque de confiance dans son produit. Ils vous voient comme faible,
alors que vous espérez qu’ils achètent par sympathie ou empathie… Presque
comme un « achat caritatif ».
Lorsque vous demandez l’achat, les gens ne pensent pas que vous êtes in-
sistant, ils pensent que vous êtes confiant. Je préfère faire affaire avec une
entreprise confiante qu’avec une entreprise peu sûre qui demande de l’aide.
Le principal moyen d’appeler vos clients à l’action et de demander l’achat est

d’avoir un bouton clair « Acheter maintenant » (ou « Planifier un appel » ou
« Ajouter au panier » ou quelle que soit votre première étape d’action). J’aime
les mettre sur tout le site web afin que, dès qu’un visiteur est prêt à acheter, il
n’ait pas à rechercher le bouton.
Souvent, les gens veulent voir exactement ce qu’ils obtiennent avant d’ache-
ter. J’ai donc trouvé utile d’inclure une section que j’appelle la section « Offre »
ou « Ce que vous obtenez ».
Fig 10.14. Template StoryBrand® Framework –

Pour finir par l'appel à l’action.
203
J’ai séparé cette section en deux parce que tous les produits ou services ne
correspondent pas à un modèle de tarification comme celui-ci. Mais si c’est le
cas pour votre offre, n’hésitez pas à inclure cette partie :
Fig 10.15. Template StoryBrand® Framework – et l'appel à l'action.
Cette section est simple :

- Énumérez tout ce que vos clients obtiennent lorsqu’ils achètent votre produit.
- Mettez un bouton « Acheter maintenant » juste après la liste.
Voici un exemple ci-contre.

Il y a un certain défilement requis sur cette page, donc vous ne pouvez pas
voir toutes les différences. Mais j’aime la possibilité de choisir la fréquence de
paiement « mensuel/annuel », ainsi que la preuve sociale51 (logos des entre-
prises clientes) sur la partie de l’option « Entreprise ».
Réfléchissez sur votre feuille de prise de notes, puis transférez vos meilleures
idées sur votre wireframe. Maintenant, tracez une ligne sur le papier et prépa-
rez-vous pour la section suivante.
51. La preuve sociale est un principe de psychologie sociale. Selon ce principe, un individu ne sachant quoi
faire ou quoi penser, aura tendance à adopter le comportement ou le point de vue d’autres personnes.
204
Fig 10.16. L’appel à l’action. Exemple de l’hébergement WordPress.com, wor-

dpress.com/fr/hebergement
Qui l’aide à éviter l’échec

À ce stade de votre site web, vous avez passé beaucoup de temps à parler
de la solution au problème de vos clients. Il peut être facile pour eux d’oublier
pourquoi ils sont là. Ils s’imaginent avec votre solution et ne pensent plus à
leur problème.
C’est surtout bon. Vous voulez que les gens réfléchissent à la façon dont leur
vie sera meilleure avec votre produit ou service. Mais s’il n’y a pas d’enjeux, s’il
n’y a pas d’échec possible, il n’y a aucune raison d’acheter chez vous.
Vous devez rappeler aux gens pourquoi ils sont venus sur votre site web en
premier lieu. Ils ont un problème et s’ils n’achètent pas votre solution, ils conti-
nueront à vivre avec ce problème. Et cela pourrait même empirer.
205
Vous n’avez pas à aller trop loin ici. L’échec est comme le sel. En mettre trop
ruine un repas, mais un petit peu ajoute le plus qui rend le tout parfait.
Sur votre feuille de notes, répondez à ces questions :

- Si vos visiteurs n’achètent pas votre produit, avec quels problèmes devront-
ils continuer à vivre ?
- Les choses vont-elles empirer ? Si c’est le cas, notez quelques scénarios qui
pourraient se produire.
Dans votre template, cette section est appelée stakes. Leur rappeler leur
échec potentiel aide à inciter les gens à acheter. J’aime donc l’avoir juste
avant la section qui détaille quoi et comment acheter.
Où que vous choisissiez de la placer, il est important que cette section soit
présente. Vous verrez comment je la mets en place dans l’exemple de free
move…
Et se termine en succès
Le succès est la section la plus excitante pour moi. C’est la fin heureuse ! Le
héros accomplit sa mission, le couple se retrouve ensemble. Le personnage
principal obtient ce qu’il veut. C’est ce que vos clients espèrent vivre.
Vous souhaitez que vos clients imaginent la vie qu’ils auront après avoir ache-
té votre produit ou service et résolu leur problème. À quoi ressemblera leur
vie ? Soyez précis. Imaginez toutes les façons dont la vie de vos clients sera
meilleure, puis notez vos préférées.
Dans cette section, vous pouvez utiliser des images ou des puces. Peut-être
même des témoignages. Choisissez la manière la plus claire de montrer à vos
clients à quel point leur vie sera formidable.
N’hésitez pas à saupoudrer un peu de succès tout au long de votre site web.
En fait, saupoudrez beaucoup de succès ! Il devrait être partout. Toutes vos
images doivent montrer des personnes heureuses utilisant vos produits. Vous
ne pouvez pas avoir trop de succès.
La seule chose qui vient après la fin d’un film, c’est le générique. Pour votre
site web, c’est votre pied de page, une boîte de contact, peut-être quelques
FAQ (foire aux questions).
206
La plupart des sites web n’ont pas de section « Réussite » dédiée. Ils incluent
normalement le succès sur tout le site web, puis l’incluent dans la section
« CTA » ou « Offre ». Voici un exemple :
Fig 10.17. Et se termine en succès. Exemple de Business Made Simple. https://

businessmadesimple.com/storybrand-messaging-framework/
© Donald Miller Words, LLC.
Remarquez comment cela découle de l’échec à l’offre et au succès. Le succès

(la partie qui fait réfléchir les gens sur la qualité de leur vie) inclut la question
« Qu’y a-t-il dans le cours ? » et le bouton d’appel à l’action « Accédez ».
Le lead magnet
Le lead magnet [aimant à prospect], ou HVCO [High Value Content Offer], est
généralement un contenu qui donne les premières réponses à la préoccu-
pation principale du prospect. En échange de ce contenu, le prospect vous
donnera son nom et son adresse e-mail.
Les HVCO se présentent sous plusieurs formes – rapports gratuits, e-books,

vidéos, aide-mémoire – mais l’objectif est toujours le même : offrir à vos pros-
pects une valeur incroyable, la plupart du temps sous la forme de la solution à
un problème avec lequel ils se débattent, sans leur demander d’acheter quoi
que ce soit en retour. En échange de toute la valeur que vous fournissez, tout
ce que vous réclamez c’est leur nom et leur adresse e-mail.
207
Maintenant que vous avez leur attention, vous pouvez inclure dans votre rap-
port des informations qui les feront descendre plus rapidement dans l’enton-
noir. Par exemple, vous pourriez amener des prospects qui économisent
encore de l’argent et qui sont en mode recherche à envisager d’acheter une
nouvelle maison tout de suite en leur montrant des packages de financement
qui ne nécessitent pas un dépôt énorme.
Fig 10.18. Exemple de lead magnet sur StoryBrand©.

À NOTER
On appelle cela une offre de contenu à haute valeur ajoutée pour une rai-
son ! Non seulement elle doit être perçue comme ayant une valeur élevée, mais
elle doit tenir cette promesse. Lorsque vous offrez des informations comme
incitation, assurez-vous qu’elles sont substantielles plutôt que le charabia bon
marché qui sature internet.
Il s’agit du tout premier échange de valeur que votre prospect réalise avec
votre entreprise. Il reçoit les informations que vous proposez en échange de la
fourniture de ses informations de contact.
Vous ne pouvez pas simplement inciter les gens à vous donner leurs coordon-
nées, puis leur envoyer un « rapport gratuit » de deux pages qui est unique-
ment une pièce promotionnelle sur votre entreprise.
208
Le but est de les épater avec cette expérience. Si c’est bien fait, cela dé-
clenche une conversation dans leur esprit : « Si c’est ce qu’ils offrent gratuite-
ment, imaginez à quoi ressemblent leurs produits/services payants ! »
Fig 10.19. Template StoryBrand© Framework – le lead magnet.
Le junk drawer
Cette section est généralement dans le pied de page. Ce sont des informa-
tions complémentaires auxquelles vous voudriez donner accès à vos visiteurs
à tout moment sur votre site web.
Fig 10.20. Template StoryBrand© Framework – le junk drawer.
Pour terminer
Vous disposez maintenant d’un template de contenu de page d’accueil com-
plet. Dans les exemples et même dans le wireframe haute-fidélité, vous avez
des exemples de mise en page pour chaque section.
209
Il est temps d’aller en ligne et de créer votre site web. J’ai opté, pour plus de
flexibilité et d’économies, pour trois solutions différentes :
- Wordpress et son fournisseur d’hébergement géré WordPress.com.
- Webflow, que j’ai présenté dans le tableau comparatif sur le choix de la
plateforme no-code.
- Systeme.io, qui est le moyen le plus simple de mettre son business en ligne
et d’appliquer rapidement les conseils marketing de cet ouvrage.
Bien entendu, il existe d’autres outils. Et dans la mesure où votre travail de

préparation est bien fait, vous pouvez utiliser l’outil de votre choix pour créer
votre site web, sur la base des critères du chapitre 3 sur le choix de votre
plateforme no-code.
Je ne voulais vraiment pas que ce livre puisse être remplacé par un tuto-
riel sur YouTube. Je voulais qu’il soit un guide pour des projets perfor-
mants de sites web.
Retenez surtout que si vous souhaitez faire passer votre site web au
niveau suivant, vous devrez envisager des plans payants.
210
Chapitre 11
Votre site Internet

gratuit et sans
codage, pas à pas
Je vais me baser sur l’exemple free move par ClayverApp, avec trois solutions
no-code différentes : WordPress, Webflow et Systeme.io. Le but est que vous
compreniez que ce n’est pas l’outil qui fait le site web, mais le travail de plani-
fication et de préparation.
Si le travail de planification et de préparation est bien fait, alors l’outil et l’in-

frastructure ne seront qu’un détail.
Avant de commencer, assurez-vous que tous vos éléments de contenu

(images, documents, vidéos) ont été rassemblés dans un dossier. Et surtout
que chaque élément a un nom suffisamment illustratif.
Ensuite, assurez-vous que votre contenu est parfaitement organisé dans votre
document de spécifications, suivant le modèle fourni dans les ressources.
Pour gagner, il faut investir. Les solutions gratuites sont très bien pour un dé-
part, mais sont limitées quand vous commencez à penser « croissance ». De
211
ce fait, chaque fois que cela sera nécessaire, je mentionnerai la disponibilité

de fonctionnalités supplémentaires grâce à un plan tarifaire payant, pour cha-
cune des trois plateformes.
Retrouvez toutes les vidéos d'accompagnement à l'adresse :
https://bit.ly/livre-csisc
Avec WordPress.com
Rendez-vous sur https://wordpress.com/fr/hebergement/ et cliquez sur
« Commencer ».
Créez votre compte et trouvez votre nom de domaine

Le clic sur le bouton vous amène sur cette page :
Fig 11.2. Choix du plan d’hébergement WordPress.com
212
https://www.VOTRE SITE INTERNET GRATUIT ET SANS CODAGE, PAS À PAS.com
Cliquez sur « démarrer avec un plan gratuit » puis créez votre compte.
Une fois que vous avez créé votre compte, vous avez accès à cet écran :
Fig 11.4. Choix du nom de domaine sur WordPress.com
Je souhaite créer un site internet pour promouvoir l’application free move. Je

lance donc la recherche pour des noms de domaine. Vous pouvez en faire de
même avec le nom de votre projet. NOTE : Le nom de domaine est l’adresse
de votre site.
Voici ce que ma recherche a donné :
Fig 11.5. Options de noms de domaine sur WordPress.com
Je sélectionne « freemoveapp.wordpress.com », dans la mesure où je veux un

site web gratuit.
Ça y est, mon site web est créé et installé pour moi par WordPress !
213
Une fois que cette opération relativement rapide se termine, j’ai accès au
« Tableau de bord ».
Ne vous laissez pas intimider, je reviendrai plus tard sur les détails de cette
interface.
Procédez aux réglages généraux de votre site web

En attendant, vous pouvez continuer la configuration de votre site web.
Dans mon cas :

- Titre du site : freemove.
- Description du site : Pour une mobilité plus sûre et plus efficace.
Il y a beaucoup d’autres réglages, notamment pour les plans payants. Mais

les réglages essentiels comme la langue et le fuseau horaire sont déjà faits
automatiquement pour vous.
Fig 11.7. Réglages généraux de WordPress – Profil du site.
La géolocalisation étant activée par défaut, la plateforme a détecté qu’au

moment de la création du site, je me trouvais à Cotonou ; voilà pourquoi elle
propose Porto-Novo. Pour les prochaines captures d’écran, vous remarquerez
qu’elle me propose la zone géographique de Douala. Plutôt pratique, je trouve.
214
Cette partie des réglages est à éviter, si vous ne savez pas ce que vous faites.
Elle a aussi l’avantage d’expliquer en quoi consistent les différentes actions.
Fig 11.8. Réglages généraux de WordPress – Langue, lancer le site

et mentions du pied de page.
Fig 11.9. Réglages généraux de WordPress – Outils du site.
215
Enregistrez vos réglages et allez sur Réglages > Performance.
Je ne vais pas m’appesantir sur les explications, ici. Les options sont plutôt
bien expliquées, et elles sont en français.
Retenez simplement que cette partie des réglages vous permet de mettre au-
tomatiquement votre site en conformité avec les recommandations de Google
pour l’expérience utilisateur. Ce qui est un critère pour le positionnement des
résultats des moteurs de recherche.
Si vous avez déjà un site existant, vous pouvez le tester avec PageSpeed
Insights de Google ici : https://pagespeed.web.dev/
Si vous cliquez sur « Lire la suite » au premier paragraphe, la plateforme vous

donne plus de détails sur le fonctionnement de son programme de perfor-
mance. Vous avez le choix entre « Voir l’article » (s’ouvre dans un nouvel on-
glet) ou « Fermer » et revenir aux réglages.
Fig 11.11. Détails des réglages de performance de WordPress.
216
Rendez-vous ensuite dans Réglages > Écriture.
Fig 11.12. Réglages d’écriture de WordPress – Composition.
Petite précision sur « Format par défaut des articles ». Si vous avez défini un
autre modèle de page (template) pour les articles, il va s’afficher dans ce menu
déroulant. Plus de détails à ce sujet dans les vidéos.
« Témoignages » et « Projets de portfolio » sont des types de contenus spé-

ciaux disponibles dans le cœur de WordPress.
Dans mon cas, j’ai prévu des témoignages d’utilisateurs de l’application free
move dans mon wireframe. J’active donc cette option. On y reviendra en détail
dans la vidéo.
217
Fig 11.13. Réglages d’écriture de WordPress – Types de contenus.
Dans la section « Réglages des flux », vous avez un lien explicite « En savoir
plus sur les flux », soyez curieux.
La plateforme vous encourage à diffuser votre contenu de plusieurs manières,

notamment avec cette section « Podcasting ». Attention, il vous faudra au
moins un plan personnel pour y avoir accès.
Les deux sections suivantes proposent des indices très précis quant aux
actions des réglages. Pas besoin de s’éterniser ici. J’aime beaucoup ce type
d’interfaces très intuitives et pleines d’indices d’utilisation.
Rendez-vous ensuite dans Réglages > Lecture.
218
Fig 11.16. Réglages de lecture de WordPress – Réglages du site.
Pour « La page d’accueil affiche », j’y reviendrai après avoir créé des pages
spécifiques avec des modèles de page appropriés. Comme vous pouvez le
voir, vous avez besoin de deux pages : une page pour l’accueil et une page
pour votre blog.
Les « Articles similaires » sont des articles qui apparaîtront à la fin d’un de vos
articles. Ils seront toujours en rapport avec le contenu de l’article. C’est un
réglage assez gourmand en ressources, à utiliser avec discernement ; même
s’il a l’avantage de faire passer plus de temps sur votre site aux visiteurs.
219
Pas besoin de s’éterniser sur le réglage du flux RSS, non plus, l’interface
s’explique d’elle-même, en plus du lien « En savoir plus ». Alors, soyez curieux.
La section suivante porte sur les « Réglages de la Newsletter » :
Fig 11.18. Réglages de lecture de WordPress – Réglages de la Newsletter.
220
Les lecteurs connectés à WordPress.com ont la possibilité de s’abonner à

vos contenus. Vous avez la possibilité ici de faire un peu de marketing sur vos
produits et/ou services.
ATTENTION : Un abonné à votre newsletter n’est ni un lead ni un prospect.

C’est un individu en quête de plus de contenus de qualité, mais surtout gra-
tuits. C’est l’occasion ici de lui proposer un lead magnet.
Rendez-vous maintenant dans Réglages > Discussion.
Fig 11.19. Réglages de discussion de WordPress – Réglages par défaut

des articles.
C’est suffisamment clair ici, je crois. Rendez vous dans les sections suivantes.
221
Fig 11.20. Réglages de discussion de WordPress – Commentaires.
222
Il s’agit plus ici de déterminer de quelle manière et à quelle fréquence vous

allez interagir avec vos lecteurs. Faites vos réglages en fonction de votre
disponibilité.
Rendez-vous enfin dans Réglages > Médias.
Fig 11.21. Réglages des médias de WordPress.
223
Faites les modifications qui vous conviennent. Enregistrez vos réglages et

retournez sur l’onglet « Mon accueil » :
Fig 11.22. Mettre à jour le design de votre site web – Mon accueil.
À droite de l’écran, vous remarquez que vous avez une check-list de choses
que vous devez faire en priorité pour paramétrer correctement votre site web :
1. Attribuer un nom à votre nouveau site.
2. Mettre à jour le design de votre nouveau site.
3. Vérifiez votre adresse e-mail.
4. Tester l’appli Jetpack.
5. Activer le partage d’article.
6. Lancer votre site !
C’est un bon plan. Mais avant de le suivre, je vais continuer l’exploration de

cet écran. Il y a un autre menu à droite, juste en dessous du précédent.
Ce sont des raccourcis fort utiles.
L’autre chose qui retient mon attention sur cet écran, c’est la zone en bas à
gauche de la capture d’écran : le bloc pédagogique « Concevez votre site
comme un pro ».
224
Fig 11.23. Tableau de bord WordPress – Mon accueil – Liens rapides.
Quand vous cliquez sur le bouton « Commencer à apprendre », il vous mène ici :
Fig 11.24. Concevez votre site comme un pro – Commencez à apprendre.
225
Un programme simple, concis et efficace, en 22 minutes chrono. Ce que je me

propose également de faire dans les vidéos qui accompagnent ce livre :
- Maîtriser les blocs de construction d’un site WordPress.
- Comprendre comment donner votre propre style à votre site.
- Acquérir des compétences pour gagner du temps.
- La créativité au service de votre réussite.
NOTE. Même si vous ne comprenez pas l’anglais, les vidéos sont suffisam-
ment démonstratives. Je vous conseille de les regarder quand même.
Choisissez le thème de votre site web

Je ne suis pas très fan des thèmes qui arrivent tous colorés. En tant qu’utilisa-
teur avancé, ils me posent assez souvent des problèmes de personnalisation,
mais faites votre choix en tenant compte de ces critères :
1. Le thème est sur un modèle freemium, ce qui signifie qu’il est gratuit, et peut
être boosté en passant à un plan tarifaire supérieur.
2. Le thème est basé sur les blocs.
3. Il propose des mises en page responsive.
4. Il garantit qu’il est conçu pour des performances optimisées.
Je vous suggère d’aller dans le menu Apparence > Thèmes.
Fig 11.25. Thèmes de WordPress.
Si vous avez un thème particulier à l’esprit, vous pouvez le chercher directe-

ment dans la barre de recherche.
226
Parmi les catégories, vous avez des thèmes recommandés, pour un blog, une
entreprise, un podcast, un portfolio, une seule page [one page], une boutique
[store]…
Les filtres pour les prix sont : tous, gratuit, premium, payant.
- Les thèmes premium sont ceux qui sont inclus avec un plan tarifaire supé-
rieur sur WordPress.com.
- Les thèmes payants nécessitent un paiement immédiat afin d’être activés.
- Les thèmes gratuits sont ceux que je vous recommande, car très souvent,
ce sont des versions light gratuites, qui peuvent être augmentées par une
version payante.
Ce que j’apprécie dans cette version de Wordpress.com, c’est que vous avez
la possibilité d’installer votre propre thème, s’il ne se trouve pas dans le réper-
toire. À condition d’avoir un plan Business.
Pour l’exemple free move, une seule page pourrait suffire. Mais je vais faire
les choses bien et tenir compte de son architecture de l’information (dans le
document de spécifications).
Sur la base des critères que j’ai énumérés plus tôt, je choisis :
Blank Canvas par Automattic
« Blank Canvas est un thème WordPress gratuit. Il s’agit d’un thème minima-
liste, conçu pour les sites web à page unique. Ses mises en page d’articles
uniques et de pages ne comportent aucun en-tête, menu de navigation ou
widget. La page que vous concevez dans l’éditeur WordPress est donc la
même que celle que vous voyez sur l’interface publique.
Les styles par défaut du thème sont assez classiques, avec des polices sans-
serif et une couleur accentuée bleue subtile. Blank Canvas est prêt pour vos
personnalisations [customizations]. »
227
Fig 11.26. Thème Blank Canvas sur WordPress.
Je clique ensuite sur le bouton « Activer ce design ».
Fig 11.27. Comment voulez-vous utiliser Blank Canvas ?
228
Je choisis l’option « Changer de thème en conservant le contenu de ma page

d’accueil » et j’ai cette autre fenêtre contextuelle :
Fig 11.28. Merci d’avoir choisi Blank Canvas.
Quand je clique sur « Afficher le site » (s’ouvre dans un nouvel onglet) :
Fig 11.29. Page d’accueil du site web.
229
Quand je clique sur « Modifier la page d’accueil » :
Fig 11.30. Page d’accueil du site web dans l’éditeur de site de WordPress.
Cliquez sur « Lancer la présentation ».
Après avoir regardé la présentation, rendez-vous dans les vidéos pour la suite.
Accédez aux didacticiels vidéo sur WordPress

Avec Webflow
Webflow est un outil de glisser-déposer professionnel intégré pour la concep-
tion de sites web dans le respect des meilleures pratiques comme des sites
web adaptatifs. Le service permet aux entreprises et aux professionnels indé-
pendants de créer et publier des sites web sans programmation.
230
En fait, le principe de l’outil est de vous permettre de faire de la programmation

de manière visuelle.
Webflow est essentiellement en anglais. Mais je vais faire de mon mieux.
Créez votre compte et trouvez votre nom de domaine

Rendez-vous sur : https://webflow.com/ et cliquez sur « Get Started – It’s
Free » ou sur « Start building » :
Fig 11.31. Page d’accueil de Webflow. Construisez avec la puissance

du code, sans en écrire aucun. Prenez le contrôle de HTML, CSS
et JavaScript dans un canevas visuel. Webflow génère un code propre
et sémantique prêt à être publié ou remis aux développeurs.
Vous arrivez sur la page d’inscription.
Vous pouvez utiliser une adresse e-mail ou votre compte Google. Si vous choi-
sissez comme moi l’option adresse e-mail, vous devez choisir ensuite un mot
de passe.
Vous continuez ensuite la configuration de votre compte, pour personnaliser

l’expérience d’utilisation.
Une fois arrivé au dernier écran de l’enquête, vous cliquez sur le bouton
« Finish » :
À NOTER : N’oubliez pas d’aller dans votre boîte e-mail pour valider votre
adresse e-mail sur la plateforme.
231
Familiarisez-vous avec l’interface de Webflow

Webflow vous propose ensuite de découvrir l’interface sous forme de trois
travaux dirigés.
Cliquez sur le bouton « Get started » :
Fig 11.38. Première étape du premier travail dirigé

pour la découverte de l’interface.
Je vous conseille de suivre cette étape, elle vous permettra de vous familiariser
avec l’interface de l’outil no-code Webflow. Chaque fin d’étape est marquée :
Fig 11.39. Fin du premier travail dirigé, et début du deuxième travail dirigé pour la
découverte de l’interface.
232
Vous pouvez cliquer sur « Continue » ou « Exit ». Mais comme je l’ai recom-
mandé plus tôt, faites tous les travaux dirigés. Une fois terminé, vous verrez
cet écran :
Fig 11.40. Fin du dernier travail dirigé pour la découverte de l’interface.
Choisissez le thème de votre site web

Quand vous cliquez sur « Finish », Webflow vous propose de créer votre propre
site web.
Fig 11.41. Fenêtre d’invite à la création d’un nouveau projet Webflow.
233
Cliquez sur le bouton « Create new project ». Webflow vous propose de choisir
le thème de votre site web :
Fig 11.42. Page des thèmes Webflow.
Pour plus de contrôle sur le rendu, je vous recommande le template « Blank

Site » :
Fig 11.43. Choix du thème Blank Site.
234
Webflow vous demande ensuite de donner un nom à votre site web :
Fig 11.44. Attribution du nom au site web Webflow.
Quand vous cliquez sur « Create site », vous arrivez sur votre plan de travail :
Fig 11.45. Plan de travail de Webflow. Il est aussi appelé Designer.
Webflow vous propose huit étapes pour commencer :

1. Créer un site (déjà fait à l’étape précédente).
2. Créer une mise en page.
3. Aligner des éléments dans une section.
4. Ajouter de l’espace entre les éléments.
235
5. Créer des styles réutilisables avec les classes.

6. Connecter votre site à des données dynamiques.
7. Trouver de l’aide avec des tutoriels vidéo.
8. Publier votre site.
Je préfère commencer par les réglages généraux de mon site web.
Procédez aux réglages généraux de votre site web

Je vais sur le bouton de menu de Webflow (les trois traits horizontaux en haut
à gauche) et je sélectionne « Site settings ». Je peux maintenant commencer
les réglages :
Fig 11.47. Réglages de Webflow – General – General settings.
Je commence par « General settings », les réglages généraux.
« Name », nom : il s’agit du titre du site dans Webflow. Vous pouvez mettre à
jour ce que les visiteurs voient dans les résultats de recherche dans les para-
mètres de chaque page dans le concepteur.
« Subdomain », sous-domaine : j’utilise un plan gratuit. Alors par défaut, mon

site web est dans un sous-domaine. webflo.io, comme avec. wordpress.com.
Il doit être alphanumérique (A-Z, 0-9) avec des tirets entre les mots. Par défaut,
le site web n’est pas publié.
236
« Folder », dossier : les sites peuvent être déplacés dans et hors des dossiers
ici.
« Favicon », icône de favori : téléchargez un fichier avec l’extension ICO,

PNG, GIF ou JPG aux dimensions 32 x 32 pixels à afficher dans les onglets
du navigateur.
« Webclip » : téléchargez une image de webclip de 256 x 256 pixels. Cette

icône s’affiche lorsque le lien de votre site web est enregistré sur l’écran d’ac-
cueil de l’iPhone.
Enregistrez vos modifications avec le bouton « Save changes », et passez à la

section suivante.
Fig 11.48. Réglages de Webflow – General – Localization + Website password.
« Localization », localisation : choisissez le fuseau horaire dans la liste. Le

fuseau horaire par défaut est UTC, donc le définir sur votre fuseau horaire local
améliorera toutes les fonctionnalités liées à la date/l’heure de votre contenu
dynamique, y compris le filtrage par date relative. Cela mettra également à
jour tous les éléments liés à la date et à l’heure de votre contenu dynamique
existant.
« Language code », code langue : définissez le code de langue de votre site

pour permettre aux navigateurs, aux applications de traduction et à d’autres
237
outils d’effectuer des tâches sensibles à la langue. Webflow vous propose une
liste des codes de langue, si vous ne connaissez pas le vôtre.
Enregistrez vos modifications avec le bouton « Save changes », et passez à la

section suivante.
« Website password », mot de passe du site web : pour déverrouiller l’option

des mots de passe du site web, ajoutez un plan de site payant ou mettez à
niveau le plan de votre « Workspace ». Activer la protection par mot de passe
pour le site web publié vous permet d’autoriser uniquement les utilisateurs
disposant d’un mot de passe à entrer. Par défaut, la protection par mot de
passe est désactivée.
Fig 11.49. Réglages de Webflow – General – Made in Webflow + Shared Works-

pace template + Webflow branding.
« Made in Webflow », réalisé dans Webflow : les sites partagés apparaîtront

dans les résultats de recherche « Made in Webflow » ainsi que dans votre profil
public. Par défaut, votre site n’est pas visible sur « Made in Webflow ».
« Shared Workspace template », modèle d’espace de travail partagé :

votre site appartient à « My Workspace ». Vous avez la possibilité de « créer un
modèle ». L’activation de ce site en tant que modèle permettra aux autres de
créer facilement à partir de ce site.
238
Branding de Webflow
Pour masquer la marque Webflow sur le site publié, ajoutez un plan Business.
Vous avez deux options :
- Afficher le badge « Made in Webflow » (désactivé par défaut).
- Afficher la marque Webflow en HTML (activée par défaut).
Enregistrez vos modifications avec le bouton « Save changes ». Remontez la

page, et cliquez sur le bouton bleu « Designer » pour retourner à la construc-
tion de votre site.
Rendez-vous dans les vidéos pour la suite.
Accédez aux didacticiels vidéo sur Webflow

Avec Systeme.io
Systeme.io est une solution marketing tout-en-un qui a été créée en 2018 par
le Français Aurélien Amacker. C’est un logiciel SaaS qui regroupe l’ensemble
des outils nécessaires à la création de sites internet et au développement d’un
business en ligne.
Ce logiciel vous permet de créer des pop-up, des pages de capture, des tun-
nels de vente, de vendre des produits physiques ou encore d’envoyer des
campagnes e-mailing. Tout ce qu’un bon entrepreneur doit avoir, il le trouve en
un seul endroit, sur le tableau de bord de Systeme.io.
Bien qu’il ne réponde pas aux critères de liberté (notamment avoir la possibi-
lité de déplacer votre site web ailleurs), il offre la possibilité d’éviter d’utiliser
1 000 outils pour faire son marketing en ligne.
239
À NOTER : Je ne suis pas sponsorisé par la plateforme et je ne possède pas

de lien d’affiliation. Je cherchais une solution simple no-code en français, en
dehors de Wix, de GetResponse et de WordPress. Au départ, j’avais opté
pour Framer, mais deux interfaces en anglais pour le même livre, j’ai trouvé
ça beaucoup.
Créez votre compte sur Systeme.io

Rendez-vous sur https://systeme.io/fr et cliquez sur « Inscription gratuite », ou
saisissez votre adresse e-mail dans le formulaire fourni :
Fig 11.50. Page d’accueil de Systeme.io.
La plateforme vous fait immédiatement une OTO52 [One Time Offer]. Il faudra
aller dans votre boîte e-mail pour confirmer votre adresse afin de continuer.
Quand vous cliquez sur « cliquer sur ce lien de confirmation » vous pouvez
créez votre mot de passe, validez le captcha et cliquez sur « Enregistrer ».
Procédez aux réglages de votre compte
Une fois votre mot de passe créé, vous atterrissez dans votre tableau de bord
de Système.io.
52. OTO est synonyme d’offre unique. Sur la page d’offre unique, vous proposez une vente incitative exclusive
et simple que l’acheteur peut ajouter à son achat avant de passer à la caisse.
240
Fig 11.53. Tableau de bord de Systeme.io.
Cliquez sur l’invite en rapport avec votre profil.
Mettez vos informations à jour, cliquez sur « Sauvegarder » et allez configurer

votre domaine. Allez dans la rubrique « Domaines personnalisés ».
Cliquez sur les trois points à la fin de la ligne qui porte le nom du domaine,
cliquez sur « Modifier le domaine » :
Fig 11.56. Paramètre de compte Systeme.io – Modifier le sous-domaine.
Faites vos réglages, et cliquez sur « Sauvegarder ».
241
Pour commencer la création de votre site web, allez dans le menu « Tunnels »
de votre tableau de bord :
Fig 11.57. Tableau de bord de Systeme.io – Tunnels.
Cliquez sur le bouton « Créer » :
Fig 11.58. Création d’un tunnel sur Systeme.io.
242
Donnez un nom à votre tunnel, et choisissez l’objectif du tunnel :
Fig 11.59. Attribution de nom et d’objectif au tunnel.
243
Cliquez sur « Sauvegarder ». Cliquez sur le nom de votre tunnel pour le

modifier :
Fig 11.61. Modification de tunnel sur Systeme.io.
Rendez-vous dans les vidéos pour la suite.
3.3. Accédez aux didacticiels vidéo sur Systeme.io

Vous pouvez aussi vous familiariser à la plateforme grâce à ces tutoriels en

français : https://systeme.io/fr/tutorial.
244
Chapitre 12
Mesurez et améliorez
les performances
de votre site internet
De quelles données avez-vous besoin ? Comment les obtenez-vous ? C’est

à ces questions, et bien plus que je vais répondre dans ce dernier chapitre.
Comment savoir où l’on va quand on ne sait pas où l’on est ? Déjà que ce qui
n’est pas mesuré ne peut être amélioré.
Dans ce chapitre, je vais passer en revue l’utilisation et la compréhension des

données d’utilisation du site web. Ces données peuvent inclure des analyses
de suivi [tracking] des utilisateurs, ou il peut s’agir uniquement d’informations
sur les performances du site web. La bonne nouvelle est qu’il existe de nom-
breux outils, gratuits et payants, disponibles pour vous aider.
Une fois que vous avez ces informations, qu’en faites-vous pour améliorer
l’expérience de vos utilisateurs et la rentabilité de votre site web ? J’y répon-
drai également.
245
Créez une stratégie d’analyse web centrée sur

le client
L’analyse des données de performance d’un site web peut donner l’impres-
sion de flotter sans but dans une mer de chiffres, de graphiques et de pour-
centages, sans pouvoir les ancrer dans des scénarios réels. Par exemple,
vous pouvez suivre le taux d’abandon d’une page particulière, mais cela ne
vous dit pas pourquoi les clients la quittent en premier lieu.
Les données d’analyse web vous fournissent les informations dont vous avez
besoin pour analyser ce qui se passe sur votre site, mais comprendre et utili-
ser ces informations est une tout autre chose. Et sans stratégie d’analyse web,
vous ferez beaucoup de conjectures.
Fig 12.1. Tableau de bord Google Analytics 4. Engagement > Vue d’ensemble
pour la période de 01.03.2023 au 31.03.2023 pour la propriété lotincorp.biz
Une stratégie d’analyse bien conçue garantit que vous effectuez des optimisa-
tions de site web basées sur des données objectives qui reflètent les besoins
de vos clients et offrent la meilleure expérience utilisateur (UX) possible, tout
en gardant vos objectifs et priorités commerciaux sur la bonne voie.
Cette section vous aide à aborder les bases de la création d’une stratégie
d’analyse web percutante et centrée sur le client, guidée par des décisions
fondées sur les données.
246
www.https:// MESUREZ ET AMÉLIOREZ VOTRE SITE INTERNET.com
Qu’est-ce qu’une stratégie d’analyse web ?

Une stratégie d’analyse web est la collecte, la création de rapports et l’ana-
lyse des données du site web. Elle est essentielle pour mieux appréhender
ce qui fait avancer votre entreprise, en plus de vous permettre de dévelop-
per une compréhension de l’expérience utilisateur, et comment vous pouvez
l’améliorer.
En bref, une stratégie d’analyse web est un manuel pour atteindre vos
buts et objectifs d’entreprise.
Pourquoi avez-vous besoin d’une stratégie d’analyse

web ?
C’est simple : si vous avez un site web pour votre entreprise, vous avez besoin
d’une stratégie d’analyse web.
La mise en place d’une stratégie d’analyse web avant de vous plonger dans
vos données et vos informations client vous permet de prendre des décisions
commerciales basées sur les données qui maintiennent votre client au premier
plan de tout ce que vous faites et va :
Augmenter votre empathie pour les clients

Comprendre les frustrations ou les défis rencontrés par vos clients, ainsi que
les gains et les réussites de ce que vous avez réussi, vous aide à personna-
liser votre site pour mieux servir les personnes auxquelles votre entreprise
s’adresse.
Permettre une évaluation stratégique de la performance

Une stratégie d’analyse solide inclut des examens de données cohérents et
fréquents afin que vous puissiez suivre les performances et pivoter au besoin,
ce qui signifie que vos clients n’auront pas à attendre que les choses soient
corrigées.
Permettre une prise de décision éclairée

Il n’y a pas de place pour les préjugés ou les hypothèses ici. Une stratégie dé-
finie agit comme une feuille de route fiable, et clarifie ce qui fonctionne, ce qui
ne fonctionne pas et les raisons sous-jacentes, afin que vous puissiez déve-
lopper votre entreprise et planifier à long terme, tout en obtenant l’adhésion de
votre équipe et en minimisant le risque d’erreurs d’interprétations subjectives.
247
Cette section va vous aider à développer une stratégie qui place votre client
au premier plan, afin que vous puissiez continuer à prendre les bonnes déci-
sions pour les bonnes raisons.
Recueillez des données de site web et des informations

sur les clients
Les outils d’analyse web vous donnent un aperçu de votre site web et du com-
portement de vos clients afin que vous puissiez évaluer des mesures telles
que le trafic, l’interaction des utilisateurs avec votre site et l’acquisition de
visiteurs.
Vous n’avez que l’embarras du choix en matière d’outils d’analyse web : il

existe de nombreuses options avec des coûts, des capacités de collaboration
et des interfaces utilisateur variables. Sélectionnez les outils qui collectent les
informations de la manière qui vous semble la plus utile. J’en parle plus en
détail dans la section suivante de ce chapitre.
Par exemple, l’utilisation d’outils d’analyse web quantitatifs traditionnels avec

des outils d’analyse comportementale qualitative, comme l’association de
Hotjar avec Google Analytics, donne une combinaison gagnante qui fournit
des informations des deux points de vue, vous aidant à répondre au pourquoi
de l’analyse web.
Lorsque vous combinez des outils tels que Hotjar Heatmaps, Recordings
et Surveys avec votre tableau de bord Google Analytics53, vous ajoutez une
représentation visuelle à vos données et conférez une voix à vos clients, ce qui
vous permet de voir (du point de vue de vos clients) exactement ce que vous
faites bien ou mal.
En analysant à la fois les données quantitatives et qualitatives, vous verrez les

faits (les chiffres, les graphiques et les pourcentages que j’ai mentionnés pré-
cédemment) et le contexte comportemental derrière eux qui raconte l’histoire
du parcours d’un client.
En règle générale, vous souhaitez analyser au moins les indicateurs suivants

pour avoir une idée claire de votre comportement d’utilisateur :
- Trafic vers votre site.
- Acquisition des visiteurs de votre site web.
- Taux de rebond et taux d’abandon.
53. Hotjar, How to use Google Analytics and Hotjar to grow your business, https://www.hotjar.com/blog/hotjar-
vs-google-analytics/#how-to-use-google-analytics-and-hotjar-to-grow-your-business
248
- Temps passé sur le site.

- Conversions.
Continuez à lire pour savoir quels KPI je recommande pour une stratégie
d’analyse web centrée sur le client.
Les possibilités d’inspiration sont infinies, je vous déconseille donc de ne re-

garder que les prétendus « indicateurs de vanité » [vanity metrics] et rappelez-
vous la raison pour laquelle vous avez mis en œuvre votre stratégie d’analyse
web en premier lieu.
Célébrer les victoires est important, mais le but de l’analyse des données n’est
pas seulement de se féliciter des ventes que vous réalisez et d’ignorer le reste.
Recherchez des opportunités et soyez motivé par le potentiel de votre site
pour offrir une expérience utilisateur incroyable.
Une fois que vous avez configuré une plateforme d’analyse qui fonctionne
pour vous, vous êtes prêt à collecter des informations sur l’expérience de vos
clients et à les utiliser pour éclairer les prochaines étapes de votre stratégie.
Dans les didacticiels vidéo, je vous ai expliqué comment installer Google Ana-
lytics sur votre site WordPress et Webflow ou Systeme.io.
Définissez vos buts et objectifs

Vos buts et objectifs donnent le ton à votre stratégie d’analyse web.
Réfléchissez de manière critique à ce que vous voulez retirer de votre site web
et de votre entreprise dans son ensemble – à court terme, à long terme et tout
le reste – et créez des étapes exploitables et compréhensibles pour toutes les
personnes impliquées.
Les objectifs peuvent être considérés comme votre raison d’être : pourquoi
votre site existe, ce qui rend votre entreprise unique et quels produits ou ser-
vices vous offrez à votre client.
Les objectifs deviennent plus spécifiques, et c’est ici que vous devez vous
demander ce que vous essayez d’accomplir sur votre site web. Vous cherchez
à augmenter vos ventes ? Atteindre un public croissant de clients satisfaits et
fidèles ? Faire connaître votre newsletter ? Tout ce qui précède ?
Plus vous êtes clair au début, plus il est facile d’évaluer vos progrès par la
suite. Si vous avez bien travaillé cette partie de votre document de spécifi-
249
cations, ça ne devrait pas être difficile pour vous. Ne compliquez pas trop les
choses, cela peut être aussi simple et pratique que ceci :
« Notre but est de renforcer la notoriété de notre marque, et notre objectif est
d’augmenter de 50 % le nombre d’inscriptions à notre newsletter hebdoma-
daire d’ici la fin du prochain trimestre. »
Et avec cela, vous avez une excellente base sur laquelle bâtir le reste de votre
stratégie.
CONSEIL DE PRO
L’élaboration d’une stratégie d’analyse web n’est pas qu’un exercice consis-
tant à cocher des cases. Trouvez de nouvelles façons d’établir continuelle-
ment des liens plus profonds avec vos clients et de comprendre ce qui les
motive ou ce qui les détourne.
Considérez votre client comme le phare qui vous guide et évaluez de manière
critique si tout ce que vous faites l’est pour les bonnes raisons. Par exemple,
votre priorité commerciale peut être d’augmenter les ventes, mais plutôt que
de simplement optimiser la dernière étape du processus de paiement, cher-
chez à créer un parcours plus fluide et une meilleure expérience utilisateur
pour inciter les prospects à passer à la caisse.
Au fur et à mesure que vos objectifs deviennent plus spécifiques, il est impor-
tant de comprendre où votre stratégie s’inscrit dans l’entonnoir marketing et à
quel point votre approche à chaque étape peut être différente.
Comprenez où vous vous situez dans l’entonnoir

marketing
Les objectifs de votre site web diffèrent en fonction de l’étape de l’entonnoir54
dans laquelle se trouvent vos clients cibles, et vos clients recherchent des
choses différentes selon l’endroit où ils se situent dans leur parcours.
Par exemple, quelqu’un au sommet de l’entonnoir ne sait peut-être même

pas encore ce dont il a besoin. Il vient de découvrir votre entreprise et essaie
maintenant de savoir qui vous êtes et ce que vous faites. C’est le moment de
transmettre votre identité de marque et votre personnalité tout en jetant les
bases de la confiance.
54. Un entonnoir marketing est un outil conceptuel utilisé par les entreprises pour suivre chaque étape du
parcours d’un client, de la prise de conscience à l’après-achat.
250
Au bas de l’entonnoir, votre client est activement sur le marché et prêt à ache-
ter ; il a juste besoin d’une raison de vous choisir plutôt qu’un concurrent.
Voici comment l’entonnoir marketing est défini en termes simples.
Haut de l’entonnoir – TOFU [Top Of the FUnnel] > Prise de conscience :

premières interactions de vos clients avec vous.
Montrez-leur qui vous êtes et ce que vous faites avec des pages de destina-
tion (ou d’atterrissage) attrayantes et des informations faciles à trouver sur
votre entreprise.
Milieu de l’entonnoir – MOFU [Middle Of the FUnnel] > Évaluation : votre

client vous connaît.
Offrez du contenu éducatif et davantage de pages de destination de niche
pour répondre aux préoccupations spécifiques de votre client, et prouver votre
expertise.
Bas de l’entonnoir – BOFU [Bottom Of the FUnnel] > Conversion : votre

client souhaite effectuer un achat et doit être poussé sur la ligne d’arrivée.
Éliminez toute hésitation avec des essais gratuits, un service client dédié et
des options de paiement fiables.
L’analyse des clients à chaque niveau de l’entonnoir vous aide à appliquer

votre stratégie d’analyse web à chaque étape de leur parcours. Vous serez
en mesure de répondre à leurs besoins spécifiques au lieu de vous fier à une
approche unique.
Je vous recommande d’évaluer en permanence vos clients dans l’entonnoir

de conversion afin que vous puissiez vérifier si vous offrez la meilleure expé-
rience possible.
Il est important que vous fassiez une différence claire entre l’entonnoir marke-
ting et l’entonnoir de vente. L’entonnoir de vente55 est une partie intermédiaire
dans l’entonnoir marketing.
55. Un entonnoir de vente est le chemin emprunté par un client pour acheter auprès de votre entreprise, du
prospect intéressé au client converti.
251
Fig 12.2. Entonnoir marketing et entonnoir de vente.
Déterminez vos KPI

Les indicateurs clés de performance (KPI) guident votre stratégie d’analyse
web et vous inspirent sur la manière d’agir dans des domaines spécifiques
grâce à une compréhension plus approfondie des besoins de vos clients.
Les KPI tels que les conversions, les pages vues, les acquisitions et les taux
de rebond en disent long sur la santé de votre site et de votre entreprise, et
vous donnent une visibilité sur la provenance de vos clients, ainsi que sur leur
comportement et leur expérience sur votre site web.
En associant vos KPI à vos buts et objectifs, vous pouvez suivre vos résultats
et mesurer vos progrès d’une manière logique. Par exemple, si l’un de vos
objectifs est d’augmenter le nombre de clients en Allemagne, mesurer des KPI
tels que l’acquisition, les taux de conversion et le nombre de visiteurs en Alle-
magne serait un moyen de voir si vous êtes sur la bonne voie pour atteindre
votre objectif.
252
Comment choisir les KPI pour les différentes étapes

de l’entonnoir marketing
J’ai déjà parlé un peu de la valeur de l’analyse en entonnoir pour mieux com-
prendre les motivations de vos clients.
Il en va de même pour vos KPI. Définir des KPI dans le contexte de l’entonnoir
vous garantira d’examiner les bons indicateurs pour les bonnes raisons. En
déterminant des KPI représentant les clients à chaque étape de leur parcours,
vous pouvez vous concentrer sur des informations essentielles en rapport
avec leur comportement sur votre site.
Voici comment vos KPI peuvent différer tout au long de l’entonnoir :

- Un KPI de haut d’entonnoir pourrait être… le nombre de nouveaux visiteurs
sur votre site, démontrant une notoriété croissante de votre entreprise.
- Un KPI de milieu d’entonnoir pourrait être… le pourcentage d’abonnés à
votre liste e-mail, révélant que les gens sont intrigués par votre entreprise et
sont potentiellement intéressés par la conversion.
- Un KPI de bas d’entonnoir pourrait être… le nombre de clients s’inscrivant
pour un essai gratuit ou une remise, montrant qu’ils sont prêts à passer à
l’action et ont besoin d’une preuve finale.
En comprenant la différence entre les KPI et les personnes qu’ils représentent

à chaque niveau de l’entonnoir, vous resterez à l’écoute du comportement des
clients et serez mieux équipé pour anticiper les opportunités d’optimisation
qui répondent exactement à leurs besoins.
À NOTER : J’ai déjà mentionné les conversions à quelques reprises. Elles sont
souvent vues comme l’un des indicateurs les plus importants du succès d’une
entreprise.
Une conversion se produit lorsqu’un utilisateur de site web réalise une action
souhaitée, comme atterrir sur une page spécifique, cliquer sur un certain lien
ou effectuer un achat. Et les conversions seront différentes selon votre entre-
prise et votre public cible.
L’optimisation du taux de conversion, ou CRO [Conversion Rate Optimiza-

tion], consiste à optimiser, expérimenter ou apporter des modifications à votre
site pour augmenter les conversions.
Alors que les conversions sont importantes, beaucoup de travail doit être fait
avant cette étape. Il peut être facile de se laisser distraire par les chiffres et le
retour sur investissement. Mais pour atteindre les personnes que vous ciblez,
253
il est essentiel de garder l’expérience utilisateur au cœur de vos optimisations

et de l’utiliser comme moteur de votre stratégie.
Quelque chose les a conduits vers votre site, peut-être la curiosité suscitée par
une campagne de marketing, ou ils cherchaient une solution à un problème,
et quelque chose les fera fuir ou les convaincra de passer à l’étape suivante.
Segmentez vos données pour le reporting

La segmentation des données que vous avez recueillies à partir d’une source
telle que Google Analytics vous permet d’isoler les informations et les indi-
cateurs spécifiques qui vous intéressent le plus, de reconstituer le puzzle, de
faire un zoom arrière et de créer une image cohérente du parcours de votre
client.
Vos sous-ensembles de segmentation peuvent être aussi spécifiques que

vous le souhaitez. Ils doivent soutenir les objectifs et les KPI que vous avez
déjà mis en place afin que vous puissiez évaluer l’impact de votre stratégie
d’analyse web sur vos résultats et voir le comportement de vos utilisateurs
prendre vie.
Par exemple, si votre objectif est d’augmenter les achats effectués par les
clients dans un lieu particulier, l’examen de toutes les données client de
chaque pays ne vous donnera pas les informations dont vous avez besoin.
Au lieu de cela, segmentez vos données pour représenter le sous-ensemble
de clients que vous ciblez principalement. La définition de paramètres stricts
pour l’analyse de vos données dès le départ vous évitera bien des maux de
tête par la suite.
Vous pouvez segmenter vos données en sous-ensembles aussi spécifiques

que :
- Les clients qui n’ont acheté qu’un produit spécifique.
- Le nombre de pages vues d’une certaine page.
- Clients vivant dans une certaine localité.
- Tout le trafic sur le site web qui s’est produit dans un laps de temps donné.
- Utilisateurs mobiles vs utilisateurs d’ordinateurs de bureau.
- Achats effectués dépassant une certaine valeur.
- Les clients qui ont ajouté quelque chose à leur panier mais qui n’ont pas
payé.
254
Google Analytics permet une grande variété de segmentation, alors explorez

votre tableau de bord. Vous pouvez également appliquer les filtres de Hotjar
aux cartes thermiques, aux enregistrements, aux avis et aux entonnoirs pour
examiner de plus près les modèles de comportement spécifiques et les perfor-
mances du site dans les sous-ensembles que vous avez choisis.
Analysez les résultats

Il est temps d’analyser les données que vous avez recueillies !
L’intérêt de mettre en place une stratégie web analytics n’est pas seulement
de la mettre en route et d’espérer le meilleur. C’est ce que vous faites avec les
résultats qui importe vraiment.
Avec votre client comme point focal, la définition de vérifications fréquentes,

d’objectifs clairs et de délais engagés pour évaluer les performances de votre
site web vous évite de perdre du temps sur quelque chose qui ne fonctionne
pas. Vous pouvez donc réagir aux problèmes le plus rapidement possible.
S’engager activement avec vos données garantit également que vos objectifs
restent gérables et exploitables.
Je reviens à un exemple que j’ai mentionné plus tôt : imaginez que votre ob-
jectif pour le premier trimestre est d’augmenter les inscriptions à la newsletter
de 50 %. Planifier des vérifications régulières tout au long du trimestre vous
permet d’évaluer les performances et de vous assurer que vous êtes sur la
bonne voie pour atteindre votre objectif.
Si votre progression vers votre objectif est plus lente que prévu, vous pou-
vez examiner de nouvelles opportunités d’optimisation sans attendre de voir
comment elles se déroulent. Cela ne veut pas dire que vous devez effectuer
une analyse approfondie de vos données chaque fois que vous souhaitez
connaître les performances de votre site web.
Je vous suggère de réserver les mesures approfondies pour les données col-
lectées sur des périodes plus longues, telles que mensuelles ou trimestrielles,
afin d’obtenir les informations les plus précieuses. Pour des contrôles de per-
formance plus fréquents (quotidiens ou hebdomadaires), gardez votre analyse
brève et de haut niveau ; cela suffit pour rester au top des performances de
votre site web sans vous enliser dans des microdétails.
255
CONSEIL DE PRO
Les cartes thermiques, les avis et les enregistrements Hotjar sont des outils
utiles pour visualiser vos données afin de faciliter le partage des résultats de
performance de votre site.
- Les cartes thermiques [Heatmaps] montrent quelles parties d’une page
web captent l’attention des visiteurs (ou sont ignorées), vous donnant une
impression d’un coup d’œil des parties de votre site qui sont négligées.
- Les enregistrements [Recordings] collectent la session de chaque client
sur votre site web, afin que vous puissiez voir de première main comment ils
vivent et interagissent avec chaque page.
- Les avis [Feedbacks] et les sondages [Surveys] permettent à vos visiteurs
de communiquer ce qu’ils pensent et ressentent à propos de chaque élé-
ment de votre site web avec leurs propres mots.
La création de rapports de performances attrayants, visuels et bien structu-

rés pour le partage de vos résultats facilite la compréhension d’informations
denses par l’ensemble de l’équipe et des parties prenantes.
En restant objectif avec les données et en recherchant continuellement des

opportunités d’améliorer votre expérience utilisateur, vous serez équipé pour
mener à bien vos buts et objectifs jusqu’au succès à long terme.
Outils d’analyse web pour améliorer

votre site et développer votre entreprise
Avec le nombre d’outils d’analyse web disponibles, il est facile de se perdre,
de ne pas savoir par où commencer et de ne pas choisir le bon outil ou la
bonne combinaison d’outils (indice : Google Analytics ne peut pas tout faire).
J’ai sélectionné les meilleurs logiciels, outils et plateformes d’analyse web

pour vous permettre de choisir facilement et de commencer à développer
votre entreprise avec des décisions fondées sur des données.
Mais avant de plonger dans le vif du sujet, une petite (mais nécessaire) clari-
fication s’impose.
C’est quoi les outils d’analyse web ?

Les outils d’analyse web sont des logiciels conçus pour suivre, mesurer et
rendre compte de l’activité du site web, y compris le trafic du site, la source
des visiteurs et les clics des utilisateurs.
256
L’utilisation d’outils d’analyse web vous aide à comprendre ce qui se passe sur
votre site web et à obtenir des informations sur ce qui fonctionne (et ce qui ne
fonctionne pas). À votre tour, vous pouvez utiliser ces informations pour opti-
miser l’expérience utilisateur et générer plus d’engagement et de conversions.
Quels sont les différents types d’outils d’analyse web ?

Il existe deux principaux types d’outils d’analyse web en fonction de la ma-
nière dont les données sont collectées :
- Hébergé (sur votre site web) : un morceau de code installé sur votre site
générera des analyses qui vous sont propres (par exemple, Google Analytics
ou Clicky).
- Tiers (hors de votre site web) : les informations collectées à partir de
sources tierces (comme les moteurs de recherche et les barres d’outils) gé-
nèrent des données d’analyse sur plusieurs sites web. Idéal pour l’analyse
concurrentielle (par exemple, Similarweb).
Au sein de ces groupes, les logiciels d’analyse web se répartissent en cinq

catégories :
1. Outils d’analyse traditionnels : données quantitatives sur le trafic du site
web, telles que le taux de rebond et les pages vues (par exemple, Google
Analytics).
2. Outils d’analyse du comportement : données qualitatives individuelles ou
agrégées sur le comportement des utilisateurs du site web (par exemple,
Hotjar).
3. Outils d’analyse du parcours client : données des points de contact client
sur plusieurs canaux (par exemple, Woopra).
4. Outils d’analyse de contenu : analyse éditoriale pour mesurer la perfor-
mance du contenu du site web (par exemple, Chartbeat).
5. Outils d’analyse SEO : données sur les performances des mots-clés, les
backlinks, le trafic de recherche et les concurrents (par exemple, Ahrefs).
Bien que certains outils chevauchent plusieurs catégories, j’ai répertorié les
meilleurs outils pour chacune des catégories, ainsi que leurs alternatives les
plus proches.
257
Lorsque le sujet de l’analyse est abordé, les gens peuvent immédiatement

penser au leader de l’industrie, Google Analytics ; mais ce n’est que la pointe
d’un vaste iceberg d’analyse web. Voici d’autres outils d’analyse web utilisés
par les professionnels :
- Google Analytics.
- Matomo (anciennement Piwik).
- Woopra.
- Hotjar.
- HubSpot.
- Similarweb.
- Ahrefs.
Google Analytics56
Qu’est-ce que c’est : Google Analytics est un outil d’analyse web traditionnel
qui fournit des données quantitatives sur les utilisateurs et les clients sur tous
les appareils et plateformes.
Fig 12.3. Google Analytics.
56. https://marketingplatform.google.com/intl/fr/about/analytics/
258
Fonctionnalités clés et avantages :

- Suivez les données quantitatives, comme les sessions ou le taux de rebond,
organisées dans des rapports dédiés, pour savoir ce qui se passe sur votre
site web.
- Collectez des données basées sur des événements à partir de sites web et
d’applications avec GA4 [Google Analytics 4].
- Intégration avec le reste des outils Google Marketing Platform, comme Ad-
words ou la Search Console, pour combiner toutes vos données en un seul
endroit.
Tarif : gratuit.
Alternatives les plus similaires :

- Yandex Metrica : outil d’analyse web du moteur de recherche russe Yandex.
- Baidu Analytics (ou Baidu Tongji) : outil d’analyse web du moteur de re-
cherche chinois Baidu.
Matomo57 (anciennement Piwik)

Qu’est-ce que c’est : Matomo est un outil d’analyse web open source qui
met l’accent sur la protection de vos données et de la vie privée de vos clients.
Fig 12.4. Matomo
57. https://fr.matomo.org/
259

- Avec la propriété à 100 % des données, les utilisateurs peuvent utiliser les
analyses en toute sécurité sans se soucier de l’utilisation des données à des
fins marketing ou à d’autres fins.
- Protégez votre vie privée et celle de vos utilisateurs avec un outil conforme
aux lois les plus strictes en matière de confidentialité, y compris RGPD58,
HIPAA59, CCPA60, LGPD61 et PECR62.
- Données d’analyse web complètes, des données comportementales aux
performances du référencement et des publicités payantes.
Prix :
- Gratuit pour les utilisateurs auto-hébergés.
- 19 €/mois pour l’hébergement sur les serveurs de Matomo (essai gratuit de
21 jours).

- Clicky : outil d’analyse de site web respectueux de la vie privée et conforme
au RGPD (ou GDPR).
- Plausible : respect de la vie privée, pas de cookies. Alternative à Google
Analytics conforme aux normes RGPD, CCPA et PECR. Fabriquée et héber-
gée dans l’UE.
- Fathom : alternative à GA63 facile à utiliser, respectueuse de la vie privée et
conforme au RGPD avec une interface utilisateur (UI).
- Simple Analytics : confidentialité d’abord, basée et hébergée dans l’UE,
pas de cookies. Alternative à GA, également avec une interface utilisateur
élégante.
58. GDPR ou RGPD : le sigle RGPD signifie « règlement général sur la protection des données » (en anglais,
« General Data Protection Regulation » ou GDPR). Le RGPD encadre le traitement des données personnelles
sur le territoire de l’Union européenne. https://www.cnil.fr/fr/rgpd-de-quoi-parle-t-on
59. HIPAA : le Health Insurance Portability and Accountability Act est une loi votée par le Congrès des États-
Unis en 1996 et qui concerne la santé et l’assurance maladie. Les rapporteurs de la loi étaient les sénateurs
Ted Kennedy et Nancy Kassebaum. https://www.hhs.gov/hipaa/index.html
60. CCPA : le California Consumer Privacy Act (CCPA) est une loi californienne sur la confidentialité des
données qui réglemente la manière dont les entreprises du monde entier peuvent traiter les informations
personnelles des résidents de Californie. https://www.cookiebot.com/fr/what-is-ccpa/
61. LGPD : la LGPD est la nouvelle loi générale de protection des données personnelles du Brésil. Elle est
officiellement entrée en vigueur le 18 septembre 2020. https://www.iubenda.com/fr/help/54762-quest-ce-
que-la-lgpd-et-comment-vous-mettre-en-conformite
62. PECR : le règlement sur la confidentialité et les communications électroniques (PECR) côtoie la loi sur la
protection des données et le RGPD britannique. Ils confèrent aux personnes des droits spécifiques en matière
de confidentialité en ce qui concerne les communications électroniques. https://ico.org.uk/for-organisations/
guide-to-pecr/what-are-pecr/
63. GA : Google Analytics
260
Woopra64
Qu’est-ce que c’est : Woopra est un outil d’analyse de bout en bout du par-
cours client qui suit ce que les utilisateurs font sur votre site web, afin de vous
aider à acquérir et à fidéliser davantage de clients.
Fig 12.5. Woopra

- Obtenez une compréhension globale de chaque action effectuée par vos
utilisateurs dès le premier point de contact.
- Suivez, analysez et optimisez chaque point de contact qui affecte l’expé-
rience client.
- Automatisez les flux de travail avec des déclencheurs intégrés et des inté-
grations avec d’autres outils d’analyse web populaires et plus encore.
Prix :
- Démarrage gratuit pour 500 000 actions/mois.
- Puis 999 $/mois (essai gratuit de 14 jours).

- Contentsquare : plateforme d’informations sur l’expérience numérique d’en-
treprise avec analyse intégrée du parcours client.
64. https://www.woopra.com/
261
- Totango : plateforme composable de réussite client et constructeur de par-

cours client.
Hotjar65
Qu’est-ce que c’est : Hotjar est la seule plateforme d’informations sur l’ex-
périence numérique qui fournit des informations visuelles sur le comporte-
ment, des avis instantanés et des entretiens individuels, le tout sur une seule
plateforme.
Fig 12.6. Hotjar

- Obtenez des informations globales et exploitables en comprenant ce que
vos utilisateurs font avec les cartes thermiques, les enquêtes, les entonnoirs
de conversion et les intégrations avec les outils d’analyse web traditionnels,
et pourquoi ils se comportent de cette façon avec les enregistrements de
session, les widgets d’avis et les entretiens avec les utilisateurs.
- Concentrez-vous sur la croissance avec des outils de pointe conçus en
tenant compte de la confidentialité dès le premier jour (conformément au
RGPD, CCPA, LGPD, etc.).
- Gagnez du temps et de l’argent avec toutes les informations dont vous avez
besoin sur une plateforme centrale facile à utiliser.
Prix :
- Démarrez gratuitement avec un plan « gratuit pour toujours ».
65. https://www.hotjar.com/
262
- Ou débloquez plus de fonctionnalités pour développer votre entreprise avec

l’un des plans payants.

- CrazyEgg : plateforme d’informations sur l’expérience numérique. Compre-
nez le parcours client avec des instantanés, des cartes thermiques et des
enregistrements. Découvrez si des erreurs sur votre site web empêchent les
visiteurs de convertir. Comparez et analysez les sources de trafic par canal,
obtenez des avis directs de vos clients et visiteurs de votre site web.
- FullStory : outil d’intelligence d’expérience numérique. Surveillez toute votre
expérience numérique. Révélez chaque problème et chaque opportunité.
Donnez aux utilisateurs exactement ce qu’ils veulent.
HubSpot66
Qu’est-ce que c’est : le Marketing Hub de HubSpot est une plateforme
d’analyse marketing rassemblant tous vos outils et données marketing en un
seul endroit.
Fig 12.7. HubSpot

- Mesure du trafic et génération des prospects, automatisation des e-mails et
optimisation du taux de conversion (CRO).
- Plateforme de gestion de contenu multimédia intégrée pour créer et distri-
buer du contenu.
66. https://www.hubspot.fr/
263
- Fonctionnalités de génération et d’alimentation de prospects, y compris les

créateurs de formulaires et de pages de destination et l’automatisation du
marketing par e-mail.
- Analyses marketing intégrées pour transformer les données quantitatives du
référencement, des médias sociaux et des campagnes de cycle de vie en
actions.
Prix :
- Les outils gratuits sont toujours libres d’utilisation.
- Les forfaits payants commencent à partir de 30 $/mois.

- Adobe Marketing Cloud : plateforme de marketing numérique de bout en
bout.
- Salesforce Marketing Cloud : solution complète de marketing numérique.
Similarweb67
Qu’est-ce que c’est : Similarweb est une plateforme d’analyse de la concur-
rence et du marché qui suit les données de trafic en ligne pour vous aider à
mesurer vos performances par rapport à vos concurrents directs et au reste
du marché.
Fig 12.8. Similarweb
67. https://www.similarweb.com/fr/
264

- Obtenez une vue exclusive sur les performances de n’importe quel site web
via l’extension de navigateur gratuite et suivez les tendances du trafic des
concurrents au fil du temps.
- Découvrez comment les sites se classent à l’échelle mondiale et dans tous
les secteurs, et analysez leur trafic et leur engagement au fil du temps.
- Trouvez et connectez-vous avec des prospects plus qualifiés et transformez-
les en clients avec des informations et des données clés sur leur entreprise.
Prix:
- Similarweb propose plusieurs outils gratuits.
- Un plan payant, Competitive Intelligence à partir de 167 $/mois.

- SpyFu : solution complète d’analyse de la concurrence.
- Ahrefs et SEMRush.
Ahrefs68
Qu’est-ce que c’est : Ahrefs propose une suite complète d’outils de référen-
cement pour vous aider à vous classer plus haut dans les pages de résultats
des moteurs de recherche et à obtenir plus de trafic.
Fig 12.9. Ahrefs

68. https://ahrefs.com/fr
265

- Trouvez les mots-clés que vos clients recherchent et suivez la progression
de votre classement.
- Analysez où se situent vos concurrents, de leur profil de backlink aux mots-
clés pour lesquels ils se classent et lesquels de leurs éléments de contenu
sont les plus performants.
- Auditez votre propre site web et identifiez à la fois les opportunités tech-
niques de référencement et d’optimisation du contenu.
Prix :
- Outils gratuits avec des limites sur le volume de données analysées.
- À partir de 74 €/mois si vous payez à l’année.
- 89 €/mois pour un abonnement mensuel.

- Ubersuggest : logiciel de référencement tout-en-un. Suivez et améliorez
votre classement. Recevez des mises à jour quotidiennes sur votre situation.
Recevez des alertes sur les problèmes critiques sur votre site web. Surveil-
lez votre santé SEO. Organisez et sauvegardez vos recherches et contenus
SEO.
- SEMRush : plateforme complète de référencement, de marketing de conte-
nu, de recherche de concurrents, de PPC et de marketing sur les réseaux
sociaux.
- Moz : logiciel de référencement tout-en-un.
Pourquoi les outils de webanalytics traditionnels sont

utiles… Mais pas suffisants
Les outils d’analyse web traditionnels tels que Google Analytics vous aident à
comprendre qui visite votre site web et quelle interaction utilisateur a lieu. Par
exemple, vous pouvez collecter des données telles que :
- Trafic : découvrez combien de personnes consultent votre site web, d’où
elles viennent et s’il s’agit de nouveaux visiteurs ou de visiteurs réguliers.
- Temps passé sur la page : découvrez combien de temps les visiteurs
passent sur vos pages les plus importantes.
- Taux de rebond : découvrez combien de visiteurs quittent votre site web
après avoir visité une seule page.
266
Mais il y a une mise en garde :

Les données d’analyse traditionnelles ne suffisent pas pour vraiment com-
prendre comment les visiteurs vivent votre site web et pourquoi ils se com-
portent comme ils le font. Les outils d’analyse de sites web traditionnels sont
utiles, mais ils présentent leurs propres défis. Il y a certaines questions aux-
quelles les outils d’analyse web ne peuvent pas répondre seuls, comme :
- Ce que vos visiteurs recherchaient lorsqu’ils ont atterri sur votre site.
- Ce qu’ils pensent et vivent en parcourant les pages.
- Quelles informations manquent.
- Si les visiteurs sont repartis satisfaits après avoir trouvé ce dont ils avaient
besoin ou frustrés après s’être retrouvés coincés quelque part.
C’est ici qu’un logiciel d’analyse de comportement complémentaire (comme

Hotjar) peut vous aider à brosser un tableau plus clair et à comprendre com-
ment les visiteurs vivent votre site.
Comprenez pourquoi les utilisateurs quittent votre site

Trouvez une page avec un taux de sortie élevé dans Google Analytics, placez-
y une carte thermique Hotjar, commencez à examiner ce qui est cliqué ou
ignoré et voyez jusqu’où les visiteurs défilent.
Pour plus de contexte, regardez les enregistrements de session des per-

sonnes qui quittent la page et observez leur comportement : que font-ils avant
de partir ? Partent-ils frustrés (astuce : recherchez les rages clics69) ou ont-ils
simplement obtenu ce dont ils avaient besoin ?
Les replays de session sont un complément particulièrement utile aux outils

traditionnels d’A/B testing : ils vous permettent de voir comment les utilisa-
teurs se comportent sur chaque variante de votre page afin de confirmer vos
hypothèses et d’améliorer les taux de conversion.
Allez au-delà de l’analyse traditionnelle

Google Analytics est un excellent point de départ, mais il n’est pas suffisant,
et ses alternatives non plus. L’analyse web est plus que de simples données
quantitatives.
Pour améliorer votre site et, en fin de compte, développer votre activité, vous
devez comprendre le comportement des utilisateurs, et pas seulement savoir
ce que les gens font sur votre site. Combinez les outils d’analyse web tradi-
69. Les rage clics ou « clics de rage » sont l’équivalent virtuel de l’écrasement d’un bouton qui ne répond pas
sur une télécommande – sauf que là, c’est le bouton de souris.
267
tionnels avec un outil d’analyse du comportement comme Hotjar pour obtenir

une image complète. Je vous le recommande, parce que c’est ce que je fais.
Recommandations d’ouvrages
pour le marketing digital
Vous avez remarqué que certains chapitres abordent certains aspects du mar-
keting. Mais ce n’est pas le but de ce livre. Je vais donc vous recommander
deux ouvrages qui, selon moi, couvrent parfaitement cette question :
Marketing digital
Pour en savoir plus au sujet du marketing digital en général et du référence-
ment web en particulier, je vous recommande le livre de Hervé RIOCHE et
Yohann SORIN, Le marketing digital en 150 questions, aux éditions GERESO :
Fig 12.11. Le marketing digital en 150 questions.
268
Réseaux sociaux
Pour approfondir la question des contenus sur les réseaux sociaux, je vous
recommande le livre de Samuel BIELKA, Le grand livre des réseaux sociaux,
aux éditions GERESO :
Fig 12.12. Le grand livre des réseaux sociaux.
Je crois sincèrement que ces deux livres vous permettront de maximiser le re-
tour sur investissement de votre site web. Si vous vous rappelez l’écosystème
de marketing digital abordé au chapitre 4, vous comprendrez la pertinence de
ces recommandations.
269
Partie 3
PROJET
C’est bien de vous dire ce qu’il faut faire, ce que vous devez préparer, et tout
le bazar. Mais je crois que c’est mieux de vous montrer.
Dans ce document de spécifications, je vous expose pas à pas comment doit

se présenter un projet dans la vie réelle.
L’exemple se base sur une entreprise réelle pour laquelle j’ai fait le travail de
stratégie de marque et de design UX. J’étais accompagné dans l’aventure par
un neuromarketer dont les intrants ont été déterminants dans la différenciation
et le positionnement de l’offre.
À la suite de problèmes de naming, l’application a dû changer de nom. Et par

souci de confidentialité, il y a beaucoup de données que j’ai changées.
271
À NOTER
J’utilise ChatGPT1 pour générer la plupart des réponses pour remplir ce docu-
ment de spécifications. À chaque fois que ce sera possible, je mentionnerai le
prompt (ou requête) et la réponse.
Retrouvez le site d'exemple WordPress à l'adresse

https://freemoveapp.wordpress.com/
Retrouvez le site d'exemple Webflow à l'adresse

https://freemove.webflow.io
Retrouvez le site d'exemple Systeme.io à l'adresse

https://freemove.systeme.io
1. ChatGPT est un modèle de langage développé par OpenAI. Il est capable de générer du texte à la demande
en utilisant une intelligence artificielle de pointe. Il a été entraîné sur un vaste corpus de texte, y compris des
articles de journaux, des romans, des scripts de films et de télévision, ainsi que des conversations en ligne.
Cela lui permet de comprendre le contexte d’une conversation et de fournir des réponses pertinentes et
cohérentes. https://chat.openai.com/
272
Chapitre 13
Document
de spécifications
free move
Retrouvez le template à remplir ici :
https://bit.ly/specsdoc-csisc
273
Le document de spécifications est l’ensemble

des informations en rapport avec la création de
votre site web. Il rassemble des données sur qui
vous êtes, à qui vous vous adressez (profils
clients), le but du projet, l’analyse concurren-
tielle, l’inventaire de contenu, le coût, les
délais…
Avant tout, vous avez besoin d’identifier ; de faire des recherches, et de cibler
votre audience prospective. Vous y arrivez en faisant un brainstorming sur les
éléments importants dont vous aurez besoin pour le projet de site web que
vous planifiez de créer.
Vous allez ainsi préparer une formulation écrite de concept ou document de

spécifications du projet. Ce document définit les buts, l’audience, le concept,
le message, les images, le style et les thèmes du site web.
But et objectifs du projet

« Un site web marketing pour encourager les prospects à installer l’application
free move et à l’utiliser au quotidien pour tous leurs besoins de mobilité au
Cameroun. »
Le but de mon site web est global, stratégique.
L’objectif de mon site web doit être SMART : spécifique, mesurable, attei-
gnable, réaliste et temporel.
À NOTER
Avant ce prompt, j’ai d’abord donné le contexte à ChatGPT : « free move est
une application mobile de mobilité développée par la start-up technologique
ClayverApp ».
Prompt :
« Définis un objectif SMART pour le site web marketing de l’application free
move. »
Réponse :
Objectif : augmenter le nombre de téléchargements de l’application free
move de 25 % en 6 mois.
274
https://www.DOCUMENT DE SPÉCIFICATIONS FREE MOVE.com
- Spécifique : l’objectif vise à augmenter le nombre de téléchargements de

l’application free move de 25 %, ce qui signifie qu’il doit y avoir une aug-
mentation mesurable et spécifique du nombre de téléchargements.
- Mesurable : l’objectif est mesurable à travers les données de télécharge-
ment de l’application, ce qui permettra de suivre les progrès et de mesurer
l’atteinte de l’objectif.
- Atteignable : l’objectif est ambitieux mais atteignable en 6 mois, en utilisant
une combinaison de stratégies de marketing numérique telles que la publi-
cité en ligne, les réseaux sociaux et le marketing d’influence.
- Relevant : l’objectif est pertinent pour la croissance de l’application free
move et pour répondre aux besoins des utilisateurs qui cherchent des
solutions pour leur mobilité.
- Temporellement défini : l’objectif doit être atteint dans un délai de 6 mois,
ce qui permettra de suivre les progrès, d’ajuster les stratégies de marke-
ting si nécessaire et de mesurer l’atteinte de l’objectif à la fin de la période
de 6 mois.
N’ayant pas de données historiques sur lesquelles me baser, je vais donc un

peu réaménager la réponse de l’IA. L’objectif SMART du projet est donc : à
partir du site web de l’application, générer 30 000 téléchargements de
l’application free move en 6 mois.
Afin de remplir mon tableau d’OKRs :
Prompt :
« Rédige deux OKR pour le site web marketing de l’application free move si
l’objectif SMART est : à partir du site web de l’application, générer 30 000 té-
léchargements de l’application free move en 6 mois. »
Réponse :
Voici deux exemples d’Objectifs et Résultats Clés (OKR) pour atteindre l’ob-
jectif SMART de générer 30 000 téléchargements de l’application free move
à partir du site web de l’application en 6 mois :
Objectif #1 : optimiser le taux de conversion du site web free move pour
générer 25 000 téléchargements d’application en 6 mois.
Résultats clés :
- Augmenter le taux de conversion des visiteurs du site web free move en
téléchargements d’application de 20 % en mettant en place des call-to-
actions (CTA) plus accrocheurs.
275
- Obtenir une augmentation de 30 % des téléchargements directs à partir du

site web free move en utilisant des pop-up de promotion.
- Augmenter le taux de conversion des utilisateurs de Google Ads en télé-
chargements d’application de 15 % grâce à l’optimisation de la page de
destination.
Objectif #2 : augmenter la visibilité de free move en ligne pour générer

5 000 téléchargements d’application supplémentaires en 6 mois.
Résultats clés :
1. Obtenir une augmentation de 50 % du trafic sur le site web free move
provenant des réseaux sociaux grâce à l’optimisation du contenu et des
annonces.
2. Augmenter le taux de conversion des visiteurs de Facebook Ads en télé-
chargements d’application de 25 % grâce à la mise en place d’un proces-
sus d’inscription simplifié.
3. Obtenir une augmentation de 20 % des téléchargements d’application à
partir des recherches organiques en améliorant le référencement naturel
(SEO) du site web de free move.
Je pourrais tout aussi bien réaménager les réponses de l’IA, mais je vais lui
demander directement. Ce qui donne le tableau suivant :
QUOI QUOI
Objectif #1 : optimiser le taux de Objectif #2 : augmenter la visibilité de free
conversion du site web free move move en ligne pour générer 5 000 téléchar-
pour générer 25 000 téléchargements gements d’application supplémentaires en 6
d’application en 6 mois. mois.
COMMENT COMMENT
Résultat clé : N/A Résultat clé : N/A
COMMENT COMMENT
Résultat clé individuel #1 : Résultat clé individuel #1 : obtenir
augmenter le taux de conver- une augmentation de 50 % du trafic
sion des visiteurs du site web sur le site web free move provenant
free move en téléchargements des réseaux sociaux grâce à l’optimi-
d’application de 20 % en sation du contenu et des annonces.
mettant en place des call-to-
actions (CTA) plus accrocheurs.
276
COMMENT COMMENT
Résultat clé individuel #2 : Résultat clé individuel #2 : augmen-
obtenir une augmentation de ter le taux de conversion des visiteurs
30 % des téléchargements de Facebook Ads en téléchargements
directs à partir du site web d’application de 25 % grâce à la mise
free move en utilisant des en place d’un processus d’inscription
pop-up de promotion. simplifié.
COMMENT COMMENT
Résultat clé individuel #3 : Résultat clé individuel #3 : obtenir
Augmenter le taux de conver- une augmentation de 20 % des télé-
sion des utilisateurs de Google chargements d’application à partir des
Ads en téléchargements recherches organiques en améliorant
d’application de 15 % grâce le référencement naturel (SEO) du site
à l’optimisation de la page de web de free move.
destination.
Si vous ne comprenez pas comment fixer les objectifs et les résultats clés, je
vous recommande de retourner à la partie correspondante du document de
spécifications dans le chapitre 7.
Profil de l’entreprise
Je fais une fois de plus appel à ChatGPT pour ce contenu :
Prompt :
« Rédige la présentation de ClayverApp, une start-up technologique qui
développe une application mobile sur la mobilité, free move. »
Réponse :
ClayverApp est une start-up technologique qui se consacre à développer
une application mobile innovante sur la mobilité, nommée free move. Cette
application a pour but d’offrir une solution de mobilité complète et person-
nalisée à ses utilisateurs, en intégrant différents modes de transport, tels que
la marche, le vélo, les transports en commun, les services de covoiturage et
les taxis.
Free move est conçue pour aider les utilisateurs à planifier leur voyage en
temps réel, en leur fournissant des informations en temps réel sur les diffé-
rents modes de transport disponibles, ainsi que des renseignements sur les
horaires, les tarifs et les itinéraires. L’application est également équipée d’un
système de localisation GPS qui permet de suivre en temps réel la position
277
des utilisateurs et de leur donner des informations sur les stations de transport
en commun les plus proches.
En plus de cela, free move propose aussi des fonctionnalités de gamification,

qui permettent aux utilisateurs de gagner des récompenses en recourant aux
modes de transport les plus durables et les plus écologiques. Cette approche
ludique de la mobilité durable vise à encourager les utilisateurs à adopter des
modes de transport plus respectueux de l’environnement.
ClayverApp a été créée en réponse à un besoin croissant de solutions de

mobilité durables, efficaces et personnalisées dans les villes en constante
évolution. L’entreprise est composée d’une équipe de passionnés de la mobi-
lité, de l’innovation et de la durabilité, qui travaillent ensemble pour offrir aux
utilisateurs une expérience de mobilité sans stress et adaptée à leurs besoins
individuels.
En résumé, free move est une application mobile innovante développée par
ClayverApp, qui fournit une solution complète et personnalisée de mobilité
durable. Grâce à son approche ludique, free move vise à encourager les uti-
lisateurs à adopter des modes de transport plus respectueux de l’environne-
ment, tout en offrant une expérience de mobilité sans stress et adaptée à leurs
besoins individuels.
Je garde ce qui me convient, et je réserve le texte sur l’application pour la

partie consacrée aux fonctionnalités. Ce qui me donne ce texte :
ClayverApp est une start-up technologique qui se consacre à développer une

application mobile innovante sur la mobilité, nommée free move. Cette appli-
cation a pour but d’offrir une solution de mobilité complète et personnalisée à
ses utilisateurs, en intégrant différents modes de transport, tels que la marche,
le vélo, les transports en commun et les taxis.

évolution, en commençant par le Cameroun. L’entreprise est composée d’une
équipe de passionnés de la mobilité, de l’innovation et de la durabilité, qui tra-
vaillent ensemble pour offrir aux utilisateurs une expérience de mobilité sans
stress et adaptée à leurs besoins individuels.
278
Position sur le marché et analyse

de la concurrence
Comment vous vous positionnez par rapport à la concurrence. Même si c’est
toujours possible d’utiliser ChatGPT, permettez-moi de vous présenter la
bonne vieille méthode de travail intellectuel.
Pour mieux comprendre tous les aspects de l’analyse concurrentielle, je vous

invite à lire avec attention ce guide détaillé : [retrouvez le lien cliquable dans
le template fourni]
Ce qui me donne la possibilité de remplir le tableau page suivante.
279
Nom de Concurrent 1 Concurrent 2 Concurrent 3

la marque Waze Coyote Google Maps
Cœur de marque + But : parce que + But : roulez en + But : la création de
tout le monde sécurité et gardez cartes est une vieille
(but, vision,
déteste les vos points. entreprise humaine,
mission, valeurs)
embouteillages. que ceux d’entre
+ Vision : Coyote,
nous qui travaillent
+ Vision : la magie c’est la complémen-
sur Google Maps
de Waze a toujours tarité de l’humain et
sont heureux de
reposé sur les de la technologie.
perpétuer.
personnes qui ali- Nous croyons au
mentent la techno- pouvoir de la solida- + Vision : cartogra-
logie. Les conduc- rité sur la route et à phier le monde avec
teurs qui signalent celui des technolo- exactitude.
des routes fermées, gies communicantes + Mission : Google
retracent des routes pour accroître la Maps Platform aide
et trouvent des solu- sécurité. Notre les organisations et
tions pour améliorer ambition : repousser les développeurs à
les déplacements de toujours nos propres créer de meilleures
tous les utilisateurs. limites, atteindre une expériences, à
qualité d’information améliorer leurs
+ Mission : créer
et une pertinence opérations et à saisir
une application de
sans faille, élaborer de nouvelles oppor-
navigation alimentée
de nouveaux ser- tunités commer-
par les usagers,
vices, pour étoffer ciales grâce à des
conçue pour éviter
notre communauté. données géospa-
plus facilement
les obstacles sur + Mission : une tiales détaillées pour
la route, au sens offre unique dédiée plus de 250 pays et
propre comme au aux professionnels, territoires.
figuré. entièrement modu-
+ Valeurs :
lable, intégrant la
+ Valeurs :
récupération de
véhicules volés, la
gestion de flottes et
le système d’alertes
COYOTE.
+ Valeurs : audace,
solidarité, innovation
Apparence/ Jeune et fun Corporate et sérieux Professionnel et
ressenti de la amical
marque
280

Proposition de Moins d’embouteil- Avec Coyote, gardez Explorez et parcou-
valeur lages, ça ne ferait de vos points. rez le monde qui
mal à personne. vous entoure.
Tagline - - -
Produits/services + Planifiez un trajet + Alertes temps réel + Trouver un parking
de base avec la carte en plus facilement
+ Trafic et navigation
temps réel
+ Gestion de flotte
+ Modifier la carte automobile
Waze
+ Alerte sécurité
+ Carte en temps réel prédictive
avec les incidents
+ Alerte radar
+ Trouver les sta-
tions-service les plus + Traqueur Coyote
proches + Smart Driving
+ Estimation du Coyote
temps d’arrivée
+ Publicité
- Les pins cliquables
- Le takeover
- Un lien sponsorisé
+ Covoiturage
Personas + Chauffeur person- + Chef d’entreprise + Organisation
acheteurs nel pressé soucieux de la + Propriétaire de
protection de ses commerce de
+ Chauffeur
véhicules proximité
professionnel
+ Chauffeur person- + Usager des
+ Voyageur excité
nel pressé transports
+ Chauffeur + Voyageur
professionnel
+ Développeur
+ Constructeurs
automobiles
281

Comment elles Comme une com- Comme une Comme des par-
parlent de leurs munauté de per- communauté de tenaires d’affaires
clients sonnes volontaires personnes solidaires qu’ils doivent faire
qui ont pour point à la recherche de réussir.
commun le fait services de sécurité
qu’ils détestent les pour leurs véhicules
embouteillages. et d’assistance lors
des déplacements
afin de garder leurs
points de permis de
conduire.
Acquisition client - - -
Canaux + Bouche-à-oreille + Bouche-à-oreille + Bouche-à-oreille
marketing + Publicité (Google + Publicité (Google
+ Publicité (Google
Ads, Facebook Ads, Facebook Ads, Facebook
Ads…) Ads…) Ads…)
+ Médias sociaux + Médias sociaux + Médias sociaux
+ Blog + Blog + Blog
+Spotify, Apple + Salons
Music, etc. professionnels
+ Partenaires infos
trafic et média : BFM
TV, RTBF, etc.
+ Partenaires Opéra-
teurs : Orange, SFR,
Vodafone
Canaux Google Ads, Google Ads, Google Ads,
publicitaires Facebook Ads… Facebook Ads… Facebook Ads…
Canaux de vente N/A N/A N/A
Revenu N/A N/A N/A
282

Forces + Service offert avec + Possède des + Repose sur une
et via Google services pour auto- expertise de plus de
mobile et téléphone 20 000 développeurs
+ S’intègre facile-
portable + Possède le moteur
ment aux canaux de
musique et radio tels + Grande base de recherche le plus
que Deezer, Apple de données utilisé
Music, etc. d’utilisateurs + Les Local Guides
+ Forte communauté + Technologies et qui améliorent la
d’utilisateurs brevets propriétaires cartographie et les
permettant d’offrir itinéraires
+ Permet aux utili-
des services de + Les petits com-
sateurs de mettre à
qualité merces qui attirent
jour la carte Waze
+ Signale avec les utilisateurs sur la
précision les radars plateforme
+ Design de l’inter-
face assez moderne
Faiblesses + Disposition laide + Consomme plus + Très compétitif
et encombrée des de datas que Waze pour les petits
cartes commerces, exige
+ Infotrafic limité
beaucoup d’efforts
+ Dans une zone + Nécessite un plan pour se faire une
avec peu d’activité payant après 30 place
ou d’utilisateurs, jours d’essai
l’application perd + Le GPS ne pro-
son avantage nonce pas bien les
communautaire sur noms de rue locaux
Google Maps
+ Dans les zones
avec une grande
communauté, le
nombre d’icônes
à l’écran peut être
écrasant
+ L’application peut
être distrayante
+ Consommation
élevée de res-
sources de données
et d’énergie
283

Similitudes Carte + itinéraire Carte + itinéraire Carte + itinéraire
Différences Business model + Payant après une Ne propose pas
avec les annonceurs période d’essai le signalement
+ Aide à la conduite d’incidents
En plus de cette analyse approfondie des concurrents, j’ai également procédé

aux captures d’écran des pages d’accueil et des pages qui présentent l’appli-
cation en guise de recherche visuelle et d’inspiration pour les contenus.
Ma première requête sur Google a été « best free mobility apps ». Je conseille
les recherches en anglais, parce que pour l’instant, elles ont les résultats les
plus riches.
Je suis tombé sur cet article de Sixt qui m’a donné une super liste :
https://www.sixt.com/magazine/tips/top-free-navigation-apps/
Voici les interfaces que j’ai retenues pour inspiration visuelle et textuelle.
https://www.apple.com/maps/
284
https://fr.maps.me/app/
https://www.google.com/maps/about/#!/
285
https://www.waze.com/fr/company
https://www.moncoyote.com/fr/
286
Analyse de l’audience cible, profils

et scénarios d’utilisation
Audience cible
Généralement, toute personne qui se déplace d’un point à l’autre d’une ville,
ou d’une ville à une autre. Particulièrement, les propriétaires de véhicule.
Personas d’utilisateurs
Voici nos résultats pour l’application free move :
Profil client 1
Qui est votre client ?
Nom et prénom :
Henri BETOTE
Type de client [archétype] :
Chauffeur pro épidermique
Démographie Récit
sexe, âge, revenu, statut matrimonial, défis, emplois, ambitions
conjoint.e, enfants, emploi
+ Sexe : Homme Défis
+ Âge : 35 ans + Verser sa recette
+ Statut matrimonial : Marié + Nourrir sa famille
+ Revenu : 250 000 XAF/mois + Payer ses tontines
+ Enfants : 3 filles, 1 garçon
+ Emploi : Taximan Ambitions
+ Devenir propriétaire du véhicule qu’il
conduit
+ Assurer l’avenir de ses enfants
Emplois (JTBD)
+ Transporter les individus d’un point à un
autre en moins de temps possible
287
Besoins Solutions
De quoi a-t-il besoin pour faire face à ses Que lui proposons-nous pour satisfaire ses
défis ? besoins ?
+ Économiser du carburant + Permettre de savoir où sont les

+ Connaître itinéraires les moins bouchés bouchons
pour gagner en temps + Permettre de savoir où sont les routes
barrées
Profil client 2
Qui est votre client ?
Nom et prénom :
Yvonne NGASSA
Type de client [archétype] :
Chauffeur personnel pressé
Démographie Récit
sexe, âge, revenu, statut matrimonial, défis, emplois, ambitions
conjoint.e, enfants, emploi
Défis
+ Sexe : Féminin + Arriver à l’heure au travail/RDV pros
+ Âge : 30 ans + Revenir de ses pauses à temps
+ Statut matrimonial : Célibataire
+ Revenu : 350 000 XAF/mois Ambitions
+ Enfants : 1 garçon + Avoir une promotion
+ Emploi : Ingénieur réseau
Emplois (JTBD)
+ Se déplacer vers son lieu de service
+ Transporter les membres de sa famille et
ses connaissances
288
Besoins Solutions
De quoi a-t-il besoin pour faire face à ses Que lui proposons-nous pour satisfaire ses
défis ? besoins ?
+ Garder son véhicule en bon état + Permettre de savoir où sont les

+ Économiser du carburant bouchons
+ Signaler les routes en mauvais état
+ Signaler les routes barrées
+ Signaler les commerces/restaurants/
lieux de loisirs de proximités avec parking
disponible
Scénarios utilisateur
Comment chaque persona est supposé utiliser le site pour résoudre son pro-
blème principal, une fois sur le site web ?
J’ai deux personas, qui sont des conducteurs d’automobile (chauffeurs, dans
le langage courant au Cameroun) : Henri et Yvonne.
J’appelle ChatGPT à la rescousse. Je ferai deux prompts dans mon chat « free
move : Mobility App ». Un prompt général (GPT a appelé mon persona « Jean »
et j’ai remplacé par « Henri ») et un prompt en donnant plus d’informations sur
mon persona Yvonne.
PROMPT #1 :
« Rédige un scénario utilisateur pour un chauffeur de taxi qui vient sur le site
de l’application mobile free move pour la télécharger. »
RÉPONSE #1 :
Voici un exemple de scénario utilisateur pour un chauffeur de taxi qui vient
sur le site de l’application mobile free move pour télécharger celle-ci :
Henri est un chauffeur de taxi qui travaille dans la ville depuis des années.
Récemment, il a remarqué que la concurrence était de plus en plus rude et
il a du mal à trouver des clients. Un de ses amis lui a recommandé d’utiliser
free move, une application mobile de mobilité qui peut l’aider à trouver plus
de clients.
289
Un soir après son service, Henri rentre chez lui et décide de vérifier le site
web de free move pour télécharger l’application. Lorsqu’il arrive sur la page
d’accueil, il voit immédiatement le titre accrocheur qui indique comment free
move peut aider les chauffeurs de taxi à trouver plus de clients. Il est heureux
de voir que l’application est gratuite et qu’il peut la télécharger facilement en
cliquant sur le bouton de téléchargement.
Henri est satisfait de la facilité avec laquelle il peut télécharger l’application

et il est également impressionné par les fonctionnalités qu’il voit sur la page
d’accueil, comme la navigation en temps réel et la possibilité de voir les prix
des trajets à l’avance. Il décide de prendre quelques minutes pour en savoir
plus sur l’application en lisant les informations supplémentaires sur la page.
Après avoir lu les informations, Henri est convaincu que free move est l’ap-
plication qu’il lui faut pour trouver plus de clients. Il télécharge rapidement
l’application sur son téléphone et commence à l’utiliser dès le lendemain
pour trouver des clients. Grâce à free move, Henri constate rapidement une
augmentation de sa clientèle et il est satisfait de sa décision de télécharger
l’application.
PROMPT #2 :
« Rédige un scénario utilisateur pour Yvonne, une ingénieur réseau qui sou-
haite arriver à l’heure tous les jours à son travail, et être ponctuelle à ses
rendez-vous. Elle vient sur le site de l’application mobile free move pour la
télécharger. »
RÉPONSE #2 :
Voici un exemple de scénario utilisateur pour Yvonne, une ingénieur réseau
qui souhaite arriver à l’heure tous les jours à son travail et être ponctuelle à
ses rendez-vous. Elle vient sur le site de l’application mobile free move pour
la télécharger :
Yvonne est une ingénieur réseau qui travaille pour une grande entreprise.
Elle doit souvent se rendre à des rendez-vous chez des clients ou des four-
nisseurs, et elle a du mal à arriver à l’heure en raison du trafic dense de la
ville. Elle a entendu parler de free move, une application mobile de mobi-
lité qui peut l’aider à planifier ses déplacements et à arriver à l’heure à ses
rendez-vous.
290
Un matin, alors qu’elle se prépare pour se rendre au travail, Yvonne décide

de visiter le site web de free move pour télécharger l’application. Elle est
immédiatement impressionnée par la page d’accueil qui met en avant les
fonctionnalités de l’application, notamment la possibilité de planifier des
itinéraires en temps réel et de recevoir des alertes sur les conditions de
circulation.
Yvonne clique sur le bouton de téléchargement et est dirigée vers la page de

téléchargement de l’application sur le magasin d’applications de son télé-
phone. Elle installe rapidement l’application et commence à l’utiliser pour
planifier son trajet pour se rendre au travail.
Grâce à free move, Yvonne peut voir les temps de trajet en temps réel, ainsi
que les conditions de circulation actuelles. Elle peut également choisir parmi
plusieurs itinéraires en fonction des conditions de circulation et de l’heure de
la journée. Yvonne est ravie de constater que l’application lui permet d’arri-
ver à l’heure à son travail et à ses rendez-vous, et elle utilise désormais free
move tous les jours pour planifier ses déplacements.
Je suis assez satisfait de ces deux résultats dans le cadre de l’exercice. Mais
dans un projet réel, j’aurais procédé à quelques ajustements.
Communiquer le message
Définition de la marque
Ceci est extrait d’un vrai document de stratégie de marque pour une applica-
tion de mobilité au Cameroun.
Si vous n’en avez pas une sous la main, contactez un brand strategist pour
en mettre une sur pied. Sinon, pour un début, ce n’est pas trop grave.
Mais si l’anglais ne vous fait pas peur, je vais vous recommander deux docu-
mentaires. Du plus light au plus costaud :
1. Crafting a Brand Identity par Stef Hamerlick et Welcome to the Jungle
Media2.
2. Building a Brand par The Futur3.
2. LOTIN Henri, Documentaire : Crafting a Brand Identity, https://lotincorp.biz/documentaire-crafting-brand-

identity/
3. LOTIN Henri, Documentaire : Building a Brand par The Futur, https://lotincorp.biz/documentaire-building-
a-brand-by-the-futur/
291
Si vous suivez bien ces étapes, vous serez à même de disposer d’une plate-
forme de marque comme celle-ci :
Définition de la marque : but.
Définition de la marque : vision et mission.
292
Définition de la marque : valeurs fondamentales.
Messagerie de marque
Messagerie de marque : proposition de valeur + tagline + piliers de
messagerie
293
Identité de marque
Identité de marque : énoncé de marque.
Logo + Charte graphique

Logo
294
295
Charte graphique
Pour la charte graphique, j’ai accès à tout le design system de l’application
dans Figma :
Vous pouvez voir dans le panneau de droite, tous les styles de caractères et
de paragraphes, ainsi que la palette de couleurs.
Je vais toutefois procéder à un résumé de ce design system, notamment pour

la typographie qui est différente entre les documents imprimés, le web et
l’application mobile.
Je vais ensuite me baser sur une échelle modulaire pour définir ma hiérarchie
typographique4.
Pour cela, je pourrais utiliser les tailles de polices d’un traitement de texte
comme Google Docs, pas besoin de logiciel de création graphique.
[5] [6] [7] 8, 9, 10, 11, 12, [13] 14 [15] [16], 18, 24, 30, 36, 48, 60, 72, 96
4. Pour en savoir plus sur la mise en pages et la typographie, je vous recommande mon cours « Mise en pages
& typographie » : https://academy.lotincorp.biz/courses/mise-en-pages-et-typographie/
296
Les chiffres entre crochets sont ceux qu’on trouve en plus dans les logiciels
professionnels. Utiliser ces chiffres, c’est comme utiliser les notes de la même
gamme : il y a très peu de chances de jouer une fausse note.
Une autre approche aurait été de me baser sur l’échelle typographique du

Material Design5 :
Adham Dannaway recommande de se servir des différentes échelles typogra-

phiques6. Il propose ainsi une manière assez simple et pratique de présenter
les choses (ci-contre).
5. https://m2.material.io/design/typography/the-type-system.html#type-scale
6. https://designcode.io/typographic-scales
297
Ran Segall de Flux Academy offre généreusement son Style Guide7 directe-
ment sur Webflow. Lorsque je le personnalise, j’obtiens quelque chose comme
ceci :
7. https://webflow.com/made-in-webflow/website/the-style-guide-template
298
Voilà. J’ai le nécessaire pour les détails visuels de mon interface.
299
Contenu + Architecture de l’information

Je me suis basé sur l’organisation du contenu de Waze, que j’ai trouvée très
aboutie. Oui, si vous ne savez pas où donner de la tête quand il s’agit de
produire votre contenu, commencez par analyser celui de vos concurrents.
Le pied de page de Waze est tellement bien organisé que je n’ai plus qu’à me
servir.
Si vous ne savez pas ce dont vous avez besoin, cette ressource [retrouvez le
lien cliquable dans le template fourni] vous sera fort utile dans cette section,
mais aussi dans la section 7 de ce document de spécifications.
Utilisez ce document [retrouvez le lien cliquable dans le template fourni] pour

recenser le contenu8 en votre possession, et celui à créer.
Une autre manière est de recourir à une intelligence artificielle comme

ChatGPT. Je vous ai déjà communiqué les prompts dont je me suis servi
pour rédiger la biographie de ClayverApp. Je vous communiquerai le premier
prompt pour la rédaction de la page d’accueil de mon site web en suivant le
StoryBrand® Framework.
Je trouve ça très pratique si vous êtes en panne d’idées. Les réponses

donnent un excellent point de départ, surtout quand on sait où apporter des
améliorations.
8. Pour aller plus loin, je vous recommande cette ressource : https://www.ecrirepourleweb.com/strategie-de-

contenuplan-de-contenu-modele-et-methode/
300
Contenu
Le contenu (texte, images, vidéos) du site web.
Les images pour le site web sont disponibles ici :
https://bit.ly/freemove-assets
Page « Accueil »
Une version simplifiée du StoryBrand® Framework serait :
Proposition de valeur :
Pourquoi est-ce que le prospect doit vous choisir plutôt que vos concurrents.
Call to action :
L’action que vous voulez que les prospects posent.
Logo Accueil - Fonctionnalités - Blog - À propos ESSAYER

Économisez du carburant et gagnez du temps
Les embouteillages sont cause de perte de temps, de stress, de coût élevé et de pollu-
tion de l’air. En utilisant free move, vous pouvez éviter les embouteillages et profiter d’un
trajet plus rapide, plus sûr et plus confortable.
ESSAYEZ FREE MOVE
Ces deux premières parties répondent aux questions :

- Qu’offrez-vous ?
- Comment cela améliorera-t-il la vie de vos clients ?
- Quel est l’appel direct à l’action ? Cela répond à la question du grunt test
« comment puis-je l’obtenir ? »
301
Prompt :
« J’ai une application mobile sur la mobilité, elle s’appelle free move, rédige
la page d’accueil du site web en utilisant le storybrand framework de Donald
Miller. »
Réponse :
Bienvenue sur freemove, l’application mobile qui vous permet de rester en
mouvement, où que vous soyez !
Nous savons que vous menez une vie active et que vous avez besoin d’une
application qui vous accompagne dans tous vos déplacements. C’est pour-
quoi nous avons créé freemove, pour vous aider à vous déplacer en toute
simplicité et en toute sécurité.
Avec freemove, vous pouvez facilement planifier votre itinéraire, trouver les
meilleurs trajets pour éviter les embouteillages, et même partager votre trajet
avec vos amis et votre famille. Notre application vous aide également à trou-
ver des stations-service et des parkings.
Mais free move ne s’arrête pas là. Nous voulons vous aider à rendre votre
trajet encore plus agréable. C’est pourquoi nous vous proposons une sé-
lection de musique personnalisée pour vous accompagner pendant votre
voyage, ainsi que des informations sur les événements locaux pour que vous
ne manquiez jamais une occasion de découvrir de nouvelles choses.
Chez free move, nous sommes passionnés par la mobilité et nous voulons
vous offrir la meilleure expérience possible. Téléchargez notre application
dès maintenant et rejoignez la communauté freemove pour rester en mouve-
ment, où que vous alliez.
Trois étapes :
Ce que les prospects doivent faire pour bénéficier du service/produit.
1. Téléchargez 3. Dites adieu aux
2. Planifiez votre trajet
l’application embouteillages
Stakes (ce qui est en jeu) :

Rappeler aux prospects ce qu’ils risquent s’ils ne font pas appel à vous. Pour
être efficace, répondez à ces 3 questions :
1. À quel problème votre client est-il confronté ?
2. Comment ce problème le fait-il se sentir ?
3. Pourquoi est-ce tout simplement injuste ?
302
Prompt :
« Ajoute une partie sur les risques encourus quand on n’a pas free move. »
Toujours en retard ? Toujours à consommer trop de carburant lors de vos

déplacements à cause des embouteillages ?
Vous n’êtes pas toujours en sécu- Vous êtes souvent coincé dans le trafic
rité et manquez de confort dans vos ou perdez parfois du temps à chercher
déplacements. une station-service ou un parking.
Vous manquez d’informations importantes Le manque d’informations importantes
sur les conditions de circulation, les tra- sur la circulation vous empêche de
vaux en cours ou les événements locaux. prendre des décisions éclairées pour
votre trajet.
ESSAYEZ FREE MOVE
Nous pensons que vous méritez de vous déplacer en toute confiance, en

sachant que vous avez accès aux informations les plus récentes et à un
réseau de soutien pour vous aider en cas de besoin.
Guide :
Positionnez-vous comme le guide, en exprimant de l’empathie et en démon-
trant de l’autorité.
Prompt :
« Quelles sont les conséquences des embouteillages et comment freemove
permet-elle d’éviter cela ? »
Prompt :
« Rédige trois témoignages avec des noms fictifs d’utilisateurs extrêmement
satisfaits de l’application freemove. »
Prompt :
« Rédige un témoignage avec un nom fictif d’un chauffeur de taxi extrême-
ment satisfait de l’application freemove. »
303
En utilisant freemove, vous pouvez éviter les embouteillages et profiter d’un trajet
plus rapide, plus sûr et plus confortable.
Nous savons que les embouteillages occasionnent des pertes de temps, du stress et
un coût élevé. Nous connaissons la frustration d’arriver en retard et de manquer une
opportunité.
C’est pourquoi free move a été conçue, pour vous éviter ces conséquences négatives
des embouteillages. Nous vous offrons la possibilité de planifier votre trajet et de
recevoir des alertes de trafic.
ESSAYEZ FREE MOVE
Ils parlent de nous
« Je suis chauffeur de taxi « Je suis une mère céliba- « Je suis un commercial
depuis plus de 10 ans et taire qui travaille et je dois qui passe beaucoup de
j’ai vu beaucoup de chan- être à l’heure pour aller temps sur la route. Avant
gements dans l’industrie chercher mon fils à la gar- d’utiliser free move,
du transport. Depuis que derie tous les jours. Avant je perdais souvent du
j’ai commencé à utiliser d’utiliser free move, j’étais temps à chercher mon
free move, j’ai remarqué toujours stressée et en chemin et à éviter les
une grande différence dans retard à cause des embou- embouteillages. Mainte-
mon travail. L’application teillages. Maintenant, je nant, je peux simplement
me permet de planifier mes peux planifier mon trajet en entrer ma destination
trajets en fonction de l’état fonction de l’état actuel de dans l’application et
actuel de la circulation, ce la circulation et être sûre me laisser guider par le
qui me permet d’économi- d’arriver à temps. Cela m’a GPS. Cela me permet
ser du temps et de l’argent fait gagner beaucoup de de me concentrer sur
en évitant les embouteil- temps et m’a permis de mon travail et de réduire
lages. De plus, la fonction- passer plus de temps avec le stress de la route. Je
nalité de partage de trajet mon fils. » recommande freemove
me permet de trouver des à tous les professionnels
– Marie, 32 ans
clients supplémentaires, ce qui passent beaucoup de
qui me permet de gagner temps sur la route. »
plus d’argent. Freemove – Pierre, 35 ans
a vraiment amélioré mon
travail de chauffeur de
taxi et je le recommande à
tous mes collègues dans
l’industrie du transport. »
– Jean, 42 ans
Avantages :
Détails de la proposition de valeur (ce que les prospects gagnent à faire affaire
avec vous)
304
Prompt :
« Présente les six fonctionnalités les plus intéressantes de l’application de
mobilité free move. »
Ce que vous obtenez

Planification de trajet
Trouver des stations-service et des parkings
Musique personnalisée
Alertes d’événements locaux
Assistance routière
Vous obtenez tout cela, plus la possibilité de gagner du

temps et d’économiser du carburant lors de vos déplace-
ments si vous installez free move aujourd’hui !
Choix de prix ou section de description du produit (si applicable)

Je n’ai pas besoin de cette section pour mon site web.
Plan :
Comment ça marche. Les étapes que vous utiliserez pour résoudre la préoc-
cupation de votre prospect.
Prompt :
« Explique en trois étapes comment avoir l’application et en profiter. »
Réponse :
Bien sûr ! Voici les trois étapes pour obtenir l’application freemove et en
profiter :
1. Télécharger l’application : vous pouvez télécharger l’application freemove
gratuitement depuis l’App Store ou Google Play Store, en fonction de
votre système d’exploitation. Il vous suffit de rechercher « freemove »
dans la barre de recherche de votre magasin d’applications, de téléchar-
ger l’application et de l’installer sur votre téléphone.
2. Créer un compte : une fois que vous avez installé l’application freemove,
vous devrez créer un compte en utilisant votre adresse e-mail ou votre
compte Facebook. Cela vous permettra de personnaliser votre expérience
de mobilité en enregistrant vos préférences de trajet, vos lieux favoris et
vos contacts.
305
3. Commencer à utiliser l’application : maintenant que vous avez créé un

compte, vous pouvez commencer à utiliser l’application freemove pour
planifier vos trajets, trouver les meilleurs itinéraires, découvrir de nou-
veaux lieux et rester informé des événements locaux. Vous pouvez égale-
ment profiter de fonctionnalités avancées, telles que le partage de trajet
avec vos amis et votre famille, la musique personnalisée et la recherche
de stations-service et de parkings.
En suivant ces trois étapes simples, vous pouvez commencer à utiliser l’ap-
plication freemove et profiter de tous les avantages de la mobilité connectée.
Comment dire définitivement adieu aux embouteillages ?
1. Téléchargez 2. Créez un compte 3. Commencez à l’utiliser

l’application Une fois que vous avez Maintenant que vous avez
Vous pouvez télécharger installé l’application free- créé un compte, vous pou-
l’application freemove move, vous devrez créer vez commencer à utiliser
gratuitement depuis l’App un compte en utilisant l’application freemove pour
Store ou Google Play votre adresse e-mail ou planifier vos trajets, trouver
Store, en fonction de votre votre compte Facebook. les meilleurs itinéraires,
système d’exploitation. Il Cela vous permettra découvrir de nouveaux
vous suffit de rechercher de personnaliser votre lieux et rester informé
« freemove » dans la barre expérience de mobilité des événements locaux.
de recherche de votre en enregistrant vos préfé- Profitez de fonctionnalités
magasin d’applications, de rences de trajet, vos lieux avancées, comme la
télécharger l’application favoris et vos contacts. recherche de stations-ser-
et de l’installer sur votre vice et de parkings.
téléphone.
ESSAYEZ FREE MOVE
Paragraphe explicatif :
Le paragraphe explicatif ou le explainer, peut bien correspondre à mon
brandscript.
Exemple :
Libérez-vous de votre business et devenez un entrepreneur à succès.
Une étude de Gallup a révélé que les propriétaires de PME travaillaient en

moyenne deux fois plus que les salariés. C’est la raison pour laquelle à l’agence
de branding Lotin Corp. nous avons développé le Framework BIDS™, qui est
notre approche originale qui met ensemble branding et système de manage-
306
ment pour booster l’activité commerciale des PME. Ainsi vous pourrez à la
fois booster vos revenus et passer plus de temps avec ceux que vous aimez.
PRENEZ RENDEZ-VOUS
Free move peut aider à éviter ces conséquences négatives des embouteillages
Planification de trajet : free move peut vous aider à trouver les itinéraires les plus effi-
caces en fonction des conditions de circulation en temps réel.
Alertes de trafic : free move peut vous alerter en temps réel des conditions de circula-
tion, des travaux en cours et des accidents qui peuvent affecter votre trajet.
Partage de trajet : free move peut vous permettre de partager votre trajet avec vos amis
et votre famille, pour éviter les embouteillages en utilisant des itinéraires alternatifs ou en
choisissant des heures de conduite moins chargées.
En utilisant free move, vous pouvez éviter les embouteillages et profiter d’un trajet plus
rapide, plus sûr et plus confortable.
ESSAYEZ FREE MOVE
Lead magnet :
Free move étant basé sur une communauté, j’aurai besoin d’un lead magnet
pour commencer à construire ma liste.
Ce que les entreprises pétrolières vous cachent au sujet de
Titre
l’économie de carburant de votre véhicule
Découvrez ce que les grandes entreprises pétrolières du monde ne
veulent pas que vous sachiez au sujet de la possibilité de réduire
votre consommation de carburant.
Sujet
Dans ce guide, nous vous présentons en détail les étapes à suivre
pour réduire considérablement votre consommation de carburant
lors de vos déplacements urbains et interurbains.
Format e-book PDF
Formulaire Nom + Adresse e-mail + [CTA : TÉLÉCHARGEZ GRATUITEMENT]
Vidéo (facultative) :
Je ne vais pas utiliser de vidéo sur mon site web, pour un départ.
Pied de page [junk drawer] :

Le junk drawer ou « tiroir à courrier indésirable » est la dernière section de
votre site web qui comprend des liens ou des informations supplémentaires
sur votre entreprise (pages carrières, conditions générales, FAQ, blog, etc.).
307
ClayverApp Assistance À propos Contacts

ClayverApp est une Centre d’aide À propos de nous 1028, boulevard
start-up technologique de la Liberté,
Assistance Nous contacter
qui se consacre à Akwa
technique Blog free move
développer une appli- BP 6 789 Douala
cation mobile inno- Conditions Investir - Cameroun
vante sur la mobilité, d’utilisation
nommée free move. +237 673 88 10 33
Règles de
Cette application a confidentialité hello [at]freemove.
pour but d’offrir une app
solution de mobilité
complète et personna-
lisée à ses utilisateurs.
Facebook - Instagram - Télécharger sur
Twitter - YouTube Playstore
Télécharger sur
Appstore
© 2023 ClayverApp -
Tous droits réservés
Page « Fonctionnalités »
Free move est conçue pour aider les utilisateurs à planifier leur voyage en
temps réel, en leur fournissant des informations en temps réel sur les diffé-
rents modes de transport disponibles, ainsi que des renseignements sur les
horaires, les tarifs et les itinéraires. L’application est également équipée d’un
système de localisation GPS qui permet de suivre en temps réel la position
des utilisateurs et de leur présenter des informations sur les stations de trans-
port en commun les plus proches.
En plus de cela, free move propose aussi des fonctionnalités de gamification,

qui permettent aux utilisateurs de gagner des récompenses en utilisant les
modes de transport les plus durables et les plus écologiques. Cette approche
ludique de la mobilité durable vise à encourager les utilisateurs à adopter des
modes de transport plus respectueux de l’environnement.
En résumé, free move est une application mobile innovante développée par
ClayverApp, qui offre une solution complète et personnalisée de mobilité
durable. Grâce à son approche ludique, free move vise à encourager les uti-
lisateurs à adopter des modes de transport plus respectueux de l’environne-
ment, tout en offrant une expérience de mobilité sans stress et adaptée à leurs
308
Prompt :
« Présente les six fonctionnalités les plus intéressantes de l’application de
mobilité free move. »
Réponse :
Bien sûr, voici six fonctionnalités intéressantes de l’application freemove :
1. Planification de trajet : free move vous permet de planifier votre trajet
en utilisant des cartes interactives et des informations en temps réel sur
les conditions de circulation. Vous pouvez également personnaliser votre
itinéraire en fonction de vos préférences de transport et de vos contraintes
de temps.
2. Trouver des stations-service et des parkings : free move peut vous
aider à trouver des stations-service et des parkings dans votre région, ce
qui est particulièrement utile si vous conduisez une voiture électrique ou si
vous êtes dans un endroit inconnu.
3. Partage de trajet : si vous souhaitez partager votre trajet avec vos amis
ou votre famille, free move vous permet de le faire en temps réel. Cela peut
être particulièrement utile si vous voulez que quelqu’un suive votre trajet
pour des raisons de sécurité ou de commodité.
4. Musique personnalisée : free move offre une fonctionnalité de musique
personnalisée qui sélectionne des chansons en fonction de vos goûts et
de votre humeur. Vous pouvez également écouter des stations de radio lo-
cale ou des playlists préenregistrées pour rendre votre trajet plus agréable.
5. Alertes d’événements locaux : free move vous tient informé des événe-
ments locaux, tels que les concerts, les spectacles ou les événements
sportifs, qui peuvent affecter votre trajet ou simplement être intéressants
à explorer.
6. Assistance routière : enfin, free move offre une assistance routière pour
vous aider en cas de problème pendant votre trajet. Vous pouvez contac-
ter l’équipe d’assistance de freemove en cas d’urgence ou si vous avez
besoin de conseils sur la sécurité routière.
Ces six fonctionnalités intéressantes font de free move une application de

mobilité indispensable pour les voyageurs soucieux de leur sécurité, de leur
confort et de leur expérience de mobilité.
Pack découverte
Page de vente
Titre > Introduction > Offre > Objection > CTA
309
Page « Blog »
Catégories d’articles :
- Sécurité routière.
- Entretien du véhicule.
- Valeurs familiales et communautaires.
Page « À propos »
ClayverApp
ClayverApp est une start-up technologique qui se consacre à développer une
application mobile innovante sur la mobilité, nommée free move. Cette appli-
cation a pour but d’offrir une solution de mobilité complète et personnalisée à
ses utilisateurs, en intégrant différents modes de transport, tels que la marche,
le vélo, les transports en commun et les taxis.

évolution, en commençant par le Cameroun. L’entreprise est composée d’une
équipe de passionnés de la mobilité, de l’innovation et de la durabilité, qui tra-
vaillent ensemble pour offrir aux utilisateurs une expérience de mobilité sans
stress et adaptée à leurs besoins individuels.
Investir
Je vais une fois de plus solliciter ChatGPT :
Prompt :
« Rédige un pitch pour les investisseurs potentiels de l’application free move
dont ClayverApp est le promoteur. »
Réponse :
Merci de prendre le temps de découvrir free move, l’application mobile de
mobilité que nous avons développée chez ClayverApp.
Le trafic urbain est l’un des plus grands défis auxquels les gens sont confron-
tés aujourd’hui. Il peut prendre des heures pour se rendre d’un point A à
un point B, et cela peut rendre la vie très difficile pour les travailleurs, les
étudiants et les personnes qui ont des rendez-vous importants à respecter.
Chez ClayverApp, nous avons décidé de relever ce défi en créant Freemove,

une application mobile de mobilité qui aide les gens à se déplacer plus faci-
lement et plus efficacement dans les villes. free move utilise des algorithmes
de pointe pour prévoir les conditions de circulation en temps réel, ce qui
permet aux utilisateurs de planifier leur trajet en fonction des conditions
actuelles.
310
L’application est également dotée d’un système de navigation GPS qui guide
les utilisateurs tout au long de leur trajet, avec des alertes en temps réel sur
les conditions de circulation et les éventuels problèmes sur la route. De plus,
free move dispose d’une fonction de partage de trajet qui permet aux utilisa-
teurs de partager leur trajet avec d’autres personnes, ce qui peut réduire les
coûts de transport et renforcer les liens sociaux.
Nous sommes fiers de dire que free move a déjà aidé des milliers de per-
sonnes à se déplacer plus facilement dans les villes, et nous sommes
convaincus que l’application a un immense potentiel de croissance à l’avenir.
Nous sommes à la recherche d’investisseurs potentiels qui peuvent nous
aider à développer free move et à l’étendre à de nouvelles villes et régions.
Nous sommes heureux de répondre à toutes vos questions sur free move et
sommes impatients de discuter de la possibilité d’un partenariat avec vous.
Contacts
Adresses
Google Map :
1028, boulevard de la Liberté, Akwa
BP 6 789 Douala - Cameroun
Formulaire de contact :
Nom
E-mail
Sujet
Votre message
Adresse e-mail :
hello [at]freemove.app
Téléphone :
+237 673 88 10 33
Social media :
Facebook
Instagram
Twitter
YouTube
311
Newsletter
Formulaire d’inscription : Nom ou prénom + Adresse e-mail
Centre d’aide
L’ensemble de la documentation d’utilisation de l’application.
Mentions légales
Les mentions obligatoires à mettre sur le site web :
Essayer
Télécharger sur Playstore
Télécharger sur Appstore
Architecture de l’information
Comment vous organisez le contenu du site web :
Plan de site
Si je considère le contenu que j’ai recensé pour le site web, je pourrai le struc-
turer de la manière suivante.
1. Accueil
2. Fonctionnalités
2.1. Packs d’abonnement
3. Blog
3.1. Catégories
3.1.1. Article
4. À propos
4.1. ClayverApp
4.1.1. Investir
4.2. Contacts
4.2.1. Adresses
4.2.2. Newsletter
4.2.3. Centre d’aide
4.3. Mentions légales
5. Essayer
312
Présenté ainsi, ça ne me donne pas une idée claire de la hiérarchie du contenu

de mon site web.
Il faut donc procéder à une mise en page graphique. J’utilise Mindmeister :
Wireframes
Je vais développer des wireframes pour chaque page, en indiquant ce qui
sera nécessaire dans chacune d’elles. Je commence naturellement par la
page d’accueil.
Wireframe – Accueil
Rappelez-vous ! J’ai déjà, grâce au StoryBrand® Framework, créé le wire-
frame pour la page d’accueil. Si je dois résumer, il aura l’air de ceci :

Économisez du carburant et gagnez du temps
Les embouteillages sont cause de perte de temps, de stress, de coût élevé et de pollu-
tion de l’air. En utilisant free move, vous pouvez éviter les embouteillages et profiter d’un
trajet plus rapide, plus sûr et plus confortable.
ESSAYEZ
1. Téléchargez l’application 2. Planifiez votre trajet 3. Dites adieu aux embouteillages
Toujours en retard ? Toujours à consommer trop de carburant lors de vos déplace-

ments à cause des embouteillages ?
Vous n’êtes pas toujours en sécu- Vous êtes souvent coincé dans le trafic ou
rité et manquez de confort dans vos perdez parfois du temps à chercher une
déplacements station-service ou un parking
313
Vous manquez d’informations importantes Les informations importantes sur la cir-

sur les conditions de circulation, les tra- culation vous empêchent de prendre des
vaux en cours ou les événements locaux décisions éclairées pour votre trajet
ESSAYEZ FREE MOVE
Nous pensons que vous méritez de vous déplacer en toute confiance, en sachant
que vous avez accès aux informations les plus récentes et à un réseau de soutien
pour vous aider en cas de besoin.
En utilisant freemove, vous pouvez éviter les embouteillages et profiter d’un trajet
plus rapide, plus sûr et plus confortable.
Nous savons que les embouteillages occasionnent des pertes de temps, du stress et
un coût élevé. Nous connaissons la frustration d’arriver en retard et de manquer une
opportunité.
C’est pourquoi free move a été conçue, pour vous éviter ces conséquences négatives
des embouteillages. Nous vous offrons la possibilité de planifier votre trajet et de recevoir
des alertes de trafic.
ESSAYEZ FREE MOVE
Ils parlent de nous
« Je suis chauffeur de taxi « Je suis une mère « Je suis un commercial qui
depuis plus de 10 ans et j’ai célibataire qui travaille et passe beaucoup de temps
vu beaucoup de changements je dois être à l’heure pour sur la route. Avant d’utiliser
dans l’industrie du transport. aller chercher mon fils à free move, je perdais sou-
L’application me permet la garderie tous les jours. vent du temps à chercher
d’économiser du temps et Avant d’utiliser free move, mon chemin et à éviter les
de l’argent en évitant les j’étais toujours stressée embouteillages. Maintenant,
embouteillages. De plus, la et en retard à cause des je peux simplement entrer
fonctionnalité de partage de embouteillages. Main- ma destination dans l’appli-
trajet me permet de trouver tenant, je peux planifier cation et me laisser guider
des clients supplémentaires, mon trajet en fonction par le GPS. Cela me permet
ce qui me permet de gagner de l’état actuel de la de me concentrer sur mon
plus d’argent. Freemove a circulation et être sûre travail et de réduire le stress
vraiment amélioré mon travail d’arriver à temps. Cela de la route. Je recommande
de chauffeur de taxi et je le m’a fait gagner beaucoup freemove à tous les pro-
recommande à tous mes de temps et m’a permis fessionnels qui passent
collègues dans l’industrie du de passer plus de temps beaucoup de temps sur la
transport. » avec mon fils. » route. »
– Jean, 42 ans – Marie, 32 ans – Pierre, 35 ans
314
Ce que vous obtenez

Planification de trajet
Trouver des stations-service et des
parkings
Musique personnalisée
Alertes d’événements locaux
Assistance routière
Vous obtenez tout cela, plus la possibilité
de gagner du temps et d’économiser du
carburant lors de vos déplacements si
vous installez free move aujourd’hui !
Comment dire définitivement adieu aux embouteillages ?
1. Téléchargez 2. Créez un compte 3. Commencez à l’utiliser

l’application Une fois que vous avez Maintenant que vous avez
Vous pouvez télécharger installé l’application free- créé un compte, vous pou-
l’application freemove move, vous devrez créer un vez commencer à utiliser
gratuitement depuis l’App compte en utilisant votre l’application freemove pour
Store ou Google Play adresse e-mail ou votre planifier vos trajets, trouver
Store, en fonction de votre compte Facebook. Cela les meilleurs itinéraires,
système d’exploitation. Il vous permettra de person- découvrir de nouveaux
vous suffit de rechercher naliser votre expérience lieux et rester informé
« freemove » dans la barre de mobilité en enregistrant des événements locaux.
de recherche de votre vos préférences de trajet, Profitez de fonctionnali-
magasin d’applications, de vos lieux favoris et vos tés avancées, comme la
télécharger l’application contacts. recherche de stations-ser-
et de l’installer sur votre vice et de parkings.
téléphone.
ESSAYEZ FREE MOVE
315
Free move peut aider à éviter ces conséquences

négatives des embouteillages
Planification de trajet : free move peut vous aider à
trouver les itinéraires les plus efficaces en fonction des
conditions de circulation en temps réel.
Alertes de trafic : free move peut vous alerter en temps
réel des conditions de circulation, des travaux en cours
et des accidents qui peuvent affecter votre trajet.
Partage de trajet : free move peut vous permettre de
partager votre trajet avec vos amis et votre famille,
pour éviter les embouteillages en utilisant des iti-
néraires alternatifs ou en choisissant des heures de
conduite moins chargées.
En utilisant free move, vous pouvez éviter les embou-
teillages et profiter d’un trajet plus rapide, plus sûr et
plus confortable.
ESSAYEZ FREE MOVE
Ce que les entreprises pétrolières vous cachent au sujet de l’éco-

Titre
nomie de carburant de votre véhicule
Découvrez ce que les grandes entreprises pétrolières du monde ne
veulent pas que vous sachiez au sujet de la possibilité de réduire votre
consommation de carburant.
Sujet
Dans ce guide, nous vous présentons en détail les étapes à suivre
pour réduire considérablement votre consommation de carburant lors
de vos déplacements urbains et interurbains.
Format e-book PDF
Formulaire Nom + Adresse e-mail + [CTA : TÉLÉCHARGEZ GRATUITEMENT]

ClayverApp est une start-up Centre d’aide À propos de 1028, boulevard de
technologique qui se consacre nous la Liberté, Akwa
Assistance
à développer une application technique Nous contacter BP 6 789 Douala
mobile innovante sur la mobi- - Cameroun
lité, nommée free move. Cette Conditions Blog free move
application a pour but d’offrir une d’utilisation +237 673 88 10 33
Investir
solution de mobilité complète et Règles de hello [at]freemove.
personnalisée à ses utilisateurs. confidentialité app
316
Facebook - Instagram - Twitter Télécharger sur

- YouTube Playstore
Télécharger sur
Appstore
© 2023 ClayverApp - Tous droits
réservés
Wireframe – Fonctionnalités
En me basant sur le contenu de cette page, et sur mon croquis papier, le
wireframe ressemblera à ceci :
NOTE : remarquez comment l’en-tête et le pied de page sont identiques.
Pour le corps de page, je vais m’inspirer du pattern #9 :

Les + de free move

Free move est une application mobile innovante qui
offre une solution complète et personnalisée de mobilité
durable. Grâce à son approche ludique, free move vise
à vous encourager à adopter des modes de transport
plus respectueux de l’environnement, tout en offrant
une expérience de mobilité sans stress et adaptée à vos
icône icône
Fonctionnalité #1 Fonctionnalité #2
Détails de la fonctionnalité Détails de la fonctionnalité
icône icône
icône icône
ESSAYEZ
317

ClayverApp est Centre d’aide À propos de nous 1028, boulevard de
une start-up la Liberté, Akwa
technologique technique BP 6 789 Douala
qui se consacre Blog free move
- Cameroun
à développer une Conditions Investir
application mobile d’utilisation +237 673 88 10 33
innovante sur la Règles de hello [at]freemove.
mobilité, nommée confidentialité app
free move. Cette
application a pour
but d’offrir une
complète et per-
sonnalisée à ses
utilisateurs.
Facebook - Ins- Télécharger sur
tagram - Twitter Playstore
- YouTube
Télécharger sur
Appstore
© 2023 Clayve-
rApp - Tous droits
réservés
Wireframe – Page de blog

En me basant sur :
Le blog de free move
Article 1 Article 2 Article 3

Image + Extrait Image + Extrait Image + Extrait
Article 4 Article 5 Article 6
Image + Extrait Image + Extrait Image + Extrait
318

ClayverApp est une start- Centre d’aide À propos de 1028, boulevard de
up technologique qui se nous la Liberté, Akwa
Assistance
consacre à développer technique Nous contacter BP 6 789 Douala
une application mobile - Cameroun
innovante sur la mobilité, Conditions Blog free move
nommée free move. Cette d’utilisation +237 673 88 10 33
Investir
application a pour but d’of- Règles de hello [at]freemove.
frir une solution de mobilité confidentialité app
complète et personnalisée
à ses utilisateurs.
Télécharger sur
Appstore
© 2023 ClayverApp - Tous
droits réservés
Wireframe – Article de blog

En me basant sur :
[Titre de l’article] Image en vedette de l’article

Publié par [auteur] le [date de publication]
[catégorie de l’article]
Contenu de l’article
319

ClayverApp est Centre d’aide À propos de nous 1028, boulevard de
une start-up la Liberté, Akwa
technologique technique BP 6 789 Douala
qui se consacre Blog free move
- Cameroun
à développer une Conditions Investir
application mobile d’utilisation +237 673 88 10 33
innovante sur la Règles de hello [at]freemove.
mobilité, nommée confidentialité app
free move. Cette
application a pour
but d’offrir une
complète et per-
sonnalisée à ses
utilisateurs.
Facebook - Instagram - Twitter - YouTube Télécharger sur
Playstore
Télécharger sur
Appstore
© 2023 Clayve-
rApp - Tous droits
réservés
Wireframe – Page de contacts

Adresse Google Map

1028, boulevard de la Liberté, Akwa [1028, boulevard de la Liberté, Akwa]
BP 6 789 Douala - Cameroun
+237 673 88 10 33
hello [at]freemove.app
Écrivez-nous directement Sur les réseaux sociaux
[Formulaire : Nom + E-mail + Sujet + Votre Facebook - Instagram - Twitter - YouTube
message + Envoyer]
320

ClayverApp est une start- Centre d’aide À propos de 1028, boulevard de
up technologique qui se nous la Liberté, Akwa
Assistance
consacre à développer une technique Nous contacter BP 6 789 Douala
application mobile innovante - Cameroun
sur la mobilité, nommée free Conditions Blog free move
move. Cette application a d’utilisation +237 673 88 10 33
Investir
pour but d’offrir une solution Règles de hello [at]freemove.
de mobilité complète et per- confidentialité app
sonnalisée à ses utilisateurs.
Télécharger sur
Appstore
© 2023 ClayverApp - Tous
droits réservés
Exigences technologiques
et fonctionnelles
Pile technologique
- Système : Site web responsive9 et no-code sur Wordpress
- Infrastructure : Hébergement géré sur WordPress.com
- Marketing : Mailchimp
- Analytique : Google Analytics + Hotjar
Fonctionnalités
Si vous ne savez pas ce dont vous avez besoin, cette ressource [retrouvez le
lien cliquable dans le template fourni] vous sera fort utile, elle liste 42 fonction-
nalités pour un site web d’entreprise.
9. Le design responsive est une approche de design web qui permet d’adapter votre contenu web aux
différentes tailles d’écran et de fenêtre d’une variété d’appareils. https://lotincorp.biz/les-etapes-de-creation-
dun-site-web-etape-6-2-le-responsive-design/
321
Lisez les descriptions des fonctionnalités correspondantes et répondez dans

ce tableau :
Fonctionnalité Oui Non
Page d’accueil
Nom de domaine Oui
Nom de l’entreprise Oui
Barre de recherche Oui
Logo Oui
Descriptif Oui
Barre de navigation Oui
CTA Oui
Images Oui
Liens internes Oui
Témoignages Oui
Chat en direct Non
Opt-in de l’abonné Oui
Pied de page
Onglets et options Oui
Icônes des médias sociaux Oui
Page « à propos »
Carte de votre entreprise Oui
322
Heures d’ouverture Non
Coordonnées Oui
Formulaire de contact Oui
Biographie Oui
Pages intérieures
Équipe/Carrières Non
Équipes et employés Non
Biographies des employés Non
Médias Non
Page de présentation Oui
Fonctionnalité Oui
Intégrations Non
Études de cas Non
Blog Oui
Organisation Non
Fonction de recherche d’articles Oui
Pages d’auteurs Oui
Commentaires Oui
Liens internes du blog Oui
Base de connaissances ou FAQ Oui
Questions et réponses Non
Documents et guides Oui
323
Infographies Non
Fonctionnalités back-end
Outil CMS Oui
Outil de référencement/optimisation Oui
Analyse du site Oui
Hébergement de site web Oui
Description du contenu Oui
Je crois qu’à partir d’ici, vous avez l’essentiel. N’hésitez pas à rajouter les
fonctionnalités dont vous avez particulièrement besoin. Notamment en ma-
tière d’e-commerce.
Voici une ressource [anglais] qui pourrait vous être utile pour recenser celles
qui sont indispensables : [retrouvez le lien cliquable dans le template fourni].
Coût
Je pars sur du gratuit, pour un départ. Ainsi, pas besoin de tableau de coûts
pour ce projet.
Calendrier de production
Il s’agit ici pour moi de répartir le temps que j’ai à ma disposition pour réaliser
le projet de site web.
Tâche Durée (semaines)

Recherche, stratégie, document de spécifications… 02
Architecture de l’information et design de la navigation 01
Design de l’interface 01
Rampe de lancement [launch pad] 0,5
DURÉE TOTALE 4,5
324
Ressources
en ligne
Pour vous accompagner dans la lecture de cet ouvrage, l'auteur vous propose
un certain nombre de ressources complémentaires au fil des chapitres ainsi
que l'intégralité des illustrations en couleur. Elles seront régulièrement rappe-
lés au cours de l'ouvrage et sont rassemblées ici.
Site compagnon :
https://academy.lotincorp.biz/gereso-site-internet-no-code/
Images : https://bit.ly/illustrations-csisc
Template spécifications : https://bit.ly/specsdoc-csisc
Tutoriels vidéo : https://bit.ly/livre-csisc
Site d'exemple WordPress : https://freemoveapp.wordpress.com/
Site d'exemple Webflow : https://freemove.webflow.io
Site d'exemple Systeme.io : https://freemove.systeme.io
325
Conclusion
J’espère sincèrement que ce livre et les ressources qui l’accompagnent vous

ont apporté les réponses aux questions que vous vous posiez sur la création
de sites web. Mais surtout, qu’ils vous ont permis le plus vite possible, de
réaliser votre site web sans saisir une seule ligne de code.
Le contenu de cet ouvrage se voulait à la fois stratégique et opérationnel, pour

que vous sachiez le « pourquoi » de chaque décision prise durant la réalisation
d’un site web. Mais surtout que vous soyez conscient que le site web devrait
être considéré simultanément comme un actif du branding et un actif du mar-
keting : un investissement à rentabiliser le plus rapidement possible.
Je sais que certains chapitres ont pu sembler « inutiles » au premier abord.

Mais à mon avis, vous les apprécierez avec le temps, quand votre site web
sera en ligne et opérationnel. Je ne voulais surtout pas que la question « Mon
site web est en ligne, c’est quoi la suite ? » reste sans réponse.
Le chapitre 6 sur le Growth-Driven Design y répond de manière claire, tout

comme le chapitre 14 sur la mesure et l’optimisation.
Vous l’aurez deviné, mettre votre site web en ligne n’est que le début de
l’aventure. J’espère que votre document de spécifications est une feuille de
route suffisamment claire pour vous mener à la destination que vous désirez.
Avec la démocratisation de l’intelligence artificielle, il devient beaucoup plus

facile de produire de la réflexion stratégique, comme vous avez pu le voir. Au
moment de la mise sous presse, Webflow a annoncé l’aide à la création avec
l’intelligence artificielle. Dans les mots de Vlad Magdalin, CEO & Cofounder
chez Webflow :
« Chez Webflow, nous sommes optimistes quant au potentiel extraordinaire
du mariage entre la génération assistée par l’IA et le développement visuel.
326
En fin de compte, le contenu généré par l’IA est aussi bon que l’environnement
de développement dans lequel le contenu est déposé – et l’être humain qui
orchestre l’ensemble du processus de création. Si chaque logiciel utilise l’IA
d’une manière ou d’une autre (ce qu’ils feront probablement), les règles du jeu
seront équitables.
Mais les outils qui vous permettent de personnaliser, de manipuler et de dé-

velopper en profondeur ce que l’IA génère auront finalement le plus grand
impact. Et c’est exactement là que Webflow entre en jeu.
[…] Nous travaillons sur de nouvelles fonctionnalités d’intelligence artificielle

au sein de Webflow Designer qui offriront immédiatement une assistance
personnalisée chaque fois que vous en aurez besoin. Bientôt, vous pourrez
exploiter la puissance de Webflow University et d’autres contenus éduca-
tifs en demandant simplement de l’aide au fur et à mesure pour obtenir des
conseils et une assistance avec des réponses en fonction de vos besoins
spécifiques10. »
Ce sont des nouvelles encourageantes, car il y a trop peu de développeurs

pour satisfaire la demande mondiale pour les sites web de qualité. Et c’est
également la raison d’être de ce livre, vous permettre d’y arriver vous-même,
sans l’aide d’un développeur.
Je vous remercie d’avoir acheté ce livre et de l’avoir lu jusqu’à la fin. En espé-

rant qu’il vous a apporté des réponses, et vous a permis de lancer votre site
en moins de 60 jours.
N’oubliez pas :
« Stratégie, launch pad et amélioration continue ; ce qui n’est pas mesuré ne
peut être amélioré. »
Surtout, n’hésitez pas à me contacter pour me soumettre vos réalisations à :

contact@lotincorp.biz. Je serai heureux de présenter votre travail sur la page
du site dédiée au livre.
Je vous souhaite un excellent design de site web sans codage.
10. MAGDALIN Vlad, Bringing the power of AI to Webflow, https://webflow.com/blog/power-of-ai
327
Henri LOTIN est un UX/UI Designer & Brand Strate-
gist basé à Douala, au Cameroun.
Il est le directeur de création de l'agence de Branding

Lotin Corp. qu'il a co-fondée. Il est également le fon-
dateur de la Lotin Corp. Academy où il enseigne le de-
sign graphique, le design web et le marketing digital.
D'abord autodidacte passionné, il est aujourd'hui cer-

tifié de la Graphic Design School d’Australie en Design
Web ainsi que détenteur de nombreuses certifications
© Richard Dansou. Darimage.
HubSpot en Marketing Digital et en Growth-Driven
Design.
Il aime le travail bien fait et l’animation digitale. Henri aime également aider
les autres à grandir, c’est pourquoi il est auteur et traducteur pour Tuts+ et
Interaction Design Foundation. Il rédige également ses propres articles pour
les blogs de Lotin Corp. (+2 000 articles et traductions).
Il a produit huit eBooks dans le cadre de la stratégie de contenu de son

agence, Lotin Corp. (dont un en collaboration avec Abhimanyu Bhardwaj) sur
des sujets aussi variés que le design, l'entrepreneuriat, le Design Thinking, le
marketing...
Il est l'auteur de plusieurs livres, dont Le processus de conception d'un logo

et Guide pratique du freelance, tous deux auto-édités.
Depuis 2019, il est membre de l'Executive Board du PADI (Pan-Afrikan Design

Institute), organisation dont le rôle est de promouvoir la pratique du design
sous toutes ses formes en Afrique.
Sa passion créatrice va au-delà du design puisqu'il est producteur de mu-

sique, guitariste et bassiste depuis 2002. Il traduit ses sentiments musicaux
dans ses compositions graphiques.
Contact : contact@lotincorp.biz
Site internet : https://lotincorp.biz/henrilotin/
Site compagnon :
328
https://www. CRÉER UN SITE INTERNET SANS CODER .com
Créer un site Internet sans coder
Tout un chacun peut aujourd’hui s’improviser créateur de site

Internet grâce aux milliers de modèles proposés par les solutions
telles que Wordpress, Wix, Shopify…
Mais personnaliser un template ne garantit pas d’arriver au résultat
escompté et peut générer beaucoup de frustration.
Que vous souhaitiez créer un site vitrine ou marchand pour votre
entreprise, pour vendre vos créations artisanales ou communiquer
sur votre association, il est nécessaire de s’initier aux
fondamentaux du design graphique pour obtenir un résultat
optimal.
À l’appui d’un exemple concret et d’un site compagnon en ligne,
(re)découvrez les fondamentaux théoriques et pratiques du design
web, de la stratégie à la mise en ligne.
Chacun peut ainsi créer un site web à la hauteur de ses attentes
à condition de ne pas se lancer à l’aveugle et de suivre une feuille
de route claire.
C’est ce que vous propose l’auteur : créer seul un site internet qui
mettra en valeur votre contenu et le rendra accessible à son public.
Henri LOTIN est graphiste, UX et UI designer. D’abord autodidacte, il est

certiﬁé de la Graphic Design School d’Australie. Il a fondé son entreprise de
branding et de formation professionnelle dans les métiers du design au
Cameroun. Très investi dans le partage des connaissances en design pour
tous, il a créé plusieurs médias et supports de formation en ligne.
Révélez vos compétences !

Créer Un Site Internet Sans Coder

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Créer Un Site Internet Sans Coder

Transféré par

Droits d'auteur :

Formats disponibles

Henri LOTIN

https://www. CRÉER UN SITE INTERNET SANS CODER .com

© GERESO Édition 2023

Reproduction, traduction, adaptation interdites

Dépôt légal : Octobre 2023

• (Bien vivre son éco-anxiété

Retrouvez tous nos titres « Hors Collection » sur

Partie 1 - PHASE STRATÉGIQUE..........................................................21

Chapitre 1 - C’est quoi, le design web ?..............................................23

Chapitre 2 - État des lieux : code, low-code ou no-code ?................31

Chapitre 3 - Choisissez votre plateforme no-code.............................37

Chapitre 4 - Site web et écosystème de marketing digital................49

Chapitre 5 - Marque, branding et identité de marque.........................55

Qu’est-ce que la marque, le branding, l’identité de marque ?.................58

Chapitre 6 - L’approche Growth-Driven Design..................................61

Partie 2 - PHASE OPÉRATIONNELLE...................................................71

Chapitre 7 - Le document de spécifications........................................73

Chapitre 9 - Le design d’interface utilisateur....................................113

Patterns essentiels de mise en page.....................................................165

Chapitre 10 - Votre site Internet avec le StoryBrand® Framework... 185

Chapitre 12 - Mesurez et améliorez les performances

Chapitre 13 - Document de spécifications free move......................273

Le livre est divisé en trois parties :

Rassurez-vous, le livre est doté d'un site compagnon :

(Avec des liens vers des ressources supplémentaires) et de didacticiels vidéos.

Alors, si les étapes préparatoires ne vous intéressent pas, sautez direc-

Mais si réaliser un site web au service de votre entreprise et de votre activité

Pourquoi une phase stratégique

Le design thinking consiste à ouvrir le champ à toutes les solutions possibles

Le but ici est de vous amener à penser différemment :

No-code et académies en ligne

WordPress.com s’adresse en premier aux entrepreneurs qui veulent lancer

Élargir votre public

Générer des revenus

Dans le cas de Shopify Academy (exclusivement en anglais) par exemple, les

Dans Shopify Learn (exclusivement en anglais), vous trouverez un ensemble

Deux niveaux d’apprentissage sont mis en avant :

Chez Wix, ils divisent les formations en fonction de votre parcours

Et les catégories de cours sont les suivantes : création, management et

Chez Webflow (exclusivement en anglais), ils répartissent également les for-

Au sujet des cours pour les débutants, ils proposent :

Quand vous regardez de près les contenus de ces différentes académies,

Dans cette première partie, je vais commencer par l’aspect « théorique » du

Au chapitre 1, je vous ferai découvrir le design web et en quoi il consiste.

Au chapitre 2, je ferai un état des lieux des technologies low-code et no-code.

Au chapitre 3, je vous donnerai les meilleurs trucs et astuces pour choisir la

Au chapitre 4, je parlerai de l’écosystème de marketing digital, parce que

Au chapitre 5, je ferai un petit point sur la marque et le branding. Pourquoi ?

Au chapitre 6, je parlerai de l’approche Growth-Driven Design. Pourquoi ?

1. On verra cette notion en détail dans le chapitre 5.

Je rappelle une définition très courte et très succincte de HubSpot3 ici :

2. LOTIN Henri, C’est quoi le design web ou web design ?, https://lotincorp.biz/cest-quoi-le-design-web/

Pourquoi je commence par là ?

Abraham Lincoln disait :

Alors, en quoi consiste le design de site web ?

Non, le design web n’est PAS QUE la création

Même Wikipédia en français4 a commis cette erreur :

La définition de 99design5 dans un article rédigé en 2019 précise :

J’aime beaucoup l’aspect planification qu’elle fait apparaître.

4. Wikipédia, Conception de site web, https://fr.wikipedia.org/wiki/Conception_de_site_web

Je vais maintenant parler de deux grands principes sur lesquels s’appuie le

Le design centré sur l’utilisateur

L’origine des principes du design centré sur l’utilisateur

Cette compréhension provient de deux sciences :