Trop souvent les gens sous-estiment le rôle de la maquette graphique dans la conception d’un site internet. J’en profiterai donc pour rédiger mon premier billet autour de cette thématique. Comme l’objectif de ce blogue est de simplifier l’information à sa plus simple expression, je débuterai donc avec une petite définition “maison” du thème maquette graphique (aussi nommé interface graphique).

Exemple de maquette graphique

Déf. : La maquette graphique est en quelque sorte une photo numérique ou une capture d’écran de votre futur site internet. Cette représentation graphique vous permet de visualiser et de commenter l’esthétique du site avant même que celui-ci ne soit en fonction. Cette image, composée à l’aide de votre logo, de vos images et  de vos textes, est statique. Ceci signifie que rien n’est encore fonctionnel (n’essayez pas de naviguer au travers des différentes sections; vous n’y parviendrez pas). Si à cette étape votre graphiste n’a pas reçu vos textes, vous trouverez dans la maquette un texte nommé “Lorem ipsum”. C’est une sorte de jargon (similaire au latin) qu’insèrent tous les graphistes dans le contenu de votre site internet afin d’illustrer l’apparence qu’aura votre texte une fois qu’il sera inclus dans le site. 

Les choix que vous ferez concernant la maquette graphique poseront les premières bases qui permettront l’élaboration de votre site Internet. Ce que vous voyez à l’écran sera, à peu de chose près, l’esthétique définitive de votre site internet. Il est donc très important que vous en soyez satisfaits!

J’ai vu trop souvent des gestionnaires approuver une maquette graphique entre deux appels importants et croyez-moi, plus d’un l’on regretté! Voyons maintenant les différents éléments qui composent la maquette.

Pour faciliter la compréhension, je compare souvent un site internet à une maison (vous verrez que cette analogie va revenir souvent dans mes prochains billets). Une maison est composée de 3 parties : la fondation, sa charpente et sa toiture. Plus de 95% des maquettes graphiques sont décomposables de la même façon (peut-être à part d’un élément, le menu, que je considèrerai ici comme des corridors de la maison pour les besoins de cet exemple). 

  1. La bannière graphique, l’emblème et la toiture de votre site internet :

La bannière graphique est un des éléments les plus importants à prendre en considération lors de l’évaluation de votre maquette graphique, car c’est celle-ci qui vous représentera devant votre public cible; c’est elle qui vous rendra unique! Composée de votre logo, d’images et/ou d’éléments graphiques et parfois de votre signature, cette bannière reflète les valeurs de votre entreprise, sa personnalité et l’essence de son image marque sur l’internet. C’est un des premiers éléments qui sera perçu par les visiteurs de votre site.

Pour être en mesure de déterminer l’emplacement de la bannière dans un site internet (ou dans une maquette graphique) vous devez tracer une ligne imaginaire à l’horizontale juste au-dessus du menu (si le menu proposé dans votre maquette graphique est à l’horizontale) ou juste au-dessus du contenu texte qui composera votre site internet dans le cas où votre menu serait à la verticale. Tout ce qui se trouve en haut de cette ligne imaginaire est considéré comme étant une bannière graphique.

L’évaluation de la bannière graphique : Quoiqu’elle soit importante, l’évaluation de la bannière est assez simple. Pour faciliter son évaluation, nous allons scinder en deux cette bannière graphique. À l’extrême gauche, vous devriez retrouver (1) votre signature et/ou votre logo et à droite de ces deux éléments, (2) le montage graphique composée d’images et/ou d’élément graphiques.

(1) Si cette bannière respecte les normes graphiques, votre signature et/ou votre logo devraient se situés à  la gauche de la bannière. Ces éléments devraient être d’une taille respectable et facilement lisible. Aucune image et/ou aucun éléments graphiques ne devraient en obstruer la visibilité, au contraire. Si à ce niveau vous êtes satisfait, passons à la deuxième section de la bannière. Sinon, prenez en note les ajustements que vous voudriez apporter.

(2) Le montage graphique de la bannière, souvent constitué des plus belles images du site internet et/ou d’éléments graphiques. C’est souvent cette section qui donnera le ton du site internet, sa personnalité et qui reflètera l’image de marque de votre entreprise sur l’internet. Pour l’évaluation de cette section, demandez-vous si le montage graphique correspond à la personnalité que votre entreprise désire projeter sur Internet. Cette image sera-t-elle bien acceptée de votre public cible?  Si vous avez répondu oui aux deux questions, faites juste une double vérification pour vous assurer qu’aucune des images ne porte à confusion et qu’aucune d’elle ne puisse être interprétée négativement par l’un des visiteurs.

Des correctifs à apporter? Dans le cas où vous aimeriez apporter des correctifs à votre bannière, je vous conseille fortement de transmettre vos commentaires par écrit à votre graphiste ou gestionnaire de projet. Votre graphiste travaille surement sur un autre projet depuis qu’elle vous a envoyé le matériel graphique. Tenter de l’appeler au moment qui vous est opportun augmentera les risques que certaines corrections soient omises.  Tout sera plus clair de façon écrite et votre graphiste pourra vous appeler si elle a besoin de clarifier certains points. Vous saurez à ce moment qu’elle vous accorde toute son attention et qu’elle aura votre maquette graphique devant elle lors de la discussion. Si vous êtes pressé d’avoir votre site internet, ce petit truc vous fera sauver beaucoup de temps.

    2.   La boîte de contenu, le corps et la charpente du site internet :

La boîte de contenu d’un site internet est, comme son nom l’indique, l’endroit où seront insérés le texte, les liens et les images de votre site. Cette boîte de contenu peut-être vu comme les différentes pièces d’une maison. C’est ici que vous allez agrémenter votre site à l’aide de texte, de liens, d’image et peut-être même de la vidéo. Chacune des pièces sera décoré à sa façon et aura son propre cachet.

C’est l’espace dans lequel vous travaillerez si vous avez choisi d’acquérir un site internet avec gestionnaire de contenu. Le formatage de cette cette zone, si elle n’est pas maléable lors de l’étape

(Cet article est en cours de rédaction.)