Latest / Créer, lancer & développer son entreprise - par Lucille Misslin | offre, clients, prix & rentabilité / Comment créer une page de vente qui convertit et avoir plus de clients, sans coder, sans outil compliqué et sans payer un freelance

Transcript

Comment créer une page de vente qui convertit et avoir plus de clients, sans coder, sans outil compliqué et sans payer un freelance · Créer, lancer & développer son entreprise - par Lucille Misslin | offre, clients, prix & rentabilité

• 0:00
  En fait,
• 0:00
  on a fait tout le boulot en amont d'attraction du visiteur pour au final le perdre parce qu'on a une landing page qui est pourrie.
• 0:08
  Évidemment,
• 0:08
  t'as pas de footer,
• 0:09
  donc bien sûr les pages légales,
• 0:11
  ça soit dessus.
• 0:12
  Le design,
• 0:13
  je le trouve archi plat.
• 0:15
  T'as pas envie de lire.
• 0:16
  C'est hyper textuel.
• 0:18
  C'est horrible.
• 0:19
  mais il n'y a rien qui me donne envie de lire.
• 0:20
  Enfin,
• 0:20
  tu m'embarques nulle part,
• 0:21
  quoi.
• 0:21
  Ça,
• 0:22
  c'est trop fort,
• 0:22
  quoi.
• 0:22
  Le slider avant-après,
• 0:24
  en fait,
• 0:24
  il est...
• 0:25
  Enfin,
• 0:25
  moi,
• 0:25
  je trouve ça exceptionnel.
• 0:27
  T'as un visuel,
• 0:28
  en fait,
• 0:28
  qui,
• 0:28
  à lui seul,
• 0:29
  ça convertit,
• 0:29
  en fait,
• 0:30
  toute la page,
• 0:30
  quoi.
• 0:31
  Ça,
• 0:31
  je l'ai fait très exactement en 15 minutes.
• 0:33
  À la fin de cet épisode,
• 0:34
  tu sauras faire ta page de vente toi-même pour 0€,
• 0:38
  sans coder,
• 0:39
  sans abonnement à Gamma ou Loveable et sans non plus lâcher de 1 000€ à un freelance qui va te faire ta landing page.
• 0:46
  que tu vas forcément retoucher à peu près dix fois parce que tu seras lancé et donc,
• 0:51
  à un moment donné,
• 0:52
  il faut la faire évoluer assez régulièrement au fur et à mesure de tes expériences terrain avec tes clients.
• 0:59
  Alors,
• 1:00
  je vais te montrer du coup ce que ça donne avec un exemple concret sur
• 1:05
  Gamma. J'ai repris l'exemple de Mélanie,
• 1:08
  donc une de mes clientes dont on a réécrit le copywriting avec Céline dans un ancien épisode.
• 1:15
  Et donc,
• 1:15
  du coup,
• 1:16
  j'ai pris son copywriting et j'ai généré sa page sur Loveable et sur Gamma pour qu'on puisse voir ensemble ce qui va,
• 1:24
  ce qui ne va pas.
• 1:25
  Et tout ça,
• 1:25
  on va le faire avec Déborah Achour.
• 1:26
  Déborah qui est consultante SEO et qui nous accompagne tout au long de cet épisode pour nous montrer toutes les bonnes pratiques à avoir sur une landing page.
• 1:36
  Puisque toi,
• 1:37
  tu fais,
• 1:37
  Déborah,
• 1:38
  des refontes totales de sites Internet avant de déployer des stratégies de référencement SEO,
• 1:42
  c'est ça ?
• 1:43
  Exactement,
• 1:44
  oui.
• 1:44
  Maintenant,
• 1:44
  je prends tout en charge et je refais le site Internet pour avoir une base technique et UX excellente,
• 1:50
  en fait.
• 1:51
  C'est le but.
• 1:51
  Parfait.
• 1:53
  Donc,
• 1:53
  j'ai repris le copywriting de Mélanie.
• 1:55
  Voilà ce que ça donne concrètement sur Gamma.
• 1:58
  Il y a quelques petites animations.
• 1:59
  C'est pas dingue.
• 2:03
  Voilà.
• 2:03
  Là,
• 2:04
  c'est en version ordinateur.
• 2:06
  Le pire,
• 2:07
  c'est la version mobile qui n'est pas du tout adaptée,
• 2:10
  franchement.
• 2:10
  Alors qu'aujourd'hui,
• 2:11
  on sait qu'on a 75%,
• 2:14
  90%
• 2:14
  des visiteurs qui sont en version mobile.
• 2:17
  Ça dépend des business,
• 2:18
  vraiment.
• 2:19
  Mais je pense que pour elle,
• 2:21
  si elle fait de l'acquisition,
• 2:22
  par exemple,
• 2:23
  via LinkedIn,
• 2:23
  et après que ça redirige,
• 2:26
  elle sera sur du 60-40,
• 2:29
  on va dire,
• 2:29
  en moyenne.
• 2:30
  Oui,
• 2:30
  d'accord.
• 2:30
  Au minimum.
• 2:32
  Sachant qu'elle,
• 2:33
  elle a une cible
• 2:34
  B2B.
• 2:36
  Donc du coup,
• 2:38
  ils sont aussi sur LinkedIn de toute façon.
• 2:39
  Ouais,
• 2:39
  60-40,
• 2:40
  alors que B2C,
• 2:41
  on n'est plus sur du 75-25 à peu près en version mobile.
• 2:45
  On est d'accord,
• 2:46
  c'est archi moche,
• 2:47
  c'est archi pourri.
• 2:47
  Il n'y a pas de menu ?
• 2:51
  Non,
• 2:51
  t'as rien,
• 2:52
  t'as pas de navbar en haut pour naviguer au niveau de la page.
• 2:55
  Je suis perdue.
• 2:56
  En fait,
• 2:57
  t'es là et tu sais pas ce que tu dois faire concrètement.
• 2:59
  En fait,
• 2:59
  tu sais que t'es obligée de lire si tu veux.
• 3:02
  Et ça,
• 3:02
  c'est quand même...
• 3:03
  Le pire,
• 3:04
  je trouve,
• 3:04
  en B2B,
• 3:04
  parce que le B2B,
• 3:06
  il a l'habitude de décider assez rapidement.
• 3:08
  Et donc,
• 3:08
  il veut aller droit au but rapide.
• 3:10
  Il veut aller voir ce qu'il a envie de voir.
• 3:12
  Et là,
• 3:12
  du coup,
• 3:13
  tu n'as aucun menu de navigation.
• 3:15
  Évidemment,
• 3:15
  tu n'as pas de footer.
• 3:16
  Donc,
• 3:17
  bien sûr,
• 3:17
  les pages légales,
• 3:18
  ça soit dessus.
• 3:19
  Je vais te montrer ce que ça a donné sur Loveable.
• 3:21
  C'est un petit peu mieux quand même.
• 3:23
  Il y a un petit peu plus d'animation,
• 3:24
  j'avoue.
• 3:24
  Mais enfin,
• 3:25
  on n'est pas non plus sur un truc vraiment top.
• 3:29
  pas non plus de page légale,
• 3:30
  même si on a un footer qui a priori s'y prêterait.
• 3:33
  On n'a pas de navbar non plus au-dessus,
• 3:35
  donc on ne peut pas naviguer dans la page.
• 3:37
  Voilà ce que ça a donné,
• 3:38
  donc avec Lovable et avec Gamma.
• 3:40
  Alors,
• 3:41
  Gamma,
• 3:41
  je le rappelle,
• 3:41
  mais c'est du coup,
• 3:42
  c'est un outil qui est gratuit,
• 3:44
  en version gratuite en tout cas.
• 3:45
  Il y a une première version free.
• 3:47
  Sinon,
• 3:47
  c'est,
• 3:47
  je crois,
• 3:48
  un abonnement de 10 euros par mois.
• 3:49
  Ça évite d'avoir le watermark ici,
• 3:51
  Gamma,
• 3:52
  Made with Gamma.
• 3:54
  Mais bon,
• 3:54
  pour autant,
• 3:54
  c'est quand même pas le bon outil pour avoir une landing page.
• 3:56
  Allez,
• 3:57
  c'est parti.
• 3:57
  C'est sûr.
• 3:58
  Déjà on voit directement qu'il n'y a pas de menu on ne sait même pas où on est il n'y a pas de logo,
• 4:03
  pas de navigation donc même si on est sur une landing page avoir un menu qui permet d'aller sur les sections directement donc le landing page il n'y a qu'une seule page on rappelle et d'avoir un bouton d'action sur le sur
• 4:17
  le menu en Ausha droite qui va permettre de suivre soit au scroll ce qu'on dit en sticky donc ça veut dire que le menu va suivre quand on va dérouler ou soit soit...
• 4:27
  sans Sigi,
• 4:27
  quoi.
• 4:28
  Mais qui pourra se retrouver aussi sur la version mobile.
• 4:31
  30 jours sur le terrain.
• 4:32
  Alors,
• 4:32
  je le lis en même temps.
• 4:34
  Pour des équipes plus stables,
• 4:35
  un service constant et une meilleure réputation.
• 4:37
  J'arrive pas tout de suite à comprendre.
• 4:39
  Je viens dans votre hôtel.
• 4:40
  Faire appliquer ce qui est déjà décidé jusqu'à que ça tienne sans vous.
• 4:43
  C'est un peu plus clair,
• 4:44
  déjà.
• 4:44
  Donc,
• 4:45
  déjà,
• 4:46
  le héros,
• 4:47
  c'est la première section qu'on va voir qui est au-dessus de la ligne de flottaison.
• 4:52
  Le héros,
• 4:52
  réellement,
• 4:53
  on est sur le plus classique
• 4:56
  héros qui existent,
• 4:57
  dans le sens où on va avoir promesse,
• 5:00
  une phrase,
• 5:00
  CTA,
• 5:01
  photo sur la droite.
• 5:02
  C'est vraiment le classico-classique.
• 5:04
  Mais dès qu'on arrive sur le héros,
• 5:06
  quand on a un menu,
• 5:08
  il faut qu'il y ait déjà ces différents éléments,
• 5:11
  mais il faut également qu'il y ait directement des éléments de réassurance.
• 5:16
  Par exemple,
• 5:17
  nombre de clients accompagnés,
• 5:19
  petites photos,
• 5:20
  comme on met sur LinkedIn,
• 5:21
  on peut voir sur les bannières avec nombre d'avis.
• 5:24
  etc.
• 5:24
  Donc des éléments de réassurance qui vont être directement en haut du premier titre,
• 5:29
  donc ce qu'on appelle en SEO le H1,
• 5:32
  et ce qu'on peut voir
• 5:33
  30 jours,
• 5:33
  etc.
• 5:35
  C'est le H1 de la page.
• 5:37
  Ça,
• 5:37
  ça va être la première des choses.
• 5:39
  Et ensuite,
• 5:39
  réellement,
• 5:40
  ça ne fait pas rêver.
• 5:42
  On ne comprend pas,
• 5:43
  même au niveau du copywriting,
• 5:44
  de quoi on parle.
• 5:46
  Pour moi,
• 5:46
  ce n'est pas clair.
• 5:47
  Après,
• 5:47
  je ne suis pas la cible,
• 5:48
  donc peut-être.
• 5:49
  Mais il faut que ce soit quand même compréhensible par tout le monde.
• 5:51
  Enfin,
• 5:51
  tu ne m'embarques nulle part.
• 5:53
  C'est sûr que tu n'as pas envie de continuer à scroller la page.
• 5:55
  L'intérêt d'une landing page,
