Depuis septembre, je suis alternant au sein de l’équipe marketing de Nexson Group. Cette expérience m’a permis de me familiariser avec le secteur d’activité de l’entreprise, afin de pouvoir communiquer efficacement sur nos produits et événements. J’ai également appris à maîtriser les différents outils mis à ma disposition, notamment ceux de la suite Adobe (Illustrator, Photoshop, InDesign, etc.).
Ma mission principale durant cette période a été la refonte complète du site web de l’entreprise, qui n’avait pas été mis à jour depuis 2017. Le site était donc devenu obsolète, autant sur le plan visuel que fonctionnel.
Nous voulons créer un site qui représente les valeurs de nexson donc basées sur des éléments rappelant l’écologie et la durabilité
Nous voulons aussi donner un aspect « premium » à notre site avec des éléments aérer et certains éléments animer, mais tout en restant assez sobre.
Nexson Group collabore avec ITI Conseil, une agence de communication basée à Nevers, pour la gestion de son site web. Ils prennent en charge tous les aspects techniques liés à la gestion du CMS et de l’hébergement. C’est un rôle qu’ils ont également joué pour le site de Thermowave que nous avons rénové. Cependant, contrairement à ce dernier, nous avons décidé de baser le site de Nexson sur un thème, non seulement pour des raisons de temps et d’efficacité, mais aussi afin de mieux refléter les valeurs de l’entreprise, notamment son engagement écoresponsable.
La première mission qui m’a été confiée pour ce projet était donc de concevoir une liste regroupant des thèmes provenant du site Envato et d’en faire une présentation.
J’ai donc effectué ma recherche en sélectionnant à chaque fois deux types de thèmes. Tout d’abord, des thèmes correspondant au domaine de l’industrie, pour avoir déjà des éléments en commun qui pourraient être conservés, et également des thèmes ayant un rapport avec l’écologie, car c’était la thématique principale à mettre en avant.
J’ai alors fait une sélection de six thèmes.
Une fois que j’ai réalisé ma présentation avec ces six thèmes, je l’ai montrée à mon responsable, puis j’ai fait une mise en commun avec David (le deuxième alternant de l’équipe). De son côté, il avait également réalisé des recherches de thèmes. Ensemble, nous avons sélectionné trois thèmes : un basé sur l’écologie, un autre sur le secteur de l’industrie, et le dernier, également axé sur ce thème, comportait de nombreux éléments et animations superflus qui allaient devoir être retirés individuellement.
Nous avons donc réalisé une présentation PowerPoint résumant les trois thèmes sélectionnés, en mettant en avant les points forts et les points faibles de chacun, afin de les présenter à notre responsable.
Suite à cela, nous avons effectué une demande auprès d’ITI Conseil pour l’implémentation d’un thème sur notre site WordPress, dans le but de pouvoir commencer la mise en page de notre site.
Voici les trois thèmes que nous avions retenus. Notre préférence s’est portée sur le thème Manufactory.
En cours de chargement…En attendant le retour d’ITI Conseil, j’ai été chargé de concevoir les maquettes de certaines pages du futur site web, en particulier celles dédiées aux domaines d’utilisation de nos échangeurs de chaleur, appelés « applications » dans notre secteur.
Mon responsable m’a fourni une liste des différentes applications qui seront présentes sur le nouveau site.
Pour ce travail, j’ai utilisé Canva afin de réaliser un modèle de page. Je me suis appuyé sur les modules et éléments graphiques du thème choisi qui me semblaient les plus pertinents pour cette section.
Concernant le contenu, je me suis inspiré à la fois des sites de nos concurrents, des éléments disponibles sur notre ancien site, et j’ai également généré du texte avec l’aide de l’intelligence artificielle lorsque cela s’avérait nécessaire.
Comme toutes les pages « application » devaient suivre une structure identique, une fois le modèle validé par mon responsable, j’ai dupliqué la maquette et adapté le contenu spécifique à chaque application.
Une fois le thème WordPress installé par ITI Conseil sur un nom de domaine provisoire, David et moi avons pu commencer à travailler sur la construction du nouveau site. Nous disposions chacun d’un compte utilisateur pour accéder à l’administration.
La première étape a été de procéder aux configurations de base du site. Nous avons notamment intégré des éléments essentiels comme le favicon, et installé les extensions clés que nous allions utiliser tout au long du projet :
Yoast SEO (pour le référencement),
Duplicate Page (pour faciliter la duplication de modèles de pages),
Maintenance (pour afficher une page temporaire en cours de développement).
Une fois ces éléments en place, nous avons exploré les différents blocs proposés par le thème afin de sélectionner ceux que nous souhaitions utiliser régulièrement.
Pour optimiser notre méthode de travail, nous avons créé une page spécifique intitulée « Blocs », dans laquelle nous avons regroupé ces éléments. L’objectif était de pouvoir les copier facilement dans les pages en cours de création. Cela nous a également permis de définir des paramètres communs (styles, marges, couleurs, typographies, etc.) pour garantir une cohérence visuelle sur l’ensemble du site, peu importe qui créait la page.
Avant de nous répartir les différentes sections du site, nous nous sommes mis d’accord sur la structure générale des pages, notamment l’en-tête et la composition des pages principales.
Nous avons choisi un modèle avec une image en pleine largeur en haut de chaque page, servant de bandeau « hero ». Le titre de la page est centré au milieu de cette image, un design directement inspiré des maquettes que j’avais réalisées pour les pages « Applications ».
Concernant l’en-tête (header), le thème que nous avions installé proposait déjà un large choix de modèles. Nous les avons tous testés avant de personnaliser celui qui nous semblait le plus adapté à notre projet.
Nous avons ainsi opté pour une version avec fond transparent, affichant :
Le logo blanc de l’entreprise
Un menu avec des liens en blanc
Une option « Sticky » activée pour que le menu reste toujours visible en haut de l’écran lors du défilement
Pour garantir la lisibilité même lors du scroll, un fond vert est automatiquement ajouté derrière l’en-tête lorsqu’on fait défiler la page.
Une fois la structure de base du site finalisée, nous avons pu commencer à travailler séparément sur les différentes sections. David s’est chargé de la page d’accueil, tandis que je me suis concentré sur la section « Applications », en m’appuyant sur la maquette que j’avais réalisée auparavant sur Canva.
J’ai commencé à créer les premières pages de cette section en ayant conscience qu’elles étaient susceptibles d’évoluer, puisque l’arborescence définitive de cette partie du site n’avait pas encore été validée.
Malgré cela, la création de ces premières pages nous a permis d’identifier certaines limites et complications liées à l’utilisation du thème WordPress, notamment en ce qui concerne le fonctionnement de certains modules.
Ces difficultés ont été récurrentes tout au long du projet. Pour plus de détails à ce sujet, je vous invite à consulter la page dédiée aux problèmes rencontrés avec le thème, où ces points sont traités plus en profondeur.
L’un des points forts de ce projet a été la collaboration avec David. Chacun de nous travaillait sur des sections distinctes, mais nous avions la liberté d’intervenir sur le travail de l’autre si nécessaire. Cela nous a permis d’assurer une meilleure cohérence entre les différentes pages du site.
Même si ma principale responsabilité portait sur la section « Applications », j’ai également contribué à plusieurs autres parties du site, notamment :
La création et la modification de pages produits, en respectant la structure et le design définis.
La reprise d’anciens articles issus de notre précédent site, en les adaptant à la nouvelle mise en page.
La configuration de la page des résultats de recherche : il s’agit de la page affichée lorsqu’un utilisateur effectue une recherche via la barre prévue à cet effet sur le site. J’ai veillé à ce que cette page soit à la fois claire, cohérente avec le reste du site, et qu’elle affiche les résultats de manière lisible et structurée.
En plus de ces contributions, j’ai également effectué ponctuellement des ajustements ou corrections sur d’autres pages, selon les besoins du projet.
En résumé, ce projet a été découpé en deux phases : une phase théorique de conception, puis la mise en place réelle, avec de nombreuses adaptations par rapport aux prévisions initiales.
Voici donc, ci-contre, une représentation des points clés du déroulement de ce projet.
En cours de chargement…
Recharger le document
Ouvrir dans un nouvel onglet