TP : réalisation d'une charte graphique

Amis lecteurs, je vous souhaite la bienvenue dans votre ultime TP ! :)

Laissez-moi vous rappeler rapidement en quoi cela consiste, je sais qu'il y a quelques étourdis parmi nous. ^^ Un TP, c'est un chapitre spécial qui a été écrit de sorte à ce que vous puissiez, vous lecteurs, revoir tout ce qui a déjà été étudié précédemment pour que vous pratiquiez et réussissiez le sujet qui vous sera donné.

Le thème de ce TP n'est autre que la réalisation d'une charte graphique, de A à Z. Si vous ne savez pas ce qu'est une charte graphique, c'est que vous n'avez pas lu les deux chapitres précédents. Pour le bon déroulement de votre lecture, je vous invite à les consulter avant de continuer.

Tout le monde est prêt ?

Je vous le disais dans les chapitres précédents, les étapes de création d'un design peuvent varier. Par exemple, si vous avez déjà un logo prêt à l'emploi, vous pourrez créer la charte graphique en fonction de lui. Le contraire fonctionne aussi : vous pouvez créer une charte graphique et concevoir un logo en veillant à ce que les deux se marient correctement. On peut enfin imaginer créer le logo d'abord, puis ensuite la charte graphique sans se soucier que les deux s'accorderont pour, au final, adapter le logo en modifiant simplement ses couleurs. Cette dernière hypothèse n'est pas la plus pratique ni même la plus logique, de toute évidence, mais il se peut que vous ayez recours à elle si l'on vous fournis un logo et que l'on vous demande de réaliser une charte graphique totalement différente. A ce moment-là, vous devrez effectivement adapter le logo. ;)

Pour ce TP, vous aurez besoin de :

  • Photoshop :-°
  • Savoir ce qu'est une charte graphique, comment elle se présente.
  • Utiliser les outils étudiés tout au long de ce tutoriel, et particulièrement ceux de cette troisième partie.
  • Faire preuve d'imagination et de créativité.

Si l'un de ces quatre points ne vous inspire pas ou vous parait encore flous, c'est que vous n'êtes pas encore prêts pour vous lancer dans cette aventure. Armez-vous de patience, relisez les chapitres relatifs aux outils que vous ne maitrisez pas, pratiquez encore et toujours. C'est comme ça que ça marche pour tout le monde et vous verrez que l'efficacité sera au rendez-vous.

Consignes

Le temps est venu de vous donner les quelques consignes de ce nouveau TP. Je suis parti d'une idée simple : vous êtes passionné d'informatique et souhaitez partager vos connaissances en installant sur la toile un site internet type "blog".

Il vous est demandé de créer une charte graphique moderne et ergonomique. Le sujet est vaste : votre site traitera de l'informatique, cela vous laissera de nombreuses possibilités sur le plan création. Tout ce qu'on vous demande, c'est de faire quelque chose de propre mais qui accroche et qui respire la modernité de notre époque. Choisissez des couleurs agréables, définissez une charte précise pour la présentation des articles que vous serez amenés à rédiger pour vos visiteurs. N'omettez pas le côté pratique de votre site, il faut que l'on puisse accéder à toutes les rubriques contenues facilement, même les articles les plus anciens.

Préparatifs

N'oubliez pas qu'une charte graphique se pense avant d'être créée. On détermine par exemple à l'avance les couleurs que l'on va utiliser.

Pareil, je vous conseille de créer d'abord un logo (reprenez celui que vous avez déjà réalisé dans le dernier TP) puis le design de votre site. Vous aurez déjà une bonne partie des couleurs majoritaires que vous utiliserez, et vous pourrez aussi vous baser dessus pour le choix des formes et du style graphique dans sa généralité.

Je vous rappelle aussi qu'un design est généralement composé de :

  • Bannière (lien)
  • Blocs : menu(s) horizontal(aux) et vertical(aux) (lien)
  • Corps (lien)
  • Pied de page (lien)

Cliquez sur les noms pour plus d'informations.

Vous voilà fin prêts à vous lancer. Je compte jusqu'à trois et on y va !

1…

2…

3…

C'est quand vous voulez !

Bonne chance !

... C'est parti !

Driiiing ! L'heure de la correction a sonné, il est temps de rendre les copies !

Comment ça s'est passé ? J'espère que vous n'avez pas connu trop de difficultés. Et si c'était le cas, pas la peine de se décourager, ça fait partie des aléas du métier.

