WEBVTT

00:00:00.191 --> 00:00:01.812 align:center
vous présenter un peu notre méthode

00:00:01.832 --> 00:00:03.132 align:center
de fonctionnement avec l'agence Baguette

00:00:03.152 --> 00:00:03.692 align:center
Studio.

00:00:03.712 --> 00:00:04.692 align:center
Je voulais vous présenter un cas

00:00:04.712 --> 00:00:06.453 align:center
qu'on a eu récemment avec l'agence

00:00:06.493 --> 00:00:07.853 align:center
Metalit.

00:00:07.893 --> 00:00:08.633 align:center
Ce qu'on a fait en tout

00:00:08.653 --> 00:00:09.654 align:center
premier lieu, c'est qu'on a créé

00:00:09.714 --> 00:00:11.054 align:center
un mood board.

00:00:11.094 --> 00:00:12.735 align:center
C'est ce qu'on verra ensemble.

00:00:12.755 --> 00:00:14.855 align:center
Vous allez nous présenter différentes pistes

00:00:14.895 --> 00:00:16.476 align:center
créatives, différents exemples qui vous

00:00:16.496 --> 00:00:16.716 align:center
plaisent

00:00:16.776 --> 00:00:17.716 align:center
et nous également.

00:00:17.776 --> 00:00:19.036 align:center
Ensuite, on fera une petite réunion.

00:00:19.096 --> 00:00:21.317 align:center
On va laisser des commentaires, comme

00:00:21.517 --> 00:00:22.738 align:center
ils l'ont fait ici, pour savoir

00:00:22.758 --> 00:00:23.338 align:center
un peu plus ce qui plaît,

00:00:23.358 --> 00:00:23.818 align:center
ce qui ne plaît pas.

00:00:24.718 --> 00:00:25.819 align:center
Je voulais également vous présenter un

00:00:25.839 --> 00:00:27.460 align:center
peu le site avant, comment il

00:00:27.480 --> 00:00:28.461 align:center
s'est présenté, que vous ayez un

00:00:28.501 --> 00:00:29.161 align:center
avant et un après de la

00:00:29.201 --> 00:00:30.002 align:center
refonte.

00:00:30.062 --> 00:00:31.483 align:center
Une fois que la piste créative

00:00:31.523 --> 00:00:32.783 align:center
a été validée de votre part,

00:00:32.803 --> 00:00:33.724 align:center
nous on va partir sur le

00:00:33.764 --> 00:00:34.364 align:center
wireframe.

00:00:34.384 --> 00:00:35.305 align:center
Dans le wireframe, c'est là où

00:00:35.325 --> 00:00:36.346 align:center
on va créer toute la structure

00:00:36.366 --> 00:00:37.466 align:center
du site web.

00:00:37.506 --> 00:00:38.987 align:center
Donc on va créer la navigation,

00:00:39.147 --> 00:00:40.688 align:center
qu'elle soit cohérente et fluide, qu'elle

00:00:40.728 --> 00:00:42.189 align:center
évite au maximum les frictions, mais

00:00:42.209 --> 00:00:44.871 align:center
surtout qu'elle soit en adéquation avec

00:00:44.911 --> 00:00:46.852 align:center
votre secteur d'activité et aussi à

00:00:46.892 --> 00:00:47.513 align:center
votre personnel.

00:00:48.613 --> 00:00:50.474 align:center
Donc pour vraiment augmenter les chances

00:00:50.514 --> 00:00:52.795 align:center
de contact au niveau de votre

00:00:52.815 --> 00:00:53.636 align:center
site web.

00:00:53.656 --> 00:00:54.316 align:center
Là, ce qu'on a fait, c'est

00:00:54.336 --> 00:00:55.597 align:center
qu'on a rajouté pas mal d'animations.

00:00:55.617 --> 00:00:56.737 align:center
Donc ça, ça dépend vraiment de