• 5:56
  on le rappelle quand même,
• 5:57
  c'est que le visiteur arrive dessus.
• 5:59
  Après,
• 5:59
  il faut aussi définir l'intention de la landing page.
• 6:03
  Est-ce que c'est juste pour faire une présentation,
• 6:05
  une simple vitrine,
• 6:06
  ou bien il y a une intention qui est de capter le visiteur et de l'emmener à réserver un rendez-vous,
• 6:12
  par exemple.
• 6:13
  Là,
• 6:13
  en l'occurrence,
• 6:13
  c'est le cas.
• 6:15
  Mais ce qu'il y a,
• 6:16
  c'est qu'on a fait tout le boulot en amont d'attraction du visiteur pour au final le perdre.
• 6:22
  parce qu'on a une landing page qui est pourrie.
• 6:24
  Et ça,
• 6:25
  ça te tue la conversion.
• 6:27
  C'est quand même archi dommage parce que le gros du boulot,
• 6:29
  ça reste quand même l'attraction.
• 6:31
  Donc si après,
• 6:32
  tu as fait la moitié du chemin et du coup,
• 6:36
  le visiteur,
• 6:36
  il se casse,
• 6:37
  c'est quand même ballot.
• 6:39
  Et c'est souvent le cas parce que quand on termine la fin du tunnel,
• 6:42
  il est souvent négligé et éclaté,
• 6:43
  comme on le voit ici.
• 6:45
  Je partage vite ta page à toi,
• 6:48
  Déborah.
• 6:49
  Mais toi,
• 6:50
  on a un héros qui est archi clair,
• 6:54
  avec du coup,
• 6:55
  tout de suite,
• 6:58
  la promesse qui est de manière évidente de faire du cash avec le SEO.
• 7:02
  On parlait du menu sticky.
• 7:03
  En fait,
• 7:04
  c'est justement ça.
• 7:06
  Quand on scrolle,
• 7:07
  tu as le menu du haut qui reste affiché sur la page au fur et à mesure du scroll.
• 7:11
  Et tu as tous ces éléments de réassurance avec plus 100 clients accompagnés,
• 7:16
  notation 5 étoiles,
• 7:17
  etc.
• 7:18
  Ça,
• 7:20
  c'est un bon début de landing page,
• 7:21
  en tout cas.
• 7:22
  Il y a l'expérience depuis 2016.
• 7:23
  On va avoir les 100 clients.
• 7:25
  On va scroller.
• 7:25
  On va directement avoir la bannière défilante avec les clients que j'accompagne ou que j'ai accompagnés.
• 7:29
  Et on va avoir aussi les petites étiquettes,
• 7:31
  résultats des six premiers mois,
• 7:33
  chiffre d'affaires prévisionnel.
• 7:34
  Enfin,
• 7:34
  voilà,
• 7:34
  pour montrer à peu près comment je me positionne.
• 7:36
  Donc,
• 7:37
  faire du cash avec le SO,
• 7:38
  je pense que c'est clair dès que Tariq soit mon site.
• 7:42
  Et là,
• 7:42
  ce n'est même pas une landing page.
• 7:43
  On est vraiment sur une home page,
• 7:44
  donc une home page différente.
• 7:46
  En termes de stratégie,
• 7:48
  la homepage est là pour distribuer sur les grosses pages de ton site,
• 7:51
  donc de montrer l'étendue de ton site Internet,
• 7:55
  donc reprendre les blocs.
• 7:56
  Là,
• 7:56
  on n'est plus sur la landing page.
• 7:58
  Là,
• 7:59
  j'ai cliqué sur ton offre Mama Booster.
• 8:03
  Et du coup,
• 8:03
  on est vraiment sur ta landing page de l'offre Mama Booster où on a la refonte de sites SEO et tous les éléments de réassurance derrière qu'il faut,
• 8:12
  plus évidemment la navbar en sticky,
• 8:14
  comme tu as dit.
• 8:15
  Exactement.
• 8:16
  un peu de faux mots comme j'ai fait avec une place restante qui est vraie en plus.
• 8:20
  Mais voilà,
• 8:22
  je mets à jour le nombre de places,
• 8:24
  ce qui permet de voir où j'en suis sur l'année 2026.
• 8:29
  Et un avis complet aussi,
• 8:31
  c'est intéressant parce que les gens ont une photo,
• 8:34
  un nom,
• 8:35
  une entreprise avec un vrai avis.
• 8:36
  Donc ça,
• 8:37
  c'est cool à mettre en fonction de l'offre.
• 8:41
  Sur le héros,
• 8:42
  les gens ne vont pas lire tous vos avis,
• 8:45
  ça peut arriver,
• 8:45
  mais ils ne vont pas le lire.
• 8:46
  Mais si on peut en faire lire quelques-uns,
• 8:48
  bien ciblés en fonction de la page,
• 8:50
  c'est beaucoup plus smart.
• 8:51
  Et toujours avoir un bouton principal en termes de design avec un bouton plus secondaire.
• 8:56
  Donc là,
• 8:57
  par exemple,
• 8:57
  si la personne arrive sur ma page Mama Booster,
• 8:59
  elle a besoin peut-être,
• 9:02
  avant de postuler,
• 9:03
  parce qu'elle va scroller,
• 9:05
  mais elle peut aussi également en savoir un peu plus sur moi et je le mets beaucoup plus en retrait,
• 9:09
  etc.
• 9:11
  pour qu'elle puisse,
• 9:12
  en fait,
• 9:12
  mon but,
• 9:12
  c'est qu'elle puisse continuer à dérouler sur la page.
• 9:15
  On a vu le héros de la page.
• 9:16
  Maintenant,
• 9:16
  ça va un peu se corser avec le reste de la page.
• 9:18
  On va voir tout ça.
• 9:20
  Donc là,
• 9:20
  on est sur la partie problématique dans le copywriting,
• 9:23
  c'est-à-dire que on va permettre aux visiteurs de s'identifier via le problème qu'on va lui...
• 9:31
  qu'on va lui décrire,
• 9:32
  le problème dont il souffre finalement.
• 9:34
  Et le design,
• 9:35
  en fait,
• 9:36
  je le trouve archi plat.
• 9:37
  Tu n'as pas envie de lire,
• 9:38
  en fait.
• 9:39
  C'est hyper textuel.
• 9:40
  C'est horrible.
• 9:42
  Alors que justement,
• 9:42
  ça devrait être beaucoup plus visuel.
• 9:45
  Et ça,
• 9:45
  tu vois,
• 9:46
  je le disais dans le dernier épisode avec justement Céline,
• 9:48
  où on a refait le copywriting complet.
• 9:51
  C'est qu'à un moment donné,
• 9:52
  et ça,
• 9:53
  tu le dis aussi toi,
• 9:53
  Déborah,
• 9:55
  c'est qu'en fait,
• 9:55
  ton copywriting...
• 9:56
  Le design doit aussi,
• 9:57
  à un moment donné,
• 9:58
  s'adapter au design.
• 9:59
  Ce n'est pas que le design qui doit s'adapter au copywriting.
• 10:02
  Mais il y a un moment donné où les deux,
• 10:04
  il faut qu'ils travaillent de concert dans une landing page.
• 10:09
  C'est hyper important.
• 10:10
  La landing page,
• 10:11
  elle n'a pas de visée SEO.
• 10:12
  Elle a une visée vraiment de vente.
• 10:15
  On peut faire des landing pages SEO,
• 10:16
  mais là,
• 10:16
  c'est plus dans une stratégie avec un site global.
• 10:19
  Mais là,
• 10:20
  réellement,
• 10:20
  sur une one page,
• 10:21
  il n'y a pas du tout d'enjeu SEO.
• 10:23
  Donc,
• 10:23
  il faut mettre à fond le design.
• 10:25
  et
• 10:27
  sans trop abuser aussi sur la vitesse de chargement parce qu'il faut quand même que l'UX l'expérience utilisateur soit agréable mais là réellement j'ai envie de lire 0 card pourtant c'est des phrases on va dire de moins de 10 mots donc c'est pas compliqué à lire mais il n'y a rien qui me donne envie de lire parce que c'est pas visuel simplement
• 10:44
  faire 3 card avec un petit icône un peu plus visuel comme j'ai pu faire sur mon site internet et peut-être en choisir 3 plutôt que 6 ce serait
• 10:54
  plus intéressants,
• 10:55
  donc les trois vraies grosses douleurs,
• 10:57
  les trois gros gros problèmes de votre cible,
• 11:00
  ou peut-être résumer ou regrouper des douleurs entre elles,
• 11:02
  si besoin,
• 11:03
  ce serait beaucoup plus smart que de faire une liste d'étiquettes qui s'enchaînent l'une après l'autre.
• 11:10
  Et encore une fois,
• 11:11
  on met du visuel pour agrémenter un peu la lecture et l'améliorer,
• 11:16
  et donner l'envie de rester sur cette page.
• 11:18
  Parce que l'objectif,
• 11:20
  encore une fois,
• 11:21
  c'est que la personne,
• 11:22
  elle...
• 11:23
  Clique sur un bouton pour réserver un rendez-vous.
• 11:27
  Donc l'idée,
• 11:27
  c'est qu'elle reste sur la page et pas qu'elle se casse au bout de trois secondes.
• 11:30
  Exactement,
• 11:32
  et mettre un bouton d'action.
• 11:33
  Exactement.
• 11:35
  Là,
• 11:35
  on a la partie qui suis-je,
• 11:37
  donc un petit à propos,
• 11:38
  sachant que dans une landing page,
• 11:40
  en général,
• 11:40
  on n'en fait pas des caisses non plus,
• 11:42
  parce que la personne,
• 11:42
  elle vient d'un autre canal de communication,
• 11:45
  enfin d'un canal de communication,
• 11:46
  ça peut être un réseau social ou n'importe.
• 11:49
  On suppose qu'elle sait déjà qui on est,
• 11:52
  donc on ne va pas en faire des caisses,
• 11:53
  on ne va pas faire une page complète d'à propos,
• 11:56
  d'expliquer pourquoi on est là,
• 11:58
  nanani nanana.
• 12:00
  On fait vraiment un peu le strict minimum,
• 12:02
  mais le strict minimum qui donne envie de rester encore une fois.
• 12:05
  Bon,
• 12:05
  là,
• 12:06
  ça ne donne encore pas une fois envie de lire.
• 12:08
  Ouais,
• 12:09
  non.
• 12:11
  L'encadré sur la photo qui n'est pas fin,
• 12:15
  le qui suis-je.
• 12:16
  qui switch,
• 12:17
  ça donne un peu pas trop envie.
• 12:20
  Elle aurait commencé directement par Je suis Mélanie,
• 12:22
  30 ans dans l'hôtellerie.
• 12:23
  En fait,
• 12:25
  le sous-titre,
• 12:27
  il est moins impactant que la suite dans le contenu.
• 12:32
  Ou Je suis Mélanie,
• 12:33
  ou 30 ans dans l'hôtellerie,
• 12:34
  de la réception à la direction.
• 12:36
  Un truc comme ça,
• 12:37
  ça aurait été beaucoup plus impactant.
• 12:39
  Et même au niveau...
• 12:40
  Jouer avec les assets.
• 12:42
  Les assets,
• 12:43
  ça va être tous les visuels qui vont accompagner
• 12:47
  accompagné,
• 12:47
  on n'est pas obligé de faire des animations le droit,
• 12:49
  gauche avec l'image qui prend à peu près 40%
• 12:52
  quand on coupe le bloc en deux,
