Revenir à l’école à 30 ans ? Oui, c’est possible !

Avant de débuter…

Chez Walk The Line, il n’y a pas que de la création de site web.
En effet, l’agence transmet également ses connaissances par le biais de formations auprès de professionnels ou d’étudiants. C’est parce que l’apprentissage et la transmission nous tiennent à coeur ! 🙂
C’est pourquoi, bien qu’étant junior, avoir l’opportunité de travailler avec une stagiaire ma plu. En effet, avant d’être designer web à l’agence, j’ai été stagiaire, puis apprentie.
A mon sens, cette transmission de connaissances bouclait la boucle !

Durant ces deux puis quatre semaines, j’ai pu découvrir une future professionnelle du web investie, curieuse et patiente. Bien que Lucile soit issue d’un univers plus orienté graphisme, elle a su mener à bien chacune des missions d’intégration que nous lui avons confiées.

Mélody

Le contexte

Grâce à La WAB, l’école du numérique de Bergerac, j’ai pu intégrer leur formation « Le sésame numérique » qui inclut trois grands pôles : le graphisme, le marketing digital et le développement web.

Aujourd’hui, mon métier est celui de graphiste plutôt dirigé vers le print (réalisation de flyers, de cartes de visites, de goodies personnalisés, etc). Aussi, avoir un bagage supplémentaire en me formant aux métiers du digital, mais surtout à celui de designer web était important pour faire évoluer mes compétences. Ce n’est pas tout, cela constitue également une réelle opportunité pour ma recherche de travail par la suite.

Durant ces six mois de formation, deux périodes de stage sont à effectuer, ce qui est une force dans ce cursus, à mon sens. En effet, on peut alors mettre en pratique ce que l’on a déjà appris en cours et réellement se positionner sur le métier que l’on souhaite.

La recherche de stage

Ma recherche va plutôt se concentrer sur des agences de communication qui auront un pôle de développement web, car c’est sur ce point précis que j’aimerais évoluer.

Grâce à un formateur de mon cursus, je trouve l’agence Walk The Line, qui se trouve être exactement ce que je recherche. J’ai postulé puis j’ai eu un entretien téléphonique avec Guillaume Meyer, le responsable de l’agence.

Son entreprise ? Une agence de développement web à Bayonne qui accompagne les entreprises dans leurs projets de création de site e-commerce ou site vitrine. Je vais pouvoir y découvrir de manière plus poussée le CMS WordPress.

Je serai en télétravail depuis chez moi, mais aussi quelques jours à l’espace de coworking Le Taf Café de Bergerac, pour travailler avec Mélody, la collaboratrice de Guillaume.

Les missions

Tout d’abord, j’ai pu identifier des approches pertinentes en termes de design ou wireframe. Ces derniers ont pour objectif de concevoir l’interface et l’expérience utilisateur.

Sur la première période de mon stage, j’ai pu prendre en main de nombreux outils professionnels tels que Adobe XD. Ce logiciel permet de concevoir des zonings (aussi appelés maquettes ou wireframes) et webdesign. Ceux que j’ai réalisés étaient destinés aux professionnels de la restauration.

Il aura fallu tout d’abord une partie de recherches en amont de ce que l’on appelle de la veille. Cela consiste en une étude graphique et technologique des dernières actualités concernant les sites web. J’ai ainsi pu imaginer où placer des zones de texte, l’emplacement des images, des vidéos, des liens, ainsi que des différents éléments graphiques. Cette phase de maquettage est assez intuitive pour moi du fait de mon expérience en graphisme, je suis plutôt à l’aise avec l’outil de la suite Adobe.

Sur la deuxième période, je me suis davantage tournée vers l’apprentissage du langage HTML/CSS, mais plus précisément sur le CMS WordPress. En effet, j’ai pu utiliser l’outil de construction de site Oxygen. Celui-ci a un raisonnement plus axé développement web, contrairement au constructeur de pages Elementor.

J’ai donc intégré leur équipe pour un mois, avec cette fois-ci plus de temps avec Mélody au coworking. En effet, durant mon premier stage de deux semaines, j’ai majoritairement travaillé en télétravail. A mon arrivée, Mélody travaillait déjà sur un projet de création de site web, plus exactement deux, pour une entreprise qui gère des services funéraires et d’ambulances.

Après plusieurs jours, j’ai fais une pause sur WordPress et je suis passée sur un projet pour le site web de l’agence Walk The Line. En effet, ma mission suivante consistait en la présentation des projets clients sous forme de mockups. Ces derniers serviront à présenter l’interface utilisateur des différents projets réalisés par l’agence, aux utilisateurs du site.

J’ai donc fait donc des recherches sur plusieurs supports afin de créer des versions desktop, tablette et mobile sur Photoshop.

L’environnement de travail