Il est probable, par exemple, que vous ayez été en manque d'inspiration. Et quand ça arrive (ça arrive assez souvent !), on peut être le meilleur infographiste du monde qu'on ne réussirait pas à se satisfaire du moindre pixel créé. Conseil : ne relâchez pas vos efforts et continuez jusqu'à obtenir satisfaction. Il faut que vous fassiez constamment des essais pour chaque partie du design (bannière, menu…) et que vous soyez heureux du résultat final. À force d'essayer, vous y arriverez, je vous le garantis. ;)

Il se peut également que vous ayez beaucoup d'imagination, tellement que vous vous retrouvez sans moyen devant votre logiciel. Généralement, cela se traduit par un manque de compétences pour que vos idées prennent forme. Dans ce cas-là, le remède est le même : trifouillez, essayez, cherchez, testez… Il n'y a pas de secret, la manière la plus efficace, c'est l'expérimentation.

Correction

Revenons-en à notre correction. Pour faire court, il vous a été demandé de réaliser la charte graphique d'un site informatique que vous serez tenu de mettre à jour car il s'agissait de votre passion.

Je n'ai cessé de vous le répéter, il vaut mieux créer un plan déterminant la structure de votre site avant de le commencer car cela vous permettra d'avoir une idée globale de comment vous le présenterez. Pour un site informatique de type blog (c'est-à-dire sous la forme d'articles disposés les uns après les autres), j'ai pensé judicieux d'afficher quelque part sur le site les informations suivantes :

  • Derniers articles en date
  • Edito : présentation brève et concise (du site et de moi)
  • Moteur de recherche (pour rechercher les articles par mots-clés)
  • Accueil : page dans laquelle figurent les articles
  • Catégories : page présentant les différentes catégories dans lesquelles les articles sont classés
  • Contact

Bien entendu, mon site se composera des éléments que vous connaissez déjà :

  • Bannière : affichage du logo
  • Menu 1 : barre de navigation horizontale présentant les différentes sections du site
  • Menu 2 : barre verticale dans laquelle nous viendrons placer l'édito, le moteur de recherche et la liste des derniers articles publiés
  • Corps : on y affichera le contenu du site, c'est-à-dire les articles
  • Pied de page : le traditionnel pied de page, avec les mentions légales et compagnie

Schématiquement, j'ai conçu ma charte graphique de cette manière :

Vous le voyez, ça change un peu de la structure habituelle que je vous ai présentée dans les deux chapitres précédents. Et c'est le but ! Je vous rappelle qu'un design est personnel et que vous avez totale carte blanche à chaque fois. Ici, je me suis permis quelques folies en proposant, par exemple, un menu vertical qui vient chevaucher la bannière et dans lequel figure le logo. Bon, notez toutefois que cela existe sans aucun doute déjà sur la toile et qu'il est assez difficile de se démarquer tellement il existe de sites différents les uns des autres.

Une fois la maquette terminée, il vous sera encore possible d'apporter des modifications à la structure initialement réalisée selon votre inspiration du moment. Il se peut que de nouvelles idées plus pertinentes surgissent de votre esprit et que vous ayez donc besoin de les mettre en application sur la maquette. Une maquette en apparence finalisée n'est pas une maquette véritablement définitive.