• 12:54
  il faut en fait imaginer bloc par bloc le couper en deux et dire le pourcentage que chacun va prendre à gauche et à droite là on est plus on va dire sur du 40-60 vraiment de réfléchir autrement ou de voir comment on peut améliorer avec moi j'en ai fait des blocs de ce type là,
• 13:09
  mais voilà j'ai mis des petits encarts,
• 13:11
  j'ai mis des petites choses qui font que
• 13:14
  Dans l'ensemble du design,
• 13:16
  ça va faire beaucoup plus Wahoo et beaucoup moins classique si tu fais rapidement,
• 13:24
  sans effort.
• 13:26
  Comment tu fais pour trouver des assets de sites Internet qui ont intéressant,
• 13:29
  en tout cas des inspirations ?
• 13:31
  Parce que toi,
• 13:32
  tu as quand même plusieurs clients de domaines archivariés.
• 13:35
  Donc,
• 13:37
  comment tu arrives à voir quels sont les bons assets à mettre en place avant de les faire faire par un designer,
• 13:42
  par exemple ?
• 13:44
  T'as plein de sites d'inspiration,
• 13:46
  t'as Dribbble,
• 13:46
  Pinterest,
• 13:47
  t'as les sites des awards,
• 13:48
  donc c'est les sites où les agences web publient leurs sites internet pour qu'ils soient notés,
• 13:54
  etc.
• 13:54
  et qu'après ils aient
• 13:56
  « site of the day » ,
• 13:57
  « site of the year » ,
• 13:57
  « site of the most » ,
• 13:58
  des trucs comme ça.
• 13:59
  Donc il y a plein de sources d'inspiration sur internet,
• 14:02
  on peut aller chercher un peu les sites qui nous intéressent.
• 14:06
  Le but également,
• 14:07
  c'est d'être un peu curieuse quand on est sur LinkedIn,
• 14:09
  d'aller cliquer.
• 14:11
  d'aller voir un peu ce que font la concurrence,
• 14:13
  d'aller voir même d'autres personnes qui ne sont pas du tout concurrents à nous-mêmes,
• 14:16
  mais qui ont vraiment des vrais talents en termes d'UX et de conversion.
• 14:22
  Et après,
• 14:22
  derrière,
• 14:23
  s'inspirer,
• 14:24
  pas copier,
• 14:24
  mais s'inspirer pour essayer de bricoler.
• 14:27
  J'aime bien ce délire-là,
• 14:29
  ce délire-là,
• 14:29
  etc.
• 14:30
  D'avoir à minima trois couleurs pour pouvoir faire tout ça.
• 14:37
  Et après,
• 14:37
  réellement,
• 14:37
  avec la technologie d'aujourd'hui,
• 14:40
  On peut réussir à mixer.
• 14:42
  Mais voilà,
• 14:42
  de se faire un petit mood board,
• 14:43
  tout simplement.
• 14:44
  Vous prenez une grande page Figma et vous copiez-collez un peu tous les blocs.
• 14:49
  Là,
• 14:49
  j'aime bien l'inspiration de ça,
• 14:51
  Et après,
• 14:52
  on envoie tout et on teste.
• 14:54
  On teste ça avec ça et c'est un puzzle.
• 14:56
  Il y a une page qu'on aime bien,
• 15:00
  toi et moi,
• 15:00
  et à peu près tout le monde,
• 15:02
  c'est celle de Johanna Lerocq.
• 15:05
  En termes du mix,
• 15:06
  oui,
• 15:07
  elle est incroyable.
• 15:08
  Elle est incroyable.
• 15:09
  Et elle est hyper bien faite.
• 15:10
  Et effectivement,
• 15:11
  il y a tout qui va bien.
• 15:13
  Là,
• 15:13
  il y a un petit slider pour faire un avant-après.
• 15:17
  On peut la revoir.
• 15:19
  Ils nous ont envoyé cette landing page puisqu'on l'avait découvert d'un post sur LinkedIn.
• 15:23
  Vraiment,
• 15:24
  j'étais choquée.
• 15:24
  Il n'y a absolument rien qui ne va pas.
• 15:28
  La réassurance directement,
• 15:29
  comme on l'a vu avec les photos,
• 15:31
  le nombre de clients satisfaits,
• 15:32
  avec le volume de clients.
• 15:33
  Ça,
• 15:33
  au début,
• 15:34
  ce n'est pas hyper important.
• 15:36
  La promesse qui est hyper concrète.
• 15:39
  Le changement de langue est hyper smart parce qu'au final,
• 15:43
  ça permet d'aller chercher plus de monde.
• 15:45
  Le WhatsApp sur le haut,
• 15:47
  le bouton appel qui est toujours présent,
• 15:49
  qui pousse vraiment à appeler.
• 15:52
  Révision illimitée jusqu'à satisfaction,
• 15:54
  les éléments de réassurance également par rapport à tout ça.
• 15:57
  Après,
• 15:58
  quand on descend,
• 16:00
  il y a une petite vidéo.
• 16:03
  Le nombre de places restant,
• 16:04
  le bouton commandé,
• 16:05
  le paiement sécurisé par Skype.
• 16:07
  Les éléments de réassurance,
• 16:09
  livraison rapide,
• 16:09
  révision limitée,
• 16:11
  6 personnes dédiées.
• 16:12
  On rappelle,
• 16:13
  il a enfermé avec les avis.
• 16:19
  Là,
• 16:19
  il explique la douleur.
• 16:20
  La douleur,
• 16:21
  elle est très claire.
• 16:21
  On la voit clairement.
• 16:23
  Et les avantages,
• 16:24
  donc plus 15%
• 16:25
  de visite de profil,
• 16:26
  plus 27%
• 16:27
  de lits d'entrant,
• 16:28
  plus 33%
• 16:29
  de lits de rendez-vous qualifiés après refonte.
• 16:31
  Et en gros,
• 16:31
  il montre clairement l'avant-après.
• 16:34
  Ça,
• 16:34
  c'est trop fort.
• 16:35
  Le slider avant-après,
• 16:38
  je trouve ça exceptionnel.
• 16:40
  Tu as un visuel qui,
• 16:41
  à lui seul,
• 16:42
  ça convertit toute la page.
• 16:44
  Oui,
• 16:45
  100%.
• 16:45
  Après,
• 16:46
  ce n'est pas possible pour tous les business.
• 16:49
  Mais on peut le faire avec des chiffres.
• 16:51
  Mais tout ce qui est très visuel,
• 16:53
  vraiment,
• 16:53
  user de l'avant-après,
• 16:55
  il n'y a rien de plus marquant qu'une image,
• 16:56
  entre guillemets.
• 16:58
  un petit rappel et là les bannières défilantes sachant qu'il a fait des personnes qui sont assez connues peut-être sur LinkedIn donc on a déjà vu forcément dans notre feed donc c'est sûr que ça montre aussi et ça marque la notoriété et puis après tout le reste de la page mais ça on laissera les auditeurs et tous ceux qui sont sur Youtube regarder le reste de cette page attract.agency donc
• 17:20
  de notre amie Joanne Leroch on dit pour toi Joanne Rires
• 17:27
  N'oublie pas,
• 17:27
  Joanne,
• 17:27
  si tu regardes cette vidéo et que tu as de la conversion via cette vidéo,
• 17:32
  on prend une com,
• 17:32
  au passage.
• 17:35
  On va revenir sur notre page pourrie gamma.
• 17:40
  Bon,
• 17:40
  donc là,
• 17:40
  le qui suis-je ?
• 17:41
  Voilà,
• 17:41
  à revoir.
• 17:42
  Là,
• 17:42
  on a les résultats.
• 17:43
  Trop dommage,
• 17:43
  les résultats,
• 17:44
  parce qu'en fait,
• 17:45
  là,
• 17:45
  concrètement,
• 17:46
  c'est ce qui fait toute la valeur,
• 17:48
  toute la transformation de l'offre,
• 17:50
  une fois que la personne est passée dans l'offre.
• 17:52
  Et là,
• 17:53
  en fait,
• 17:53
  on a encore une fois...
• 17:55
  une section qui est archi plate et qui donne pas envie et qui du coup bah vous donne juste envie de se barrer quoi
• 18:02
  C'est pas du tout visuel,
• 18:03
  ça donne pas envie.
• 18:04
  Les étiquettes,
• 18:04
  elles sont pas...
• 18:06
  Ok,
• 18:06
  c'est aligné sur la droite-gauche,
• 18:08
  mais j'ai rien envie de lire.
• 18:11
  Il n'y a pas de chiffre.
• 18:12
  Par exemple,
• 18:13
  un gros chiffre avec un petit truc en bas,
• 18:14
  ça donne envie.
• 18:16
  Dans le copie,
• 18:17
  on a un chiffre,
• 18:18
  c'est-à-dire qu'on évite justement via cette offre un turnover des équipes qui représentent jusqu'à 100 000 euros de coût annuel et une satisfaction client qui,
• 18:28
  quand elle n'est pas là,
• 18:29
  représente un coût...
• 18:30
  perte de chiffre d'affaires de 50 000 euros par an.
• 18:33
  Et ça,
• 18:33
  c'est en tout petit,
• 18:34
  en fait.
• 18:35
  Alors que ça devrait être en archi gros,
• 18:37
  quoi.
• 18:39
  Ou plus dans les problèmes.
• 18:41
  En gros,
• 18:41
  vous perdez plus de 100 000 euros par an,
• 18:43
  plus de 150 000 euros par an entre le turnover et la satisfaction de client.
• 18:47
  Ça,
• 18:47
  je l'aurais plus mis dans les problèmes.
• 18:48
  Mais ce n'est pas des chiffres en gros de avant-après.
• 18:50
  C'est-à-dire comment l'après a été mesuré.
• 18:52
  Parce que ça,
• 18:53
  c'est clairement,
• 18:53
  on peut mesurer le fait,
• 18:56
  la qualité,
• 18:56
  c'est des notes avec les avis clients.
• 19:01
  Les équipes plus stables,
• 19:02
  on va le voir clairement au niveau RH.
• 19:04
  La satisfaction client,
• 19:05
  on va voir peut-être s'il y a une hausse de la note satisfaction client en fonction de deux cas.
• 19:09
  Donc,
• 19:10
  quitte à avoir,
• 19:10
  si on a un ou deux cas clients,
• 19:11
  je trouve que c'est limite plus intéressant de mettre précisément un cas client en mode avant-après pour vraiment qu'on estime la chose plutôt qu'avoir une moyenne de tous ces cas clients et de toutes les notes qu'on a réussi à récolter qui sont,
• 19:27
  on va dire,
• 19:28
  moins parlantes.
• 19:29
  Vraiment prendre un cas client et essayer de le faire en rapide,
• 19:32
  mais en même temps faire un peu à l'avant-après,
• 19:35
  ce serait beaucoup plus parlant ici.
• 19:38
  Je switch 30 secondes sur l'ovable,
• 19:40
  mais tu vois,
• 19:41
  pour le coup,
• 19:41
  l'ovable a un peu mieux designé cette section-là,
• 19:44
  où justement,
• 19:45
  on a en termes de repères,
• 19:47
  tu vois,
• 19:48
  la perte concrètement si tu ne prends pas son offre.
• 19:53
  100 000 euros le coût annuel d'un turnover non maîtrisé et 50 000 euros la valeur annuelle d'une satisfaction client stabilisée.
• 20:00
  Donc c'est un peu mieux mis en avant malgré tout.
• 20:03
  Les petites coches comme ça c'est beaucoup plus lisible avec les petits traits et le titre qui soit en deux couleurs,
• 20:14
  il est plus visuel également.