00:00:56.757 --> 00:00:57.137 align:center
chaque client.

00:00:57.277 --> 00:00:58.758 align:center
On a aussi créé différentes options.

00:00:58.798 --> 00:00:59.679 align:center
Ça, c'est pareil.

00:00:59.719 --> 00:01:00.859 align:center
Ça dépend de la demande.

00:01:00.899 --> 00:01:01.560 align:center
Donc là, ce qu'on a fait,

00:01:01.580 --> 00:01:02.780 align:center
c'est qu'on a aussi rajouté des

00:01:02.840 --> 00:01:04.741 align:center
annotations pour expliquer un peu comment

00:01:04.781 --> 00:01:06.962 align:center
les animations fonctionnent et qu'on puisse

00:01:06.982 --> 00:01:07.803 align:center
vraiment se projeter

00:01:09.123 --> 00:01:10.884 align:center
sur ce que ça va donner.

00:01:10.924 --> 00:01:13.045 align:center
Une fois que l'option finale a

00:01:13.085 --> 00:01:14.345 align:center
été choisie, nous ce qu'on va

00:01:14.385 --> 00:01:16.806 align:center
faire, c'est qu'on va intégrer directement

00:01:16.846 --> 00:01:17.987 align:center
le design, on va créer le

00:01:18.007 --> 00:01:19.087 align:center
design.

00:01:19.107 --> 00:01:21.308 align:center
Donc voici le design du site

00:01:21.328 --> 00:01:21.789 align:center
web.

00:01:21.849 --> 00:01:22.909 align:center
On a commencé tout d'abord par

00:01:22.929 --> 00:01:23.929 align:center
les heroes.

00:01:23.969 --> 00:01:25.270 align:center
Les heroes, c'est en fait où

00:01:25.310 --> 00:01:26.631 align:center
le visiteur va arriver en premier.

00:01:26.691 --> 00:01:28.071 align:center
En trois secondes, il va se

00:01:28.091 --> 00:01:29.052 align:center
dire, est-ce que je reste ou

00:01:29.092 --> 00:01:30.052 align:center
est-ce que je pars voir mon

00:01:30.092 --> 00:01:30.392 align:center
concurrent

00:01:30.432 --> 00:01:31.693 align:center
Donc c'est vraiment très important qu'il

00:01:31.713 --> 00:01:31.873 align:center
capte

00:01:32.493 --> 00:01:34.874 align:center
et qu'elle attire le client qui

00:01:34.894 --> 00:01:36.255 align:center
reste beaucoup plus longtemps.

00:01:36.315 --> 00:01:38.176 align:center
Une fois que cette hero a

00:01:38.216 --> 00:01:40.097 align:center
été validée, on va associer le

00:01:40.137 --> 00:01:41.558 align:center
design par rapport à cette hero

00:01:41.618 --> 00:01:43.559 align:center
et on va créer tout le

00:01:43.579 --> 00:01:44.840 align:center
design de la page et bien

00:01:44.860 --> 00:01:46.301 align:center
sûr la version mobile.

00:01:46.321 --> 00:01:47.742 align:center
Donc ça c'est la première partie.

00:01:47.802 --> 00:01:48.522 align:center
Une fois que ça a été

00:01:48.562 --> 00:01:49.843 align:center
fait, on va faire une intégration

00:01:49.883 --> 00:01:51.384 align:center
sur Webflow.

00:01:51.524 --> 00:01:52.384 align:center
Je vais vous montrer un peu

00:01:52.404 --> 00:01:53.485 align:center
le site, comment ça donne maintenant.

00:01:56.929 --> 00:01:57.690 align:center
Donc là, on arrive sur le

00:01:57.710 --> 00:01:58.970 align:center
site que je voulais vous montrer,

00:01:58.990 --> 00:02:00.731 align:center
qui va correspondre parfaitement à la

00:02:00.771 --> 00:02:01.892 align:center
maquette.

