Introduction
Je vais maintenant vous parler en détail du processus d’un projet, en lien avec ma mission principale : la création d’un site internet de A à Z. Comme je vous l’ai dit plus tôt, le processus entier est très long et s’étale sur plusieurs mois. Mon stage ayant duré 7 semaines, nous n’avons pas pu commencer et terminer un projet entier dans ce laps de temps. Je vais donc m’appuyer sur un projet que Mr. Barsotti et moi-même avions déjà réalisé il y a quelque temps.
Le client
Ce site internet a été commandé par un client régulier de Mr. Barsotti, la Fédération Patronale de la Gérance Mandat. Avant de commencer quoi que ce soit, il est nécessaire de s’entretenir avec le client pour comprendre ses besoins, son activité et ses valeurs afin de mener à bien le projet.
Comme son nom l’indique, cette institution gère des mandats, le plus souvent pour des hôtels ou des immeubles. Elle accompagne ses clients, que ce soit sur le plan économique, en tenant compte des périodes plus ou moins favorables à chaque domaine, social, en les aidant avec les ressources humaines, ou juridique si le besoin se présente.
SEO
Un autre point essentiel de la stratégie digitale que j’ai découvert est le référencement naturel (SEO). M. Barsotti m’a montré comment optimiser un site internet pour qu’il soit mieux référencé sur les moteurs de recherche. Cela inclut l’utilisation de mots-clés pertinents, l’optimisation des balises et des titres, et la structuration du contenu pour améliorer la lisibilité et l’indexation par les moteurs de recherche. J’ai également appris à utiliser des outils d’analyse pour suivre les performances des sites et ajuster la stratégie en fonction des résultats.
Réseaux
Bien que la majeure partie de mon stage ait été axée sur la création de sites web, j’ai également eu l’occasion d’acquérir des notions sur la gestion des réseaux sociaux. J’ai découvert comment une présence cohérente et régulière sur les réseaux peut renforcer la notoriété d’une marque et engager une communauté. M. Barsotti m’a expliqué comment élaborer un calendrier éditorial pour publier des contenus au bon moment, en fonction des habitudes et des attentes des utilisateurs.
Le stagiare (moi)
Mon maître de stage, Mr. Barsotti
i - Le wireframe
Une fois que les besoins du client sont bien compris, nous commençons par concevoir un wireframe. Le wireframe, ou zoning, est une étape primordiale car elle permet de déterminer “grossièrement” l’emplacement de tous les éléments d’une page grâce à des formes simples. Par exemple, la navbar (barre de navigation), les titres, les textes, les images et les boutons. Cela permet de se concentrer sur l’essentiel de la tâche : le parcours utilisateur.Pour cette étape, nous utilisons le logiciel Figma qui permet à plusieurs utilisateurs de collaborer en temps réel. Ce logiciel présente plusieurs avantages par rapport à ses concurrents, notamment son prix, puisqu’il est gratuit, et sa grande flexibilité. Avec Figma, on ne se sent jamais limité dans ce qu’on peut faire.
II - La maquette
Une fois le wireframe terminé, place à la maquette ! Toujours avec Figma, nous passons à l’étape de design en remplaçant les éléments abstraits du wireframe par des éléments concrets, tels que des images et des textes. Vous pouvez voir ci-contre que tout devient plus esthétique et détaillé.
III - Donner vie au site !
La maquette est terminée, il est temps de donner vie au site ! Pour cela, nous devons maintenant passer à la phase de développement. Il existe plusieurs méthodes différentes pour cela. Nous pouvons coder le site avec des langages de programmation comme le HTML pour la structure, le CSS pour le style ou le JavaScript pour l’interactivité et les animations. Il est également possible d’utiliser des logiciels comme WordPress ou Webflow pour développer sans coder. Ces outils, basés sur du HTML, du CSS et du JavaScript, simplifient le processus grâce à un système de “glisser-déposer” qui permet de placer les éléments visuels à l’endroit souhaité.Dans ce projet, nous avons utilisé WordPress car ce logiciel est open-source et permet aux développeurs d’ajouter leurs propres extensions, ce qui augmente considérablement les possibilités. Par exemple, il existe des extensions pour améliorer le référencement et la visibilité en ligne. Il y a même des extensions de prise de commande avec des automatisations pour la facturation, l’expédition, etc. En somme, c’est un outil qui peut héberger un écosystème complet.
Et voilà ! Le site est maintenant en ligne et visible sur internet, prêt à toucher de nouveaux clients potentiels.
Et voilà ! Le site est maintenant en ligne et visible sur internet, prêt à toucher de nouveaux clients potentiels.