• 20:15
  Il y a du chiffre,
• 20:16
  le bout de 30 jours,
• 20:17
  c'est-à-dire sous un mois on voit des résultats,
• 20:19
  la manière dont le contenu a été rédigé aussi donne plus envie.
• 20:24
  C'est un petit peu mieux,
• 20:25
  mais ce n'est pas non plus optimal le label.
• 20:28
  On va le voir après.
• 20:29
  Là,
• 20:30
  on a la méthode.
• 20:31
  C'est un axe chronologique,
• 20:34
  horizontal,
• 20:35
  très classique,
• 20:36
  hyper standard.
• 20:38
  Encore une fois,
• 20:38
  c'est très plat en termes de design.
• 20:40
  On aura de cesse de le répéter tout au long de ce roast de cette page.
• 20:46
  La preuve sociale,
• 20:47
  je n'avais pas forcément de bandeau de témoignages,
• 20:50
  de choses comme ça.
• 20:52
  donc du coup je l'ai laissé tel quel mais encore une fois voilà et puis tu vois moi ce qui me dérange je sais pas toi mais moi ce qui me pose un problème en fait c'est qu'on a pas de de comment dirais-je de
• 21:07
  rupture en fait de section tu vois en termes de fond en fait donc t'as l'impression en fait c'est une seule et même page,
• 21:13
  il y a le même fond
• 21:14
  et voilà.
• 21:16
  Tout a été posé dessus.
• 21:18
  C'est vrai que c'est important d'avoir des fonds,
• 21:20
  par exemple,
• 21:20
  si vous faites noir et blanc,
• 21:22
  d'avoir du fond blanc,
• 21:23
  du fond noir,
• 21:23
  etc.
• 21:24
  Alors,
• 21:24
  pas obligé de faire un bloc,
• 21:26
  un fond noir,
• 21:27
  un bloc,
• 21:27
  un fond blanc,
• 21:28
  mais vous pouvez mettre une cohérence.
• 21:29
  Par exemple,
• 21:29
  les éléments de réassurance,
• 21:30
  vous allez les mettre beaucoup plus visibles sur du fond blanc,
• 21:33
  dans un ensemble noir,
• 21:35
  etc.
• 21:35
  Ce qui va permettre de faire ressortir certains éléments où les résultats,
• 21:40
  c'est une section qui est hyper importante en termes de conversion et de réassurance.
• 21:43
  on veut la faire ressortir,
• 21:44
  on va mettre la couleur la plus simple en termes de visibilité qui va ressortir sur un contraste fort.
• 21:50
  Mais oui,
• 21:50
  c'est vrai que c'est important de varier les background.
• 21:54
  Après,
• 21:55
  pourquoi moi ?
• 21:56
  Ça reste encore une fois le copywriting qu'on avait repris.
• 22:00
  On a quelques petites icônes.
• 22:03
  Bon,
• 22:05
  mais enfin,
• 22:06
  voilà.
• 22:06
  Ce n'est pas ouf en termes de design.
• 22:10
  Ça ne donne pas envie.
• 22:11
  Et là,
• 22:11
  le tarif,
• 22:12
  boum,
• 22:12
  allez,
• 22:12
  tarif.
• 22:15
  On t'affiche le prix,
• 22:15
  en fait.
• 22:17
  Vraiment,
• 22:18
  je ne sais pas,
• 22:20
  il n'y a rien qui mène,
• 22:21
  en fait.
• 22:22
  J'ai l'impression,
• 22:23
  en fait,
• 22:23
  qu'il n'y a pas de fil conducteur dans cette page,
• 22:27
  tu vois,
• 22:27
  qui mène d'un coup au tarif,
• 22:28
  tu vois,
• 22:29
  à chacune des sections,
• 22:30
  en fait,
• 22:30
  les unes après les autres.
• 22:31
  Tu vois,
• 22:32
  il y a un enchaînement qui n'est pas...
• 22:33
  Je ne sais pas ce que tu en penses,
• 22:34
  mais...
• 22:37
  Les titres,
• 22:38
  ils sont...
• 22:38
  Bam !
• 22:39
  Tarif,
• 22:39
  preuve sociale.
• 22:41
  Tu vois ?
• 22:43
  C'est...
• 22:43
  À l'armée,
• 22:44
  hein ?
• 22:45
  On ne passe pas qu'à ce chemin.
• 22:46
  Mais après,
• 22:46
  il y a des moyens de mettre le tarif et de réassurer autour du tarif.
• 22:49
  En gros,
• 22:50
  3 900.
• 22:51
  OK.
• 22:51
  Mais rappelle tout ce qu'il y a compris.
• 22:52
  Comment ça va...
• 22:53
  Ça va se passer,
• 22:54
  tout ce qu'il peut y avoir à l'intérieur,
• 22:55
  etc.
• 22:56
  Alors,
• 22:56
  moi,
• 22:56
  je suis 100 %
• 22:57
  la team pour mettre son prix.
• 22:59
  Il peut y avoir de touristes...
• 23:00
  Il peut y avoir touristes en formulaire et pas de part de temps en appel découverte.
• 23:07
  Mais voilà,
• 23:08
  pour moi,
• 23:08
  OK,
• 23:08
  il y a le tarif,
• 23:09
  mais à l'heure actuelle,
• 23:10
  je ne sais pas tout ce qu'il y a compris dedans.
• 23:11
  Essaye de mettre le maximum de choses qui sont touchables,
• 23:15
  livrables,
• 23:16
  que tu vas faire,
• 23:17
  est-ce que tu vas te déplacer ?
• 23:19
  Ça,
• 23:19
  on n'en sait rien,
• 23:20
  en fait,
• 23:20
  sur comment ça va se passer et qu'est-ce qui va être compris à l'intérieur.
• 23:25
  Des choses faciles aussi à faire,
• 23:27
  c'est en gros,
• 23:28
  combien d'argent tu peux gagner grâce à ta prestation.
• 23:31
  des petites estimations,
• 23:33
  un petit estimateur comme il a fait Johan,
• 23:34
  comme moi j'ai fait de mon côté sur certaines pages dans mon site internet,
• 23:39
  toutes les pages dans le footer consultant
• 23:41
  SEO plus ville.
• 23:42
  J'ai toujours mis un estimateur de combien le SEO peut te rapporter.
• 23:45
  Et voilà,
• 23:46
  c'est des petites choses qui font la différence et qui vont en fait aussi faire que l'utilisateur reste plus longtemps sur ta page,
• 23:51
  interagit un peu plus,
• 23:53
  lit,
• 23:54
  s'intéresse un peu plus au contenu et que tu vas rajouter un peu de gamification dans la navigation.
• 24:01
  Oui,
• 24:02
  exactement.
• 24:02
  Là,
• 24:03
  du coup,
• 24:03
  on est sur vraiment le call to action de fin,
• 24:07
  où on répète un peu le truc.
• 24:12
  Je pense que ces deux sections de tarifs et le call to action de fin,
• 24:15
  je pense qu'en termes de design,
• 24:16
  on pourrait un peu les fusionner,
• 24:18
  à mon sens.
• 24:19
  Je ne sais pas ce que tu en penses.
• 24:20
  Alors moi,
• 24:21
  j'aime bien avoir une section tarif et une section call to action de fin.
• 24:24
  Et généralement,
• 24:25
  call to action,
• 24:26
  vraiment un call to action qui va vraiment taper dans l'œil.
• 24:28
  Pas obligé de mettre une image,
• 24:29
  mais vraiment un truc qui va faire pleine largeur,
• 24:33
  avec un copy vraiment très travaillé,
• 24:35
  qui va vraiment donner envie.
• 24:36
  Là,
• 24:37
  c'est le dernier moment pour récupérer la personne.
• 24:39
  Donc,
• 24:39
  avoir vraiment un call to action bien imposant,
• 24:41
  visuellement qui pète,
• 24:43
  limite faire un peu d'animation pour que,
• 24:45
  hop,
• 24:45
  on clique sur le bouton,
• 24:47
  tu vois.
• 24:49
  Réassurer encore avant.
• 24:54
  Et ça,
• 24:55
  pour moi,
• 24:55
  il est important.
• 24:56
  Et après,
• 24:56
  le mettre sur toutes les pages et le répéter.
• 24:58
  La répétition joue.
• 24:59
  Parce que si les gens naviguent,
• 25:01
  si vous avez d'autres pages et que vous commencez à développer votre site Internet,
• 25:04
  le but,
• 25:04
  c'est toujours d'avoir ce CTA constant qu'on retrouve et qui s'adapte en termes de copie en fonction de la page.
• 25:11
  Exactement.
• 25:11
  Et après,
• 25:12
  je ne sais pas pourquoi il ne m'a mis pas de calendrier de réservation.
• 25:17
  Ça,
• 25:17
  c'est l'invention de Gamma.
• 25:18
  Ça,
• 25:18
  c'est l'invention de Gamma.
• 25:20
  Pour le coup,
• 25:20
  tu vois,
• 25:21
  en call to action,
• 25:23
  Moi,
• 25:23
  je sais que j'en ai un sur mes pages de vente et tout.
• 25:29
  Je vais le montrer.
• 25:30
  Mais moi,
• 25:31
  à la fin,
• 25:32
  j'ai intégré...
• 25:34
  Alors,
• 25:35
  mes pages de vente ne sont pas forcément une référence.
• 25:37
  Mais à la fin,
• 25:38
  j'ai quand même intégré mon calendrier de réservation pour simplifier la prise de rendez-vous par la personne qui est en train de visiter mon site.
• 25:47
  Et je ne comprends pas que sur Gamma,
• 25:49
  on ne puisse pas faire la même chose.
• 25:51
  Là,
• 25:51
  on a un...
• 25:52
  pauvre bouton de merde.
• 25:53
  T'as rien.
• 25:53
  Et alors que ton calendrier,
• 25:55
  ça pourrait aussi être un asset,
• 25:56
  en fait,
• 25:57
  de cette section,
• 25:58
  quoi,
• 25:58
  finalement.
• 26:00
  Donc là,
• 26:01
  on a les questions fréquentes.
• 26:02
  Je déteste ça sous forme de cards comme ça parce qu'on a l'habitude d'avoir des espèces de menus dépliants d'une FAQ.
• 26:10
  Les questions fréquentes,
• 26:11
  alors faites du...
• 26:14
  de l'accordéon classique.
• 26:16
  Toujours la première question,
• 26:17
  laissez-la ouverte.
• 26:19
  Et également,
• 26:19
  ici,
• 26:20
  on traite les objections.
• 26:22
  C'est vraiment en termes de copie,
• 26:23
  c'est de traiter toujours les objections dans la FAQ.
• 26:25
  Donc,
• 26:26
  vous pouvez en mettre autant que vous le souhaitez.
• 26:29
  Mais chaque fois que vous répérez des objections qui se répètent lors de vos calls,
• 26:33
  rajoutez-les ici,
• 26:35
  quitte à le répéter en call,
• 26:36
  parce que la personne ne lira pas tout le contenu.
• 26:37
  Il faut toujours se mettre ça en tête.
• 26:39
  Vous devez avoir à même pas 1%
• 26:41
  des personnes qui liront l'entièreté de votre page.
• 26:43
  Mais derrière,
• 26:43
  au moins,
• 26:44
  si ça vous évite de répéter deux fois la même chose,
• 26:47
  c'est déjà ça de pris.
• 26:49
  Exactement.
• 26:50
  Moi,
• 26:50
  parfois,
• 26:51
  j'étais surprise de savoir que j'avais des gens en call qui lisaient ma FAQ,