Maintenant qu'elle est prête, il est temps d'habiller cette petite maquette. Le plus souvent, on procède de haut en bas car le haut recouvre la bannière et éventuellement la barre de navigation (il n'est pas obligatoire de créer une barre de navigation horizontale, les menus verticaux peuvent suffire).

La bannière

Avant de commencer, il nous faudra un logo que nous serons certains de pouvoir adapter à la bannière. Pour le réaliser, je me suis essentiellement concentré sur deux critères : la simplicité et l'esthétique. Aucun des graphismes ne laissera supposer qu'il s'agit d'un site d'informatique. Pourquoi ce choix ? Tout simplement parce que le nom du site est suffisamment évocateur à lui tout seul. En allant sur "Linformatique.com", on devine assez facilement que ce site traitera d'informatique.

Depuis quelques temps maintenant, j'insiste sur le fait que la charte graphique peut (et doit) se construire en fonction du logo si celui-ci est préalablement réalisé. Si je suis cette logique, mon design devrait être majoritairement composé de vert et de noir. Il n'en sera rien.

Si j'avais choisi du vert en couleur majoritaire, je me serais heurté à deux problèmes. Tout d'abord, il aurait fallu que je trouve la couleur idéale pour remplir la bannière. Le vert n'aurait pas convenu, nous l'aurions confondu avec le logo, quand bien même le logo est censé se trouve en haut du menu (vérifiez la maquette) qui, quant à lui, sera de la même couleur que la bannière. D'autre part, et c'est ici sans doute une question de goût, je n'aurais pas supporté naviguer sur un site vert pomme. Cela m'aurait davantage incité à quitter le site, j'ai les yeux sensibles que voulez-vous… Au final, voici ma palette :

Je me suis laissé tenté par le beige ainsi que le marron, en sachant que les couleurs majoritaire seront effectivement le beige et le noir. Les couleurs secondaires seront le vert, le marron et le blanc.

Je commence donc par réaliser ma bannière. Elle sera de taille fixe, mettons 1050 pixels de largeur.

Je vous rappelle qu'on parle de bannière extensible quand elle est étudiée pour le devenir sur le web. Avant de créer une bannière extensible, celle-ci est fixe sur Photoshop. Elle devient extensible grâce au langage de balisage CSS comme nous l'avons appris dans les deux chapitres précédents.

Pour la hauteur, on partira sur 169 pixels, dont 25 pixels prévus pour la barre qui se situera au-dessus de la bannière comme la maquette le prévoyait. Pour les proportions, on aura au final quelque chose comme cela :

J'insère mon logo dans la bannière. Généralement, on le place sur la gauche. Cela ne doit pas devenir systématique, mais disons que c'est ce qui se fait le plus souvent. Et si, de toute manière, on se réfère à la maquette (encore une fois), il me faut effectivement placé le logo à gauche.

Ma bannière est ainsi composée d'un fond gris et d'un logo. Cela me parait un peu maigre pour parler de "cœur graphique". Il va falloir lui donner un nouvel aspect. Pour ce faire, j'ai simplement ajouté un dégradé de noirs, passant du code couleur #2e2e2e à #222222.

C'est léger, mais la simplicité est au rendez-vous et c'est ce que je voulais. Aussi, vous aurez remarqué que j'ai modifié la couleur du slogan pour qu'il puisse ressortir et être visible.

Passons à la barre horizontale du dessus. De même que pour la bannière, je vais lui appliquer un dégradé avec le beige défini tout à l'heure.

Il fallait ensuite que je crée une ambiance. Je devais trouver quelque chose pour que la bannière dégage une atmosphère en rapport avec l'informatique, mais toujours sans trop en faire. J'ai été amené à faire des essais et ai finalement été séduit par l'idée d'intégrer l'image d'un clavier d'ordinateur. Ni une, ni deux, j'ai pris en photo le clavier de mon ordinateur portable à l'aide de mon téléphone et l'ai transférée pour enfin l'ouvrir sur Photoshop. La suite n'est pas plus compliquée : j'ai tout d'abord réduit la photo pour la découper et l'intégrer dans la bannière correctement. Ensuite, j'ai modifié le mode de fusion du calque de la photo pour le passer en "Luminosité" et enfin, à l'aide de l'outil Rectangle de sélection et d'un contour progressif de 30px, j'ai découpé une partie du bord gauche de l'image pour la faire fondre avec la bannière. Pour finir, j'ai réduit l'opacité du calque à 31%.

Voici le résultat :

Comme moi, vous constatez que la bannière a pris forme. De toute évidence, ce n'est pas terminé. Vous vous rappelez que le menu et la bannière était étoilement liés si l'on en croit la maquette ? Cela signifie donc qu'en réalisant le menu, nous allons compléter la bannière. Et c'est aussi le cas pour le barre de navigation puisqu'elle vient, elle aussi, se loger sur le bord inférieur de la bannière.

La barre de navigation

Réaliser une barre de navigation n'est pas particulièrement compliqué du moment que l'on se débrouille pour qu'elle se marie correctement avec la bannière.

En ce qui me concerne, je me suis fié à ma palette de couleurs et après quelques essais, le blanc s'est avéré concluant. De cette manière, la barre de navigation sera mise en valeur et sera parfaitement adaptée avec la bannière (blanc sur noir, c'est bien connu). La nouveauté, c'est que j'ai découpé la barre en petits onglets dans lesquels j'ai inséré un trait de couleur différente pour les différencier les uns des autres.

Afin de styliser les onglets, j'ajoute un traditionnel dégradé allant du blanc au gris clair. Je crée également un contour blanc ainsi qu'une petite ombre à peine visible. Enfin, je donne un nom à chaque onglet.

  • Accueil : page d'accueil du site.
  • Catégories : liste des catégories dans lesquels sont classés les articles.
  • Archives : liste de tous les articles parus.
  • Notre équipe : présentation des membres tenant le site.
  • Contact : moyens de contact.

J'en ai terminé avec ma barre de navigation, ma charte graphique prend forme ! :D

Le menu

Pour terminer la bannière de manière définitive , il me faut encore réaliser le menu. Pour ce faire, j'utilise l'outil de forme rectangle et crée la structure du menu. Je vous rappelle que le calque du logo, pour que ce dernier soit apparent, doit se trouver au-dessus du calque du menu.