Comme nous travaillons à distance, il faut être bien organisé. Pour tous les projets, Guillaume et son équipe utilisent plusieurs outils d’organisation. Par exemple, Google Drive, Hangout, mais aussi Redmine. Celui-ci est un logiciel de gestion de projet. Il fonctionne avec un système d’attribution de tâches. Chacune des tâches est créée sous forme de ticket pour chacun d’entre nous. Au début, j’ai eu du mal à me familiariser avec les tickets. En effet, je réalisais chacune des missions confiées… Mais sans le faire valider en passant par la plateforme ! Pourtant, il s’agit là d’une étape incontournable lorsque l’on souhaite travailler efficacement en méthode Agile.

Les outils utilisés

Je me vois confier cette fois-ci la mission d’intégration de pages sous WordPress avec le plugin Oxygen. Celui-ci est un constructeur de pages, voire plus largement, un constructeur de sites web. Il permet d’avoir le contrôle sur la construction des pages via l’utilisation de widgets, mais aussi, c’est un outil qui repose sur une logique de développement web. Cela aide à comprendre le développement web plus facilement à mon sens !

C’est à moi de jouer maintenant : à partir du webdesign, je dois entièrement créer trois pages. Je transpose ainsi la maquette Adobe XD vers WordPress !

Je commence par ce que l’on appelle le header et le footer. Il s’agit de l’en-tête de site, et du pied de page du site, réciproquement. Je dois donc procéder à la création du header dans un premier temps. Celui-ci sera statique lors du défilement de la page, une action pas facile à réaliser pour moi. Cependant, à l’aide de tutoriels vidéos que m’a fourni Guillaume et des recherches sur le web, j’apprends et j’exécute en même temps.

J’avance pas à pas sur le header, le footer puis les pages. Ainsi, je passe beaucoup de temps à faire, mais aussi à refaire… L’expérience de Mélody m’aide à avancer, car je peux lui poser les questions qui me permettront une meilleure compréhension de ce que je fais et d’avancer dans le bon sens.

Beaucoup de retours se feront, car il faut aussi que le site web soit responsive, c’est-à-dire le site web soit adapté aux écrans d’ordinateur, de tablettes ou de téléphones. Les différentes sections créées devront donc avoir des paramètres particuliers pour un affichage optimisé sur toutes les résolutions.

L’éditeur permet aussi une vision frontend, ce qui permet de voir son travail en temps réel.

Ce qui est devenu très pratique dans le cadre de ce projet, c’est de pouvoir créer des templates avec Oxygen. Un template, c’est un modèle que l’on créé une seule fois et que l’on peut ensuite appliquer automatiquement ou manuellement à divers endroits du site.

Par exemple, le header et le footer créés en amont ont été créés via un template. Il m’a suffit ensuite d’appliquer ce template sur toutes les pages du site pour qu’il apparaisse automatiquement. Malin, non ?

Aussi, l’ajout de code dans le CSS, modifier des class ou ajouter des id reste quelque chose de simple et dans la logique du développement web.

Sur l’une des pages que j’ai réalisées, plus particulièrement la page de contact, un plugin est installé pour pouvoir insérer un formulaire de contact. Cela m’a permis de voir que des plugins WordPress bien choisis peuvent apporter des fonctionnalités très utiles à un site WordPress. Que ce soit en termes de design ou intégration comme pour Oxygen, ou créer des formulaires avec Forminator, il en existe des milliers !

Après cette expérience avec Oxygen et pour avoir déjà utilisé Elementor, je peux aujourd’hui comparer les deux. En tant que novice, je trouve que l’outil Oxygen facilite clairement la création de contenu. Il est très intuitif et permet la compréhension des termes de codages HTML/CSS beaucoup plus rapidement, ainsi que la logique de ces deux langages. C’est aussi avec de la pratique que les automatismes se créent. Tout est devenu beaucoup plus clair pour moi dans l’intégration de pages au fil du temps.

Conclusion

Ce stage m’a vraiment permis une immersion totale dans le monde du développement web. Souvenez-vous, c’était clairement l’objectif pour moi de pouvoir participer à des projets concrets en tant que webdesigner / développeur web !

J’ai pris davantage confiance en moi dans la réalisation des tâches, car j’étais vraiment en autonomie. Bien que j’avais beaucoup d’appréhension quant au fait de pouvoir réaliser les missions que l’on me confiait, je suis satisfaite du résultat que j’ai pu fournir. J’ai dû pousser mes recherches et j’ai appris de mes erreurs.

Alors merci Walk The Line de m’avoir fait confiance et de m’aider dans l’apprentissage dans ce nouveau domaine ! Je cherchais à faire évoluer mon métier de graphiste et le bilan de ces deux stages me conforte dans l’idée qu’être web designer me correspond bien.

Dans la même catégorie