PROCESSUS
CRÉATIF.

DES ESSAIS AUX CHOIX ARGUMENTÉS

Pourquoi j’ai fait évoluer le site

Les captures et les retours reçus permettent de comprendre les choix de conception du site. Pour chaque étape, j’explique le problème rencontré, la réponse apportée et ce qu’elle doit améliorer pour le visiteur : la lisibilité, la navigation ou la cohérence visuelle.

1. 01 · 22 SEPTEMBRE · 13 H 55

   Poser la première version

   La première version réunissait mon nom, les thèmes réseaux et cybersécurité, la montagne et un emplacement pour mon portrait. Cette hiérarchie devait permettre au visiteur de comprendre dès l’accueil qui je suis et dans quel domaine je me forme. Le menu donnait ensuite accès aux différentes facettes du portfolio.

   Cette première capture montre toutefois les limites de la composition : mon prénom est coupé sur plusieurs lignes et deux navigations occupent l’écran. Le regard doit se partager entre trop d’éléments. Cette base permet donc de repérer ce qu’il faut clarifier : rendre mon identité plus facile à lire et donner un accès plus simple aux rubriques.

   

2. 02 · 22 SEPTEMBRE · 15 H 38

   Recevoir un premier regard extérieur

   Raphaël trouvait le site en bonne voie, mais signalait des problèmes d’interface sur l’accueil et les pages secondaires, ainsi que des erreurs CSS. Ce regard extérieur était utile pour repérer les défauts auxquels je m’étais habitué en travaillant sur le site.

   Ce retour justifie de donner la priorité aux alignements, à la lisibilité et à la cohérence entre les pages. Une page d’accueil soignée ne suffit pas si la présentation devient moins claire dès que l’on change de rubrique. Les ajustements suivants cherchent donc à conserver les mêmes repères tout au long de la visite.

   

3. 03 · 25 SEPTEMBRE

   Donner plus de place à la montagne

   J’ai donné davantage de place à la montagne pour que l’accueil ait une identité visuelle plus affirmée. L’image devient un élément central de la composition, tout en conservant le titre à gauche et la citation à droite pour garder une organisation reconnaissable.

   Cette version fait cependant apparaître un compromis : plus le paysage est visible, plus ses détails risquent de gêner la lecture du texte qui le recouvre. L’ensemble manque aussi de couleurs et paraît fade. La suite du travail consiste donc à conserver la présence de la montagne, tout en distinguant mieux le fond, les textes et les éléments à mettre en valeur.

   

4. 04 · 30 SEPTEMBRE · IDENTITÉ VISUELLE ET NAVIGATION

   Harmoniser l’identité visuelle et simplifier la navigation

   J’ai choisi une palette crème, bleu nuit et orange pour répondre au manque de relief de la version précédente. Le crème sert de fond, le bleu nuit structure les titres et les textes, et l’orange attire l’attention sur certains repères. Donner un rôle à chaque couleur permet de hiérarchiser l’information et de construire une identité commune aux différentes pages.

   J’ai conservé la montagne et ajouté un motif topographique à certains blocs pour prolonger le même univers visuel. La citation repose désormais sur un fond opaque : ce choix permet de garder le paysage visible sans faire dépendre la lecture des détails de l’image.

   Antoine m’a également fait remarquer que les deux barres de navigation étaient redondantes. J’ai supprimé celle du bas et la flèche associée, car elles occupaient de la place sans donner accès à de nouvelles rubriques. Un seul menu suffit à orienter le visiteur et laisse davantage d’espace au contenu.

   Après cette suppression, une bande vide subsistait en bas de l’accueil : la mise en page réservait encore 100 pixels à l’ancienne barre. J’ai corrigé la hauteur pour utiliser l’espace disponible sous le menu. Cet ajustement montre qu’un choix de simplification doit aussi être accompagné dans la mise en page. La capture du 30 septembre présente cette étape, avant le rendu final.

   

5. 05 · 30 SEPTEMBRE · COHÉRENCE DES PAGES

   Harmoniser, puis ajuster chaque page

   J’ai ensuite harmonisé les espacements, les titres, les cartes, les boutons et le formulaire. Ces éléments communs doivent permettre au visiteur de reconnaître les mêmes fonctions d’une page à l’autre, sans devoir réapprendre l’organisation du site à chaque rubrique.

   Sur la page « En action », la citation était d’abord placée sous la vidéo. Je l’ai replacée à droite du titre pour reprendre la disposition des autres pages. La vidéo reste en dessous et dispose ainsi d’un espace dédié, tandis que le haut de page conserve les repères habituels.

   Sur la page « Cyber & société », j’ai remonté le schéma depuis le bas de la page et partagé la colonne de droite entre celui-ci et la citation. Ce choix présente dès l’introduction un support visuel pour aborder le sujet. J’ai conservé sa légende pour que le schéma reste compréhensible et sa source identifiable.

   L’objectif est de garder une structure commune tout en l’adaptant au contenu : une vidéo a besoin de place, tandis qu’un schéma peut accompagner l’introduction. La cohérence du site repose donc sur des repères stables, avec des ajustements justifiés par ce que chaque page présente.

6. UTILISATION D'OUTILS EXTERNES

   Utilisation de W3 validator pour valider qu'il ne manquait pas de balise.

   Utilisation de l'intelligence artificiele : ChatGPT

   L'intelligence artificielle m'a principalement aidé à comprendre le fonctionnement des grilles et m'a aidé à résoudre les problèmes lié à leur disposition.

   Utilisation de W3Schools pour trouver les attributs nécessaires