• 26:55
  quand même.
• 26:57
  Il y en a qui lisent,
• 26:58
  vraiment.
• 26:59
  Donc,
• 27:00
  je pense qu'il ne faut pas hésiter,
• 27:01
  effectivement,
• 27:02
  à mettre tout ce qu'il faut dans la section FAQ.
• 27:05
  Bref,
• 27:05
  d'une façon générale,
• 27:06
  qu'est-ce qu'on en pense de cette page gamma ?
• 27:08
  Elle est pourrie,
• 27:09
  on est d'accord.
• 27:09
  Poubelle.
• 27:10
  Poubelle.
• 27:11
  On va passer rapidement à...
• 27:13
  Non recyclable.
• 27:15
  À celle de Loveable,
• 27:16
  juste voir un peu les meilleures pratiques par rapport à Gamma,
• 27:19
  sachant que de toute façon,
• 27:20
  Loveable,
• 27:20
  on n'est pas non plus sur un truc de fou.
• 27:24
  Mais voilà,
• 27:24
  je trouve qu'en termes de design,
• 27:25
  ça va un peu mieux.
• 27:26
  On a un surtitre là qui n'est pas trop mal.
• 27:30
  Voilà.
• 27:31
  Après,
• 27:32
  ça reste pas dingue non plus.
• 27:33
  Déjà,
• 27:34
  première chose,
• 27:35
  la ligne de flottaison,
• 27:36
  le fait qu'on ne voit pas le CTA directement quand on arrive.
• 27:39
  T'es sur un 14 pouces,
• 27:40
  toi,
• 27:40
  c'est ça ?
• 27:41
  Oui,
• 27:41
  je suis sur un 14 pouces,
• 27:42
  mon Mac.
• 27:43
  En général,
• 27:44
  on est sur du 13-14 pouces.
• 27:45
  Le titre,
• 27:46
  en fait,
• 27:46
  le fait qu'il soit vraiment très gros et très espacé,
• 27:49
  le bouton d'action,
• 27:49
  il n'est pas du tout visible.
• 27:50
  Donc là,
• 27:51
  déjà,
• 27:51
  il faut se dire que le héros,
• 27:52
  il faut qu'il soit visible sur n'importe quel device.
• 27:55
  Du 14,
• 27:55
  du 16,
• 27:56
  du 12,
• 27:56
  ce que vous voulez.
• 27:57
  Tout ce qui existe.
• 27:58
  Et surtout aussi sur mobile.
• 28:00
  Il faut qu'on puisse voir le bouton d'action et l'entièreté du héros,
• 28:04
  donc la première section importante,
• 28:07
  sur n'importe quel ordinateur.
• 28:08
  Et là,
• 28:09
  c'est typiquement à cause de la taille du titre et les espacements entre chaque ligne.
• 28:12
  Il a mieux fait,
• 28:12
  le label,
• 28:13
  la page.
• 28:13
  Alors que franchement,
• 28:14
  je suis partie d'un prompt pourri.
• 28:16
  Je lui ai dit très exactement,
• 28:17
  fais-moi une page de vente.
• 28:19
  Voici le copywriting.
• 28:20
  Boum,
• 28:20
  je n'ai rien.
• 28:22
  Je lui ai tout laissé faire.
• 28:25
  Honnêtement,
• 28:25
  le prompt était à chier.
• 28:27
  Mais je trouve que le rendu est quand même un peu meilleur par rapport à Gamma.
• 28:31
  Tu vois,
• 28:32
  alors que...
• 28:32
  Gamma,
• 28:33
  je le rappelle,
• 28:33
  mais Gamma,
• 28:34
  en fait,
• 28:34
  il n'y a pas à prompter concrètement.
• 28:37
  On copie-colle un texte et après,
• 28:39
  on choisit des éléments de personnalisation du design.
• 28:43
  Mais c'est tout,
• 28:44
  en fait.
• 28:44
  On ne discute pas avec l'IA de Gamma pour faire la page.
• 28:49
  Tandis qu'avec Loveable,
• 28:50
  on peut un peu plus discuter,
• 28:52
  ce qui fait que la page est un peu mieux quand même.
• 28:55
  Donc là,
• 28:57
  on a la section problématique douleur.
• 29:01
  Et tu vois,
• 29:01
  là,
• 29:01
  on a des animations.
• 29:02
  J'ai rechargé la page.
• 29:04
  On a quelques animations.
• 29:05
  La manière dont c'est écrit,
• 29:07
  tu vois,
• 29:08
  l'italique,
• 29:08
  c'est exactement là que j'interviens,
• 29:10
  etc.
• 29:10
  Ça va attirer l'œil.
• 29:11
  Donc,
• 29:12
  c'est un peu mieux.
• 29:14
  C'est pas exceptionnel,
• 29:14
  mais pour une section qui suis-je,
• 29:16
  qui est classique à faire,
• 29:18
  le fait de jouer sur les polices,
• 29:20
  le gras,
• 29:21
  l'italique,
• 29:21
  etc.
• 29:22
  Après,
• 29:23
  n'en abusez pas non plus,
• 29:24
  mais c'est des petites choses qui font que c'est un peu plus visuel et ça donne plus envie de regarder.
• 29:29
  Oui,
• 29:30
  c'est ça.
• 29:31
  Là,
• 29:31
  on a les résultats.
• 29:32
  C'était la section que je montrais avant avec les coûts.
• 29:40
  Si tu ne fais rien,
• 29:41
  100 000 euros pour un turnover non maîtrisé,
• 29:43
  50 000 euros pour une satisfaction client qui n'est pas stabilisée.
• 29:48
  Là,
• 29:48
  on a justement la méthode.
• 29:50
  Archie classique aussi.
• 29:52
  Là,
• 29:52
  on n'a même pas d'axe chronologique.
• 29:54
  C'est vraiment un système de cartes avec 1,
• 29:57
  2,
• 29:57
  3.
• 30:00
  Là,
• 30:00
  toute la partie preuve sociale.
• 30:01
  Et là,
• 30:02
  du coup,
• 30:02
  tu vois,
• 30:02
  Loveable,
• 30:03
  il a quand même bien fait le job.
• 30:04
  C'est qu'il a mis un background qui est différent du reste.
• 30:06
  Donc justement,
• 30:07
  ça permet de mieux contraster et de mieux mettre en avant cette partie-là.
• 30:11
  Et il a le terme entre le beige et le beige clair.
• 30:15
  Exactement.
• 30:16
  Et le crème.
• 30:16
  La section tarif,
• 30:18
  qui est aussi un peu mieux présentée.
• 30:20
  Mais bon,
• 30:20
  voilà,
• 30:20
  ça manque un peu de contenu malgré tout.
• 30:23
  Pour l'assurance.
• 30:24
  Et puis,
• 30:24
  je trouve que la section est un peu vide en termes de design.
• 30:28
  Enfin voilà,
• 30:29
  on a l'impression qu'on est un peu à poil.
• 30:30
  Sur mon site,
• 30:32
  une idée de ce que j'ai fait sur la section tarifs,
• 30:36
  c'est bête mais c'est juste un visuel que j'ai mis à droite et au final qui est cool,
• 30:40
  qui fait la diff.
• 30:41
  Donc là déjà,
• 30:42
  donner le prix,
• 30:43
  j'ai rappelé tout ce qui était compris là-dedans et voilà la petite section bonus,
• 30:48
  tout ce qui est en bonus inclus avec une petite photo,
• 30:52
  ça permet un peu plus de...
• 30:54
  De plus,
• 30:54
  on va dire la section prix.
• 30:56
  le prix ne doit plus devenir une objection.
• 30:58
  En gros,
• 30:58
  on doit se dire,
• 30:59
  il y a pas mal de choses.
• 31:03
  C'est exactement ce qu'on doit se dire.
• 31:06
  Là,
• 31:06
  c'est la dernière section sur l'ovable de Call to Action.
• 31:12
  Rien de fou.
• 31:12
  Et là,
• 31:13
  pour le coup,
• 31:13
  l'ovable sur la section FAQ a mieux fait le job.
• 31:16
  On est sur l'accordéon.
• 31:19
  Donc ça,
• 31:19
  c'est bien.
• 31:19
  Petite signature et un footer qui est prévu pour,
• 31:25
  je pense,
• 31:25
  insérer les mentions légales et la politique de confidentialité.
• 31:28
  Donc,
• 31:28
  concrètement,
• 31:29
  voilà,
• 31:30
  gamma en fou à la poubelle.
• 31:31
  L'ovable,
• 31:31
  c'est un peu mieux quand même.
• 31:33
  On est d'accord.
• 31:36
  Après,
• 31:36
  le problème,
• 31:36
  c'est le tarif.
• 31:37
  Ça,
• 31:37
  c'est effectivement une problématique.
• 31:39
  Et puis,
• 31:40
  si un jour,
• 31:41
  tu veux justement mettre en place une stratégie de référencement SEO,
• 31:46
  en fait,
• 31:47
  tu ne peux pas sur l'ovable.
• 31:48
  Ouais,
• 31:49
  c'est plus complexe.
• 31:50
  Donc c'est très bien pour le landing page,
• 31:51
  mais si un jour tu sais pas comment tu vas faire évoluer ton site internet,
• 31:54
  tu risques un peu,
• 31:55
  quoi.
• 31:57
  Et c'est plus complexe,
• 31:57
  je pense,
• 32:00
  à faire...
• 32:00
  Personnellement,
• 32:01
  je connais pas du tout ces outils-là,
• 32:02
  parce que moi,
• 32:03
  je vais directement avec Claude depuis toujours.
• 32:05
  Ouais,
• 32:06
  moi,
• 32:06
  pour les avoir un petit peu pratiqué ces outils,
• 32:08
  je trouve que sur Loveable...
• 32:09
  Alors évidemment,
• 32:10
  sur Gamma,
• 32:11
  tu peux changer tout ça,
• 32:12
  tu peux...
• 32:13
  Mais bon,
• 32:13
  tu es quand même hyper limité en termes de design.
• 32:15
  Sur Loveable,
• 32:16
  tu peux aussi faire évoluer ton design,
• 32:18
  le contenu,
• 32:18
  etc.
• 32:19
  Mais du coup,
• 32:21
  je trouve ça pas très,
• 32:22
  très pratique.
• 32:23
  Alors que typiquement,
• 32:24
  avec...
• 32:24
  Et puis,
• 32:25
  ça rajoute encore une fois un abonnement.
• 32:26
  Parce que
• 32:27
  Loveable, pour pouvoir modifier tout le contenu de ta page,
• 32:31
  du coup,
• 32:31
  il y a un moment donné,
• 32:32
  tu es limité quand tu es en forfait gratuit.
• 32:35
  sur les échanges que tu as avec Loveable,
• 32:38
  alors que Claude,
• 32:39
  tu as un abonnement.
• 32:40
  C'est un abonnement pour à peu près tout.
• 32:42
  Et du coup,
• 32:44
  tu peux faire évoluer ton contenu comme tu en as envie,
• 32:47
  comme ça,
• 32:47
  tu en dois.
• 32:48
  Justement,
• 32:48
  on va passer à la page que j'ai générée,
• 32:52
  moi,
• 32:52
  avec
• 32:52
  Claude.
• 32:54
  Donc, c'est celle-là.
• 32:55
  Alors,
• 32:55
  du coup,
• 32:56
  il manque quand même un petit asset de design sur la partie héros.
• 33:04
  ça peut être juste d'animation en background pareil réduire la taille du H1 qui est beaucoup trop grande moi j'enlèverais le fondu quand tu remontes ton jusqu'au
