Clearideaz, le portfolio d'Olivier Gorzalka, webdesigner sur Lille, Nord-Pas de Calais

Actuellement en plein travail sur un projet web, j’ai quelque peu délaissé mon carnet web. Je me suis dis que ce serait intéressant de raconter à la manière d’un journal de bord les différentes étapes de la création d’un site internet. Nous allons donc voir une réalisation web sous tous ses aspects.

Le sujet

Il s’agit d’un site internet pour une école privée. L’objectif est de faire connaître l’établissement. Le site internet sera un moyen de communiquer avec les familles. Il devra faciliter la prise de contacts avec les parents. L’ergonomie est au centre de ce projet. Le site doit disposer d’une navigation simplifiée au maximum, l’ensemble des sections doit être correctement délimité. On retrouvera notamment une partie « actualité », des articles plus spécifiques sur les activités de l’école et un agenda.

Concernant les contraintes techniques, le site devra disposer d’un espace d’administration simple d’utilisation. Les personnes qui mettront à jour le site ne seront pas des informaticiens. Il faut leur simplifier la tâche. Le choix d’un gestionnaire de contenu (CMS) se révèle judicieux sur le plan technique. Il faudra toutefois veiller à ce que ce gestionnaire ne soit pas une « usine à gaz » et qu’il réponde à l’ensemble des besoins.

Premiers préparatifs

Avant de me lancer dans la création graphique, j’ai étudié plusieurs possibilités de mise en page. Sur une feuille de papier, j’ai essayé différents placements possibles. Cet étape permet de débuter sereinement l’agencement des différents blocs de contenu sur la future maquette. Cela nous donne aussi l’occasion de déterminer les éléments sur lesquels on souhaitera attirer l’attention du visiteur. Pour respecter les besoins de navigation aisée dans le site, je me suis basé sur un système de navigation des plus conventionnels.

Pour trouver l’inspiration, je me suis mis à flâner sur des sites internet en rapport avec le monde de l’enfance. Quel dommage d’ailleurs que la majorité de ces portails ne soient pas très jolis graphiquement… Mais cela permet de faire naître des idées pour les premières maquettes du site en question.

La création graphique

La maquette graphique du site internet doit mettre en valeur l’objet du site internet. Il faut avoir à l’esprit que cette maquette sera déclinée au format web (XHTML / CSS), il faut parfois calmer ses ardeur . Il faut également avoir une idée de l’orientation graphique. A défaut, plusieurs axes de communication pourront être proposés. Dans le cas présent, les éléments graphiques doivent évoquer le monde de l’enfance. Le site doit toutefois rester structuré dans sa forme. L’ambiance générale doit être colorée et agréable.

Dans un premier temps, j’ai réalisé dans Photoshop des objets propres au milieu scolaire. Ils ne seront pas tous intégrés mais pourront être réutilisés à l’occasion pour des mises à jour éventuelles. J’ai ainsi créé des fichiers psd (photoshop) de pinceaux, stylos, taille-crayon, tableau noir etc.…

Vient ensuite la maquette du site. Je débute l’agencement des différents blocs pour ensuite y intégrer les éléments décoratifs et les textes factices. J’ai pris pour habitude de travailler avec une grille pour respecter certaines règles de proportion (le nombre d’or). Pour le titre du site, je me suis inspiré de l’écriture à la craie des instituteurs sur les tableaux d’école. Le header très fourni intègre quelques-un des éléments que j’avais créé au préalable. J’ai choisi de ne pas créer de divisions explicites entre les blocs. Le travail sur les dégradés m’a permis de donner cet effet de séparation entre les éléments. Il s’agit de mon premier travail sur la maquette du site. Les couleurs sont très sobres. J’ai utilisé volontairement des blocs très rectilignes. La grille m’a permis de respecter les proportions de rigueur. Au final, la sobriété de la maquette n’était pas probante.

J’ai donc utilisé l’outil de Teinte/Saturation pour rechercher les teintes adéquates. J’ai noté certains codes couleurs qui me semblaient appropriés et retravaillé les blocs de contenu. Les couleurs ont gagné en vivacité. J’en ai également profité pour repenser le menu supérieur en y intégrant des post-it. J’ai effectué plusieurs tests pour évoquer le monde de l’enfance avec notamment le petit dessin bordant le titre du site.
Au final, l’ensemble manquait toujours d’impact. La vision de l’utilisateur resterais bloqué sur ce fameux header imposant. Il fallait mettre en valeur le contenu principal.

L’apparence de la seconde maquette manquait d’éléments de contraste. De ce fait, j’ai intégré un footer noir/gris afin de bien différencier la bannière supérieure, le contenu et le footer. J’ai redessiné le petit personnage. Je lui ai même présenté un nouveau petit camarade Cette troisième maquette m’a également permis de penser à la manière de présenter la page d’accueil. J’ai ajouté deux blocs très colorés pour y insérer les éléments communicatifs, c’est-à-dire les accroches. Le menu latéral a également été simplifié. C’est cette maquette qui servira de base pour l’intégration XHTML / CSS

(À suivre…)