Trajectoire
Afpa Village
Trajectoire
Afpa Village
Depuis le 21 juin 2021 je suis en formation de Designer Web à l’AFPA de Balma à Toulouse. En novembre dernier mon organisme de formation m’a donné l’opportunité de prendre part à un projet à envergure départementale pour ma période en entreprise.
L’Agence nationale pour la formation professionnelle des adultes est un organisme français de formation professionnelle, au service des régions, de l’État, des branches professionnelles et des entreprises.
Chaque Afpa possède un village, véritable tiers-lieu, le Village Afpa a pour vocation d’être un lieu de démonstration, tout en favorisant la coopération entre les acteurs : associations, entreprises, institutionnels.
Chaque village AFPA met en avant un thème qui lui tient à cœur, celui
de Balma est placé sous le signe de la mobilité. Ce projet est basé sur
une structure établie par un consortium de six partenaires : L’ADIE, La
maison du vélo, EMCP (être mobile c’est permis), la mission locale de
Toulouse ainsi que celle de la Haute-Garonne et l’AFPA de Balma.
Ce projet a été baptisé Trajectoire, destiné à mettre un terme aux freins
liés à la mobilité dont sont victimes des milliers de personnes encore
aujourd’hui en 2022. Grâce à sa structure de partenaires en synergie,
elle va aider les usagers à trouver la meilleure solution adaptée à leurs
besoins pour leurs déplacements et les accompagner vers l’accès à
l’emploi.
01. Création de l’identité visuelle
02. Création du site web
03. Réalisation d’une vidéo promotionnelle
01. Création de l’identité visuelle
02. Création du site web
03. Réalisation d’une vidéo promotionnelle
Les objectifs
- Il fallait tout d’abord créer un logo, l’essence même du projet, sa carte d’identité pour être reconnue aux yeux du monde.
- Pour permettre à Trajectoire de toucher ses cibles et de les aider de son mieux il a fallu créer un site web pour ses bénéficiaires et futurs adhérents.
- Comment promouvoir le projet ? Via des vidéos promotionnelles et un flyer bien sûr.
01.
Le logo
Quand ? Cette question fait référence à la dead line, combien de temps a-t-on pour mener ce projet dans sa globalité à terme ? Nous disposions de deux mois pour créer le loger ainsi que le site internet et la vidéo promotionnelle.
Pour qui ? À qui le projet s’adresse-t-il ? Les cibles sont les stagiaires, les formateurs, les apprenants de l’Afpa, mais aussi les bénéficiaires des partenaires de Trajectoire.
Où ? Où seront basés les locaux ? À l’Afpa de Toulouse Balma.
Quoi ? Que créons-nous ? Une identité visuelle, une charte graphique, un site vitrine et une vidéo promotionnelle.
Comment ? Quels seront nos outils de travail ? Nous avons utilisé Illustrator, Indesign, Photoshop, After Effects, XD, WordPress et notre imagination !
Pourquoi ? Pour soutirer l’argent du client…bien sûr que non, je n’ai même pas été payé ahah. Plus sérieusement, pour permettre de diminuer les freins que rencontrent bon nombre de personnes vis à vis de la mobilité.
La veille concurrentielle
Une fois le projet plus clair, nous avons fait de la veille concurrentielle chacun de notre côté, pour trouver des idées de logos, ou de couleur. À Toulouse, Trajectoire n’a pas vraiment de concurrent direct, car la majorité des acteurs de la mobilité sont ses partenaires dont Tisseo (qui est un
investisseur).
Je me suis rendu compte dans ma veille que les logos étaient souvent colorés, mais que le bleu, le orange et le vert avaient tendance à revenir souvent, le vert pour signifier l’écologie qui prend de plus en plus le pas sur nos modes de transports, et le bleu qui est souvent utilisé pour apporter de la confiance et de l’assurance aux usagers.
Le moodboard
La veille concurrentielle terminée chacun de nous a réalisé un moodboard qui regroupe nos inspirations, ce à quoi la mobilité, Trajectoire nous fait penser, j’y ai même inclus des inspirations pour le site web, car il est la continuité du logo.
Ce moodboard m’a surtout permit de voir ce qui ne marcherait pas sur ce projet, et ce qui pourrait fonctionner, grâce à du recul.
Cette proposition de logo découpée en plusieurs parties, évoque le trajet, le chemin avec un objectif à la clé. Le «point» du J est représenté par un symbole indiquant le lieu de départ. La couleur bleue a été choisie avec un léger dégradé pour le côté sécurité et clarté.
En effet, l’objectif est de mettre en confiance et d’aider à trouver une solution pour toutes personnes ayant des difficultés de mobilité. Cette couleur est synonyme de confiance.
02.
Le site web
L’arborescence
Une fois que le logo a été réalisé, nous sommes passé au site web. Dans un premier temps avant même de faire le maquettage, il fallait faire
l’arborescence et la faire valider par le client.
Nous avons donc réfléchi en fonction de plusieurs recherches sur Internet pour voir comment était l’arborescence des sites concurrentiels et des sites web en général.
Nous avons mis toutes nos idées en commun lors d’un brainstorming et puis une de mes collaboratrices l’a mis en forme sur Adobe InDesign.
Zoning
L’arborescence terminée et validée par notre cliente, j’ai commencé à faire un zoning du site web pour trois des pages du site web pour le faire valider ensuite par mes collaboratrices.
J’ai essayé de faire quelque chose d’assez général, pour ne pas rentrer trop dans les détails d’UI, en mettant en avant l’essentiel, qui est le but premier du zoning, c’est-à-dire élaborer le squelette du site web.
Pour ce faire, je me suis servis de ce que j’ai appris durant la formation pendant le maquettage et grâce aux différentes pages que j’avais déjà créé et intégré en HTML/CSS ou sur WordPress.
Maquettage
La suite logique de cette étape est donc de commencer la construction de la maquette sur Adobe XD, nous avons travaillé à trois sur la version desktop, car il nous semblait difficile de commencer à faire les déclinaisons responsives sans avoir la version desktop.
De plus, nous ne voulions pas perdre de temps à élaborer trois maquettes différentes, alors nous nous sommes concentré à en faire une seule de manière collaborative sur une journée.
Nous avons par la suite montré notre proposition de maquette à la cliente qui l’a approuvée.
Intégration
Une fois la maquette finalisée et validée par la cliente, nous nous sommes attaqués à l’intégration. Tout d’abord, nous avons téléchargé le dossier WordPress pour le téléverser sur le FTP de la base de données qui nous a été attribué par l’AFPA pour le projet.
Ensuite, nous avons configuré les informations de base pour se connecter à WordPress et nous l’avons installé.
L’intégration peut donc enfin commencer ! Pour se faire nous nous sommes répartis les pages, je me suis occupé de la page des partenaires, des pages de Contact et 404. Nous avons dans un premier temps réalisé ensemble le header et le footer sur gutenberg, contrairement au reste du site qui a été fait via Elementor.
03.
Vidéo promotionnelle
Montage vidéo
Les pages étants toutes intégrées, il manquait cependant la vidéo promotionnelle du site. Nous avons donc réalisé un storyboard ensemble, puis une de mes collaboratrices a écrit le script pendant que l’autre faisait l’animation du logo. Une fois ces deux éléments terminés, je me suis lancé dans la création de cette vidéo sur Adobe Affect Effects.
J’ai commencé par faire de la veille pour rechercher des images, des photos et des illustrations qui m’inspiraient selon le storyboard et le script, ainsi, j’ai trouvé des photos venant de Pexels, ainsi que des illustrations vectorielles sur Freepiks.
Durant toute la vidéo, j’ai jonglé entre des effets de texte grâce aux images clés d’opacité, de position et aussi de la 3D. Pour la partie avec les images vectorielles, j’ai utilisé l’outil marionnette pour faire bouger quelques parties de certains des personnages, mais j’ai aussi utilisé des images clés d’échelle pour le mouvement des objets de l’environnement. J’ai ajouté quelques rush vidéos que j’ai réalisé grâce à l’outil de Windows pour inciter les utilisateurs à naviguer sur le site et à s’inscrire aux ateliers.