• 33:19
  tapage sur la navbar et le fait que le CTA soit pas visible directement sous le héros en fait je pense que le héros il est trop long,
• 33:27
  le texte est trop long je pense que c'est ça qu'il faudrait
• 33:31
  Il faut le réduire,
• 33:33
  clairement.
• 33:33
  Par contre,
• 33:33
  on a une navbar qui nous permet de naviguer au niveau de la page.
• 33:38
  On a des sections qui sont différenciées par rapport au background.
• 33:41
  Là,
• 33:41
  on est sur la section des problématiques,
• 33:44
  donc de la douleur de la cible.
• 33:48
  Liste à puces classique,
• 33:51
  standard.
• 33:52
  Ça mériterait aussi un petit visuel un peu sympa,
• 33:56
  histoire qu'on ait envie de lire.
• 33:59
  Je pense,
• 33:59
  bon là,
• 34:00
  il me manque la photo de Mélanie,
• 34:02
  forcément.
• 34:03
  Mais là,
• 34:03
  du coup,
• 34:04
  on a quand même dans l'apropos le titre de ce qui suis-je,
• 34:09
  qui est quand même mieux formulé,
• 34:11
  je trouve,
• 34:11
  par rapport à tout ce qu'on a vu dans Gamma,
• 34:13
  Loveable,
• 34:14
  etc.
• 34:15
  Ensuite,
• 34:15
  on a un petit bandeau avec justement de la preuve sociale.
• 34:18
  Alors bon,
• 34:19
  moi,
• 34:20
  typiquement,
• 34:20
  je l'aurais mis un peu au-dessus,
• 34:22
  tu vois.
• 34:22
  Moi,
• 34:22
  j'aurais mis sous l'apropos.
• 34:24
  Ouais,
• 34:24
  ouais.
• 34:25
  Alors,
• 34:26
  tu l'aurais mis directement dans l'apropos et en fait en dessous ?
• 34:28
  Là,
• 34:29
  tu l'aurais bien.
• 34:29
  Non,
• 34:30
  mais en fait,
• 34:30
  c'est bien comment il a été mis.
• 34:31
  C'était plus smart.
• 34:33
  30 ans dans l'hôtellerie,
• 34:34
  etc.
• 34:34
  Mais j'aurais fait un truc plus...
• 34:35
  Tu sais,
• 34:36
  juste des petites puces avec l'étiquette.
• 34:37
  Tu vois ?
• 34:38
  Ouais,
• 34:38
  je vois.
• 34:39
  Un peu couplé dans l'apropos.
• 34:40
  Les bénéfices de l'offre,
• 34:41
  donc ce que les clients,
• 34:42
  ils constatent au bout de 30 jours.
• 34:44
  Là,
• 34:45
  la méthode 30 jours sur le terrain,
• 34:46
  je trouve que c'est mieux designé,
• 34:47
  tu vois,
• 34:48
  d'avoir l'axe comme ça,
• 34:50
  chronologique.
• 34:51
  Ouais,
• 34:51
  le petit 01,
• 34:52
  02,
• 34:52
  en filigrane,
• 34:53
  c'est joli.
• 34:54
  C'est vraiment sympa.
• 34:55
  Donc là,
• 34:55
  évidemment,
• 34:56
  il y a un emplacement pour une photo,
• 34:57
  histoire de mettre un petit asset aussi.
• 35:01
  Ça,
• 35:01
  c'est plutôt pas mal.
• 35:02
  Là,
• 35:03
  on a un bandeau défilant avec les avis Google.
• 35:04
  Beaucoup plus visuel.
• 35:07
  Beaucoup plus visuel et puis l'animation sympa.
• 35:10
  Ouais,
• 35:11
  exactement.
• 35:12
  Le petit fondu sur le côté,
• 35:13
  c'est cool.
• 35:13
  La section pourquoi travailler avec Mélanie,
• 35:16
  la section tarifs.
• 35:18
  Bon,
• 35:19
  là,
• 35:19
  du coup,
• 35:19
  il faudrait un peu agrémenter cette section-là.
• 35:22
  en termes de copywriting,
• 35:24
  et justement pour que ce soit plus dense en termes de bénéfice de l'offre,
• 35:29
  etc.
• 35:30
  Ça,
• 35:30
  c'est un truc,
• 35:31
  tu vois,
• 35:32
  moi,
• 35:32
  je fais toujours,
• 35:33
  je bosse toujours le copywriting sur genre un fichier Word ou un truc comme ça où j'écris vraiment le contenu de mes pages.
• 35:40
  Mais par contre,
• 35:41
  si jamais figé,
• 35:41
  en fait,
• 35:42
  j'attends toujours de les voir monter les pages pour voir ensuite ce que ça donne en vrai.
• 35:47
  Et après,
• 35:48
  adapter quand même le copywriting au design.
• 35:50
  C'est ce qu'on disait justement tout à l'heure.
• 35:53
  Adapter un peu le contenu au design.
• 35:54
  Là,
• 35:55
  l'établissement dans 30 jours.
• 35:57
  Là,
• 35:57
  typiquement,
• 35:57
  il m'a rajouté un formulaire qui est plutôt pas mal.
• 36:04
  Après,
• 36:05
  je ne suis pas une grande fan de formulaire perso parce que je préfère faire tout de suite une prise de rendez-vous.
• 36:11
  J'ai l'impression de...
• 36:13
  D'avoir gagné un truc,
• 36:14
  en fait,
• 36:14
  tu vois,
• 36:15
  quand je réserve un rendez-vous,
• 36:17
  que ça avance,
• 36:18
  en fait,
• 36:18
  qu'on est dans l'action tout de suite.
• 36:19
  Alors qu'un formulaire,
• 36:20
  j'envoie ma demande,
• 36:21
  je ne sais même pas si on va me rappeler,
• 36:22
  en fait,
• 36:22
  un jour,
• 36:22
  quoi.
• 36:23
  À part si c'est bien fait.
• 36:24
  Moi,
• 36:24
  par exemple,
• 36:25
  alors moi,
• 36:25
  je mets du formulaire parce que personnellement,
• 36:27
  je ne veux pas ouvrir mon calendrier.
• 36:28
  Et en fait,
• 36:29
  c'est un formulaire vraiment de qualification à étape qui,
• 36:31
  à la fin,
• 36:32
  donne accès au calendrier si tu es qualifié.
• 36:34
  D'accord.
• 36:35
  Ouais,
• 36:35
  OK.
• 36:35
  Et toi,
• 36:36
  je crois que tu as en plus aussi...
• 36:38
  sur ton site quand on arrive à la...
• 36:41
  Tout au long de la page,
• 36:42
  tu as une petite icône WhatsApp pour pouvoir échanger avec toi.
• 36:46
  Du coup,
• 36:48
  on arrive directement sur ton WhatsApp.
• 36:49
  Exactement.
• 36:52
  Ça me permet de récupérer des personnes qui ont des questions,
• 36:55
  enlever les objections et pousser la personne à remplir après le formulaire.
• 36:57
  Mon but,
• 36:58
  c'est qu'elle rentre dans mon tunnel.
• 37:00
  Tu en as beaucoup ?
• 37:02
  Ça dépend.
• 37:03
  Avec mon passage sans permission,
• 37:05
  oui,
• 37:05
  j'ai eu beaucoup de...
• 37:06
  Beaucoup de personnes qui m'ont envoyé un petit message,
• 37:09
  mais après il y a beaucoup de personnes aussi qui n'osent pas me déranger.
• 37:11
  D'accord.
• 37:13
  Mais ouais,
• 37:14
  c'est toujours ça qui peut être intéressant pour aller récolter.
• 37:17
  Et moi ça me permet aussi avec un petit message automatique de savoir que la personne vient du bouton WhatsApp sur mon site internet.
• 37:23
  D'accord,
• 37:24
  ok.
• 37:24
  Ouais,
• 37:25
  donc en fait c'est un peu une croyance limitante qu'on a de se dire qu'on ne va pas mettre nos coordonnées téléphoniques parce qu'on risque de se faire déranger toutes les trois secondes.
• 37:32
  Concrètement,
• 37:33
  en réalité,
• 37:34
  ce n'est pas le cas.
• 37:35
  En temps normal,
• 37:35
  je ne sais pas,
• 37:36
  peut-être
• 37:36
  2-3 messages par mois,
• 37:38
  on va dire.
• 37:38
  Ah oui,
• 37:39
  ce n'est pas énorme.
• 37:40
  Bon,
• 37:41
  après,
• 37:41
  ta page de vente,
• 37:42
  elle est bien faite.
• 37:42
  Donc du coup,
• 37:43
  je pense que les gens n'ont pas beaucoup de questions,
• 37:46
  certainement,
• 37:46
  à te poser.
• 37:47
  Ce serait plus pour faire un échange un peu informel qu'autre chose,
• 37:50
  en réalité.
• 37:51
  Exactement.
• 37:52
  Les dernières questions,
• 37:53
  les petites objections,
• 37:55
  surtout le fait que je refonte site,
• 37:56
  donc ça pose des questions sur les refontes.
• 37:59
  pour comprendre un peu comment c'est bricolé.
• 38:01
  Et là,
• 38:02
  du coup,
• 38:02
  on a l'accordéon avec l'AFAQ,
• 38:07
  qui est plutôt bien faite,
• 38:08
  et le footer.
• 38:09
  Et là,
• 38:09
  voilà,
• 38:10
  messieurs,
• 38:10
  dames,
• 38:10
  on a le 1 footer,
• 38:12
  avec les mentions légales et la politique de confidentialité de données.
• 38:16
  On est 100%
• 38:17
  conformes avec nos obligations légales.
• 38:18
  C'est hyper important.
• 38:19
  Bon,
• 38:19
  concrètement,
• 38:20
  mis à part,
• 38:21
  je pense,
• 38:22
  des problèmes de...
• 38:23
  de design on aime ou on n'aime pas,
• 38:26
  globalement,
• 38:27
  on a quand même un bien meilleur résultat avec Cloud Code.
• 38:30
  Donc ça,
• 38:31
  ça a été fait avec Cloud Code,
• 38:32
  cette page.
• 38:33
  Il faut surtout rappeler que les trois ont été faits avec des pronges rapides.
• 38:36
  Mais ce qui est intéressant,
• 38:37
  c'est que quand on a généré déjà cette première page,
• 38:39
  on va ensuite reprendre section par section avec Claude pour lui demander comment on peut l'optimiser,
• 38:44
  qu'est-ce qu'on pourrait faire,
• 38:45
  améliorer les choses qui nous vont pas,
• 38:47
  sans forcément avoir une expertise en termes de design.
• 38:51
  Mais juste en discutant avec Claude,
• 38:52
  il va nous faire plusieurs propositions,
• 38:53
  etc.
• 38:53
  Et ça,
• 38:54
  ça peut être intéressant.
• 38:55
  Surtout qu'avec Claude,
• 38:55
  on a Claude Design.
• 38:58
  Moi,
• 38:58
  ce que j'aime beaucoup faire,
• 38:59
  C'est déjà commencé,
• 39:00
  en fait.
• 39:01
  Je peux te montrer,
• 39:01
  si tu veux.
• 39:02
  Cloud design,
• 39:03
  en gros,
• 39:04
  alors juste attention,
• 39:05
  ça prend énormément de tokens.
• 39:07
  Il faut quand même avoir une idée un peu réfléchie de ce qu'on souhaite mettre en place.
• 39:12
  Mais ce qui est bien,
• 39:13
  c'est qu'il y a plein de choses qu'on peut faire.
• 39:15
  Donc là,