Du côté de la stylisation, je réutilise le dégradé de la bannière en prenant soin, cette fois-ci, de modifier l'angle à 0° pour que la transition s'effectue de gauche à droite, et non plus de haut en bas.

Pour que l'on démarque bien le logo du reste du menu (que l'on va créer incessamment sous peu), je viens placer un rectangle d'un noir un peu plus foncé juste derrière le logo :

Il est désormais temps de remplir ce menu. Nous le décomposerons en trois parties :

  • L'édito
  • Le moteur de recherche
  • Les derniers articles

Pour marquer la séparation entre chaque partie, il va falloir créer une en-tête que l'on viendra placer au-dessus de chaque partie. Par exemple, j'ai personnellement opté pour un trait horizontal banal de couleur beige au-dessus duquel j'ai tapé le titre du menu :

Toujours dans le but de styliser un peu plus ma charte graphique, j'ai réalisé des petites icônes représentatives que j'ai placées à côté des textes "Édito" et "Rechercher". Cela est généralement très apprécié par les visiteurs et améliore l'esthétique de votre site. Pour le menu "Les derniers articles", je me suis contenté de changer le fond de couleur pour un noir un peu plus important, à l'image de ce que l'on a fait avec le logo il y a quelques minutes.

La suite, vous la connaissez. Il ne reste plus qu'à remplir. Pour l'édito, il m'a juste suffit remplir l'espace libre par un texte de présentation. En ce qui concerne le moteur de recherche, un champs blanc ainsi qu'un bouton "Valider" font l'affaire. Enfin, pour les derniers articles, j'ai construit une liste avec titre de l'article, son auteur et la date de parution. Résultat :

Corps

Il ne nous reste plus que le corps et le pied de page à réaliser, le plus gros morceau est passé. Commençons par définir une nouvelle couleur au fond. Il faudra pour ce faire utiliser l'outil Remplissage et sélectionner le calque "Arrière-plan" situé tout en bas de la fenêtre de calques. En ce qui concerne la couleur, le beige fera l'affaire. (#DACF9C)

Le corps sera constitué de "blocs". Chaque bloc équivaudra à un article. Qu'à cela ne tienne, je crée un rectangle dans lequel je pourrai coller une photo et y inscrire quelques textes comme prévu. Pour styliser ce rectangle, j'ai bien entendu fait appel aux styles de calque. Au menu : dégradés, ombre et contour.

J'ai prévu un espace entre le menu et l'article pour y afficher la date de parution dans un style particulier que l'on trouve de plus en plus sur le net. En ce qui concerne l'article, j'ai suivi ce que j'avais planifié de faire grâce à ma maquette. À droite se situera une photo de présentation. À gauche de la photo figurera un résumé de l'article. En-dessous de la photo, je crée un bouton "Lire la suite" pour que les visiteurs puissent consulter l'intégralité de l'article. Pour le reste, je vous laisse découvrir et deviner comme j'ai procédé, vous en êtes tout-à-fait capable. ;)

Pied de page

Notre charte graphique est quasiment terminée, il nous faut maintenant la finaliser en mettant en place un pied de page. Nous allons nous aider de la bannière et réutiliserons ses couleurs. Notre pied de page, aussi rudimentaire soit-il, sera amplement en adéquation avec le reste du design.

Au risque de me répéter, je tiens à vous rappeler qu'il s'agit ici d'un exemple et que cette version, si elle peut bien entendu être améliorée, se présente comme une base suffisante pour être adaptée au web. D'un point de vue graphique, je compte sur vous pour apporter vos propres idées et concevoir une charte graphique à votre image, telle que vous aimeriez qu'elle soit présentée aux visiteurs de votre site. Aussi cette structure (bannière, menus, corps et pied de page) est la structure le plus basique mais aussi la plus répandue qui soit, à vous maintenant de faire jouer votre imagination pour concevoir un agencement nouveau et un style graphique qui vous soit propre.

Ce TP s'achève et marque également la fin de ce tutoriel sur votre logiciel Adobe Photoshop. J'espère que ces quelques heures passées à mes côtés vous auront été bénéfiques et vous auront permis d'être plus à l'aise avec les outils du logiciel à la plume, c'est en tout cas l'objectif que je m'étais fixé. Si tel est le cas, c'est alors pour moi une réelle satisfaction, sachez-le. :)

Pour ceux qui en redemanderaient, je vous ai préparé quelques annexes qui compléteront votre formation. Pour les autres, il est temps de consacrer quelques heures à votre passe-temps et à venir nous présenter vos oeuvres sur le forum.