Pour finaliser la production d’un site simple créé à partir de la rédaction structurée d’un article, je vous propose maintenant d’insérer en tête de page un menu fixe.
Chacun dispose désormais d’un dossier de site dans lequel se trouvent :
le fichier index.html,
le dossier css contenant les 4 feuilles de styles utilisables (même si la seule feuille de style utilisée est absolument nécessaire)
le dossier img contenant les images collectées (même si là aussi, seule l’image intégrée dans la page soit nécessaire)
➜ Pour insérer un menu fixe, nous allons utiliser l’application Web Luxbar. Celle-ci génère le code HTML dont nous avons besoin.
Il s’agit maintenant d’utiliser l’application Luxbar pour générer le code HTML du menu.
Inutile de télécharger l’appli Web (comme cela vous est proposé en début de page. Tous les réglages s’effectuent directement sur la page de l’application. Il suffit de cocher les options souhaitées. Quoiqu’il en soit, tout est modifiable dans le code ultérieurement.
Choix du nombre d’onglets
➜ Le nombre d’onglets dépend à priori du nombre de sous-titre h2, auquel il faut ajouter un onglet “Accueil”, pour revenir en haut de page quand on en a besoin.
Choix de la position du menu et de sa couleur
➜ Je vous invite à choisir la position “Fixed”. En effet, elle se révèle la plus intuitive et la plus pratique sur tous les écrans.
Sur la capture d’écran, j’ai coché “Fixed Bottom” pour des raisons pratiques de positionnement des commentaires 😉
Choix des modalités d’affichage dans la barre de navigation
➜ Choisissez ici les options qui vous conviennent le mieux.
L’option d’animation du hamburger concerne l’icône des 3 traits superposés qui s’affiche pour accéder au menu quand l’écran ou la fenêtre de navigation est de petite taille.
Paramétrer le code HTML du menu
Une fois les options choisies, l’application Luxbar vous propose de copier dans votre code source une série de lignes HTML (un bouton “Copy” apparait au survol du code).
➜ Copiez le code HTML proposé et collez-le dans le code source de votre page Web (index.html) en changeant le nom du conteneur du menu. Choisissez la balise <nav> à la place de la balise <header>.
Établir les liens avec la page dans le code du menu
Sur la capture d’écran précédente, j’indique que des changements doivent être effectués dans le code HTML du menu Luxbar. En effet, il s’agit d’établir un lien entre chaque onglet et l’endroit de la page vers lequel l’onglet est sensé pointer.
Pour installer proprement un menu Luxbar avec les styles que je vous ai proposé, il est nécessaire de procéder à des améliorations dans le code HTML et dans les CSS.
➜ Téléchargez les CSS adaptées et placez-les dans le dossier “css”. Ensuite, appelez celle qui vous convient via la balise <link>, dans le head de votre site.
➜ Mettez en place les bandeaux qui vont permettre aux titres <h2> de s’afficher sous la barre de menu. Positionnez ensuite les différents id (ancres de navigation) dans les <div class= »bandeau »> (voir l’exemple donné dans la capture d’écran précédente).
Pour que les feuilles de style adaptées au menu Luxbar puissent s’appliquer correctement à votre page HTML, il est nécessaire de créer de créer 2 boîtes (divisions) importantes :
une boite <main></main>
une boîte <footer></footer>
La boîte <main></main> englobera les contenus principaux (h1 – p – h2 – p – p – etc.). Dans notre cas, elle sera chapeautée par la boîte <nav></nav> contenant le menu et elle sera suivie de la boîte <footer></footer> contenant des informations annexes sur le site et ses contenus.
Je vous propose de télécharger un exemple de réalisation similaire pour voir quels sont précisément les attendus à ce stade des opérations 😉
Au cours du niveau 2 de la formation Com-Créa, vous allezapprendre à mener de manière méthodique la création d’un logotype. Nous distinguerons cinq phases clés et nous insisterons sur les trois phases centrales du processus :
l’idéation
la conception
la réalisation
Ces trois phases sont encadrées par la phase de préparation et la phase de finalisation.
Des ressources sont mises à votre disposition pour vous permettre d’approfondir les points abordés. Des liens vers des sites traitant de la création de logo ont été regroupés à cette adresse : https://y-goguely.netboard.me/designlogos/
La création de logo est une application concrète des fondamentaux de la communication visuelle vus au niveau 1. Vous pouvez revoir les points abordés précédemment en consultant les sites présentés sur https://y-goguely.netboard.me/basescomvi/
Pour situer la création d’un logo dans le contexte de l’identité visuelle d’une marque ou d’une organisation, je vous invite à visionner la vidéo ci-dessous.
Pour ce qui concerne le format idéal du logo, nous en reparlerons ultérieurement 😉
À chaque étape du processus, des productions sont mentionnées, de même que les livrables attendus. Il s’agit des productions que allez mettre en œuvre au fil de votre formation. Vous les repèrerez en gras dans les encadrés déroulants de l’infographie. Les livrables sont indiqués dans les encadrés bleus.
Le support de cours
Un support de cours complet sur le design de logos est accessible en ligne à cette adresse : https://graphizm.fr/com-crea/design-logos. Ce cours complet vient compléter celui-ci. Vous disposez ainsi de toutes les informations utiles pour mettre en pratique la méthode préconisée.
1 – Préparation et Idéation
Quand un client vous demande de lui réaliser un logo, il est inutile de se lancer bille en tête sur son logiciel de dessin préféré pour concrétiser les premières idées qui vous viennent à l’esprit. Vous iriez droit au casse-pipe !
Voici un tableau présentant les étapes par lesquelles vous devez passer, avant d’entreprendre la conception proprement dite (qui précède elle-même la phase de réalisation). La première rangée concerne les livrables de la phase de préparation, assimilée ici à la phase d’idéation.
Le tableau ci-dessus est une page Web interactive. En cliquant sur chaque case vous pouvez la marquer comme étant validée (la case se retourne) au fur et à mesure de l’avancée de vos travaux.
Pour vous permettre d’utiliser ce tableau dans le contexte de votre future activité professionnelle, je vous invite à télécharger le dossier de cette page Web. Vous pourrez même la personnaliser quand vous maîtriserez les langages HTML et CSS ;-).
La réalisation de ces différents documents fait appel à vos facultés littéraires, logiques et imaginatives, ainsi qu’à vos facultés de synthèse et d’anticipation. L’objectif visé est la stimulation de votre attentioncréative, dans le respect des contraintes du cahier des charges.
➜ En rédigeant ou en finalisant un cahier des charges, en collectant sur un tableau Pinterest des images thématiques, en construisant une planche de style, vous élaborez les outils de conception qui vous serviront dans la suite du projet.
Le brief
La première chose à faire est donc de bien cerner la demande du client et pour cela, rien de tel qu’un brief créatif ou un questionnaire à compléter… Pour vous guider vers les réponses dont vous allez avoir besoin, je vous invite à télécharger des gabarits de questionnaire (format XMIND et PDF) puis à les utiliser au plus vite.
Dans le questionnaire mis à votre disposition, les questions 4 et 5 vont se révéler cruciales pour la suite de votre travail :
Citez 3 mots que vous aimeriez que les gens associent à votre entreprise lorsqu’ils verront votre nouveau logo
Citez 3 mots que vous ne voulez pas que les gens associent à votre entreprise lorsqu’ils verront votre nouveau logo
Notez bien que ce questionnaire s’adresse à votre client et que les gens dont il est question ici sont les clients de votre client ! Il ne s’agit donc pas de mentionner en réponse à ces questions les qualités attendues ou constatées du logo (impactant, univoque, simple, clair, …) ou les défaut à éviter ou malheureusement manifestes du logo (trop fouillis, peu lisible, trop coloré, pas assez marquant,…). Il s’agit de mentionner ce qui vient à l’esprit des gens, par association d’idées (forêt, grand air et randonnée, par exemple ou diététique, sobriété et bonne santé).
Ces six mots (3 concepts attendus et 3 concepts à éviter) pourront être repris pour réaliser l’arbre thématique (voir plus bas).
La documentation
Sachant un peu mieux de quoi il en retourne, vous allez pouvoir commencer à vous documenter. Vous collecterez un maximum d’informations pertinentes sur le secteur d’activité de votre client, sur ses concurrents, sur ses habitudes en matière de communication, etc.
Utilisez Pinterest ou pour conserver une trace de vos collectes thématiques. Elles sont suceptibles de vous resservir en d’autres circonstances…
La planche de tendance
La planche de tendance, aussi appelée moodboard, est un moyen graphique de synthétiser le résultat des rechercheseffectuées. Elle permet de commencer à prêter une attention plus soutenue à certaines couleurs, certaines formes, certaines polices de caractères, etc.
Les planches de tendance sont réalisables en utilisant des gabarits disponibles en ligne. Faites une recherche (avec l’entrée “free mood board layout”, par exemple…) et choisissez le gabarit qui correspond le mieux à votre projet. On en trouve sur freepik…
Sa réalisation sous forme de planche soignée est une sorte de bonus, un plus pour la présentation des résultats de la documentation. Il est de plus en plus fréquent qu’une planche de tendance soit intégrée dans une planche de style ou dans une planche de marque. Elle offre alors une ouverture sur les éléments visuels qui ont présidé à l’élaboration de l’identité visuelle.
Si vous êtes pressés, un tableau Pinterest fait parfaitement l’affaire. Pensez à y intégrer des images qui nous permettent de repérer des couleurs dominantes, des figures et des symboles, des caractères typographiques, des motifs ou ornements,… tout élément graphique susceptible d’être ensuite isolé et repris pour constituer le logo et l’identité visuelle de la marque.
Vous pouvez voir de tels tableaux Pinterest, constitués par une professsionnelle du design graphique sur designisvital.co. Julie Lebraud y présente notamment un tableau d’inspiration sur le thème des identités visuelles en lien avec le luxe. Elle a également constitué un autre tableau sur le thème des identités visuelles de food trucks. D’autres thématiques ont été traitées, que vous pouvez exploiter à votre tour en collectant les images présentées ici dans vos propres tableaux de tendances.
L’arbre thématique
L’arbre thématique est un moyen plus littéraire de synthétiser le résultat de ses recherches documentaires. C’est aussi un moyen d’explorer les territoires thématiques voisins de celui sur lequel le brief nous a conduit.
Je vous invite à utiliser deux outils simples : • text2mindmap (https://tobloef.com/text2mindmap/), un outil très simple d’utilisation et dont le système de sauvegarde des cartes au format TXT est universel. • myMindmap (https://mymarkmap.netlify.app), un outil basé sur l’usage du Markdown, à la manière de Markmap.js
Recommandations pour élaborer l’arbre thématique
La manière la plus cohérente de bâtir un arbre thématique consiste en effet à partir des 3 mots clés positifs, disposés autour du sujet central (la thématique du logo). Il s’agit ensuite de faire grandir l’arbre en ajoutant des branches à partir des 3 nœuds correspondant au 3 mots positifs (ce à quoi doit immédiatement penser le lecteur en voyant le logo).
Travaillez sur 3 niveaux. Restez très concrets. Évitez de mentionner des termes généralistes tels que « aspect”, ”caractéristique”, ”simple”, etc. Veillez à ne pas mentionner de couleurs ni de formes. Cela sera fait à l’étape suivante. Il ne s’agit pas non plus de trouver des simples synonymes mais d’élargir véritablement le thème central en tendant vers des concepts voisins.
Sur le document ci-dessus, vous repèrerez l’usage qui a été fait des 3 mots clés attendus et des 3 mots clés à éviter (6 mots en bleu). Les informations collectées servent d’un côté de concepts attractifs et de l’autre de concepts répulsifs.
Déterminer un ou plusieurs axes de création
Des axes de création se dégagent très simplement de l’arbre thématique en reliant entre eux trois termes choisis dans les branches issues de chacun des 3 mots clés positifs. Dans l’arbre présenté ci-dessus se trouvent par exemple les axes suivants :
Technologie – Ouverture diaphragme – Lumière (d’étoile)
Réseau (informatique) – Polaroïd – Planète avec anneaux
La grille de détermination de l’axe de stylisation (facultatif)
Ce dernier outil est un autre moyen de préparer la réalisation de la planche de style (livrable de la phase d’idéation). Il s’agit de remplir un tableau de synthèse des éléments collectés puis de choisir parmi les options possibles celles qui forment un axe de stylisation cohérent.
➜ Je vous invite à télécharger le gabarit de grille de détermination de l’axe de stylisation si vous souhaitez l’utiliser.
➜ Pour compléter la partie des visuels (ou symboles) de la grille de détermination, il est pratique d’utiliser des pictogrammes ou des icônes. Des sites permettent de s’en procurer librement, sur de très nombreuses thématiques.
Les cadres sont des formes enveloppantes utilisées pour encapsuler l’image, le texte ou les deux, dans certains logos ou variantes d’un logo.
Les visuels sont les figures ou les symboles utilisés pour composer la partie iconographique d’un logo (quand le logo fait appel à une image).
La planche de style
Tout le travail de documentation est synthétisé sur la planche de style. Il s’agit d’un livrable clé dans la démarche proposée ici. La planche de style est la traduction du brief en langage visuel. Elle va plus loin que la planche de tendances en sélectionnant des options particulières parmi toutes celles que la planche de tendances laisse entrevoir.
Il est envisageable de faire valider la planche de style par le client (ou le DA…), “officialisant” ainsi la direction graphique qui sera prise lors de la phase de conception proprement dite.
Je vous propose de télécharger un gabarit de planche de style puis de le personnaliser en fonction de votre propre identité visuelle (en tant que graphiste). Faites attention toutefois que l’identité graphique de votre studio ne vienne pas parasiter l’identité qui est présentée sur la planche (soyez discrets et assez neutres).
➜ Pour vous permettre de créer rapidement des nuanciers de couleurs et des nuanciers de gris régulièrement étagés (nuanciers fonctionnels), utilisez une des palettes de couleurs étagées utilisées au niveau 1 de la formation (cours sur les couleurs en design graphique).
Voir de cours annexe intitulé Le design de logo pour plus de précisions.
➜ Concernant les polices de caractères, spécifiez des grandes familles de caractères (expressives, sérieuses, neutres, etc.) . Vous pouvez mentionner une police de caractères spécifique à titre d’exemple (entre parenthèses) mais conservez une marge de manœuvre dans votre esprit. Vous pourrez affiner votre choix typo à l’étape suivante.
➜ Concernant les textures et les motifs, il s’agit souvent de “patterns” répétitifs, vectoriels ou matriciels. Ces “patterns” permettent d’enrichir l’identité visuelle, d’enrichir les planches de présentation au client et dans certains cas (si, si…) de caractériser le logo et la marque à laquelle le logo se réfère.
Vous trouverez une très large collection de textures, matricielles ou vectorielles, sur le site cssauthor.com… et il est toujours possible de les créer « from scratch » 😉
Exemples de logos utilisant des trames de point (source : logolounge.com)
Synthèse des étapes menant à la planche de style
Voici une synthèse des étapes précédentes. Vous remarquerez que pour établir la planche de style à faire valider par le client, avant de passer à l’étape de la création proprement dite, 3 planches de styles intermédiaires ont été mises au point pour élargir le potentiel des choix graphiques fixés sur la planche de style finale.
Comme toujours en design graphique, on alterne des phases d’élargissement des choix avec des phases de choix définitifs. Cela offre au concepteur l’opportunité de justifier chaque option prise en cours de processus, face à des alternatives laissés de côté pour telle ou telle raison (ces raisons doivent pouvoir être expliquées).
Choisir le gabarit de la planche de style
Le choix du gabarit de la planche de style n’est pas anodin. C’est souvent le premier livrable proposé au client. Il est d’une certaine manière un reflet de l’image de votre propre entreprise de conception graphique.
Le gabarit proposé plus haut est tout à fait adapté à l’étape de mise au point des 3 planches de style intermédiaires réalisées à partir des mots clés de l’axe de conception. S’il vous convient, vous pouvez le personnaliser et l’utiliser pour vos projets professionnels. Prenez toutefois connaissance des tendances en matière de brand board (planche de marque).
Modèles de planches de marques disponibles sur Canva
En effet, il peut être intéressant de ne pas reprendre toute la mise en page en passant de la planche de style à la planche de marque. Une planche de marque est une planche de style intégrant la présentation du logo et souvent un extrait de moodboard. Consultez la fin de ce cours pour en voir des exemples.
2- La création
Après avoir fait valider votre planche de style par votre DA préféré, soumettez-la au client. Après cela, plus question de changer de nuancier, de familles typos, de formes de cadres et de visuels (figures, symboles, motifs et textures) !
L’axe de conception doit être très clair dans votre esprit. Il est la base sur laquelle repose désormais vos choix graphiques. Examinez les identités visuelles réalisées par l’agence Graphéine. Vous trouverez parfois, en début de présentation un schéma très simple permettant de comprendre le concept utilisé (l’axe ce conception ou de création).
Axe de conception du logo Citéco par l’agence Graphéine
Voici quelles vont être vos réalisations pendant la phase de création. Le tableau ci-dessous vous permettra de visualiser votre progression (en retournant chaque case d’un simple clic).
Pas de design graphique sans un minimum de croquis ou d’esquisses. Que vous utilisiez, un crayon, un stylo à bille ou un stylet numérique, prenez le temps de noter vos idées sous forme de dessins manuscrits. Les designers pensent avec leur main.
Croquis préalables à la mise au point du logo de New Look Refinishing, par Del Mauricio (source : behance.net)
Croquis préalables à la mise au point du logo de Bloovi, par Claire Coullon (source : coullon.com)
Vous noterez que les designers graphiques soucieux de la qualité de leur portfolio soignent la disposition de leurs croquis préparatoires. D’autres graphistes travaillent de façon plus désordonnée (mais non moins efficace)… et publient le contenu de leurs carnets sans complexe.
Recherches typographiques
Consultez la section Création du cours annexe sur le design de logos pour savoir comment procéder méthodiquement lors de vos recherches typographiques.
Recherches typos sur sites de distributeurs de fontes
Pour vous aidez dans le choix des polices de caractères, vous pouvez utiliser les services des plateformes de distribution de polices de caractères. Celles-ci proposent généralement de saisir le texte de votre choix pour le visualiser dans telle ou telle police sélectionnée.
Recherches typos sur sites spécialisés
Si vous souhaitez tester votre texte avec un visuel, le site fontflipper.com propose un outil permettant de tester la juxtaposition de votre marque affiché dans l’une des polices disponibles sur Google font par dessus le visuel de votre logo. Prévoyez la place disponible à côté, sur ou dessous votre visuel et téléchargez l’image sur fond blanc !
Ces solutions en ligne sont ne permettent pas d’effectuer toutes les manipulations envisageables mais elles peuvent, dans certains cas, permettre de découvrir des options typographiques qu’il s’agira d’affiner dans la suite du processus.
Le maquettage vectoriel
Vous serez tentés de squeezer l’étape précédente pour passer directement à la création vectorielle. Après avoir lancé votre logiciel de dessin vectoriel préféré et commencé à combiner quelques typos et visuels, vous aurez du mal à résister à l’envie de finaliser tout de suite les premières idées cohérentes. Si vous souhaitez revenir en arrière vous vous apercevrez très vite que vous n’avez pas sauvegardé vos premières versions.
➜ Relisez ce premier paragraphe après 2 heures de travail sur écran… je suis sûr que vous vous retrouverez dans au moins deux de ces affirmations. Tous les débutants passent par là… et si vous voulez gagner du temps (et de l’argent, plus tard…), travaillez méthodiquement.
Maquettage vectoriel du logo Atlassian (source : atlasian.com)
Ayant fait des choix préalables, ne partez pas dans d’autres directions. Gardez le cap de votre axe de conception et de votre planche de style.
Ne vous contentez pas de deux ou trois esquisses ou maquettes, utilisez les outils mis à votre disposition pour explorer des solutions toujours plus pertinentes
N’effacez jamais vos croquis manuscrits ou vos maquettes numériques. Sauvegardez, dupliquez, partez d’une version précédente dupliquée et changer un ou deux points à le fois, puis dupliquez à nouveau et ainsi de suite (sans oublier de sauvegarder).
Recherches vectorielles pour la mise au point du logo Yul Traiteur, par Fabien Vielcazal (source : backsidepixels.com)
Les tests et l’affinage
L’étape des tests peut commencer… À vrai dire, si vous avez suivi jusque là les conseils de votre formateur, il y a toutes les chances que vos propositions passent brillamment les tests de lecture en conditions extrêmes.
La formule des 3 propositions SOC (1 sûre, 1 originale, 1 créative) est tirée du livre de George SINCLAIR Design graphique et stratégie de marque. Francis COURT, de son côté propose généralement à ses clients 4 propositions, qu’il montre dans son portfolio, à la rubrique “Réalisations > charte graphique”. David GARDNER, quant à lui, envisage sans complexe la dizaine de propositions, même si rien n’est dit à ce sujet sur le site gardnerdesign.com. Il explique sa démarche dans son livre La création de logo.
La présentation des propositions au client peut prendre de nombreuses formes, de la simple diapositive à l’infographie détaillant toute la démarche d’idéation et de création. Je vous propose, dans le cadre de la formation, d’utiliser la base du gabarit de la planche de style pour montrer l’essentiel d’une proposition en un seul écran.
C’est une formule minimaliste qui anticipe la réalisation de la planche de marque (brandboard), lors de la phase de réalisation.
➜ En explorant la documentation mise à votre disposition sur https://y-goguely.netboard.me/designlogos/, vous découvrirez d’autres types de présentation. Je vous en propose quelques unes, sous forme d’images verticales à faire défiler, disponibles dans une archive à télécharger.
➜ Vous trouverez sur le site 99design.fr des conseils sur la manière de présenter votre design au client de manière plus aboutie.
Il existe aussi des planches sur lesquelles il est possible de décliner l’usage d’un logo sur différents supports. Il convient de les utiliser avec discernement car, le plus souvent, les formats de papeterie proposés ne sont pas ceux utilisés en Europe. Vous en trouverez toutefois un grand nombre sur freepik.com
3- La réalisation
Ayant examiné vos propositions, votre client en a choisi une. Super ! … mais il peut vous avoir demandé de mixer 2 propositions. Quoi qu’il en soit, le moment est venu de finaliser le logo en tenant compte des attentes formulées.
Dans son livre intitulé Design graphique et stratégie de marque George Sinclair nous montre un exemple de combinaison de 2 propositions, à la demande du client.
Une fois cette combinaison effectuée, le designer aurait pu se satisfaire du résultat. Il a cependant poussé plus loin ses recherches pour aboutir à la solution définitive présentée ci-dessous.
La combinaison texte-image est différente. La seconde version se lit plus facilement, même si la référence à la planche ronde est moins visible.
Un logo, dans sa forme “brute”, peut d’emblée avoir été validé sous différentes formes. Il sera alors plus facile de mettre au point les variantes nécessaires pour répondre aux différentes utilisations du logo.
La finalisation des variantes
➜ Une fois le logo mis au point sous une forme standard, il va être nécessaire de finaliser ses principales variantes. Cela se réalise en tenant compte des données du cahier des charges et des besoins du client.
Les premières variantes découlent de l’utilisation du logo sur des écrans de différentes tailles. Il s’agit de supprimer des détails sans pour autant altérer la reconnaissance de la marque. Vous en avez plusieurs exemples ci-dessous, pour 4 marques bien connues.
Les secondes variantes concernent l’usage du logo en une seule couleur ou en niveaux de gris. Des recherches doivent parfois être de nouveau menées pour trouver des solutions adaptée à un usage du logo dans un cadre ou sans cadre. Le logo de Slack se présente sous des formes différentes en couleurs ou en noir et blanc.
La planche suivante montre les variantes en noir et blanc et en couleurs du logo des musées de Cambridge. Deux types de formats sont présentées, permettant une utilisation optimale du logo en fonction des proportions de l’espace allouée à la marque. Une série de variantes s’inscrit dans un rectangle et l’autre série s’inscrit dans un carré.
Les variantes suivantes découlent de l’existence éventuelle de filiales de la marque. Une unité s’impose pour les logos de l’ensemble des secteurs concernés. Voyez comment le problème a été résolu pour bTV Television.
La brand board ou planche de marque
Une brand board ou planche de marque est le livrable minimum à fournir au client (ou au DA…) en fin de projet.
La planche de marque est, sous sa forme la plus rapidement mise en œuvre, une proposition au client finalisée (proposition qui est elle-même un aménagement de la planche de style).
Cette planche doit permettre aux utilisateurs du logo de disposer des informations minimales pour développer l’identité visuelle de la marque. C’est une charte graphique minimaliste. Bien d’autres choses restent à faire pour construire une identité visuelle complète mais l’essentiel est là.
Il existe de nombreux gabarits de brand boards disponibles sur le Web. Ceux qui vous sont présentés ci dessous proviennent de AM Studio, sur Creative Market. Ils sont payants !
Brand board 1
Brand board 2
Brand board 3
Brand board 4
Brand board 5
➜ On trouve aussi des gabarits gratuits, sur Canva par exemple. Vous trouverez également sur hellonobo.com la liste des éléments à insérer dans une brand board, ainsi q »un modèle de présentation (voir ci-dessous)
Dans le cadre de la formation Com-Créa, le niveau 2 prend fin à ce stade de la production. Dans un cadre professionnel, en agence de communication ou en studio graphique, les choses peuvent aller beaucoup plus loin. Je vous donne quelques indications dans la suite du cours.
Le développement de l’identité visuelle
Si vous vous êtes convenus avec le client pour développer une identité visuelle plus complète, bien des choses restent à réaliser. Les premières productions porteront sur la mise au point de la papeterie d’entreprise.
Il s’agira ensuite d’anticiper les formes que prendront couleurs, typographies et variantes du logo sur les divers supports utilisés dans la communication interne et externe de l’entreprise. De la publicité sur objets au site Web “responsive”, en passant par le marquage des véhicules et des tenues de travail, la présentation des “Powerpoints”, etc.
➜ Tout cela devra être charté, normalisé… et présenté avec soin sur un guide ou manuel de marque, une charte graphique de l’identité visuelle de la marque.
Vous pouvez prendre connaissance de plusieurs “brand guidelines” ou chartes graphiques en ligne sur plusieurs sites spécialisés :
Certaines chartes graphiques sont très succintes. Il est facile de les mettre en œuvre à partir d’une simple brand board. Par contre, produire des chartes graphiques complètes représente un énorme travail. Assurez-vous que ce travail fait bien partie du contrat signé avec votre client avant de vous lancer dans un tel chantier !
➜ Pour faciliter cette mise en œuvre et le partage de la charte graphique avec l’ensemble de ses utilisateurs potentiels, il existe des plateformes de création et de publication en ligne de “brand guidelines”. brandpad.io en est un exemple intéressant (cliquez sur l’image ci-dessous pour consulter le charte graphique en ligne de Pancake Skateboards).
Plus simple, la plateforme canva.com, propose aussi des gabarits de “brand guideline” à personnaliser en fonction des besoins identifiés.
Ce rappel des fondamentaux de la communication visuelle marque la fin du niveau 1 de la formation com-créa. Vous allez mettre en pratique vos nouveaux acquis lors d’une première mise en situation professionnelle (le fameux TP1).
Nous allons faire le point sur les enseignements les plus importants à retenir et à appliquer pour la réalisation de tout projet de design graphique. Il s’agira principalement des règles apprises pour finaliser les aspects suivant d’un projetde comvi :
Je vous propose, pour commencer à réviser, de compléter une courte bande dessinée mettant en scène deux designers graphiques. Ceux-ci énoncent, à tour de rôle, six maximes sur le design graphique.
➜ À vous de formuler les conséquences techniques de ces maximes dans la pratique de la communication visuelle.
➜ Téléchargez le dossier de cette bande dessinée publiée sous forme de page Web et complétez les dialogues en utilisant un éditeur de code (Brackets ou Notepad++ en local ou encore Repl.it en ligne).
Si vous ne pouvez pas installer sur votre poste l’éditeur de code Brackets et que ne pouvez pas utiliser Notepad++, je vous montrerai comment utiliser Repl.it.
➜ Après avoir complété la page, vous me transmettrez simplement le fichier « index.html » en pièce jointe via Slack (sans les fichiers-dossiers dépendants…)
➜ Pensez à renommer le fichier index et à ajouter vos initiales. Je vous propose cette nomenclature : index-XX.html (XX étant vos initiales).
Si vous avez le temps, vous pouvez personnaliser les personnages utilisés dans la bande dessinée. Si vous souhaitez qu’un seul personnage prenne la parole, pensez à modifier légèrement l’expression d’une case à l’autre, en réalisant plusieurs versions du même personnage.
Pour cela dupliquez et renommez une des images fournies. Ouvrez-la dans Illustrator, faites vos modifications et enregistrez l’image au format SVG. Modifiez les appels des images dans le fichier HTML. Transmettez-moi la ou les nouvelle(s) image(s) avec votre fichier index-XX.html modifié. Je mettrai le tout en ligne à cette adresse : http://graphizm.fr/bd-pedagos/six-affirmations/.
➜ En rajoutant à cette adresse index-XX.html (XX étant vos initiales), vous pourrez voir votre travail et celui de vos collègues (… en changeant les initiales). 😉
Structuration des contenus
Concernant la structuration des contenus avant toute composition, vous retiendrez la formule “Découper à chaud c’est structurer” ou DHO=S. Les lettres D, H et O sont des initiales de 3 mots désignant 3 opérations fondamentales (définissant la structuration en design graphique).
Découpagedu texte en blocs d’informations cohérents
Hiérarchisationdes informations selon leur importance
Ordonnancementdes infos dans des blocs d’information (… et des blocs dans la page, puis des pages dans le livret, etc.)
La structuration précède toutes les opérations qui concernent le look ou l’apparence des contenus. Quand la structuration des infos est négligée ou volontairement zappée, les informations clés sont difficiles à localiser et le message essentiel est noyé dans l’ensemble des autres messages.
Certains styles graphiques se caractérisent par une hiérarchisation minimale. Il s’agit donc de faire un choix clair dans ce domaine et d’éviter une hiérarchisation indécise.
➜ Créez un tableau Pinterest consacré à des publications sur lesquelles le texte est fortement hiérarchisé. Créez ensuite un second tableau regroupant des publications sur lesquelles le texte est très peu hiérarchisé.
➜ Vous partagerez ensuite, via Slack, les adresses de ces tableaux.
Couleurs et nuanciers
Dans le domaine de l’utilisation des couleurs, Je n’ai pas de formule mnémotechnique à vous proposer. Quatre points importants sont à retenir.
Contrastebasé sur la luminosité (ou valeur de gris)
Étagement régulier des valeurs des couleurs d’un nuancier
Symbolique prise en compte dans le contexte culturel d’utilisation du produit de communication
En design graphique comme en peinture, dans la pratique, le nuancier utilisé dans une composition est décomposé en de nombreuses nuances, en particulier dans les images. Si vous devez déterminer le nuancier utilisé dans l’affiche ci-dessous, vous êtes contraints de trancher concernant le nombre de jaunes ou de gris utilisés. Un choix similaire s’impose pour déterminer le nuancier de l’affiche Gedimat présentée plus bas.
On décide souvent de ne pas prendre en compte les nuances des couleurs présentes dans les images. Dans ce cas, pour l’affiche ci-dessous, le nuancier se limite à 3 couleurs, le gris très clair (blanc), le jaune et le noir.
Le gris très clair visible sur l’image de l’affiche Kiloutou est en vérité du blanc. Pour s’en assurer, il suffit de prendre connaissance de la charte graphique de Kiloutou, revue en 2016 par l’agence AKDV. Lisez la critique de cette charte sur le blog de Graphéine (lien ci-dessus), vous mesurerez l’enjeu d’un choix typographique pour le design d’un logo. Nous approfondirons ces questions au niveau 2 de la formation Com-Créa.
Un peu plus haut, il est question de couleur dominante, de couleur médiante et de couleur tonique. Le vocabulaire est ici le même que dans la musique… ou dans la peinture (de chevalet) ! Pour faire simple nous parlerons de rapport quantitatif concernant les couleurs. Il s’agit de répartir les couleurs du nuancier sur des surfaces inégales : une très grande surface, une ou plusieurs moyennes surfaces et une toute petite surface.
La couleur couvrant la plus grande surface est nommée couleur dominante. Il s’agit souvent de la couleur du fond. La couleur couvrant la plus petite surface est nommée couleur tonique. Il s’agit souvent d’une couleur qui se détache visuellement dans le contexte chromatique de la composition.
Les couleurs médiantes sont celles qui se répartissent sur les surfaces intermédiaires. Avec un nuancier de 2 couleurs, il peut ne pas y avoir de tonique ou ne pas y avoir de médiante (c’est une question de surfaces de répartition). Avec 3 ou 4 couleurs, il est plus facile de faire jouer le rôle de tonique, d’accent ou de focus à l’une des couleurs.
➜ Sur l’affiche Kiloutou présentée plus haut, quelles sont la couleur dominante et la couleur tonique ?
Note sur la fonction des couleurs
Pour décrire les couleurs en design graphique, on focalise parfois le propos sur la fonction de chaque couleur dans la composition. Quand on dit que la couleur dominante est généralement la couleur de fond, l’expression “couleur de fond” se rapporte à la fonction de la couleur (et non à sa quantité).
Ainsi, on parle de couleur de focus ou de couleur d’accentuation pour désigner une couleur servant à mettre en valeur un élément de la composition, la partie d’un texte ou la partie d’une image.
On peut aussi parler de “couleur de texte” ou de “couleur de titrage”, pour désigner les couleurs utilisées respectivement pour le texte courant et pour les titres.
Sur l’affiche Gedimat présentée ci-dessus, vous remarquerez que le rouge est la couleur dominante… La tonique est le bleu vif, sur la gauche de la coque du bateau.
➜ Toujours sur l’affiche Gedimat, présentée ci-dessus, quelle est la couleur de texte ?
D’un point de vue fonctionnel, vous noterez que le rouge est utilisé comme couleur de focus dans la partie inférieure de l’affiche (pour mettre en valeur les dates).
➜ Combien de couleurs sont utilisées dans l’affiche Gedimat ? Quel est le nuancier utilisé pour composer cette affiche ?
Typographie et lettrage
En matière de choix typographiques, rappelez-vous que nous avons classé les polices de caractères dans 5 grandes catégories (acronyme DANSE…) :
les sérieuses (caractères à empattements triangulaires ou polices “serif” comme le Times ou le Merriweather)
les neutres (caractères sans empattement ou police “sans serif” comme l’Arial ou le Roboto)
les amicales (caractères cursifs ou manuscrits comme le Comic Sans ou le Pacifico)
les expressives (caractères très contrastés à la forte présence comme le Bodoni Poster ou l’Abril Fatface
les décoratives (caractères à l’usage très limité du fait de leurs particularités comme le Blippo Black ou le Monoton)
Vous vous souviendrez de quatre principes fondamentaux.
Utilisezles typos expressives, décoratives ou amicales, pour le titrage seulement (jamais pour le texte courant)
Utilisez,pour le texte courant, les typos neutres ou sérieuses, dans la mesure impérative où elles sont disponibles en au moins 4 styles (Regular ou Normal, Bold ou Gras, Italic ou Italique, BoldItalic ou Gras Italique)
Utilisez un système de ratio proportionnel pour étager la taille de vos caractères en fonction du niveau hiérarchique du texte
Prenez en compte la symbolique culturelle des typos que vous utilisez dans vos projets
La composition graphique fait appel à de nombreuses compétences. Elle est mise en action après avoir choisiles couleurs (le nuancier), l’accord typographique (la combinaison de polices de caractères) et éventuellement les formes structurantes.
Vous essaierez de vous rappeler de la nécessité de mettre en œuvre les quatre opérations clés listées ci-dessous.
Aligner les informations qui doivent être lues ensemble
Espacer les blocs d’informations pour bien les individualiser
Équilibrer les masses graphiques de telle sorte que la composition ne bascule ni à droite ni à gauche
Rythmer la disposition des blocs et des formes dans la page
Au cours du niveau 1 de la formation “Com-créa” et “PAO-Tech”, vous avez pris connaissance de plusieurs styles graphiques et de plusieurs types de composition. Avez-vous pris le temps d’en sélectionner et d’en analyser quelques uns en détails pour être capables de les mettre en œuvre ?
Concernant le style graphique vintage, il est assez vite nécessaire de faire des distinctions entre les décennies du XXe siècle. Consultez l’article Graphic design styles (… à faire traduire en français par Google) pour mieux vous y retrouver.
Les styles de compositions ne doivent pas être confondus avec les styles graphique. Il s’agit d’une des caractéristiques d’un style graphique.
Prenons l’exemple du style que nous avons étudié de manière plus approfondi, celui du style suisse et international. Choix des typos : linéales. Choix des couleurs : très peu de couleurs et souvent du noir ou du blanc dans le nuancier. Choix des formes : géométriques et/ou épurées. Choix des compositions : utilisation d’une grille, orthogonalité et/ou inclinaison du texte, composition asymétrique.
➜ Complétez votre compte Pinterest en consacrant un tableau à chaque style ou type de composition que vous souhaitez pouvoir utiliser ultérieurement.
Les intitulés de vos tableaux et sous-tableaux dans Pinterest doivent être précis et véritablement en rapport avec leur contenu. Constituez des tableaux ou des sous-tableaux présentant au moins une dizaine d’épingles pertinentes. Plus votre classement sera logique, plus vous pourrez exploiter facilement les ressources collectées.
Se souvenir des opérations à effectuer en design graphique
Une carte disponible sur Mindmeister vous propose un moyen de vous souvenir des principes essentiels à mettre en œuvre lors d’une composition graphique.
➜ Repérez dans les illustrations publiées dans ce cours la mise en œuvre de compositions CHARTÉES. Annotez ces images de manière à mettre en évidence les opérations mentionnées et partagez-les via Slack.
Je vous proposent deux résumés des opérations fondamentales à mettre en œuvre pour le TP1. Présentés sous forme de diaporamas ils vous parlent de compositions MALINES et de graphisme ÉCLAIRÉ. Le premier correspond à des critères minimum d’attendus au niveau 1 de la formation. Le second diaporama présente des critères plus exigeants (mais toutefois réalistes à ce niveau de la formation).
Je termine ce rappel des notions essentielles du niveau 1 de la formation com-créa en vous rappelant que le premier principe de design est le principe de simplicité.
Un petit ouvrage disponible en ligne semble résumer tout cela sur pro-actif.ca. Enfin… sur la couleur, c’est un peu léger 😉
Jetez un œil sur un des articles d’Henri Lotin à propos du principe de simplicité, vous apprendrez des trucs intéressants ! Le site de Lotin Corp Academy est plein de pépites pour les webdesigners et les graphistes en herbe.
Je recommande les articles du “blogue” de Mlle Rouge… elle nous y parle clairement de fondamentaux (de son point de vue) ! C’est plutôt sensé 😀
➜ Regroupez ces liens pour nourrir votre veille informationnelle. Je vous recommande l’utilisation de Deskyo pour regrouper vos favoris (l’inscription est gratuite).
Check list des opérations à effectuer
J’ai composé une liste de toutes les opérations à effectuer lors de la mise en œuvre d’un produit de communication visuelle. Chaque case mentionne une opération.
En cochant les 25 cases, vous êtes sûr d’avoir pris en compte tous les aspects essentiels du design graphique. La dernière case oriente le travail vers une publication imprimée mais il suffit de remplacer « imprimeur » par « hébergeur » pour modifier l’orientation de la publication 😉
Le dossier que vous êtes invités à télécharger est un dossier de page Web. Celui-ci contient deux dossiers, « css » et « js », avec les fichiers qui vont bien à l’intérieur. Vous trouverez aussi un fichier « index.html »…
➜ Un double clic sur le fichier index et vous voilà parés pour faire le point à la fin des prochains TP 😉
Approfondir le sujet
Pour trouver en ligne plus de documentation sur le sujet vous pouvez toujours aller faire un tour sur mes sites Netboard :
Dans ce cours, après avoir pris le temps de soigner la structuration d’un texte intégré dans une page HTML, nous allons appliquer à la page un style graphique (un look, un habillage, une apparence soignée…).
➜ Pour réaliser l’exercice, nous allons établir un lien entre une feuille de style CSS et la page HTML que nous avons élaborée lors du cours précédent. Téléchargez les pages HTML sur lesquelles vous avez travaillées lors de la séance précédente.
La démarche que nous suivons vous amènera, pas à pas, à la mise en ligne d’une page Web optimisée pour la consultation en ligne sur tous les écrans. Le diaporama ci-dessous détaille la démarche complète.
Appuyez sur la touche J pour voir les vignettes de toutes les diapos, sur la touche P pour imprimer le diaporama et sur la touche T pour visionner le diaporama normalement
Le fichier HTML présenté sur la 5e diapositive est mis à votre disposition avec les fichiers HTML sans CSS à télécharger précédemment.
Compléter et faire valider son code
Nous devons nous assurer que le code que nous avons produit est conforme aux exigences du Web. Pour vérifier cela, nous utiliserons des extensions de Brackets, installées préalablement par nos soins. Il s’agit de :
Beautify
HTML Skeleton
Nu Markup Checker
Leur installation et leur prise en main sont présentées sur cette fiche de cours : Utiliser les extensions de Brackets. Il n’est pas nécessaire d’installer pour le moment l’extension “Open in browser” mentionnée en dernier sur la fiche.
Je rappelle qu’un cours assez bref, intitulé Personnaliser Brackets, est disponible sur ce site.
➜ Je vous demande donc d’installer les 3 extensions mentionnées et d’en tester l’usage. Concernant HTML Skeleton, prenez bien la précaution d’ouvrir une nouvelle page avant de faire des tests !
➜ Je vous propose ensuite de nous retrouver en classe audio sur Zoom, pour faire un point sur l’usage de ces extensions. Je vous montrerai en partage d’écran ou sur de courtes vidéos comment utiliser ces extensions pour optimiser le code de vos pages HTML.
Nous verrons notamment :
Comment indenter rapidement le code source avec “Beautify”
Comment insérer la balise meta viewport avec “HTML Skeleton”
Comment repérer d’éventuels erreurs de codage avec “Nu Markup Checker”
Appliquer un style graphique déjà codé
Pour réaliser la suite du cours, vous avez besoin de télécharger un dossier intitulé « css », dans lequel se trouvent 4 feuilles de style déjà prêtes :
➜ Pensez à décompresser l’archive en .zip pour accéder aux feuilles de styles. Ne modifiez surtout pas le nom du dossier “css” et placez ce dossier dans un dossier nommé comme votre fichier HTML (“django” ou “bilbo” ou “rancoon” etc.) dans lequel se trouvera donc, l’un à côté de l’autre, le fichier “nom-de-fichier.html”et le dossier “css”.
Pour appliquer ces styles à votre page il va être nécessaire de placer dans le <head> une instruction HTML qui va permettre au navigateur de savoir
que telle feuille de style doit être appliquée aux éléments HTML
où trouver cette feuille de style (dans le dossier “css”)
➜ Après avoir placé fichier HTML et dossier CSS dans un même dossier, vous allez donc intégrer la ligne de code ci-dessous, soit en la recopiant, soit en effectuant un copier-coller, soit en utilisant HTML Skeleton puis en complétant la ligne insérée.
Voici la ligne à insérer dans le <head>, sous le <title>, dans sa forme définitive (avec l’url de la feuille de style nommée « simple.css ») :
<link rel="stylesheet" href="css/simple.css">
➜ Le navigateur est averti par le code qu’il va devoir prendre en compte une ressource externe (<link>). Il est averti que cette ressource est une feuille de style (« stylesheet » = feuille de style, en anglais…) et le code lui indique où se trouve la feuille de style et comment elle se nomme (il n’est pas question qu’il tienne compte des feuilles de style voisines…).
➜ Voyez comment le navigateur affiche désormais votre page HTML…
Cela n’a plus rien à voir avec du texte en Times, noir sur fond blanc, collé à gauche de la fenêtre de navigation ! 😀
➜ Changez maintenant le nom de la feuille de style en le remplaçant par celui d’une des 3 autres feuilles placées dans le dossier « css ». Observez les changements.
Vous comprenez maintenant pourquoi il est si important de bien structurer son texte dès le départ. En effet, il est possible de proposer des variantes de présentation, sans toucher au texte. Il suffit de changer ou modifier la feuille de style. Il y a la structure HTML d’un côté et la présentation CSS de l’autre. Ces deux types d’instructions sont pris en compte simultanément par le navigateur.
Le gros avantage de ce procédé est de pouvoir utiliser une même feuille de style pour des textes différents ou des styles différents pour un même texte… en modifiant une simple ligne de code ! 😉
Intégrer une des images collectées
Nous avons vu (à la fin du cours précédent) comment collecter et intégrer une image. Le moment est venu de placer les instructions HTML adéquates dans votre code source, pour que l’image de votre choix soit affichée dans le corps de la page. Je vous montre donc le code à placer à l’endroit qui vous semble le mieux adapté pour illustrer votre texte.
➜ Placez le dossier « img » dans lequel vous avez placé vos images (cours précédent) dans le dossier qui contient déjà le fichier .html et de dossier « css ». Intégrez le code indiqué plus bas en indiquant le nom de l’image de votre choix à la place de « nom-image.jpg ».
<img src="img/nom-image.jpg" alt="Description du sujet de l'image à des personnes malvoyantes">
➜ Ce code indique au navigateur qu’il doit afficher une image (<img>). Il indique également au navigateur l’endroit où se trouve l’image (ici, dans le dossier « img » situé à la racine — à coté — du fichier HTML). Le texte alternatif est complété afin de remplir pleinement son rôle (voir la fin du cours précédent).
Observez alors le résultat dans la fenêtre de votre navigateur. Testez l’affichage en version mobile ou responsive (touche F12 dans Chrome…).
➜ Changez de feuille de style (en modifiant le nom de la feuille appelée dans le <head>… Observez les changement de présentation dans votre navigateur !
Parvenus à ce stade, je vous invite à partager vos productions en commençant par renommer votre page HTML. Nommez-la “index.html”. Celle-ci sera la page d’accueil de votre futur site “one-page”. Ce site sera donc constitué du dossier contenant :
le fichier index.html,
le dossier css contenant les 4 feuilles de styles utilisables (même si la seule feuille de style utilisée est absolument nécessaire)
le dossier img contenant les images collectées (même si là aussi, seule l’image intégrée dans la page soit nécessaire)
➜ Compressez le dossier complet du futur site avant de le partager sur l’espace Slack de la formation.
Personnaliser les feuilles de style CSS
Pour vous faciliter la tâche, je vous ai préparé des feuilles de style prêtes à l’usage. Il se peut qu’elles ne vous satisfassent pas tout à fait et que vous ayez envie de les modifier. C’est tout à fait envisageable.
Pour faire cela, il va falloir apprendre à parler CSS. Comme pour le HTML, au début on y comprend pas grand chose et petit à petit on apprend à discerner les endroits où il est possible d’effectuer des modifications sans tout détruire.
Évidemment, vous allez parfois casser des feuilles de style… Ce n’est pas grave ! Cela ne va pas endommager votre navigateur ou votre éditeur de code, encore moins votre navigateur. Vous reviendrez en arrière, vous repartirez de votre point de départ et vous serez plus vigilants 😉
Changer les couleurs du site
Maintenant que nous disposons d’un dossier complet avec index, css et dossier d’images, nous ne parlerons plus de page HTML mais de site Web. Certes, le dossier du site n’est pas encore hébergé sur un serveur mais il s’agit bien d’un produit de communication destiné à la consultation avec un navigateur !
Les couleurs utilisées dans les feuilles de styles que je vous ai transmises ne vous plaisent pas forcément… Elles ont cependant été choisies pour fonctionner de manière optimale les unes avec les autres.
Nous allons envisager de modifier les couleurs utilisées dans la feuille de style nommée “dark-one.css”. Pour cela nous allons commencer par la dupliquer et par la renommer “dark-two.css”
En ouvrant le dossier de votre site dans Brackets et en ouvrant la feuille de style “dark-two.css”, vous remarquerez que j’ai indiqué en commentaire, en tête de fichier, les références des 3 couleurs utilisées dans la feuille de style “dark-one.css”. En survolant avec votre curseur le nom des couleurs, un aperçu de la couleur s’affiche dans un petit cadre.
Si vous cliquez sur le nom de la couleur et que vous tapez “cmd-E”, une fenêtre de paramétrage des couleurs s’ouvre dans Brackets et facilite grandement les changements à effectuer.
Vous constaterez que les 3 couleurs utilisées sont des variantes de teintes semblables ou analogues : une variante sombre, une variante moyenne et une variante claire. Pour modifier le nuancier, je vous propose de changer la teinte moyenne puis, à partir de cette teinte moyenne, de créer les variantes sombres et claires (une vidéo à ce sujet est disponible sur Slack).
➜ Commencez par faire vos changements dans une duplication de la ligne de commentaires. Vous utiliserez ensuite la fonction “rechercher-remplacer” pour changer les mentions des couleurs dans toute la feuille de style.
➜ Observez les changements de couleurs opérés. La couleur sombre est toujours la couleur de fond. La couleur claire est utilisée pour le texte. La mouleur moyenne met en valeur les titres,le chapô, les filets et les bordures du cadre de l’image.
En apprendre un peu plus sur les CSS
Voici quelques sites que je vous recommande pour débuter avec les CSS.
https://marksheet.io/ (à consulter avec Chrome pour demander la traduction automatique en français)
Dans ce cours nous allons apprendre à organiser les contenus d’une page HTML pour préparer leur stylisation. Pour cela nous allons utiliser deux structures rédactionnelles basées les 2 plans indiqués ci-dessous.
h1 – p – h2 – p – p – h2 – p – p – h2 – p – ul – p
h1 – p – h2 – p – p – h2 – p – h3 – p – p – h3 – p – p – h2 – p – ul – p
Nous allons utiliser des séparateurs pour isoler certains contenus et intégrer dans la page une citation, une liste de liens et des mots importants, afin d’enrichir le contenu de l’article. Nous verrons pour terminer comment intégrer une image.
Auparavant, nous allons détailler deux points importants :
les 4 composants de toute rédaction
les similitudes entre design “print” et design “hosted”
Faisons le point sur le rôle central de la rédaction, dans la publication en ligne en particulier, mais aussi dans la publication sur papier.
La rédaction Web (et toute rédaction, en général) est la combinaison de 4 composants : une structure cohérente, un vocabulaire précis, une syntaxe pertinente et une juste orthographe.
Sur MapsOfMind, pour ramener la carte à une vue d’ensemble après avoir zoomé sur un des sujets : rafraîchir simplement la page . 😉
Lors de la création d’une page HTML simple, la structure rédactionnelle est mise en place en même temps que les balises de titrage (heading), de paragraphes et de listes. La structure de base sur laquelle vous avez travaillé jusqu’à maintenant était celle-ci :
h1 – p – h2 – p – p – h2 – p – p
Concernant le choix du vocabulaire, de la syntaxe et de l’orthographe, vous avez collecté sur le Web des textes que je vous ai invité à simplifier (ou à étayer…) pour coller davantage à la structure ci-dessus.
➜ Je vous recommande cependant de relire vos textes simplifiés et, si nécessaire, de modifier la syntaxe (l’ordre des mots ou des phrases). ➜Ajustez également le vocabulaire pour que les idées à transmettre soit clairement communiquées… ➜ Pour terminer, si vous avez du mal à orthographier correctement vos textes, faites relire vos productions à des personnes compétentes.
Similitudes en design “printed” et “hosted”
Avant de vous demander de travailler sur la structuration du texte intégré dans votre page HTML, je voudrais revenir sur les opérations communes à la communication sur papier et la communication sur fenêtre de navigation. Je vais insister sur 3 points :
La structuration quelque soit le format
la stylisation pour montrer l’important
la coloration pour favoriser la lecture
Structurer quel que soit le format
Je mets en relation de similitude la communication imprimée (printed) et la communication hébergée (hosted). La première a pour support de lecture un support analogique de dimensions fixes (le plus souvent une feuille de papier). La seconde a pour support de lecture un support numérique de dimensions variables (la fenêtre d’un navigateur, affichée en plein écran ou non).
La page imprimée est structurée dans un format donné, une fois pour toutes, mais la page hébergée est structurée, une fois pour toutes, pour plusieurs dimensions d’affichage.
Cela nous oblige, en design graphique (quel que soit le mode de publication), à concentrer nos efforts sur la structuration des informations. Nous devons veiller à ce que que la structure logique des contenus soit toujours perceptible, quelque soit le format de présentation au public (y compris sous la forme la plus basique, sans autres CSS que celles du navigateur utilisé).
S = DHO (Structuration = découpage à chaud = Découpage + Hiérarchisation + Ordonnancement)
La nécessité de structurer les contenus ou blocs d’informations, à l’échelle de la page entière ou des différentes parties de la page n’est pas le seul point commun entre le design pour l’imprimé et le design pour l’hébergé.
Styliser pour montrer l’important
La stylisation est la modification des formes et des couleurs du contenu d’une page pour rendre la communication plus efficace (et non principalement plus belle…). il s’agit de mettre en évidence ce qui est le plus important.
En design graphique, cela se traduit très rapidement par le choix d’un nuancier de couleurs et d’une combinaison typographique, tous deux axés sur la visibilité et la lisibilité.
Les concepteurs des navigateurs n’ont pas jugé utile d’aller plus loin que la mise en place de styles graphiques très simples (styles par défaut des navigateurs). Ils laissent aux designers graphiques le soin d’assurer toute la stylisation supplémentaire voulue, en fonction des contextes de publication.
Les styles par défaut des navigateurs
Les navigateurs disposent de styles graphiques par défaut. Ces styles, très simples, permettent de visualiser les choix structurels effectués.
Les deux couleurs utilisées sont le noir et le blanc. Noir pour les textes et blanc pour l’arrière plan. La famille typographique utilisée par défaut est souvent le Times, utilisée en 4 fontes (Regular, Bold, Italic et Bold italic).
Les titres de niveau 1 sont présentés avec une force de corps plus importante que les titres de niveau 2. Il en est de même pour les titres de niveau 2 par rapport aux titres de niveau 3, etc. Tous les titres sont en caractères gras (Bold) et tous les paragraphes sont affichés en caractères normaux (Regular)
Notez qu’en design pour le Web, la graisse d’un caractère est indiquée par un nombre allant de 100 à 900. Un caractère normal (Regular) a une graisse de 400, un caractère gras (Bold) a une graisse de 700.
➜ UTILISER L’EXTENSION WHATFONT
Pour analyser les polices de caractères d’une page Web, je vous recommande l’utilisation de l’extension Whatfont. Même s’il est possible d’inspecter les polices de caractères avec les outils de développement de Chrome (Afficher > Options pour les développeurs > Outils de développement), l’extension WhatFont offre quelques avantages (voir ci-dessous)
Désactiver les CSS dans Chrome
➜ Ayant finalisé la rédaction de vos textes intégrés dans une page HTML, pouvez-vous percevoir la structuration de vos contenus rédactionnels (titres, sous-titres, paragraphes), en l’absence de toute stylisation CSS ?
Pour désactiver l’affichage des styles d’une page Web, dans le navigateur Chrome (recommandé dans le cadre de ce cours), je vous recommande l’installation de l’extension Web Developper.
En cliquant sur “Disable All Styles”, vous désactivez les CSS de la page consultées. En cliquant également sur “Disable Browser Default Styles”, vous désactivez les feuilles de styles par défaut appliquées par le navigateur.
Évaluer la perception de la structure sans stylisation
Le résultat est un affichage des contenus sous leur forme la moins sophistiquée qui soit. Dans ce cas, pouvez-vous affirmer que le plan rédactionnel est visible et que le message transmis est clairement compréhensible ? Si c’est le cas, c’est que la structuration (DHO) est bonne !
Vous constaterez visuellement qu’il est plus facile de percevoir la structure d’un texte lorsque ce texte est présenté (ou affiché) sur une petite largeur que sur une grande largeur.
Pour vous en rendre compte, quand vous êtes dans Chrome, appuyez sur la touche F12 de votre clavier (ou menu Afficher > Options pour les développeurs > Outils de développement) puis sur le bouton de simulation d’affichage sur mobile (Toggle device toolbar). Veillez à ce que le réglage de votre fenêtre de simulation soit réglée sur “Responsive” et actionnez la poignée de réglage de la largeur de l’affichage.
Coloriser pour favoriser la lecture
Nous avons vu quelle était l’importance du contraste de valeurs en design graphique, en particulier dans la communication imprimée. Voir pour rappel le cours intitulé Les couleurs en design graphique.
Dans la communication hébergée, la question du contraste des couleurs est centrale ! Il existe même des normes d’accessibilité très contraignantes imposant des ratios de contraste très élevés. La norme AAA, par exemple, permet difficilement d’utiliser plus de 2 couleurs pouvant être appliquées à des textes de taille inférieure à 14 pt (19 px environ) sur un fond donné.
Une couleur, en design imprimé ou en design hébergé, doit toujours être envisagée appliquée à une forme disposée sur un fond. Une couleur considérée isolément n’a aucune fonctionnalité en communication visuelle !
La couleur noire utilisée par défaut par les navigateurs pour afficher les textes codés en HTML ne présente de lisibilité maximale que sur fond blanc.
Que penseriez-vous d’un navigateur qui afficherait les textes de cette manière ? Pourtant le texte est bien noir !
Compléter la structure de la page HTML
Ce qui a été produit
Lors des activités proposées à la fin du cours précédent, vous avez mis en place une page html en vous appuyant sur des gabarits simples mis à votre disposition. Ces gabarits présentaient 2 structures rédactionnelles schématisées ainsi :
h1 – p – h2 – p – p – h2 – p – p
h1 – p – h2 – p – p – h2 – p – h3 – p – p – h3 – p – p
Je vous ai laissé libres de choisir la structure qui vous semblait la mieux correspondre à vos besoins en matière de rédaction. La seconde structure nécessite en effet la mise en place d’un texte plus long (et demande donc plus de travail) !
J’ai insisté sur le découpage des textes collectés pour qu’il corresponde à ces plans. Je vous ai demandé de bien équilibrer la longueur de vos paragraphes (en simplifiant le texte si nécessaire).
Je vous ai également demandé de bien aérer la présentation de votre code source pour faciliter la vision de votre structure dans votre éditeur de code.
➜ Avant d’aller plus loin, veillez à ce que vos titres permettent immédiatement de comprendre de quoi il est question. Il s’agit de faire en sorte que le message essentiel du texte soit perceptible au premier coup d’œil, à la lecture des titres et des sous-titres.
Le premier paragraphe est un paragraphe d’introduction nommé chapô. Il résume tout ce dont il va être question dans le suite du texte. Sa lecture doit donner envie de lire l’article, en informant déjà très clairement l’internaute sur l’essentiel !
Ce que nous allons ajouter
1 – Ajouter des filets séparateurs
Comme vous avez pu le voir sur la précédente image, quand tous les styles sont désactivés, les séparateurs revêtent une importance particulière. Dans l’exemple qui nous intéresse, ils permettent de mettre en valeur le chapô.
➜ Je vous invite donc à placer un filet séparateur avant et après le premier paragraphe qui suit le titre de niveau 1. Cela se code à l’aide de la balise autofermante <hr> (à ne pas confondre avec <br>).
Nous verrons plus tard comment les styliser et les personnaliser pour leur donner une couleur, une épaisseur ou une longueur différente.
➜ Vous allez également ajouter un filet séparateur à la fin de votre texte avant d’insérer un nouveau paragraphe d’une seule ligne de texte mentionnant votre nom dans une phrase comme celle-ci “Exercice réalisé par Prénom Nom”.
Cela va me permettre de ne pas trop me mélanger les pinceaux en prenant connaissance de vos publications 😉
2 – Ajouter une citation
➜ À l’endroit que vous jugerez le plus approprié, je souhaiterais que vous intégriez une citation. Inutile d’ajouter les guillemets, ceux-ci seront affichés (ou non…) lors de la stylisation CSS. Inutile, non plus, de mettre le texte en italique. Cela se fera (ou non…) avec l’application des styles.
Il est intéressant de savoir comment les navigateurs gèrent l’affichage de ce type de contenu (généralement en décalant la citation par rapport à l’alignement à gauche des paragraphes de texte courant)
Une citation s’intègre dans le code source entre les balises <blockquote> et </blocquote>.
3 – Ajouter une liste de liens
Votre texte traite d’un sujet dont il a sûrement été question dans d’autres articles en ligne, sur d’autres sites ou même, dans des livres publiés chez tel ou tel éditeur. Communiquez ces références à vos lecteurs.
➜ Commencez par élargir le champ de votre recherche et faites une sélections des meilleurs articles et des meilleurs références en ligne concernant le sujet de votre texte. Vous intègrerez les liens menant aux sites sélectionnés dans une liste non ordonnée que vous allez créer, dans un chapitre intitulé “En savoir plus”. Ce chapitre et la liste de liens seront placés entre le dernier chapitre de votre texte actuel et le dernier séparateur mis en place précédemment.
Une liste non ordonnée est aussi nommée “liste à puces” du fait que les navigateurs affichent chaque item d’une telle liste précédé d’une puce.
La création d’une liste non ordonnée se code entre les balises <ul> et </ul>, chaque item de liste (chaque lien dans notre cas…) étant positionné entre les balises <li> et </li>.
Une liste ordonnée serait codée entre les balises <ol> et </ol>.
Comment coder un lien hypertexte ?
Un lien hypertexte est codé entre les balises <a> et </a>. Le texte placé entre ces balises est nommé “intitulé du lien”. Les navigateurs affichent les intitulés de lien en bleu et soulignent cet intitulé. Cependant, ce simple codage ne suffit pas pour atteindre la page cible en cliquant sur le lien.
Pour rendre le lien efficace, il est nécessaire d’encoder l’adresse URL de la page cible dans la balise d’ouverture. On insère donc cette adresse de la manière suivante :
Dans cette ligne de code, https://domaine-site-cible.xxx est l’URL fictive du site cible et le code qui suit est une instruction spéciale. Elle ordonne au navigateur d’ouvrir la page Web ciblée dans une nouvelle fenêtre ou un nouvel onglet. Cette dernière instruction permet à l’internaute de ne pas perdre la page où il se trouvait avant de cliquer sur l’intitulé du lien, au cas où il rebondirait de lien en lien bien loin de votre page. 😉
➜ Examinez ci-dessous un exemple de liste de liens encodés en HTML, précédée d’un paragraphe d’introduction et du titre de niveau 2 “En savoir plus”.
Vous repèrerez également sur cette capture d’écran le codage d’une citation, entre balises <blockquote> et </blockquote>. Dans cette citation, les mentions oranges ( ) sont le codage de caractères insécables. Vous constaterez aussi que le Prénom et le Nom écrits dans la dernière ligne sont placés entre les balises <strong> et </strong>, ce qui les affiche par défaut en gras dans une fenêtre de navigateur.
4 – Mettre en valeur les mots importants
Votre article commence à prendre tournure ! Il est cependant entendu que dans le cadre de ce cours, je ne vous parle pas de référencement naturel ni d’expressions ou de mots clés pouvant optimiser le référencement de votre article par les moteurs de recherche. Cela vous obligerait à remanier bien davantage vos textes. Si le sujet vous intéresse, vous pouvez toujours vous référer aux cours Rédaction Web et Référencement Naturel.
Il existe cependant une technique simple pour optimiser le contenu d’une page Web en vue d’une meilleure indexation sur les pages de résultats des moteurs de recherche. Il s’agit tout simplement de mettre en valeur les mots importants du texte, tous axés sur le sujet principal de l’article. Pour cela il convient de les encoder entres les balises <strong> et </strong>.
➜ Mettez entre balises <strong> et </strong> les expressions ou mots importants de votre texte.
Le navigateur, comme nous venons de le voir, affiche en gras les mots “forts”. L’affichage en gras attire l’attention sur ces mots (comme pourrait aussi le faire un affichage en italique…). Mais c’est la rôle sémantique de la balise <strong> qui importe le plus ! La balise <strong> permet en effet aux algorithmes des moteurs de recherche de mieux analyser le sujet de votre article en sachant ce que vous jugez importants dans votre texte.
➜ Je vous propose un test imparable pour savoir si vous avez mis en évidence les bonnes expressions ou les bons mots. Vous affichez votre texte dans le navigateur et vous lisez seulement les mots et expresions en gras. Si vous parvenez à saisir le message essentiel de votre article, alors vous avez fait du bon travail… Sinon, vous devinerez sans peine ce qu’il faut améliorer 😉
L’alternative <b>
Il existe une autre balise permettant d’afficher un texte en gras, sans pour autant que ces mots en gras soient jugés “forts” ou importants. Il s’agir de la balise <b>, qui n’a pas de fonction sémantique particulière.
➜ Je vous invite, pour tester l’usage de la balise <b>, de mettre entre <b> et </b> tout le premier paragraphe, le fameux chapô (ou chapeau, selon les orthographes…).
Si des mots ont été placés entre <strong> et </strong> dans le chapô, ils ne seront pas affichés “deux fois plus gras”. Ils seront cependant pris en compte comme mots importants par les moteurs de recherche.
Fin de la structuration et préparation de la stylisation
Si vous examinez maintenant votre texte dans la fenêtre de votre navigateur, même en désactivant les styles par défaut du navigateur, vous devriez vous rendre compte des avancées réalisées.
Votre texte est prêt à être stylisé ! Je ne vous ai pas fait intégrer d’image pour le moment. L’affichage des images sans application de style CSS détruirait l’ordonnancement visuel sur lequel nous avons travaillé jusqu’à maintenant, en particulier si ces images sont de grande taille.
Nous aurons l’occasion d’insérer plus tard une illustration dans notre page Web. Je vais vous montrer dès maintenant comment nous procèderons.
Collecter des illustrations
La première étape consiste à se mettre en quête d’une illustration pertinente pour votre article. J’utilise ici le terme “illustration” pour désigner une image servant à “illustrer” un texte. Il peut s’agir d’une photographie, d’un dessin, d’une infographie, d’un pictogramme, etc.
Pas question de choisir une image qui ne soit pas libre de droits ! Vous irez donc faire des recherches thématiques sur le site pexels.com (qui effectue ses sélections sur plusieurs sites d’images en même temps). Vous pourrez aussi choisir une illustration dessinée sur la banque d’images Ouch.
Si vous êtes inspirés, vous pourrez prendre en main de formidables outils de de photomontage et d’assemblage de dessins tels que Photo Creator et Vector Creator. Vous produirez alors sans difficulté des illustrations personnalisées correspondant parfaitement à nos sujets… et cela sans débourser un centime ni même devoir vous inscrire sur une plateforme Web.
Si vous souhaitez illustrer votre texte avec des icônes, vous en trouverez un grand nombre sur icones8.fr ou flaticon.com. Vous n’avez que l’embarras du choix (gratuit et payant…) !
➜ Collectez ou produisez des images susceptibles d’illustrer votre texte avec pertinence. Partez du principe que pour une image publiée il faut en collecter 4, afin de faire le meilleur choix possible ! Placez le fruit de votre collecte dans un dossier que vous nommerez « img ».
Il n’est pas défendu d’utiliser Photoshop ou Illustrator. Souvenez-vous cependant que les images matricielles destinées à la publication en ligne sont en RVB et que leur formats d’enregistrement sont le JPG (ou JPEG), le PNG ou le GIF (pas de PSD, de TIF ou TIFF !). Pour les images vectorielles, leur format d’enregistrement est uniquement le SVG (pas de AI ou d’EPS !)
Intégrer une image
L’intégration d’une image s’effectue en paramétrant correctement la balise autofermante <img>. Il est nécessaire d’une part de préciser dans la balise <img> quelle est la source de l’image (indiquer au navigateur où se trouve l’image à afficher). D’autre part, il est obligatoire de formuler un texte alternatif (toujours dans la balise <img>).
Le texte alternatif sert à trois choses :
décrire l’image aux moteurs de recherche
offrir une alternative d’affichage si le navigateur ne parvient pas à afficher l’image
permettre aux robots lecteurs utilisés par les personnes malvoyantes de leur décrire l’image
Ce rouage essentiel du référencement des images est donc un exercice supplémentaire de rédaction. Vous en saurez davantage en consultant le dernier chapitre du cours RWRN.
➜ Examinez ci-dessous le code d’intégration de l’image “woman-typing-writing-1800×1200.jpg”. Dans quel dossier est-elle placée ? Où se trouve ce dossier ?
Vous noterez que l’image est nommée sans utilisation de lettre majuscule ni de chiffre en début d’intitulé, sans utilisation de point ailleurs que devant l’extension, sans lettre accentuée ni espace.
Par ailleurs, les dimensions de l’image, en pixels, sont indiquées en fin d’intitulé de l’image. Cela s’avère très utile en design pour le Web, vous le découvrirez très vite 😉
Nous allons voir dans ce cours comment se structure simplement une page HTML. Nous collecterons des informations sur le sujet. Nous verrons ensuite comment créer une page Web en récupérant un code simple et en l’intégrant dans un fichier avec l’éditeur de codeBrackets. Je vous inviterai alors à personnaliser le contenu rédactionnel du code source.
Voici deux schémas présentant la structure élémentaire d’une page HTML (on dit aussi page Web…). Le premier est un schéma en arbre, le second un schéma en cadres imbriqués. Dans la « vraie vie », il s’agit de lignes de code positionnées les unes sous les autres.
Dans le second schéma, les textes sont en anglais. Le premier texte (Page title) est placé entre <title> et </title>, deux balises HTML indiquant au navigateur où commence et où se termine le titre de la page. Ce titre de page s’affiche dans l’onglet de la fenêtre active.
Attention à ne pas confondre le titre de la page avec le titre des contenus de la page (entre balise <h1> et </h1>).
Le titre de la page est placé dans la tête du code source. La tête de code source est délimitée par les balises <head> et </head>.
Attention à ne pas confondre <head> et <header>. La balise <head> délimite l’entête de la page. La balise <header> délimite l’entête d’un article ou d’une section dans le corps de la page. Dans les schémas simplifiés présentés dans ce cours, la balise <header> n’est pas utilisée.
Le titre des contenus de la page (le GRAND titre devant sauter aux yeux du lecteur…) se trouve positionné entre les balises <h1> et </h1>, au tout début de la boîte délimitée par <body> et </body>. Dans le schéma en boîte présenté plus haut ce titre est en anglais (This is a heading), autrement dit “Ceci est un titre”.
Attention à ne pas confondre <header> (la balise HTML) et le mot anglais “header” ou le mot anglais “heading” signifiant tous les deux “entête”.
Sous le grand titre, nommé aussi “titre de niveau 1” (header one), se trouvent deux paragraphes. Je vous montre maintenant ce que cela donnerait sous la forme « code source », après traduction des textes en français (pour les balises elles-même : défense absolue de les traduire, les navigateurs ne comprennent pas le français…). Les lignes roses montrent les boîtes ou cadres imbriqués.
Je vous montre maintenant la structure HTML d’une page Web simple , disponible sur le site w3schools.com… en anglais. En cliquant sur le bouton “Try It Yourself”, vous pourrez visualiser un aperçu de cette page Web dans une fenêtre de prévisualisation.
Attention : si vous demandez la traduction automatique du site w3schools, les balises seront traduites sur la page du site. Elles resteront en anglais si vous cliquez sur le bouton “Essayez-le vous-même”.
Les flèches bleues montrent les éléments HTML déjà rencontrés dans la structure élémentaire étudiée plus haut. Je vous rappelle que la balise <!DOCTYPE html> indique au navigateur que la page est codé en langage HTML version 5.
En complément de ce cours, j’ai mis en ligne un autre cours dans lequel j’aborde de manière un peu différente le même sujet (la structure HTML élémentaire). Le cours s’intitule Manipuler le code source avec un éditeur de texte/code et propose d’examiner le code source d’une page Web consacrée aux pangrammes pour se familiariser avec le langage HTML.
J’ai réalisé une courte BD en ligne pour insister sur les fonctions du “head” et du “body”, de façon plus “cool”…
➜ Vous pouvez aussi visionner la courte vidéo du cours consacré à la structure HTML sur apprendre-a-coder.com.
En savoir plus à ce sujet (en bonus…)
Référence incontournable en matière de documentation sur les langage de codage pour le Web, le site de la fondation Mozilla, MDN web docs, est LE site où tout est dit. On y trouve un tutoriel intitulé Écrire une simple page HTML. Cela commence assez facilement… mais vous verrez que les choses se compliquent rapidement.
Le site w3schools.com, que nous avons mentionné plus haut, permet d’apprendre seul le HTML et de nombreux autres langages de codage. Un des points fort de ce site est son outil de test du code ou bac à sable (bouton “Try it Yourself” ou “Essayez-le vous-même” ).
Pour les plus intéressés d’entre vous, je recommande vivement de s’inscrire aux cours gratuits de codecademy.com. Le cours de HTML est très bien conçu. Codecademy propose aussi des cours payants, à un niveau plus élevé.
Pour les inconditionnels de la vidéo, il existe de bonnes chaînes YouTube consacrées au sujet Pour les plus exigeants, allez plutôt voir du côté de grafikart.fr, c’est gratuit, c’est sur YouTube mais c’est plus professionnel… et donc un peu plus difficile à appliquer.
Il existe aussi une série de vidéos payantes sur le site udemy.com(mais avec des échantillons gratuits qui traitent des bonnes raisons d’apprendre à coder).
Pour éditer le code source d’une page Web, je vous recommande l’utilisation d’un éditeur de code nommé Brackets.
Il est téléchargeable gratuitement et sans limitation sur le site brackets.io. Brackets fonctionne sous Windows, MacOs et Linux. Ceux d’entre vous qui utilisent un PC prêté par le GRETA disposent de Brackets parmi les programmes installés sur le portable.
Si vous avez l’habitude d’utiliser un autre éditeur de code, vous pouvez l’utiliser sans que cela gêne votre apprentissage. Vous trouverez une liste des principaux éditeurs de code sur de nombreux sites dont le BlogDuWebdesign.
Je vous propose, avant d’aller plus loin avec Brackets, de personnaliser cet éditeur de code. En lui ajoutant qualques extensions, Brackets va se révéler très pratique pour commencer à manipuler le code source d’une page HTML, une feuille de style CSS et plus tard un script JS.
Pour savoir comment ajouter des fonctionnalités à Brackets, consultez la fiche extensions-brackets.
Infos sur Brackets
Premiers pas avec Brackets, texte affiché à l’ouverture de l’éditeur, mis en ligne sur graphizm.fr
Bienvenue chez Brackets, un article à traduire en français avec Chrome, sur github.com
L’aide de Brackets, à traduire automatiquement si nécessaire, toujours sur github.com
Découvrir les usages de Brackets en vidéo avec grafikart.fr (très complet)
La même vidéo est intégrée dans un article de jenseign.com, un site consacré à l’apprentissage du HTML-CSS (niveau avancé).
Ce cours est une liste de références en ligne sur la couleur, complétée par des exercices simples et quelques commentaires. Vous y trouverez des liens vers des outils incontournables, en particulier pour le choix des couleurs en webdesign.
Un designer graphique est sans cesse confronté à la couleur. Son impact sur l’utilisation des produits qu’il réalise est ÉNORME !
Dans cette vidéo, Pierre Appell, enseignant, peintre et musicien, présente sans parole le rôle de la couleur et son importance dans le monde du design graphique et du marketing.
Le lexique de la couleur
➜ Activité en préambule Listez les termes que vous utilisez pour décrire la couleur et ses variations. Ajoutez à ces termes ceux que vous allez découvrir en consultant les sites mentionnés ci-dessous.
Attention : dans le dernier article mentionné ci-dessus, les définitions de la saturation et de la luminosité ne font pas consensus !
Il est nécessaire de clarifier le sens des termes que nous utilisons. Qu’est ce qu’une couleur assourdie, une couleur ternie, une couleur amortie, une couleur rompue, une couleur rabattue, une teinte désaturée, une couleur dominante, une couleur tonique, un camaïeu de couleurs, etc. ?
Teinte, saturation et luminosité
La couleur se définit le plus simplement par 3 paramètres faciles à différencier et à percevoir :
la teinte ou tonalité (bleu turquoise, rouge orangé, jaune citron, vert bouteille, etc.)
la valeur ou luminosité (couleur très sombre, couleur foncée, couleur claire, couleur pastel, blanc coloré, etc)
la saturation ou intensité (couleur vive, couleur pure, couleur ternie ou amortie, couleur assourdie, gris coloré, etc.)
Dans cette vidéo Pierre Appell présente les variations de teinte, de valeur et de saturation dans la peinture digitale.
Dans notre pratique du design graphique nous élargirons le concept de palette tel qu’il l’envisage ici, nous rapprochant davantage de l’ensemble des couleurs présentes sur la palette d’un peintre, au sens propre du terme “palette” (le support sur lequel le peintre dispose toutes les couleurs qu’il utilise pour peindre un sujet).
Un schéma de synthèse sur les variations de la couleur
Un concept voisin de la saturation : le chroma ou la chromaticité
➜ Exercice Sur l’illustration ci-dessus, extraite du sélecteur d’andrewwerth.com , dans quelle direction s’échelonne la luminosité ?
L’échelle de variation de la chromaticité varie entre une couleur donnée (plus ou moins lumineuse et saturée) et son équivalent sur une échelle de gris. Autrement dit, toutes les couleurs présentes sur le même niveau (échelon horizontal) d’une échelle de chromaticité ont toutes la même valeur (le même degré de luminosité).
Le système de Munsell (système HVC, Hue – Value – Chroma)
Les planches visibles dans le sélecteur de couleurs d’andrewwerth.com sont construites sur la base du système de Munsell.
➜ Vous rencontrerez souvent le schéma ci-dessus sous une forme dans laquelle l’auteur assimile chromaticité et saturation (exemple ci-dessous). Cette assimilation importe peu pour notre compréhension de l’articulation entre teinte, valeur et luminosité.
Les schémas précédent illustrent très bien le dispositif à partir duquel se construit un arbre de Munsell. Cet arbre nous permet de visualiser concrètement les faits suivants :
Toutes les couleurs pures n’ont pas la même valeur ou luminosité.
Plusieurs couleurs, de même teinte ou non, peuvent avoir la même valeur.
La perception de la couleur et les normes d’accessibilité
Discrimination chromatique
➜ Exercice Faites avant tout letest de discrimination chromatique proposé par le site de X-Rite. Si vous constatez une difficulté à distinguer certaines nuances, refaites le test une seconde fois. Si les difficultés persistent n’hésitez pas à consulter un spécialiste pour identifier plus précisément votre trouble de la vision.
Il est indispensable de situer votre perception des couleurs par rapport à la majorité des utilisateurs des produits colorés que vous allez concevoir en tant que designer graphique. Plusieurs graphistes et illustrateurs sont daltoniens (exemple de Loïc qui en tire même quelques avantages !).
Voici des sites sur lesquels une personne ayant une vision normale des couleurs peut se rendre compte dela manière dont les personnes ayant des difficultés à percevoir toutes les couleurs voient les choses.
Même si nous distinguons très bien les couleurs, plusieurs facteurs perturbent notre perception des couleurs dans l’environnement où se trouvent les objets colorés observés. En prendre conscience vous conduira à plus de rigueur dans les tests précédant la réalisation de vos projets de communication.
Contrastes de couleurs
Les couleurs voisines s’influencent mutuellement. C’est ce qui est expliqué dans la vidéo ci-dessous.
Métamérisme
Deux couleurs perçues identiques dans un contexte lumineux donné sont perçues différentes sous un autre éclairage. Cet effet se nomme le métamérisme
N’hésitez pas à télécharger les images proposées par les sites ci-dessus pour mesurer les couleurs indiquées comme identiques et vues comme différentes !
La notation informatique de la couleur
Les modes colorimétriques et les synthèses de couleurs
Le mode RVB s’appuie sur la synthèse additive (on ajoute des rayonnements les uns aux autres pour obtenir du blanc, soit le maximum de lumière). Le mode CMJN s’appuie sur la synthèse soustractive (on retire de la lumière en opacifiant le support pour obtenir du noir, soit le minimum de lumière).
L’affichage numérique des couleurs à l’écran s’appuie sur une synthèse additive par juxtaposition de pixels dont les 3 composants (luminophores) émettent chacun un rayonnement plus ou moins intense de rouge, de vert et de bleu.
L’impression en quadrichromie s’appuie sur un mélange de synthèse soustractive (pigments mixés sur le papier) et de synthèse additive (rayonnements réfléchis mélangés au niveau perceptif) obtenu par superposition et juxtaposition de points de trames.
Les différentes techniques de reproduction de la couleur ne couvrent pas toutes le même champ de couleurs. Les techniques d’impression utilisant des encres pigmentées couvrent les champs de couleurs les plus restreints.
Les conversions d’un mode colorimétrique dans un autre doivent donc se faire avec beaucoup de prudence et de précautions. Il en est de même pour la validation à l’écran de documents destinés à l’impression (la restriction du champ des couleurs imprimable doit être simulée à l’écran par le choix du mode colorimétrique approprié).
RGB, RGBa et notation hexadécimale
La notation hexadécimale est une notation “simplifiée” de la notation RGB. La notation RGBa prend en compte la transparence (canal alpha).
Le système de notation RVB (ou RGB) et le système de notation hexadécimal répondent au même besoin : indiquer au système informatique une valeur entre 0 et 255 pour chaque canal de couleur primaire, en synthèse additive.
➜ Exercices Pour ceux qui souhaitent s’entrainer à manipuler les couleurs en mode RVB (ou RGB), il existe un jeu intéressant sur CodePen. Il s’agit de deviner, parmi plusieurs couleurs, celle qui correspond aux paramètres affichés. Un autre jeu fonctionne sur le même principe avec les couleurs codées en hexadécimal : Guess a Color.
Les webdesigners utilisent principalement le système HEXADÉCIMAL (notation spécifique du codage RVB) pour paramétrer leurs feuilles de style. Les graphistes travaillant avec les imprimeurs privilégient la notation CMJN, associée au mode colorimétrique des documents qu’ils destinent à l’impression. Toutefois, plusieurs de leurs travaux étant publiés en ligne, ils utilisent aussi le codage RGB.
Se souvenir du code hexadécimal de quelques couleurs (gag !)
Le site http://bada55.io propose une liste de couleurs hexadécimales dont le nom dérive de leur codification informatique. Pour cela, l’auteur du site utilise le code suivant pour transposer les chiffres en lettres :
1 = I ou L • 2 = R • 3 = E • 4 = A • 5 = S • 6 = G • 7 = T • 8 =“ATE” • 9 = P … à vrai dire, chacun peut adapter le code ou le détourner !
Attention : cette notation n’a rien d’officiel, c’est un gag collaboratif, mis en ligne il y a plusieurs années (et toujours en http non sécurisé…). Le plus amusant est que dans certains cas, le nom codé de la couleur et la couleur elle-même collent plutôt bien (#e2071c – erotic, #907A70 – potato, #9a5720 – gastro, #acac1a – acacia, #ba6e15 – bagels) ! Vous en repèrerez plusieurs autres 😉
Ce codage humoristique ne doit pas être confondu avec les noms anglais normalisés attribués à quelques couleurs Web et pouvant être utilisés dans le paramétrage CSS des couleurs d’un site !
Avouez tout de même que, désormais, vous pourrez facilement coder en hexadécimal le vert acacia : #acac1a !
La notation HSL et ses limites
Pour faciliter le codage des couleurs RVB, les développeurs ont mis au point un système faisant appel aux 3 paramètres de la couleur : la teinte (Hue), la saturation (Saturation) et la luminosité (Luminosity).
Normalisé et reconnu par tous les navigateurs, ce système de notation intuitif a été très apprécié en son temps.
Lorsque les normes d’accessibilité ont vu le jour et qu’il a fallu étager les couleurs en tenant compte de leur ratio de contraste, HSL a vite montré ses limites !
Image extraite de l’article “Utiliser HSL pour vos couleurs”, sur lacascade.io
➜ Exercice
En utilisant le calculateur HSL de w3schools.com, comparez la luminosité perçue d’un bleu et d’un jaune paramétrés en HSL avec la même valeur de luminosité et de saturation. Que constatez-vous ? Comment expliquez-vous le succès rencontré par cette notation informatique des couleurs ?
Bien qu’incohérent sur les plans perceptif et normatif, HSL a toujours des défenseurs convaincus :
L’existence de plusieurs systèmes de notation informatique des couleurs pour les écrans nécessite l’usage de convertisseurs. En voici une liste (les formats de conversion disponibles sont indiqués sous chaque adresse).
Essayez de paramétrer un vert olive ou un bleu turquoise avec un sélecteur CMJN, RVB ou héxadécimal et un sélecteur HSL, HSV ou LCH (utilisez par exemple les sélecteurs proposés par w3schools. Avec quel outil et quel système de couleur parvenez-vous le plus facilement à paramétrer la couleur que vous avez en tête ?
Vérifiez la fiabilité des valeurs proposées par les convertisseurs en croisant les conversions. Utilisez par exemple le sélecteur Munsell-rgb-hex et vérifiez la luminosité des couleurs d’une même échelle de chromaticité dans le sélecteur hexa-hsluv.
Notez, pour une même couleur, les différentes positions des curseurs dans les systèmes de paramétrage présentés dans l’interface de l’outil Lch and Lab colour and gradient picker. Pour une même couleur, notez par exemple les différentes valeurs de Hue dans les différents modes. Examinez également les valeurs de luminosité et de saturation.
Le choix d’un système de notation des couleurs pour l’écran est souvent une question de pratique, individuelle ou sectorielle. Ce choix varie aussi en fonction des outils utilisés et des résultats attendus. Vous avez peut-être remarqué que les nuanciers générés par Lch and Lab colour and gradient picker ne sont pas constitués des mêmes couleurs suivant le mode de codage des couleurs !
Nous allons voir maintenant un système très performant pour lequel il faudra utiliser le codage hexadécimal des couleurs pour en exploiter les fonctionnalités.
La notation HSLuv et les notations dites perceptives
https://www.hsluv.org/ est l’adresse du site d’un nouveau système de notation de la couleur. Il n’est pas encore normalisé et il nécessite l’intégration d’un script JS pour que sa notation soit prise en compte par les navigateurs. Toutefois, ce système est beaucoup plus cohérent que le système HSL.
“HSLuv is a human-friendly alternative to HSL”. En français : “HSLuv est une alternative humaine à HSL” ! Autrement dit, HSLuv prend en compte la perception humaine de la couleur, de telle sorte que 2 couleurs codées avec le même pourcentage de luminosité sont vraiment perçue comme ayant la même luminosité !
Comparatifs des systèmes HSLuv et HSL
Dans le tableau ci-dessous, toutes les couleurs et tous les gris sont codés avec une luminosité fixé à 60%.
Pour choisir une couleur moyenne présentant un contraste optimal sur le blanc et sur le noir, référez vous au document Nuanciers accessibles en 3 couleurs. Vous pouvez utiliser un nuancier fonctionnel par rubrique voire un nuancier par diapositive… L’essentiel est que vos textes et vos images puissent se voir !
Vérifiez le contraste de luminosité entre les couleurs proposées par slidescarnival.com. Qu’en concluez-vous ?
Prendre en compte la répartition quantitative des couleurs ne suffit pas ! La présentation visuelle nécessite de prendre en compte la norme AAA Large (ou AA a minima…) pour garantir une bonne visibilité des textes dans les conditions de projection sur écrans blancs opaques.
Le premier point concerne la rédaction d’un premier jet, sur tel ou tel sujet. Une structure simple est proposée. dans le cadre de la formation suivie, il est impératif de suivre cette structure pour que les corrections portent sur des textes courts. Essayez de suivre le principe suivant : une seule idée par paragraphe, en quelques phrases courtes et bien articulées entre elles.
La structure proposée est la suivante :
Titre h1
Chapô p
Premier titre h2
Premier paragraphe p
Second paragraphe p
Second titre h2
Premier paragraphe p
Second paragraphe p
Je vous invite à rédiger, dans Stackedit, un texte à publier sur le Web, sur le sujet de votre choix. Utilisez la structure rédactionnelle indiquée (h1-p-h2-p-p-h2-p-p).
Le premier jet sera retravaillé par la suite. Sa rédaction permet de faire le point sur l’angle par lequel on souhaite aborder le sujet. Il permet d’esquisser un plan (ce qui constituera les parties du texte). Si vous n’avez pas besoin de référencer votre article sur le Web, il se peut que vous n’ayez que peu de choses à reprendre par la suite…
Choix des mots clés
Ici commence de véritable travail de rédaction Web.
Le plus simple pour réaliser cette étape est d’utiliser un éditeur de cartes heuristiques (ou cartes mentales, mind map en anglais).
Je vous propose d’utiliser l’application en ligne Text2MindMap. Celle-ci permet de saisir un texte indenté d’un côté et de visualiser une carte heuristique de l’autre côté, c’est d’une simplicité élémentaire !
Il s’agit, en partant du sujet principal abordé, de déterminer dans un premier temps l’expression courte ou le mot clé de la page (le tronc de l’arbre). Notez qu’il s’agira des premiers mots de votre titre h1.
Ensuite, en explorant le champ lexical et sémantique du sujet, il s’agit de trouver et noter les expressions et mots clés voisins, en les regroupant par affinité. Vous obtiendrez ainsi un arbre (ou plutôt la ramure d’un arbre) plus ou moins étendu selon le temps que vous y consacrerez.
Le site rimesolides.com permet d’élargir le champ lexical d’un sujet.
En activant les préférences de Text2Mindmap, vous avez le choix entre 2 types de colorations de la carte. La première (Branch) met en évidence les expressions et mots issus d’une même branche. La seconde (Level) met en évidence les expressions et mots clés situés à un même niveau hiérarchique.
Utilisation des mots clés
Cette section concerne l’utilisation des mots ou expressions clés et leur placement dans la structure HTML. Il s’agit ici de reprendre la rédaction produite à l’étape 1 et d’y insérer un mot ou expression clé principal et plusieurs mots clés secondaires.
Les rédacteurs Web chevronnés commencent par choisir leurs mots clés. Cela leur permet d’établir un riche lexique avant de rédiger leur article. De plus, en choisissant la manière de les répartir dans le texte, ils matérialisent un plan facile à percevoir, à la seule lecture des titres.
Dans le cadre des exercices proposés dans ce cours, voici quels seraient les attendus à un niveau débutant (ne pas utiliser les synonymes simplifie le travail à produire quand on débute) :
Titre h1 ➜ Expression ou mot clé principal en début de h1
Chapô ➜ Expression ou mot clé principal en début de chapô
Premier titre h2 ➜ Mot clé secondaire #1 en début de h2
Premier p ➜Mot clé secondaire #1 en début de p
Second p ➜ Rédaction libre
Premier titre h2 ➜ Mot clé secondaire #2 en début de h2
Premier p ➜Mot clé secondaire #2 en début de p
Second p ➜ Rédaction libre
Voici quels seraient les attendus à un niveau plus avancé (utilisation des synonymes et expressions connexes) :
Titre h1 ➜ Expression ou mot clé principal en début de h1
Chapô ➜ Synonyme du mot clé principal en début de chapô
Premier titre h2 ➜ Expression ou mot clé secondaire #1 en début de h2
Premier p ➜ Synonyme du mot clé secondaire #1 en début de p
Second p ➜ Synonymes du mot clé secondaire #1 dans le p
Second titre h2 ➜ Expression ou mot clé secondaire #2 en début de h2
Premier p ➜ Synonyme du mot clé secondaire #2 en début de p
Second p ➜ Synonymes du mot clé secondaire #2 dans le p
Les outils de la rédaction Web
Voici une liste de sites sur lesquels les auteurs partagent leur choix des meilleurs outils de rédaction Web.
Pour ma part, si je devais choisir un seul outil parmi tous ceux dont il est question ici et là, ce serait un outil de synthèse vocale !
J’utilise la synthèse vocale proposée par MacOs (réglages dans Préférences Système > Dictée et parole). Windows 10 propose un outil nommé « lecteur immersif » (que je n’ai jamais utilisé 😱). Pour des textes courts vous avez la possibilité d’utiliser les outils de démonstrations cités dans la carte XMind mentionné plus haut.
Paramétrage et utilisation de la synthèse vocale sur MacOs
La lecture automatique d’un texte par un robot permet de repérer à l’oreille (de manière infaillible) tous les points suivants :
les phrases trop longues
les erreurs de ponctuation
les fautes de syntaxe
les oublis dans une phrase
etc.
Inutile d’apprendre des règles compliquées. Écoutez les textes que vous avez rédigés et corrigez les pour faire en sorte que leur lecture automatique soit fluide et agréable à entendre. Vous serez étonnés par l’efficacité du procédé !
Raccourcissez les phrases trop longues (en les divisant par 2 si nécessaire). N’hésitez pas à insérer des virgules pour mieux cadencer le rythme de lecture du robot.
Principes et méthodes de la rédaction Web
Disposant désormais d’outils pour explorer le champ sémantiques des mots clés sélectionnés, sachant où insérer ces mots clés et leurs synonymes, ayant expérimenté à quel point la rédaction Web est un travail de longue haleine… voyons rapidement quels sont les grands principes à suivre pour développer nos idées dans un article plaisant à lire pour notre lecteur cible.
L’essentiel en premier
Rédigez de manière à présenter au lecteur l’essentiel des informations dans les premières parties du texte. Vous avez certainement lu des choses sur le plan en pyramide inversée. C’est un plan rédactionnel parmi d’autres qui présente l’avantage de mettre l’accent sur ce point : l’essentiel en premier !
Vous avez noté que j’insistais beaucoup sur le fait de placer les expressions ou mots clés en début de titre ou de paragraphe. Cela va dans le même sens et permet au lecteur de saisir d’emblée votre propos.
Ce principe ou méthode est vivement conseillé pour toute publication en ligne. Il n’est pas toujours possible de l’appliquer, mais en suivant ce principe chaque fois que vous le pouvez, vous optimisez vos contenus.
Mentionner l’essentiel en premier permet de répondre très vite aux questions que se posent les lecteurs : qui ? quoi ? où ? quand ? … Je vous renvoie à la formule CQQCOQP (c’est cucul, c’est occupé !) ou hexagramme de Quintilien. Cette petite séquence mnémotechnique est très utilisée en communication écrite.
Toujours être simple et concis
« Entre deux solutions, toujours choisir la plus simple.” Il ne s’agit pas d’appauvrir le sens de votre propos mais de supprimer tout ce qui n’est pas indispensable. “La perfection est atteinte quand il n’y a plus rien à supprimer” écrivait Antoine de Saint-Exupéry. Pas de généralités, pas de tournures de phrases alambiquées, pas d’adjectifs ou d’adverbes superflus : écrivez, éliminez !
Écrire sans en rajouter prend plus de temps que d’écrire avec concision. Un texte se travaille, non pas seulement pour se développer mais aussi pour se simplifier, sans perdre de sa substance. Il s’agit d’élaguer, non de déraciner !
Faire des phrases courtes et écrire plus simplement
Une quinzaine de mots par phrase est l’idéal. Dès qu’une phrase approche les trente mots il faut impérativement faire 2 phrases (qui feront une quinzaine de mots chacune).
L’utilisation de la synthèse vocale, comme nous l’avons vu plus haut, permet de repérer à l’oreille les phrases trop longues. Il est parfois nécessaire de mettre en œuvre d’autres moyens pour améliorer notre rédaction (… et la lecture de nos textes).
La chasse aux ”qui-que” est un sport très pratiqué par les rédacteurs Web. Pour en savoir plus sur cette activité, je vous recommande de lire Comment rédiger des phrases plus courtes ?, sur web-creatif.net
J’ai mentionné dans la première partie de ce cours la nécessité de traiter une seule idée par paragraphe. On peut élargir ce principe. Un sujet par article, une idée par chapitre (sous un titre h2), une idée par paragraphe (entre balises <p> et </p>) et une idée par phrase !
📌 Editoile est une agence de visibilité Web, spécialisée en rédaction SEO. Leur blog est une mine de renseignements fiables. Vous trouverez dans un des articles de leur blog d’excellents conseils pour écrire plus simplement.
Le référencement des images
Le référencement des images devient primordial dans un contexte où les utilisateurs effectuent de plus en plus de recherches par ce biais. Google Images permet d’accéder rapidement à ce que nous cherchons, sans avoir à lire des lignes de texte sur les SERP. Pourtant Google ne reconnaît pas le contenu des images, il se fie au titre des images et au texte alternatif associé aux images.
Repérer et compléter le texte alternatif
Dans le code source d’une page Web, le texte alternatif se trouve entre guillemets, après l’attribut alt inséré dans la balise autofermante <img>. Rien de tel qu’un exemple visuel :
<img src="img/nom-image.jpg" alt="description de l'image">
Le texte en lien avec l’attribut alt de l’élément <img> a plusieurs fonctions :
il décrit l’image pour les moteurs de recherche qui ne savent pas encore interpréter correctement les images mais qui se servent de ce texte pour référencer les images
il s’affiche dans le navigateur, à la place de l’image, quand l’image ne peut être affichée correctement (pour diverses raisons)
il est lu par les lecteurs de site utilisés par les personnes malvoyantes quand elles naviguent sur le Web
Document complémentaire
Gabarit rédactionnel pour le Web : ce modèle au format pdf offre une grille de composition des différentes parties à rédiger pour constituer un article pour le Web.
L’exercice qui suit concerne une pratique courante de SEO (Search Engine Optimization ou Optimisation pour les Moteurs de Recherche). L’expression « triplette du bourrin » est signée Laurent Bourrelly.
Gérer le consentement
Pour offrir les meilleures expériences, nous utilisons des technologies telles que les cookies pour stocker et/ou accéder aux informations des appareils. Le fait de consentir à ces technologies nous permettra de traiter des données telles que le comportement de navigation ou les ID uniques sur ce site. Le fait de ne pas consentir ou de retirer son consentement peut avoir un effet négatif sur certaines caractéristiques et fonctions.
Fonctionnel
Toujours activé
L’accès ou le stockage technique est strictement nécessaire dans la finalité d’intérêt légitime de permettre l’utilisation d’un service spécifique explicitement demandé par l’abonné ou l’utilisateur, ou dans le seul but d’effectuer la transmission d’une communication sur un réseau de communications électroniques.
Préférences
L’accès ou le stockage technique est nécessaire dans la finalité d’intérêt légitime de stocker des préférences qui ne sont pas demandées par l’abonné ou l’internaute.
Statistiques
Le stockage ou l’accès technique qui est utilisé exclusivement à des fins statistiques.Le stockage ou l’accès technique qui est utilisé exclusivement dans des finalités statistiques anonymes. En l’absence d’une assignation à comparaître, d’une conformité volontaire de la part de votre fournisseur d’accès à internet ou d’enregistrements supplémentaires provenant d’une tierce partie, les informations stockées ou extraites à cette seule fin ne peuvent généralement pas être utilisées pour vous identifier.
Marketing
L’accès ou le stockage technique est nécessaire pour créer des profils d’internautes afin d’envoyer des publicités, ou pour suivre l’utilisateur sur un site web ou sur plusieurs sites web ayant des finalités marketing similaires.