• 39:15
  en fait,
• 39:15
  je lui ai envoyé des inspirations.
• 39:17
  On peut changer des idées différentes du bureau,
• 39:20
  améliorer,
• 39:21
  discuter avec lui pour qu'il nous les change.
• 39:22
  Par exemple,
• 39:23
  on hésite sur
• 39:24
  CTA.
• 39:27
  On peut faire en fait,
• 39:28
  fais-moi une douzaine de CTA que je regarde avec les animations.
• 39:31
  Le over,
• 39:32
  c'est le passage à la souris,
• 39:33
  c'est-à-dire comment il va réagir au passage à la souris,
• 39:35
  pour choisir le CTA qui m'intéresse le plus.
• 39:37
  On peut faire pareil pour le ticker,
• 39:39
  donc en fait c'est le bandeau défilant qui se met un peu sous le héros.
• 39:43
  Comme ça,
• 39:43
  après,
• 39:43
  je choisis un peu le design.
• 39:45
  Et ça,
• 39:45
  on peut le faire aussi pour juste le héros.
• 39:49
  Et ça permet en fait d'avoir plein de versions différentes.
• 39:55
  Et ça m'a donné en fait une première version qu'on peut share,
• 39:58
  partager directement à Cloud Code et envoyer pour qu'ils puissent aller voir le code qui a été fait.
• 40:04
  Et au final,
• 40:05
  ça a donné ça.
• 40:05
  D'accord.
• 40:08
  Ouais,
• 40:08
  très chouette.
• 40:10
  Donc ça,
• 40:10
  c'est une refonte de site que tu as faite pour une salle de CrossFit en fait.
• 40:14
  Exactement,
• 40:14
  pour ma box de CrossFit.
• 40:16
  Et au final,
• 40:16
  ça m'a permis d'avoir,
• 40:17
  on va dire,
• 40:18
  60%
• 40:18
  du design.
• 40:19
  Et après,
• 40:19
  j'ai terminé avec Cloud Code par la suite.
• 40:22
  par rapport à ce que j'ai fait.
• 40:25
  Et j'ai revu chacune des sections en format mobile.
• 40:29
  Donc là,
• 40:29
  vous avez des petites extensions que vous pouvez mettre sur Chrome pour voir le mobile et naviguer.
• 40:35
  C'est quoi l'extension que tu as pour le mobile ?
• 40:38
  Simulateur,
• 40:39
  téléphone mobile,
• 40:40
  test,
• 40:40
  simulatrice responsive.
• 40:41
  Et pour après modifier le device,
• 40:46
  il y a des versions pro,
• 40:47
  mais il y a quand même pas mal de devices disponibles.
• 40:52
  Et là,
• 40:52
  ce que j'ai fait qui est cool,
• 40:53
  c'est le CTA constant avec le WhatsApp.
• 40:56
  Donc là,
• 40:57
  qu'importe où tu scrolles,
• 40:58
  le CTA,
• 40:59
  même si je n'en ai pas mis dans toutes les sections,
• 41:01
  parce qu'en général,
• 41:01
  je recommande vraiment d'en mettre dans toutes les sections,
• 41:03
  si je n'en ai pas mis,
• 41:04
  je sais que sur mobile,
• 41:05
  il est tout le temps là.
• 41:06
  Et je sais que le mobile sera vraiment le format le plus utilisé pour cette cible-là.
• 41:12
  Donc voilà.
• 41:13
  Donc tout a été revu,
• 41:14
  pareil,
• 41:15
  premier cours offert.
• 41:15
  Et ça,
• 41:16
  c'est le CTA final qui est partout.
• 41:19
  Ça,
• 41:19
  c'est un site avec du SEO,
• 41:20
  avec beaucoup de pages.
• 41:21
  Il a 80 pages,
• 41:23
  plus une langue,
• 41:24
  plus il est en français et anglais.
• 41:25
  D'accord.
• 41:26
  Donc oui,
• 41:28
  ça,
• 41:28
  c'est cool au niveau de Cloud Design.
• 41:30
  OK.
• 41:30
  C'est la première étape.
• 41:31
  Ça permet de trouver un peu ses idées.
• 41:34
  Moi,
• 41:34
  ce que j'avais à l'heure actuelle pour faire ça,
• 41:36
  c'est juste les couleurs,
• 41:36
  donc le bleu,
• 41:37
  le blanc et le noir,
• 41:38
  et le logo.
• 41:40
  Et après,
• 41:40
  derrière,
• 41:40
  j'ai tout construit par rapport à ça sans que je sois forcément designer.
• 41:44
  La première étape,
• 41:45
  c'est d'abord d'aller voir des inspirations de sites qui nous plaisent,
• 41:50
  qui sont sympas,
• 41:51
  pour aller voir un petit peu sur Internet,
• 41:53
  sur Pinterest,
• 41:54
  etc.
• 41:55
  Pouvoir charger tout ça,
• 41:57
  discuter avec le design de ce qu'on veut.
• 41:59
  Pas besoin d'avoir un branding,
• 42:01
  je pense,
• 42:02
  qui soit hyper autismion,
• 42:06
  on s'en fout.
• 42:06
  Même un logo,
• 42:09
  vous pouvez mettre votre nom avec une police que vous aimez bien.
• 42:12
  lisibles,
• 42:12
  s'il vous plaît,
• 42:13
  choisissez des polices lisibles,
• 42:14
  les polices manuscrites,
• 42:15
  etc.,
• 42:16
  c'est joli,
• 42:17
  ça peut faire un effet,
• 42:18
  etc.,
• 42:18
  mais c'est illisible.
• 42:20
  Et choisissez une police aussi pour votre logo que vous pouvez réutiliser sur votre titre,
• 42:23
  pour avoir une cohérence globale en termes de design.
• 42:25
  Oui.
• 42:26
  Et après,
• 42:28
  on monte tout sur
• 42:30
  Cloud Code,
• 42:30
  qui va du coup coder,
• 42:32
  alors pas en HTML,
• 42:33
  de préférence,
• 42:34
  parce que là,
• 42:35
  sinon,
• 42:35
  ça va être un peu chiant pour les modifications,
• 42:38
  mais plutôt,
• 42:39
  toi,
• 42:39
  tu...
• 42:39
  Toi,
• 42:39
  tu recommandes quoi en format NextJS ?
• 42:43
  Exactement.
• 42:44
  Ça pourra te permettre de faire des petits outils interactifs,
• 42:47
  d'avoir une rapidité qui sera plus longue.
• 42:48
  Et au final,
• 42:49
  si tu fais évoluer ta landing page en site Internet,
• 42:52
  tu auras une meilleure configuration.
• 42:55
  Donc vraiment,
• 42:55
  lui demander de développer directement la landing sous NextJS au niveau du CSS.
• 43:03
  Le CSS,
• 43:03
  c'est la mise en forme visuelle sous Tailwind.
• 43:08
  En gros,
• 43:08
  Tailwind,
• 43:10
  il faut savoir que vous allez avoir ce qu'on appelle des composants.
• 43:14
  Chaque bloc sur votre site internet qui va être réutilisé de la même manière,
• 43:17
  c'est ce qu'on appelle un composant.
• 43:19
  Tailwind,
• 43:20
  ce que ça permet,
• 43:21
  c'est de prendre...
• 43:22
  C'est une bibliothèque de composants.
• 43:24
  Vous n'êtes pas obligés de prendre la version plus,
• 43:27
  à part si vous faites un SaaS ou quoi que ce soit.
• 43:29
  Mais déjà,
• 43:30
  juste avec Tailwind,
• 43:31
  vous allez lui demander...
• 43:32
  Il va reprendre toujours les mêmes composants.
• 43:34
  Donc la manière dont il va faire son composant héros sera toujours la même.
• 43:39
  La manière de faire son composant tarif,
• 43:41
  etc.
• 43:42
  Les formes des cartes.
• 43:43
  Et en fait,
• 43:44
  en termes d'allègement du code,
• 43:45
  ça vous permet de ne pas réécrire de A à Z toujours le code pour chaque bloc que vous allez faire,
• 43:50
  mais d'abord se baser sur un code existant et après le modifier légèrement par rapport à votre volonté en termes de design.
• 43:56
  Donc ça,
• 43:56
  c'est important pour la vitesse de chargement et aussi pour...
• 44:00
  les bonnes manières de faire un site Internet.
• 44:05
  Oui,
• 44:05
  sachant que du coup,
• 44:07
  on parle de code,
• 44:08
  mais en fait,
• 44:08
  concrètement,
• 44:09
  on code rien du tout parce qu'en fait,
• 44:10
  on ne fait que discuter avec Cloud Code.
• 44:12
  Alors,
• 44:12
  Cloud Code,
• 44:13
  je le rappelle,
• 44:13
  mais donc,
• 44:14
  il est disponible soit sur cloud.ai,
• 44:17
  donc sur l'interface Cloud,
• 44:18
  ou alors directement dans un outil d'éditeur de code.
• 44:22
  Ça peut être soit VS Code,
• 44:24
  soit Cursor.
• 44:25
  Moi,
• 44:25
  je travaille sur Cursor.
• 44:26
  Toi,
• 44:26
  tu es sur VS Code,
• 44:26
  il me semble,
• 44:27
  c'est ça ?
• 44:27
  Tu as basculé sur...
• 44:28
  Merci.
• 44:30
  Alors après,
• 44:30
  ça permet...
• 44:32
  Qu'est-ce qui est le mieux ?
• 44:33
  Sur cloud.ai,
• 44:34
  du coup,
• 44:35
  on a accès à Cloud Code,
• 44:36
  mais du coup,
• 44:37
  on ne garde pas le contexte du projet.
• 44:41
  En fait,
• 44:42
  à chaque fois,
• 44:43
  on recommence un peu presque à zéro.
• 44:46
  Et ça,
• 44:46
  c'est un peu chiant.
• 44:47
  C'est pour ça qu'on recommande plutôt de passer sur un outil d'éditeur de code tel que VS Code ou Cursor,
• 44:54
  où du coup,
• 44:55
  tout est enregistré
• 44:56
  en local sur l'ordinateur et il va aller piocher après les fichiers de contexte pour savoir concrètement où est-ce qu'on en est,
• 45:03
  qu'est-ce qu'on a déjà fait,
• 45:04
  etc.
• 45:05
  Et par repartir à chaque fois à zéro.
• 45:07
  Je vais montrer ce que ça donne,
• 45:09
  puisque moi je l'ai fait avec
• 45:11
  Cursor. Et en fait,
• 45:12
  Cursor,
• 45:12
  c'est ça.
• 45:13
  Donc ça,
• 45:13
  c'est vraiment toute ma conversation que j'ai eue avec Cloud Code dans Cursor pour faire cette landing page qu'on a vu juste avant,
• 45:21
  donc faite avec Cloud.
• 45:23
  Et en fait,
• 45:23
  concrètement,
• 45:24
  Je lui ai juste dit,
• 45:25
  moi,
• 45:25
  il m'a posé des questions.
• 45:26
  Alors évidemment,
• 45:28
  j'ai quand même des promptes de base,
• 45:31
  etc.,
• 45:32
  qui sont intégrées dans ce projet-là.
• 45:33
  Je ne suis pas partie,
• 45:35
  en fait,
• 45:35
  de zéro.
• 45:36
  Mais il m'a posé des questions du style,
• 45:39
  t'imagines plutôt une seule page qui défile avec un petit menu en haut pour sauter d'une partie à l'autre ou un site avec plusieurs pages séparées.
• 45:45
  Et là,
• 45:46
  je lui ai dit,