00:02:01.912 --> 00:02:02.813 align:center
Donc là, on a créé un

00:02:02.853 --> 00:02:05.614 align:center
site qui intègre pas mal d'animations

00:02:05.674 --> 00:02:07.395 align:center
et de transitions UX pensées pour

00:02:07.415 --> 00:02:09.417 align:center
améliorer la compréhension et guider aussi

00:02:09.457 --> 00:02:10.858 align:center
l'utilisateur, pas simplement juste pour

00:02:10.878 --> 00:02:12.118 align:center
l'esthétique.

00:02:12.158 --> 00:02:12.819 align:center
Donc là, ce qu'on a fait,

00:02:12.839 --> 00:02:14.740 align:center
c'est que chaque animation, chaque mouvement

00:02:14.760 --> 00:02:16.801 align:center
a vraiment une fonction précise.

00:02:16.841 --> 00:02:18.522 align:center
C'est vraiment fait pour attirer l'attention

00:02:18.582 --> 00:02:19.343 align:center
sur des éléments clés.

00:02:20.319 --> 00:02:21.800 align:center
Et ça va aussi fluidifier la

00:02:21.840 --> 00:02:23.381 align:center
navigation et comme je vous le

00:02:23.401 --> 00:02:24.822 align:center
disais précédemment, ça va aussi renforcer

00:02:24.842 --> 00:02:25.943 align:center
la conversion.

00:02:25.983 --> 00:02:28.104 align:center
Ça va aussi également, ces animations,

00:02:28.184 --> 00:02:30.286 align:center
donner l'envie de rester plus longtemps

00:02:30.306 --> 00:02:31.086 align:center
sur le site web et en

00:02:31.226 --> 00:02:33.728 align:center
vouloir en découvrir beaucoup plus.

00:02:33.748 --> 00:02:35.249 align:center
Mais également aussi donner une meilleure

00:02:35.289 --> 00:02:37.511 align:center
valeur perçue du travail de la

00:02:37.551 --> 00:02:38.772 align:center
société et de ce qu'ils font.

00:02:39.712 --> 00:02:41.153 align:center
Donc, bien sûr, augmenter aussi leur

00:02:41.193 --> 00:02:43.755 align:center
prix de leur service.

00:02:43.775 --> 00:02:44.596 align:center
Grâce à ça aussi, ce qu'ils

00:02:44.616 --> 00:02:45.176 align:center
ont pu faire, c'est que je

00:02:45.216 --> 00:02:46.677 align:center
vous partagerai plus tard un cas

00:02:46.717 --> 00:02:47.418 align:center
client.

00:02:47.518 --> 00:02:49.760 align:center
Ils ont pu aussi passer sur

00:02:49.800 --> 00:02:51.001 align:center
le marché à l'international.

00:02:51.041 --> 00:02:52.101 align:center
Donc, voilà tout ça qui fait

00:02:52.121 --> 00:02:53.643 align:center
que vraiment, ces animations, souvent, on

00:02:53.683 --> 00:02:55.004 align:center
a l'impression que c'est juste pour

00:02:55.044 --> 00:02:56.245 align:center
faire joli, mais c'est aussi pour

00:02:56.265 --> 00:02:57.646 align:center
raconter un storytelling par rapport à

00:02:57.666 --> 00:02:59.387 align:center
de l'entreprise et mettre en avant

00:02:59.407 --> 00:03:01.869 align:center
tous ces points forts de l'entreprise.

00:03:02.229 --> 00:03:03.330 align:center
Donc, voilà, c'était un peu pour

00:03:03.350 --> 00:03:04.270 align:center
vous montrer tout ça.

00:03:04.290 --> 00:03:05.672 align:center
Je vous laisse regarder la proposition

00:03:05.692 --> 00:03:07.173 align:center
en dessous et n'hésitez pas si

00:03:07.193 --> 00:03:08.594 align:center
vous avez des questions.