• 45:46
  en fait,
• 45:46
  je veux une seule page,
• 45:48
  vraiment le landing page.
• 45:48
  Et donc,
• 45:49
  du coup,
• 45:49
  on a continué à échanger.
• 45:51
  Voilà,
• 45:52
  je réponds.
• 45:53
  je donne des réponses très très courtes,
• 45:56
  je ne fais pas de phrases,
• 45:57
  je m'en fous.
• 45:58
  Ils me posent des questions,
• 45:59
  je réponds.
• 46:00
  Et en fait,
• 46:01
  à la fin,
• 46:01
  on a ça.
• 46:02
  Alors bon,
• 46:03
  ça,
• 46:03
  je l'ai fait très exactement en 15 minutes.
• 46:05
  Et après,
• 46:06
  en fait,
• 46:06
  l'idée,
• 46:07
  c'est qu'on a le truc qui sort.
• 46:09
  Alors,
• 46:09
  il me le met en local,
• 46:11
  justement.
• 46:12
  Ce n'est pas encore publié.
• 46:15
  Donc,
• 46:15
  on a la page qui sort et après,
• 46:16
  on va aller justement lui demander de modifier section par section.
• 46:20
  pour pouvoir améliorer tout le design de chacune des sections.
• 46:24
  Globalement,
• 46:25
  je pense qu'en une demi-journée,
• 46:26
  en fait,
• 46:26
  on a fait une landing page,
• 46:28
  largement.
• 46:29
  Oui,
• 46:29
  oui.
• 46:30
  Après,
• 46:30
  si vous n'avez vraiment pas de talent en termes de design,
• 46:33
  vous pouvez aussi lui donner des captures d'écran des sections qui vous intéressent et lui dire « Reproduis-moi et adapte par rapport à ma charte graphique,
• 46:39
  tout ça. »
• 46:40
  Mais commencez à avoir déjà une mini-charte ou un fichier un peu design.md.
• 46:46
  qui va vous dire par exemple,
• 46:48
  si j'ai des blocs bleu marine,
• 46:50
  je ne veux pas que tu écrives en gris dessus,
• 46:53
  parce que ça ne sera pas lisible.
• 46:54
  Donc d'avoir un fichier design un peu logique comme ça,
• 46:57
  où chaque fois que vous repérez des erreurs ou des incohérences en termes de design et de lisibilité,
• 47:02
  vous les faites remonter dessus,
• 47:03
  et sur quoi après il ne refera pas l'erreur et il se battra dessus.
• 47:06
  De faire aussi,
• 47:06
  de penser en composant,
• 47:07
  pour permettre d'avoir des CATA toujours de la même manière,
• 47:10
  avec un over,
• 47:11
  donc un passage à la souris qui sera toujours...
• 47:13
  de la même type de réaction.
• 47:16
  Alors,
• 47:17
  les animations,
• 47:17
  c'est bien,
• 47:17
  mais ne surchargez pas non plus.
• 47:19
  Il y a un juste milieu à atteindre,
• 47:21
  pas trop,
• 47:21
  mais aussi pas zéro.
• 47:24
  Et également,
• 47:25
  il faut savoir que tout ce qui va être fait sous Next.js,
• 47:28
  ça ne s'héberge pas sous un hébergement classique,
• 47:32
  comme on peut faire sur un WordPress ou quoi que ce soit.
• 47:34
  Donc,
• 47:35
  anticipez d'avoir juste un nom de domaine et après basculer sur Vercel ou les serveurs Amazon.
• 47:43
  ne risquez pas de prendre un serveur solo si vous n'êtes pas calé,
• 47:47
  on va dire,
• 47:48
  un peu technique parce que ça demande quand même quelques paramétrages au niveau de la sécurité.
• 47:52
  Sinon,
• 47:52
  tout le monde peut rentrer dans votre serveur en deux secondes.
• 47:54
  Donc,
• 47:54
  d'avoir un serveur,
• 47:55
  on va dire,
• 47:55
  mutualisé,
• 47:56
  c'est le Bercel,
• 47:57
  pour ensuite déployer son site Internet.
• 47:59
  C'est extrêmement simple à faire.
• 48:00
  C'est juste un copier-coller.
• 48:03
  Vraiment,
• 48:03
  ne prenez pas peur.
• 48:05
  Et si vous avez une question,
• 48:06
  vraiment,
• 48:07
  vous faites,
• 48:07
  moi,
• 48:07
  je fais un copier-coller de l'interface où je suis à Claude et je lui dis,
• 48:11
  je fais quoi ?
• 48:12
  et même pas besoin de faire une capture à l'écran vous faites vraiment commande A,
• 48:16
  commande C commande V,
• 48:18
  vous ne prenez même pas la tête et ça vous permettra en fait rapidement d'être guidé par Claude par la suite,
• 48:24
  même si vous ne comprenez rien si vous ne comprenez rien,
• 48:26
  vous demandez à Claude je ne comprends rien,
• 48:27
  traduis-moi il ne faut pas hésiter justement à lui à lui
• 48:32
  parler,
• 48:33
  à lui demander,
• 48:35
  tout ça.
• 48:35
  Tu as parlé de Vercel pour justement héberger
• 48:39
  Vercel, en fait,
• 48:40
  c'est ça,
• 48:41
  ce qui permet derrière,
• 48:42
  en fait,
• 48:42
  d'héberger tout le contenu que Claude aura codé,
• 48:45
  et après,
• 48:46
  de connecter un nom de domaine.
• 48:48
  Claude fait le job aussi,
• 48:49
  Vercel,
• 48:50
  qui est gratuit,
• 48:51
  enfin,
• 48:52
  en tout cas,
• 48:52
  il y a un premier abonnement hobby qui est 100%
• 48:55
  gratuit.
• 48:57
  Donc,
• 48:58
  voilà.
• 48:58
  Au niveau de la mise en œuvre d'une page avec Cloud Code,
• 49:02
  moi,
• 49:02
  j'avais repéré,
• 49:03
  et tu me diras si c'est juste,
• 49:04
  mais j'avais repéré en fait la marche à suivre.
• 49:07
  C'était que première phase,
• 49:08
  tu contextualises vraiment ton projet de landing page,
• 49:13
  c'est-à-dire que tu vas lui donner qui tu es,
• 49:15
  les infos de ton business,
• 49:17
  à qui tu vends,
• 49:18
  etc.
• 49:19
  Et ce que tu veux en fait comme intention dans ta landing page,
• 49:23
  c'est-à-dire soit prendre un rendez-vous,
• 49:25
  soit tout simplement avoir une page vitrine,
• 49:26
  etc.
• 49:27
  Ensuite,
• 49:28
  tu lui fournis le copywriting de ta page que tu auras travaillé en amont.
• 49:31
  Lui,
• 49:31
  il va te poser deux,
• 49:32
  trois questions en termes de design.
• 49:34
  Tu vas lui donner aussi des éléments de design que tu auras travaillé peut-être avec l'autre design,
• 49:38
  que tu auras repéré sur Pinterest,
• 49:40
  etc.
• 49:40
  pour améliorer tout ça.
• 49:42
  Troisième étape,
• 49:43
  c'est que tu vas modifier section par section.
• 49:46
  Évidemment,
• 49:46
  toujours faire attention à la version mobile,
• 49:49
  que tout soit toujours bien responsif.
• 49:53
  et dernière étape une fois que tout ça c'est fait une fois que toute la partie design elle est bouclée tu passes à la partie sécurité quand même pour sécuriser ton site voilà le mettre sur le mettre sur Vercel ou un autre outil d'édition enfin d'hébergement de ton code et ensuite faire la connexion au nom de domaine tu valides ?
• 50:15
  il manque juste l'étape Google Analytics ou Google Search Console sur le quoi je relis donc Google Analytics c'est un outil gratuit de Google qui nous permet de...
• 50:22
  de traquer les visites sur le site internet.
• 50:26
  Même si vous avez peu de trafic,
• 50:27
  c'est intéressant d'avoir des données.
• 50:30
  Si vous rajoutez Google Analytics,
• 50:31
  il faut forcément rajouter déjà une bannière de cookies.
• 50:33
  Donc ça,
• 50:34
  vous demandez à Claude de vous la coder à la main.
• 50:36
  Il n'y a pas besoin de prendre un outil payant.
• 50:40
  Et également,
• 50:41
  une politique de confidentialité de cookies.
• 50:43
  Enfin,
• 50:44
  rajouter un encart par rapport aux cookies.
• 50:46
  Et
• 50:47
  Google Search Console,
• 50:48
  si un jour vous souhaitez développer votre site internet,
• 50:50
  ça permet de repérer
• 50:53
  toute la partie trafic SEO et également les performances,
• 50:57
  les core web vitals.
• 50:58
  Donc,
• 50:59
  c'est des indicateurs,
• 51:00
  trois indicateurs de performance au niveau de la vitesse de chargement qui sont hyper importants et basés sur le chargement réel de vos internautes.
• 51:09
  Une partie sécurité,
• 51:10
  vous pouvez voir aussi les requêtes sur lesquelles vous remontez.
• 51:12
  Et ce qu'on va dire,
• 51:14
  c'est les deux outils,
• 51:14
  on va dire,
• 51:14
  un minimum à avoir,
• 51:16
  qui sont gratuits en plus,
• 51:17
  donc profitez-en.
• 51:18
  Et après,
• 51:19
  toute la partie sécurité,
• 51:21
  refactoring,
• 51:23
  c'est-à-dire voir s'il n'y a pas du code mort,
• 51:24
  parce qu'en fait,
• 51:25
  vous pouvez faire des choses que vous allez supprimer après.
• 51:27
  Donc nettoyer un peu tout le code qui est inutile et qui ne sert plus à rien.
• 51:30
  Donc demander un petit refactoring,
• 51:32
  suppression du code mort,
• 51:33
  suppression du code inutilisé,
• 51:36
  mimification,
• 51:37
  donc compresser les fichiers qui ont besoin d'être compressés,
• 51:41
  vérifier la vitesse de chargement.
• 51:42
  Vous avez des outils comme PageSpeed,
• 51:44
  Lighthouse,
• 51:45
  parce que vous pouvez rajouter plein d'images et au final...
• 51:47
  ou des vidéos,
• 51:48
  et au final,
• 51:49
  ça ralentit la page,
• 51:50
  où vous avez peut-être une machine hyper performante,
• 51:52
  mais pas votre cible.
• 51:54
  Donc voilà,
• 51:54
  des petites choses comme ça,
• 51:55
  tous les petits détails à terminer pour que le site soit performant,
• 51:58
  sécurisé,
• 52:00
  légal,
• 52:01
  et en même temps traquable.
• 52:02
  Et après,
• 52:03
  derrière,
• 52:03
  go,
• 52:05
  go le mettre en ligne,
• 52:06
  go le mettre en...
• 52:07
  le relier à votre nom de domaine,
• 52:08
  et l'héberger sur un serveur,
• 52:11
  et faire opérer la magie,
• 52:12
  quoi.
• 52:13
  Et le faire vivre en attirant les visiteurs dessus,
• 52:15
  donc avoir de bonnes stratégies d'acquisition client,
• 52:17
  c'est important.
• 52:19
  En tout cas,
• 52:20
  merci Déborah d'avoir pris le temps de nous expliquer comment on fait un site avec Cloud Code.
• 52:27
  Toutes les ressources de cet épisode sont dispo sur mon site internet dans la bibliothèque de ressources lucidemislin.fr.
• 52:35
  En attendant,
• 52:36
  merci à tous d'avoir vu cette vidéo et à très bientôt.