SYNTHESE DECO

Partie Hanse
1. Typologie du web

A. Web = internet ?

Internet = gigantesque infrastructure de réseau informatique, décentralisé, composé de

serveurs interconnectés à des terminaux utilisateurs, grâce au protocole TCP/IP. Ordinateurs
interconnectés

Web (world Wide web) = réseau d’informations comprenant des milliards de documents et
médias, composant les pages web, reliées les unes aux autres par la technologie hypertext
(http = hypertext transfer protocole).

Internet = support physique du web (http). Mais aussi supports des e-mails (smtp), transferts
de fichiers (ftp), peer to peer…

Ò Le web est une des applications d’internet

On dit site web et non site internet.

1
 B. Qui dirige internet ?

Personne ne dirige internet car c’est un réseau décentralisé. Certains organes sont toutefois responsables
de son bon fonctionnement :

• IETF (Internet Engineering Task Force) : crée un consensus sur les normes techniques
• ICANN (Internet Corporation for Assigned Names and Numbers) : délivre les noms de domaines et
adresses IP
• W3C (World wide web consortium) : Emet des recommandations sur les normes et technologies
web

C. Héberger un site web

Le serveur : un ordinateur connecté à internet et qui stocke et sert les données qu’on lui
demande. Notre routeur retranscrit ces données en un réseau local relié à notre ordinateur.

L’hébergement : un site web est hébergé sur un serveur relié au réseau internet.

4 types d’hébergement :

- Hébergement mutualisé / serveur partagé (une colocation) : économique, simple

- VPS (virtual private server) (un appart loué seul) : personnalisable
- Hébergement dédié / serveur privé (votre maison achetée) :puissant, rapide, très sécurisé, accueille
beaucoup de trafic
- Cloud (un appart avec des murs qui bougent) : évolutif

D. Localiser un site web

L’IP : adresse physique d’un site sur le réseau (ou d’un objet connecté, d’un réseau local)
Ò 193.105.133.152

Le nom domaine : adresse du site en langage courant

Ò ihecs.be

Le sous-domaine : utile pour diviser un domaine en plusieurs langue, faire une version mobile, une landing
page séparée, etc.

LE DNS (Domain name system) : système qui associe un nom de domaine à son adresse IP. Comme un
annuaire téléphonique.
2
URL (uniform ressource locator) : identifiant exact d’une ressource sur internet (ex: une page, un fichier)
Ò https://learn.ihecs.be/course/view.php?id=1595

E. Lire un site web

Pour afficher le site web à l’écran :

Le navigateur / browser : logiciel conçu pour charger et afficher un site web grâce au protocole http
Ex : Chrome, safari, firefox, edge, etc.

Les langages : html, css, js… permettent d’afficher le contenu, sa mise en page, ses animations, ses
fonctionnalités

F. Créer et gérer un site web

Pour créer un site web soi-même :

• CMS (content management system) : logiciel (en ligne) qui permet d’administrer un site web et son
contenu.
• Website builder : Variante plus moderne de CMS qui prend en charge la création d’interface
simplifiée (notamment en drag and drop), accessible sans notion de codage.

• Généralistes : pour tout type de site classiques

• Spécialisés : spécialisés en e-commerce, blogging, etc.

• Open source : mis à la disposition de tous, demande des compétences techniques

• Saas (service as software) : service payant fourni par une entreprise, mis à jour, dépannages rapides
3
 G. L’anatomie d’une page web

Page web : éléments constitutifs d’un site web, reliées entre

elles part des hyperliens :

• Les contenus : Texte, image, son, video… (agencés

seuls, en grille, en série, etc.)
• Le menu : système de navigation, avec ou sans
module de recherche
• Une hiérarchie : titres, sous titres, corps de texte,
légendes…
• Des éléments de navigations/interactifs : boutons
(call to action), fil d’ariane, champs de texte et
formulaires, etc.

H. Les catégories de sites web

On peut catégoriser les sites selon : leur fonctionnalité et objectif, le volume de contenu, leur
architecture, l’accès (privé, public), le degré de participation du visiteur.

• Moteur de recherche et databanks : rend accessible d’autres pages web ou des médias. Ex : google
avec une barre de recherche.

• Site vitrine : site informatif simple, présente une entreprise, une organisation, un événement, un
artiste, une personne, etc. Site « carte de visite », présentation de services, portfolio. Ex : resto.

• Site institutionnel : sites complexes contenant beaucoup d’informations, utilisés comme outil de
communication externe, mais aussi comme ressource interne pour les membres et toutes parties
prenantes. Ex : ihecs.be

• Sites collaboratifs et communautaires : site basé sur le contenu généré par l’utilisateur. Système de
communauté et de modération. Forums, wiki, etc. Ex : reddit.

• Sites d’informations et d’actualité : newsfeed de médias officiels ou indépendants. Magazines en ligne.

Ex : rtbf.

• Site Catalogue : site présentant des contenus (items) et doté d’un module de recherche avec système
de filtres et de catégories. Annuaires, comparatifs, site des ressources téléchargeables, site de
rencontre, etc. Ex : immoweb, marmiton

• E-Shop : site catalogue avec système de paiement. E-shop de produits, marketplaces (Amazon, Ebay,
Fnac…), booking en ligne. Ex : asos, zalando.

• Blog : blogs indépendants ou d’entreprises, parfois reliés à un site principal. Ex : milkywaybleueyes.

• Landing page / Micro site : one-page souvent destinée à accueillir le trafic d’une campagne marketing.
Ex : ghettogastro).

4
• Site experience : site faisant vivre une histoire ou mettant en avant l’interactivité et la technologie. Ex :
greta.

• Intranet : site accessible avec login/mdp, destiné à des fonctionnalités internes à une organisation, ou
un espace membre. Ex : learn.ihecs.be

• Web application : app accessible depuis un navigateur web sur le principe du SaaS (software as a
service). (n’est pas une native apps). Ex : facebook.com spotify.com pinterest.com drive.google.com
ubereats.com airbnb.com, etc.

• Sites Hybrides : mélange de caractéristiques principales et secondaires de plusieurs catégories

précitées. Ex : fuse.be.

I. Les catégories d’applications :

Contrairement aux sites web qu’on peut catégoriser selon leurs formes et leurs fonctionnalités, on va
plutôt classer les app par catégories d’usage. Les motivations et la manière de concevoir une app diffèrent
souvent de celle d’un site.

Site web : Business oriented ⟶ Répond à un besoin de l’entreprise

App : User oriented ⟶ Part d’un besoin utilisateur

En 2022, un utilisateur belge moyen utilise quotidiennement 10 applications mobiles, 30 par mois, 80 installées.

2. l’écosystème digital

A. Une communication Transmedia

Multimédia ⟶ Communication 360 ⟶ Transmedia

Aujourd’hui, tous les médias, tous les touchpoints interagissent, c’est d’autant plus vrai pour les médias
digitaux. On n’est plus dans une vision en silo. Une stratégie de communication prend donc en compte les
particularités complémentaires de chaque média.

Il est donc essentiel de connaitre l’écosystème (mix media) pour pouvoir activer les bons touchpoints, de
manière pertinente, de façon à ce qu’ils se complètent dans un objectif stratégique commun.

In english : Integrated campaign

B. Une communication interactive

L’époque du « top-down » est révolue. Autrefois passif, l’utilisateur est de plus en plus actif dans sa
relation avec une marque, un média d’information, une personne ou organisation publique ou privée.

L’écosystème digital permet cette interactivité, ce dialogue constant, voire une participation active de
l’audience. Avec son lot d’opportunités et de défis pour les communicants.
5
 C. Digital

Le glissement vers un monde digitalisé ne s’est pas fait en un jour. Mais le présent et l’avenir de la
communication sont assurément numériques. La communication digitale est en évolution constante. Ses
codes et ses outils changent à toute vitesse. Ce que vous apprenez aujourd’hui ne sera parfois plus vrai
dans 2 ans.

D. Du Offine au Online

Depuis 30 ans, les métiers de la communication et de l’information ont subi un bouleversement

qui s’est accéléré cette dernière décennie.

Dans un premier temps : les médias online étaient considérés comme des entités séparées, ils étaient
principalement utilisés comme des tactiques supplémentaires (bannering, emailing), l’investissements
pour ces médias étaient mineurs.

Web 1.0 touchpoints :

Dans un deuxième temps : un nouveau mix media complètement dépendant du digital, il y a une
spécialisation des techniques et une apparition progressive de nouveaux médias digitaux (dont les social
media) ainsi qu’un boom des investissements.

Web 2.0 touchpoints :

6
Les étapes de la digitalisation de la communication (J. Caudron) :

1) Les médias « analogiques » : la diffusion était limitée dans le temps et l’espace, il y avait
beaucoup de contraintes logistiques et financières dures à dépasser (produire un journal, une
chaine TV…) ainsi que peu d’espace pour de nouveaux acteurs, le marché de l’attention trusté par
les mass medias.

2) Apparition du digital : la création de contenus et offre médiatique est facilitée par les
ordinateurs, ainsi qu’une possibilité de créer sans contraintes.

3) Apparition d’internet : il y a une possibilité de diffusion à un plus grand nombre, sans contraintes
spatiales et temporelles.

4) Apparition des médias sociaux : il y a une ouverture sans limites du marché de l’attention, le
succès d’une idée ou d’un message n’est plus contraint par un système hiérarchisé et contrôlé,
désormais possible de prendre la parole sans acteurs/services tiers.

5) Apparition du mobile : on est en ligne partout, tout le temps, l’accessibilité à l’information est
accrue, ainsi qu’une diffusion accélérée.

Conséquences majeures :

• Mesurabilité et nouveaux metrics (GRP ⟶ Digital KPI’s)

• Nouvelles techniques et tactiques
• Spécialisation des métiers et évolution des anciens métiers
• Nouvelles possibilités stratégiques et créatives
• L’avènement de la data
• Dépendance à la technologie
• Production de contenus, et besoins en communication croissants
7
• Emprise sur toute la sphère économique, publique et privée

Aujourd’hui, en tant que communicants, il est essentiel de connaitre cet écosystème. Que vous soyez de
futurs journalistes, publicitaires, PR, organisateur d’événements. Dans l’espace marchand, non marchand,
culturel ou institutionnel.

L’online n’a pas remplacé l’offline, ils forment aujourd’hui un mix riche et complet où chaque
stratégie de communication doit puiser intelligemment.

+ Avantage : un monde incroyable, où toute l’information du monde est disponible, où la parole est
libérée. Des possibilités infinies pour les communicants.

- Inconvénient : un marché de l’attention extrêmement anarchique où le surplus d’information dérègle nos

capacités d’attention, et notre esprit critique. Un terrain hostile pour quiconque tente de faire passer un
message.

3. L’utilisateur digital

Le public est autonome et méfiant. Les messages «officiels » (publicité, information,

communications politiques…) n’ont jamais été si omniprésents, pourtant on ne les a jamais autant ignorés,
évités, voire méprisés.

« Les consommateurs ont maintenant le pouvoir de contrôler où, quand, de quelle façon et si ils veulent
être exposés à une marque »

Un avis ou une décision qui se construisait autrefois via des sources d’autorité ou des experts, se forge
maintenant de manière autonome. Je décide quand, comment et avec qui je m’informe, grâce à une
grande quantité d’informations disponibles.

Le public a donc renversé son rapport aux marques et aux médias. Il s’affranchit du discours «top-down» :
• la presse traditionnelle vs l’information sur les réseaux sociaux
• la publicité vs les avis et reviews en ligne
• le politique, les porte-paroles vs twitter et les bulles d’opinion

Empowerment du public qui force les professionnels de la communication à creuser certaines pistes :

Un utilisateur actif et qui prend la parole. Le public est devenu un consom-acteur capable de
s’informer, mais aussi de comparer, de participer ou même de contester les discours des médias et des
marques.
8
Il agit de manière volontaire sans attendre d’être sollicité, il prend aussi la parole sous forme d’avis et de
notes (systèmes des étoiles), conseils, remerciements… plaintes.

Un citoyen en quête de sens et de transparence. Les enjeux sociétaux du 21e siècle occupent une
place prépondérante dans l’esprit des consommateurs. Chaque entité communicante doit prendre en
compte ce tableau plus large. Aujourd’hui, une entreprise doit affirmer ses valeurs et ses combats, de
façon honnête et transparente (labels, etc.).

Un consommateur en quête d’authenticité qui se traduit par un appétit pour les contenus « bruts
», « sans filtres » et « sans effort esthétique ». Résultat : succès des formats « spontanés » Stories, reels,
photo dumb, etc. Ce consommateur est incarné par la génération Z nostalgique de l’esthétique
90’s/2000’s.

Ò Volonté d’une image candide et authentique même si volonté performative de l’image de soi.

Un consommateur en quête de légèreté dans un monde aux actualités anxiogènes. Une lassitude
vis-à-vis des messages commerciaux, product-oriented se fait ressentir. Cela donne du succès aux marques
qui ne se prennent pas au sérieux et qui activent le levier de l’humour.

Un client unique : un consommateur non standardisé, qui revendique sa singularité et n’appartient plus
tellement à des catégories préconçues. Il demande une offre sur mesure : éditions limitées, playlists,
publicités ciblées, feed d’actualité personnalisé, etc.

Segment of One : en marketing, la technologie permet progressivement de cibler indépendamment

chaque consommateur, au lieu de les regrouper par profils sociocomportementaux prédéfinis.

Un internaute impatient dans un monde d’instantanéité et avec une offre pléthorique, le

consommateur attend que la connaissance, les services, les produits ou le divertissement soient
directement et facilement accessible.

Vertus de la lenteur :

9
Snacking et Slow Content doivent cohabiter. C’est toujours la qualité des contenus (originalité,
créativité, crédibilité, utilité, capacité à susciter des émotions, etc.) associée à la qualité de leur ciblage,
leur démultiplication, et leur pertinence par rapport à l’émetteur qui garantira les meilleurs résultats.

4. Nouvelles approches

La vieille méthode, c’est le marketing d’interruption ou « outbound marketing » = Envoyer des messages
à une large cible avec des médias de masse.

A. Inbound marketing

Comment communiquer à ce nouveau consommateur ?

Une solution, c’est l’inbound marketing. Une approche marketing qui vise à faire venir l’utilisateur à
soi plutôt que l’inverse. Gagner son attention vs le solliciter de manière intrusive. Un nouveau parcours
utilisateur basé sur l’attirance volontaire de l’audience et visant à restaurer une relation de confiance
entre le destinateur et le destinataire.

C’est l’évolution du Permission marketing : une approche marketing qui vise à obtenir l’acceptation
explicite des consommateurs, en opposition à un marketing d’interruption.

On adresse des informations :

• pertinentes (utiles au consommateur)
• attendues (qu’il a accepté de recevoir)
• personnalisées (qui lui semblent destinées).

10
 B. Brand content et content marketing

Le Brand Content et Content Marketing sont une stratégie marketing qui consiste à créer et diffuser du
contenu pertinent, qualitatif et authentique, afin d’attirer, d’engager et fidéliser une audience définie.

En produisant leur propre contenu, les marques ne se contentent plus de livrer des messages publicitaires,
elles deviennent des médias à part entière.

En Brand Content, la marque devient média (créateur, producteur, diffuseur). En produisant des
expériences, elle transforme le statut de la consommation qui devient sociale et culturelle.

Cette mutation des «marques» en média remet en cause l’étanchéité entre la sphère des éditeurs et
l’univers des marques.

Conséquences :
• Démocratisation : tout le monde peut créer du contenu et court-circuiter les médias traditionnels
• Créativité : la liberté des formats en termes de longueur, de ton ou d’interactivité permet d’enrichir
l’expérience des utilisateurs.
11
 C. Typologie des contenus

D. Le User-generated content (UGC)

Le User-generated content (UGC), ou l’individu média : les utilisateurs deviennent média.

Participation croissante des individus dans la création et la propagation de contenus. La marque devient
une copropriété de l’entreprise et des clients (meilleure perception de la marque) —> Conversation
Un UGC peut être spontané ou induit.

Principes :
1. Interactivité, engagement et relation plus profonds (ambassadeurs de marque / influenceurs)
2. Une parole plus authentique, qui ne ressemble pas à de la publicité et donc plus attachante et plus
crédible
3. Permets de générer une grande quantité de contenu de marque à bas coûts
4. Earned media (amplification de la notoriété de marque via les réseaux des individus)

76% des consommateurs considèrent l’UGC plus honnête que les publicités et 86% pensent que les UGC
sont des indicateurs positifs de la qualité d’une marque ou d’un service.

Degré d’engagement :
• Un petit investissement en temps et effort demande une récompense minime.
Ex : poster une photo, partager une anecdote, voter.

• Un grand investissement en temps et effort demande une récompense à la hauteur.

Ex : créer une vidéo, écrire un article, designer un nouveau packaging

Incentives :
• Motivations intrinsèques (altruisme, self expression, plaisir, engagement avec la marque (fan)...)
• Motivations extrinsèques sociales (besoin de reconnaissance des pairs)
12
 • Motivations extrinsèques économiques (récompense matérielle ou financière).
Ex: concours avec un prix à la clé Le contenu est vu comme monnaie sociale. Dans une ère d’hyperproduction où
chacun est équipé pour créer du contenu, ce contenu peut être vu comme la «monnaie des médias sociaux». En plus de
créer les interactions et les discussions, c’est ce qui va permettre de se valoriser auprès de ses relations.

Le contenu est vu comme monnaie sociale. Dans une ère d’hyperproduction où chacun est équipé pour
créer du contenu, ce contenu peut être vu comme la « monnaie des médias sociaux ». En plus de créer les
interactions et les discussions, c’est ce qui va permettre de se valoriser auprès de ses relations.

Journal participatif

E. Referral marketing

Le Referral marketing est l’ensemble des techniques marketing utilisant la recommandation par des pairs
pour influencer le consommateur.

(word of mouth : bouche à oreille)

Le Referral marketing à pour caractéristiques :

• C’est la forme de publicité perçue comme la plus digne de confiance
• Elle génère un grand volume de leads qualifiés
• Elle est peu chère
• Elle peut se retourner contre l’entreprise ou l’organisation

Le referral marketing concrètement :

• être visible sur les plateformes (Google my business, seo, reviews platforms),
• générer (CRM, incentives, emailing, NFC, SMS, QR...),
• monitorer (surveiller son e-réputation et celle des concurrents),
• gérer (répondre, supprimer des reviews)
• promouvoir (utiliser des testimonials sur un site internet ou des social ads)

13
 F. Le web 3.0

3 évolutions du web :

1. Web 1.0 : le web statique (1990 > 2004) —> Read only : unidirectionnel, propose des
informations à consulter et il n’y a pas d’interactions.

2. Web 2.0 : le web participatif (2004 > Today) —> Read and write : un web C2C, avec des
communautés online. Échanges, créativité sont possibles grâce aux différents Forums > Blogs >
Réseaux sociaux et ce sont les géants du web qui centralisent le pouvoir (GAFAM ou FAANG).

Critique du web actuel :

• Centralisation du pouvoir par quelques acteurs

• Dépendance aux interfaces et aux algorithmes de ces leaders
• Failles de sécurité, notamment sur les données personnelles
• Manque de constance dans la gestion de son identité online (50 comptes, mots de passe,
etc)

3. Web 3.0 : le web décentralisé (Tomorrow ?) —> Read, write, control, own : c’est une
gouvernance partagée par tous les utilisateurs et un internet de la DATA. Sécurisé, identité
numérique contrôlée et détenue par l’utilisateur (Ultra personnalisation) mais très dépendant des
technologies de demain (blockchain, cloud, IA, VR, IoT …).

14
5. Media mix digital :

A. Modèle POE

Acronyme pour Paid, Owned and Earned Media. Tout plan média s’articule autour de ces 3 types de
médias.

Digital POE :

1. Owned media :

a. Website :

véritable plaque tournante de l’écosystème digital, le site web reste le support de communication online
numéro 1.

Cependant, les media sociaux grappillent partiellement certains rôles des websites. Cela s’explique par
l’arrivée constante de nouveaux réseaux variés et proposant des fonctionnalités concurrentes.

15
 b. SEO ((search engine optimization) :

Ensemble des techniques utilisées pour améliorer le référencement (la position et la visibilité), d’un site
internet dans les moteurs de recherche (google, bling, ecosia…) pour apparaitre au plus haut dans la
SERP (Search Engine Result Page).

Ces moteurs de recherche possèdent des algorithmes qui prennent en compte une grande quantité de
signaux pour évaluer la pertinence du site par rapport à la requête. Ces algorithmes évoluent en
permanence. Les crawlers visitent chaque page du web pour les indexer et pouvoir ensuite leur attribuer
des scores leur donnant leurs positions relatives à chaque demande d’un utilisateur.

Les résultats « non sponsorisés » d’une recherche sont les résultats organiques.

La SERP (Search Engine Result Page) d’un moteur de recherche comprend un grand nombre
d’éléments, notamment sur Google, qui fait évoluer la SERP constamment. Le but est d’y figurer le plus
haut possible, ou du moins de manière visible. Il est de plus en plus compliqué d’apparaitre en haut de
page. La faute aux nombreuses fonctionnalités internes de Google qui trustent l’espace disponible.

Il existe plusieurs types de résultats :

1. Les résultats organiques (SEO) : Résultats naturels, non sponsorisés, basés sur un référencement
optimisé. Sur certaines recherches, ces liens deviennent de moins en moins visibles.

Featured snippet : Extrait de page web qui répond directement à la question de l’internaute en
position 0. On peut optimiser son site pour les faire apparaitre.

2. Les résultats payants (SEA): liens sponsorisés via Google Ads.

Rich Snippets : éléments supplémentaires sous forme des balises de données structurées qui
viennent enrichir une annonce SEA avec : avis, FAQ, HowTo, événements, produits…

16
3. L’affichage supplémentaire :

• Knowledge graph : Condensé d’informations fourni par Google venant de multiples sources
• Pack local : référence un lieu/établissement via les infos de Google Maps et Google My
Business
• PAA (People Also Ask) : Questions les plus posées, relatives à votre requête
• Onebox : Elle se trouve en!position 0. C’est la réponse directe de Google à une requête dont
elles possèdent des data via une API
• Recherche universelle : ce sont des liens vers des produits Google (images, vidéos, maps)

17
Il existe en réalité des centaines de signaux analysés par google dans son algorithme. Le plus simple est
d’avoir en tête que Google tend à proposer la meilleure expérience possible aux utilisateurs.

Il va donc valoriser les sites :

• Les plus pertinents par rapport à la recherche
• Proposant une navigation fluide
• Ayant la meilleure réputation

Auparavant, on pouvait par exemple faire du « keyword stuffing », c’est à dire exagérer la répétition de nos
mots clés importants, dupliquer du contenu, acheter des faux backlinks. Ce sont des pratiques « red hats »
ou «sur-optimisation ». Aujourd’hui c’est pénalisé par Google, on favorise le « white hat ».

Tout doit être pensé pour l’utilisateur : stratégie de contenu pertinente, contexte de recherche, UX.
Si c’est utile et agréable pour l’utilisateur, ça sera bien ranké par Google.

c. Les réseaux sociaux :

Un écosystème hétérogène, un seul point commun entre les RS : la possibilité d’interagir directement avec
son audience.

Un écosystème en mouvement : de grandes plateformes solidement implantées mais des possibilités pour
de nouveaux médias sociaux (ex: Tiktok).

? Facebook :
Réseau généraliste, mais dont la cible vieillit en termes d’engagement. Feed de moins de moins «social» et
personnel avec un contenu principalement issu des médias et des entreprises (news et publicités).
Pérennité du système de groupes et d’événements + Marketplace.

? Instagram :
Réseau de l’image, terrain de jeu des marques et de l’influence. Favorise des business très «visuels»
comme art, food, retail, fashion, beauty… vs banking, transportation…

Multiplicité des formats avec un algorithme favorisant la vidéo depuis 2021, au détriment des images fixes.
Pas de liens sortants, ce qui permet à la plateforme de rester très homogène dans son contenu, et très
captivante (on ne sort pas facilement).

18
 ? Twitter :
Réseau de l’information et de l’opinion. Réseau de l’instantanéité, des breaking news, générateur de
conversation et de trending topics.

? LinkedIn :
Réseau professionnel avec un communication B2B privilégiée, B2C peu exploité. Potentiel de ciblage très
poussé.

? TikTok :
Réseau de l’User Generated Content par excellence ! Si une entreprise crée des contenus pour TikTok, ils
doivent s’intégrer au feed, dans la forme et les usages, bref être native. L’idéal est d’encourager la création
par l’utilisateur, l’entreprise est en retrait dans la proposition de contenu.

? Pinterest :
Passé d’un réseau de «scrapbooking» à un réseau de shopping, il est très intéressant pour la visibilité d’une
marque, tant qu’elle s’intègre dans les codes du réseau. La plupart des visiteurs recherchent des infos sur
la décoration, des objets, des vêtements, etc. Ils sont déjà dans une attitude d’achat (vs instagram).

Algorithme de suggestions par analyse d’image très performant + nouvelles fonctionnalités Epingle idée
(idea pin) performante pour les annonceurs.

? Snapchat :
Mis en danger par les fonctions Stories Instagram mais toujours populaire ! Mise beaucoup sur ses capacité
de AR (Augmented Reality), technologies qui peuvent être divertissantes (filtres), ou utiles.

? Youtube :
Initialement, pas vraiment un réseau social. Avec le temps, apparition d’une grande communauté de
créateurs de contenus, avec leurs followers, des centres d’intérêt niche et beaucoup d’interactions. Réseau
idéal pour les longs formats et l’interaction (//twitch) et possibilité de diffuser des formats vidéo plus long
qu’en TV.

d. E-mail marketing :

Un des plus anciens médias digitaux. On l’utilise pour acquérir et fidéliser son audience, c’est un moteur
de conversation et de lien.

C’est aussi un média de plus en plus sollicité, la fréquence de contact doit donc être maitrisée et le
contenu doit être pensé pour son audience : personnalisé et de qualité. L’e-mailing se base sur la
permission et se situe dans une logique de transparence, éthique et respect des abonnés.

19
Qu’est-ce que le Marketing automation ?
C’est l’automatisation de certaines actions en fonction du comportement des utilisateurs,
particulièrement utilisé en email marketing, où l’on peut déclencher des envois de mails « templates »
préconçus.

On le réserve notamment aux tâches répétitives qui suivent des scénarios marketing préconçus, pour
emmener le prospect vers la conversion finale (achat, inscription à un événement, prise de contact…).
Notion liée : Lead nurturing

Exemple :
• Relance par mail d’un abandon de panier
• Envoi d’un SMS avec une promotion après l’inscription gratuite à un site.

2. Paid media :

a. SEA (Search engine advertising)

Avec le SEO (search engine optimization), ils forment le SEM (search engine marketing). Il s’agit des liens
sponsorisés, dans résultats d’un moteur de recherche, sur la SERP (Search Engine Result Page).

Comment ça marche ?
Basé sur des listes de mots clés et des annonces textuelles et basé sur le PPC (pay per click), on ne paye la
régie publicitaire (ex : Google Ads ,Bing Ads) que si l’utilisateur clique sur notre annonce (cela permet un
contrôle du budget facile).

Basé sur un Ad Exchange: notre CPC max (ce qu’on est prêt à payer au maximum pour une visite) est mis
en concurrence avec les autres annonceurs voulant apparaitre sur un même terme de recherche. Si on
remporte l’enchère, on paye juste au-dessus de la 2e enchère.

Le « quality score » est déterminé par une série de facteurs. Il fait aussi varier le prix nécessaire pour être
diffusé.

Quality score + CPC max = AdRank = position dans l’enchère.

Quel intérêt ?
- Gagner en visibilité et en trafic sur des requêtes très précises
- Une audience qualifiée, car elle est en recherche active
- Arriver « artificiellement » en tête des résultats de Google (ou Bing) quand notre site est trop récent,
pas assez réputé, peu fréquenté
- Améliorer la réputation et l’autorité de notre site ( SEO + SEA )

20
 b. Display (banner ads) :

Historiquement le premier levier de marketing digital.

DCO : dynamic creative optimization :

Pratique par laquelle des publicités digitales (bannières, publicités Facebook, vidéo, etc.) sont, en temps
réel, automatiquement optimisées au fur et à mesure de leur diffusion pour maximiser le taux de clics sur
le site de l'annonceur.

DCO simple :
• Données individuelles (langue, genre, âge)
• Historique utilisateur (Cookies)
• Contexte (moment, localisation, météo…)
• Données croisées ( exemple : horaire d’un cinéma)

DCO complexe :
Basé sur des algorithmes qui vont tester des variantes minimes de la publicité. Notions liées : A/B testing
et test multi-varié.

e. Programmatic buying :

Achat automatisé d’espace publicitaire.

21
Traditionnellement, on achetait un espace déterminé et un certain nombre d’impressions à un éditeur.
Ex : je veux 100k impressions sur sofoot.com et eurosport.fr

A l’inverse, en programmatic, chaque impression est achetée et délivrée une à une en fonction des
données de ciblage disponibles sur l'individu cible. On vise une audience, pas un emplacement.

Comment ça marche ?
- En achat direct (coût et volume garantis)
- Sur le principe du RTB (Real-time bidding). Un utilisateur ouvre une page web avec un espace pub.
Notre pub est mise en concurrence en temps réel avec d’autres annonceurs dans un Ad Exchange
(sorte de vente aux enchères virtuelle). Si notre enchère (automatisée) remporte l’espace, notre
pub est affichée chez l’utilisateur. Tout ça en quelques millièmes de seconde.

Multiples intérêts :
- Performances et couverture
- Ciblage précis (Publicité contextuelle)
- Retargeting et personnalisation des messages
- Transparence et facilité
- Fonctionne pour du display mais aussi pour de la vidéo, de l’audio, du native, du search. Et même
pour de la, radio, TV ou du dOOH (digital out of home).

f. Native advertising :

Type de publicité online pensée pour s’intégrer harmonieusement au support. Sa forme (design), son
emplacement et son contenu doivent se fondre avec le site hôte.

Les publireportages (advertorial) sont la forme la plus répandue de native ad.

g. Audio & Video Streaming ads :

Les plateformes de streaming comme Youtube et Spotify offrent de nombreux formats de publicités et
options de ciblage.

22
 h. Social media advertising (SMA) :

Les réseaux sociaux, Facebook (Meta) en premier, ont compris l’intérêt de monétiser la visibilité sur leurs
plateformes. Leurs algorithmes ont doucement mais sûrement basculé vers un modèle « pay to appear »,
qui a redessiné le visage de la publicité.

On peut bien sûr regretter la présence croissante de messages commerciaux. Mais comme on dit, si c’est
gratuit, c’est vous le produit.

Choisir un réseau social pour un annonceur dépend principalement de l’objectif, de la cible, du budget, du
message/contenu et des possibilités créatives de la plateforme.

i. Influence marketing :

Stratégie de communication qui a toujours existé. Un journaliste, une célébrité, une égérie… C’est ce qu’on
appellerait aujourd’hui un Mega-influencer. Le blogging puis les réseaux sociaux ont permis l’avènement
d’un marketing d’influence beaucoup plus complexe, porté par la notion d’individu média.

j. Affiliation marketing :

Type de publicité online basée sur le sponsor de lien (ou de contenu).

Un annonceur fait la promotion de ses produits ou services sur les plateformes d’autres éditeurs, en
échange d’une commission à chaque objectif atteint (achat, inscription, trafic…).

Ex : Je mets sur mon blog un lien vers un produit venant d’Amazon. Si un visiteur de mon blog clique sur le lien et achète le
produit, Amazon me donne un certain pourcentage de la vente.

23
 k. Les médias traditionnels/mass media :

Les Mass media ne sont pas (encore) morts. Même en 2022, un plan média ne peut pas ignorer
l’importance des touchpoints traditionnels que sont la TV, la radio, la presse quotidienne, les magazines,
l’affichage OOH et le cinéma.

De manière générale, ces médias sont chers et donc trustés par les gros budgets. Par rapport au digital, on
regrette aussi leur manque de flexibilité quant au contenu, le manque d’interactions et leur nature top-
down.

Des investissements encore conséquents. Ces médias restent chers et donc trustés par les gros budgets. Ils
représentent 3/4 des investissements média en 2022.

La télévision : reste le media le plus consommé en Belgique après internet.

La radio : très populaire en Belgique, investissements pub encore en hausse

Le cinéma : traditionnellement média des grandes productions publicitaires. Moins vrai aujourd’hui.

24
OOH (Out of Home) : affichage dans l’espace public (billboards, posters, digital display, mobilier urbain,
transports, malls…).

La presse quotidienne et les magazines : encore consommé mais investissements pub en baisse, les
versions digitales ont clairement pris le dessus.

Presse quotidienne : Magazine :

6. User journey

Modèle prédictif qui représente le parcours type d’un utilisateur, scénarisé en plusieurs étapes clés.

Il permet de phaser une stratégie média grâce au modèle POE qui montre l’interaction des médias entre
eux. Le customer journey coordonne les différents touchpoints de manière chronologique dans
l’expérience utilisateur et emmène un utilisateur passif vers l’action.

25
 A. Zwot (zero moment of truth)

Le ZMOT (zero moment of truth) caractérise le fait qu'entre un premier stimulus publicitaire et son
premier contact avec le produit en point de vente (FMOT), le consommateur va souvent se livrer à une
action de recherche d'informations liée au produit pouvant fortement influencer sa décision d'achat.

Dans ce modèle, l’accent est mis sur la phase d’intérêt, présentée comme déterminante dans l’écosystème
digital actuel.

B. Loyalty Loop

Dans ce modèle, l’accent est mis sur le rôle du consommateur loyal, qui devient lui-même un relai de
communication pour la marque. (Voir referral marketing)

C. Conversion Funnel

L’entonnoir de conversion permet de visualiser la perte d’utilisateurs lors de chaque étape du customer
Journey. Modéliser un parcours d’achat permet de détecter les problèmes ou points d’attention à chaque
étape d’un processus.

26
Plusieurs éléments permettent d’expliquer le taux d’abandon à chaque étape. Il s’agit d’analyser ces
éléments lorsqu’on réalise nos scénarios de conversion.

Exemples :
- Mon site n’est pas en lien avec la source de trafic (description google, promesse de la publicité). Le prospect qui arrive
sur mon site ne trouve pas ce qu’il est venu chercher
- Manque d’ergonomie (difficile d’utilisation, peu adaptée aux mobiles...)
- Mon site mal optimisé, prend trop de temps à charger. La majorité des visiteurs quittent le site par impatience
- Les gens n’ont pas confiance en mon site. Pas de reviews, processus de paiement peu clair, pas de protocole https
- Il y a des surcouts (frais de livraisons) lors du processus de paiement
- ...

7. Web et data

A. Tracking

Le profil d’une cible ne se limite plus à de simples coordonnées (nom, prénom, adresse) mais s’étend plus
largement à son comportement et habitudes d’achat, permettant ainsi un véritable décryptage du
consommateur d’après toutes les données liées à des centres d’intérêt privés et/ou professionnels.

• Ciblage géographique :
Données de géolocalisation stockées en fonction des situations et appareils utilisés par les internautes
(GPS, applications mobiles, adresse IP, wifi...) chez eux ou à proximité d’un point d’intérêt.

• Ciblage contextuel :
Consiste à afficher dynamiquement un message publicitaire en fonction du contenu de la page support.

• Ciblage comportemental :
- Ciblage des internautes d’après leur comportement sur un site web ou face à une publicité
- Largement utilisé dans le cadre de sites e-commerce ou dans l’email marketing (ex : identifier les
abandons de panier) Permet de personnaliser l’affichage du contenu d’une page ou d’une newsletter
ou d’une publicité.

Retargeting :

Système de marquage déposé par le site de l’annonceur ou par une régie publicitaire sur l’ordinateur de
l’internaute (cookie, tag, pixel). Permet à un annonceur d’identifier et de retrouver les visiteurs ayant ou
n’ayant pas effectué une action à la suite d’une visite, pour lui réadresser des services ou produits
consultés.

Tracking cross device :

Cerner le parcours depuis l’exposition initiale sur un device à la conversion sur un autre. On retargete un
utilisateur d’un device à l’autre, cela permet d’éviter une trop grande répétition d’impressions
publicitaires.

Comment identifier ? Suivre et adresser les utilisateurs sur l’ensemble des devices ? Par géolocalisation et
IP + par environnement logué (Google / Facebook).
27
 B. Data marketing

Les différents types de données.

Chaque visite sur un site implique un échange de données. Ces données sont enveloppées dans des micro
fichiers textes dans votre navigateur et dans votre disque dur : les Cookies.

• Les first-party data (cookie propriétaire) :

Ces cookies sont créés par le site auquel vous avez accédé. (Données de navigation, préférences et
comportement sur le site, données collectées directement auprès du client (exemple je m’inscris ou
commande sur un site ou même dans un magasin, je donne mon nom, prénom, date de naissance,
nationalité, etc.)
Très qualitatives, mais ne concernent qu’un petit échantillon de ma cible, qui a déjà visité mon site.

• Les second-party data :

Données «first party» partagées entre deux entreprises. Pour une action commune ou achetées à l’autre
entreprise. Cette pratique permet d’étendre un ciblage trop limité, de le diversifier, ou le rendre plus
pertinent. Exemple : agence de voyage et compagnie aérienne.

• Les third-party data (cookie tiers) :

Créés par des sites tiers (différents du site visité), comme Facebook ou Google = « marchands de données
». Données démographiques, d’intérêts et comportementales agrégées; de manière anonyme, mais
massive. Ce sont des données très nombreuses. Elles sont considérées comme problématique pour le
respect vie privée.

• GDPR/RGPD :

Depuis 2018, réglementation européenne pour la protection des données personnelles.

Basée sur 7 principes :

1. Légalité et transparence
2. Limitation des finalités
3. Minimisation des données
4. Exactitude
5. Limitation du stockage
6. Sécurité (contre la perte, le vol et la divulgation)
7. Responsabilité (amendes possibles)

Aujourd’hui, 41 % des utilisateurs refusent de donner leur consentement aux cookies. Sans consentement
de l’utilisateur : pas de cookies tiers ni de cookies first.

Cookie is dead ? Google annonce la fin des cookies tiers en 2023 suite à la méfiance croissante sur la confidentialité et la
propriété des données personnelles.

28
8. Web éthique et responsive

A. Web et éthique : Antinomique ?

Le world wide web est caractérisé par sa décentralisation : personne ne le dirige, peut-on donc prêter un
jugement éthique ou moral sur le web et ses contenus ?

Une éthique :
• Dans les contenus, et donc la modération de ces derniers par les plateformes qui les hébergent
• Dans la conception des sites web, leur développement, leur hébergement
• Dans les technologies émergentes
• Dans la façon dont les organisations qui y communiquent, choisissent un positionnement éthique

B. Marketing éthique

Positionnement et activités marketing caractérisées par leur contribution à une cause, ou visant un impact
positif sur la société.
En retour, ces actions ont un effet positif sur les échanges entre les consommateurs et la marque ou le
produit. Notion liée : RSE (responsabilité sociale des entreprises).

Eco-conception web : un écosystème digital responsable :

Un modèle soutenable dans un contexte d’urgence climatique ! Près de 2 milliards de sites web dans le
monde. Un site web génère 4,61 grammes de CO2 à chaque page consultée. Le numérique représente 4%
des émissions de gaz à effet de serre dans le monde. Et ce chiffre risque de doubler d'ici à 2025.

Solutions :
- Prolongation du cycle vie du hardware (les équipements représentent à eux seuls 47% des émissions
de gaz à effet de serre du secteur)
- Une utilisation mesurée de la Data (25% des émissions)
- Des sites moins énergivores, car plus légers et optimisés
- Compresser les photos et vidéos
- Fonctionnalités essentielles uniquement / Minimiser le code et les requêtes
- Design sobre et responsive ;
- Des hébergeurs qui utilisent l’énergie verte (ex : ikoula, infomaniak) ;

9. Technologies, innovations tendances et enjeux futurs

A. Web 3.0 ???

(Est-ce que c’est vraiment bon pour l’écologie ?)

B. Phygital world

Interactions entre le digital et le physique. Elles peuvent prendre plusieurs formes.

29
Réalité augmentée :
- Ajout d’une couche de virtuel sur la réalité
- Filtres snpachat/insta
- QR codes
- Simulation produit

In store experience :
- Paiement mobile
- Géolocalisation
- Bornes digitales

IoT (internet of things) :

- Objets connectés (frigo, machine à laver, thermostat)
- Assistants vocaux (Google Nest, Amazon Echo)
- Smart home & Smart city

Pure player et DNVB (digital native vertical brand) :

Un pure player désigne un acteur purement en ligne. Le terme DNVB désigne plus précisément les
marques uniquement disponibles en ligne. Basées sur des business model « direct-to-consumer » sans
intermédiaire.

Brick & Mortar > DNVB > Click & Mortar :

Certains pure players créent des expériences physiques temporaires (pop-up) ou permanentes, souvent
très immersives.

Augmented reality :

Ajout d’une couche de virtuel sur la réalité comme les filtres Snapchat/Insta. Mais aussi des QR codes et
simulations produit.

Virtual reality :
La réalité augmentée ajoute des éléments virtuels dans un environnement réel alors que la réalité
virtuelle crée virtuellement un environnement réel ou imaginaire.

Metaverse :
Un metaverse est un monde virtuel fictif. Le terme est régulièrement utilisé pour décrire une future
version d'Internet où des espaces virtuels, persistants et partagés sont accessibles via interaction 3D.

Plus généralement, il désigne un monde virtuel où tout le monde peut se rassembler pour socialiser, jouer,
travailler, etc.

30
 C. Intelligence artificielle (IA)

L’intelligence artificielle a déjà envahi nos quotidiens. C’est une science qui vise à améliorer les machines
pour qu’elles pensent comme des humains.

Elle fonctionne grâce à :

• la programmation initiale et la supervision par l’humain
• au Machine Learning : Apprentissage automatique. (Le Deep Learning : Analyse de données non
structurées, en grande quantité. Permet de reconnaitre des images, sons, vidéos... Basé sur les neural
networks)
• le « human learning » : L’humain aide la machine à traiter les données

Les chatbots :

• Le Rule-based chatbot suit une série de scénario et questions préconçues et est basé sur un
decision tree (proche de l’automation marketing).

• L’Ai Chatbot est basé sur le deep learning, de vraies conversations, compréhension du contexte et
retient les informations.

• L’Hybrid suit un scénario, mais avec la capacité conversationnelle et d’apprentissage.

31
Partie Delouvroy
1. Typologie des métiers du web

Ces dernières années, une nouvelle typologie des métiers a dû être mise en place pour plusieurs raisons :
hyperspécialisation des métiers, dépense technologique, émergence de nouveaux métiers, nécessité de
production de plus en plus grande, nouveaux métiers et réinventassions des métiers de la communication.

A. Digital projet manager (DPM)

La mission du DPM consiste à coordonner les opérations de conception et de gestion d’un projet digital
et/ou de marketing digital. Il est un élément clé au sein d’une agence de communication digitale. En effet,
il coordonne la réalisation des projets digitaux. Il doit avoir des compétences en web, en management et
doit être sensible à l’innovation.

Il est le principal contact avec le client. Il assure la communication entre le client et les intervenants
impliqués dans le projet. Il a la charge de la gestion du planning et du budget au D2D. il coordonne et gère
les ressources interne.

Ses compétences :
• Connaissances techniques du web
• Compétences de communication
• Compétences en marketing
• Pensée critique et analyse de données
• Utilisation des méthodologies de gestion de projet

Ses outils : Google Tools ou Microsoft 365, Notion, Slack, ClickUp, Monday.com

B. L’UI designer

La mission de l’UI designer consiste à designer une UI (interface utilisateur). Il met en œuvre ses
compétences techniques et sa créativité pour concevoir des maquettes graphiques correspondant aux
souhaits et aux objectifs du client. L’UI designer sera très attentif à respecter la charte graphique existante
d’une entreprise et devra créer ou adapter une nouvelle sémantique visuelle dédiée aux supports digitaux.

32
Ses compétences :
• Principes du design d’interaction
• Typographie, couleurs et éléments d’interactions
• Mise en page et prototypage
• Recherches sur les utilisateurs et les persona
• Travail d’équipe et compétence en communication
• Connaissances techniques de l’environnement digital

Ses outils : Suite Adobe (Photoshop, Illustrator, Xd), Figma, Sketch

C. L’UX designer

La mission de l’UX designer consiste à concevoir une interface accessible et facile à prendre en main pour
tout type de support. L’objectif principal de l’UX Designer est de concevoir un produit au service des
utilisateurs.

En D2D (Device to Device), il identifie les principaux enjeux du produit ou de l’interface web. Il mène des
tests et des études utilisateurs en parallèle de la réalisation de différentes propositions de design
utilisateur. Enfin, il optimise en continu l’expérience utilisateur.

Ses compétences :
• Compétences interpersonnelles, de collaboration et de
communication
• Empathie (persona)
• Communication visuelle et interface utilisateur
• Prototypage, wireframing, user flows, mockups
• Curiosité et apprentissage continu

Ses outils : Adobe Xd, Figma, Sketch, Adobe Photoshop, Adobe

Illustrator, Slack

D. Front-end Vs Back-end

Ò Front-end - interactions avec les « écrans » ex : Boutons – Call to action

Ò Back-end – réaliser des « actions » ex : inscription à un formulaire

Le Back-end et le Frond-end sont complémentaires et indissociable

33
Front-End Developper :

La mission du développeur Front-End consiste à développer les éléments graphiques qui vont faciliter la
navigation de l’internaute et une prise en main optimale : boutons, icônes, interactions animations,
responsive design... Il conçoit et développe ces éléments et leur donner « vie ». L’ensemble de l’interface
doit être logique, fluide et accessible. Il faut intégrer la maquette ou slicing en HTML, CSS et JS.

Ses compétences :
• Connaissance du UI et UX
• Background technique (HTML, CSS et JS)
• Bonne sensibilité graphique
• Comprendre les enjeux du SEO
• Capacité de communication

Ses outils : Sublime text, VS Code, Atom, Brackets, etc. Bref un éditeur de code – TextEdit.

E. Back-End Developper :

Sa mission consiste à développer l’ensemble des fonctionnalités d’un site web. Il travaille sur tous les
éléments invisibles d'un site (ex. : le serveur, le code ou la base de données) qui sont indispensables au
bon fonctionnement d'un site.

Il analyse les besoins des utilisateur, développe et fait évoluer les fonctionnalités techniques. Il contrôle et
assure la performance du site et assure aussi une maintenance du site (ex. : il analyse des failles de
sécurité).

Il a connaissance des langages de programmation (Java, Python, PHP) et des frameworks. Il gère les bases
de données et d’algorithmes. Il possède une bonne connaissance des langages HTML, CSS et JavaScriptet
une bonne connaissance de l’environnement des hébergements web et Cloud.
Ses compétences :
• Connaissance du UI et UX
• Background technique ++ [ HTML, CSS et JS, PHP PYTHON,… ]
• Capacité de communication
• Esprit d’analyse et résolution de problème

Ses outils : Sublime text, VS Code, Atom, Brackets. Bref un éditeur de code – TextEdit

F. Full-Stack Developper :

Les missions du développer Full-Stack sont nombreuses et variées puisqu’il travaille à la fois sur la partie
visible de l’interface et avec laquelle l’utilisateur va interagir [Front-end] et sur la partie technique de
l’interface [Back-end].

Le métier ne nécessite pas forcément d’être expert du Front-end et du Back-end, mais plutôt d’être
capable de travailler sur les deux parties et donc de bien comprendre les enjeux et objectifs de chacune.
C’est un métier hybride qui est très prisé par les Startups.

34
Ses compétences :
• Connaissances UX/UI
• Gestion de DataBase
• Gestion de l’hébergement / Cloud
• Connaissances du Front-end et Back-end

G. Growth Marketer :

Aussi appelé Growth Hacker, c’est un métier entre le marketing et le développement. Son objectif et de
recherche en permanence la croissance rapide. Le métier fait appel à l’ensemble de techniques marketing
ayant pour objectif de booster la croissance d’une startup.

Cette nouvelle vision du marketing est liée à l’essor du web et du marketing digital appuyée sur l’analyse
de données et l’utilisation de nouvelles techniques.

Autres : Community manager/social media manager, SMO, Digital brand content manager, Content -
SEO/SEA, App dev, etc.

2. Étapes de conception d’un site web/ app web

1. Création d’un cahier des charges et appel d’offre

2. Kick-off meeting - le client et DPM
3. Benchmark - Analyse de la concurrence
4. UX (Public Cible & Personna, Arborescence, Wireframe – User flow et chart flow)
5. UI Moodboard (Design system - Charte graphique > Sémantique visuelle)
6. Création des contenus du site – SEO
7. Slicing - Découpage des pages | Front-end
8. Développement | Back-end
9. Mise en ligne du site App
10. Maintenance et améliorations continues
11. Développement stratégique du site (Positionnement marketing, Data analytics, SEO SEA, etc.)

35
 1. Cahier des charges :

Étude du quoi, du quand et du pourquoi ? On collecte des informations relatives au projet, on prête
attention aux attentes et besoins (client VS public cible). Il faut savoir lire entre les lignes et se positionner
comme « expert en communication » : Extrapoler la demande du client.

2. Proposition de valeur du client :

Une proposition de valeur n’est pas un slogan ! C’est la promesse de la valeur que vous allez délivrer à vos
utilisateurs. Elle est la raison principale pour laquelle vos clients viennent pour vos produits/services...

3. Kick-off meeting :

1er rendez-vous pour définir le cadre global du projet comme : le planning, une Todo, l’équipe, une
méthodologie, etc.

4. Benchmark :
C’est comprendre pour mieux appréhender le marché de votre client. Qui sont les concurrents directs et
indirects ? Analyse de minimum 4 concurrents.

5. UX :

L’UX c’est définir des persona (Public cible : profil et caractéristiques – Age, revenu, résidence, etc. –
motivations, les freins et objectif –Tâches et comportements – Painpoints et sources de
mécontentements). C’est aussi la création du site map sous forme d’arborescence, des wireframes et
d’User flow ou Flow chart.

(arborescence) (wireframe)

36
 (User flow)

(persona)

(user-flow emailing)

6. UI :

L’UI c’est la recherches et la création d’un Moodboard, d’un Design system, la déclinaison de la charte
graphique et la mise en page de l’ensemble des pages.

7. Création des contenus du site / SEO :

Tout d’abord, il faudra inventorier les contenus existants pour ensuite créer une charte éditoriale – Tone
of voice. Il faudra rédiger des nouveaux contenus et rédiger les meta description – SEO.

37
3. UX / CX / UI

A. Ergonomie

« Du grec ergon (travail) et nomos (règle, loi naturelle), l’ergonomie web se définit comme la mise en
oeuvre d’un ensemble de règles pour concevoir un site facile d’utilisation où l’information est aisément
accessible. »

L’ergonomie implique d’adapter la structure, l’aspect et le contenu du site en fonction du profil des
utilisateurs.
Généalogie de l’ergonomie web :

B. Origine de l’UX

C. CX, UX, UI

Customer eXperience (CX) :

L’expérience client peut se définir comme l’ensemble des interactions entre le

client et la marque. Afin que le client puisse interagir efficacement avec la marque,
cette dernière doit générer une expérience globale réussie et agréable.

38
Users eXperience (UX) :

Le design d’expérience utilisateur [UX design] est une façon nouvelle et radicalement différentes de penser
les dispositifs numériques.

Démarche pragmatique, pluridisciplinaire, orientée vers la résolution des problèmes et résolument

tournée vers l’innovation.

Design de service constitué de 5 niveaux !

Objectifs de l’UX = notion d’utilité, on souhaite répondre à un besoin. On vient sur un site internet pour
faire/réaliser quelque chose. Notion d’usability (« Utilisabilité »), on veut être User-friendly pour prolonger
l’utilisation. On cherche l’utilisation efficace et apportant la satisfaction le plus facilement possible.

De façon générale, « l’utilisabilité » d’un site web ou d’une App comprend sa simplicité d’utilisation (less is
more), sa facilité d’apprentissage (erreur) et la satisfaction de ses utilisateurs (happy).

Ò UX = Efficacité (interface utilisable), Efficience (rapidement), Satisfaction (I am happy).

User Interface (UI) :

L’interface utilisateur est le dispositif qui permet à un usager de manipuler un site web, un smartphone,
une tablette, une montre, etc.

D. Atomic Design

L’Atomic design est une nouvelle approche du design modulaire conçue par Brad Frost afin de créer des
Design Systems à partir de composants plus simples : atom, molécules, organismes, template et pages.

39
 E. UX et UI design

F. Les fondamentaux en UX

La règle des 3 clics :

Une info serait plus difficile à atteindre si le nombre de clics augmentent.

! FAUX ! : cela dépend du contexte. On ne quitte pas un site parce qu’on clique trop mais parce qu’on ne
trouve pas. Profondeur du site = profondeur de l’information.

Arborescence du site = sitemap / flowchart :

40
UX vs UI :

Objectifs différents mais pas opposés

Objectifs COM : Vitrine de produits / interface fonctionnelle.
WIREFRAME [UX] > WEBDESIGN [UI]

Z et F layouts :
Les internautes lisent en F (aussi avec Z et E). Le site et son environnement guide l’œil !

Scroll & Swipe :

Si le site correspond à nos besoins on scrolle . Nécessité d’un positionnement

stratégique du Cut-Off Design ou ligne de flottaison. Cut-Off Design vertical et
horizontal car changement de comportement grâce ou à cause des nouveaux
supports comme les smartphones et les tablettes.

Loi de HICK :

Le nombre magique de Miller et la Loi de Hick 7 items ±2. Seuil maximal = Mémoire de travail L’empan
mnésique = Mémoire à court terme

Loi de Fitts :

Loi de Fitts ou rapidité d’action : « Le temps dépend de la distance et de la taille de la cible ». Plus
l’utilisateur atteint rapidement ses objectifs, plus son expérience sera bonne.
41
Organisation visuelle :
Trop d’infos tuent l’info et trop de choix tuent le choix (Ex. Carte du menu d’un resto italien). Éviter la
surcharge visuelle.

« Wizard » :
Les « wizard » sont utilisés de préférence pour les tâches longues et peu familières que l'utilisateur doit
accomplir une fois ou rarement. Ils permettent de réduire les erreurs en obligeant l'utilisateur à suivre des
étapes séquentielles.

Ils sont souvent utilisés pour les flux d'accueil, lorsque l'utilisateur doit saisir un ensemble d'informations
pour commencer à utiliser une application.

Aide internaute :
Organisation visuelle (call to action & visibilité sans scroll cf. cut-off), le principe d’affordance (repérer ce
qui est cliquable) et l’éffet Stroop : le site aide et dirige l’internaute.

G. La théorie de la Gestalt

La théorie de la Gestalt (forme) est la manière dont notre cerveau analyse le monde environnant comme
un ensemble de forme. Elle regroupe plusieurs lois :

Loi de proximité : Notre cerveau regroupe des choses. La proximité doit respecter la logique des
contenus.

42
Loi de similarité : La Loi de similarité prétend que les éléments qui apparaissent similaires sont perçus
comme une seule unité.

Loi de continuité : La Loi de la continuité stipule que nous avons tendance à associer des éléments qui
forment une continuité ou situés dans une séquence.

Loi de fermeture : La Loi de la fermeture contient 2 principes : une forme incomplète est généralement
corrigée et perçue de façon complète ; lorsque des éléments sont proches ou tendent à former une entité,
ils seront perçus comme un tout.

4. Définir son public cible

Le public cible est une partie de la population que l’on souhaite toucher lors d’une action de
communication, commerciale ou marketing. La cible peut être constituée, d’utilisateurs, de clients ou
prospects.

Plus la vision de la cible est nette et précise, plus l’objectif est opérationnel. Il est donc impératif
d’identifier et de segmenter sa/ses cible(s) rigoureusement.

43
On qualifie sa cible en fonction de :
- Sexe : homme, femme ou X
- Localisation : région, citadin, campagnard, ...
- Segmentation d’âge : Jamais de 7 à 77 ans (trop large) mais plutôt de 16 – > 18 ans et/ou 25 –> 35 ans.
- Situation familiale : personnes seules, en couple, avec ou sans enfants
- Situation professionnelle et statut social
- Revenus (pouvoir d’achat)

Cœur de cible = partie restreinte de la cible sur laquelle un effort particulier peut être fait ou pour laquelle
on attend des résultats particuliers.

A. Persona

Ò Identifier les utilisateurs et comprendre leurs besoins

Personnage semi-fictif représentant un groupe ou segment cible dans le cadre du développement d’un
nouveau produit, d’un service digital ou non.

Il faut définir :

Le persona aide à la prise de décisions lors de la conception d’un site web.

B. Comportement de navigation

Comment naviguez-vous sur un site Internet, une WebApp ou une App? On distingue 3 grands types de
navigation :

• La recherche par mots-clés (droit au but) : se fait via moteur de recherche du site et permet de passer
outre l’arbo d’un site web (Nouveau modèle de navigation).

• La navigation ciblée (étape par étape) : équivaut à un scan de l’arborescence à la recherche

d’un contenu précis. Le contenu est adapté à la représentation que s’en fait l’utilisateur !
Navigation principale > repère persistant
Navigation contextuelle = Sous-catégorie

• La navigation libre (navigation découverte, open-endend browsing) : le simple but de passer du

temps et de consulter ce que le site pourrait proposer d’intéressant (ex. : Achat en ligne – Panier
virtuel – ou Réseaux sociaux)

44
Recherche ou naviguer, telle est la question ?

5. Élaboration de l’arborescence

A. Identifier les contenus

Conception « centrée utilisateur ». Consiste à élaborer son contenu en s’appuyant sur les fonctions et
les services que recherchent les utilisateurs et pas l’inverse.

Pour être efficace, le site web doit répondre aux questions/besoins de l’utilisateur tout en véhiculant les
objectifs de communication de ses concepteurs.

B. Définition des contenus

Le contenu répond aux besoins de l’internaute. Le but d’un site, d’une WebApp ou d’une App =
satisfaire les besoins des utilisateurs.

Deux situations peuvent se produire de façon indépendante ou consécutive sur un site Internet :

Internaute vient pour ce qu’on lui offre -> on réussit à créer un besoin chez lui.

Plusieurs niveaux d’utilité :

• Utilité générale (Besoin d’infos ; Achat en ligne ; etc.)
• Micro-utilités (fonctionnalités et informations complémentaires ; plusieurs niveaux de contenus et
services).

45
 C. Analyse concurrentielle

Définissez votre panel concurrentiel : Qui sont nos concurrents ? Combien de concurrents doit-on analyser
(Minimum 4) ?

D. Étapes de la conception de l’arborescence

A qui votre site s’adresse, pour répondre à quels besoins, avec quels outils ou quels contenus ?

Les étapes de conceptions :

1. Lister les contenus

2. Organiser les contenus par catégories : la catégorisation = regrouper pour simplifier. Opération
mentale pour percevoir le monde de manière plus simple, on joint ensemble ce qui est
ensemble.

3. Structurer l’information : la structuration de l’information équivaut à hiérarchiser les

catégories pour mettre en valeur le contenu. Une navigation principale (structure hiérarchique
représentée par les menus) et une sous-navigation (structure secondaire représenté par les
liens contextuels).

4. Construire l’arborescence

46
 E. User flow & flowchart

Un user flow détermine de façon schématique l'articulation des fonctionnalités d'un produit digital et les
cheminements logiques que peut ou que doit suivre un utilisateur.

6. La grille digitale

Les colonnes et les lignes sont les regroupements d'unités qui créent la structure visuelle de la page.

On considère 12 colonnes pour les desktops, 4 colonnes pour les smartphones et 8 colonnes pour les
tablettes.

Que l’on parle de web ou d’impressions, il existe une filiation évidente mais aussi un fossé technique
immense.

Ò Outil commun = la grille (Unité ; Harmonie ; Rythme) ou plutôt une infinité de grilles.

La page web n'a pas de dimensions réelles contrairement à la page papier. Mais le besoin d'unité est le
même, en print comme sur le web.

La page web n'a pas de dimensions réelles contrairement au papier, mais le besoin d'unité est le même,
en print comme sur le web. Il n’existe pas une grille, il existe une infinité de grilles.

47
 A. Structure d’une page web

B. Structure d’une app

7. Wireframes

Wireframes are the “blueprint for design.”

Un wireframe permet de rassembler et de synthétiser les demandes. Il permet d’impliquer le

commanditaire et/ou de faire du User Testing en amont afin de corriger le tir au plus tôt, avant la
production.

C’est un outil indispensable dans le flux de production d’un « produit digital».

Étape de création « d’un produit digital » : Wireframe :

48
8. Grid system & wireframes

Wireframe : du papier au digital (d’abord dessiner sur papier puis ensuite reproduire sur digital).

Grille : respecter la grille oui mais/et non, parfois ça peut avoir un style :

9. UI : Lisibilité et lecture sur écran

Sur le web on rencontre majoritairement du texte car c’est ce qu’on vient chercher.

Le choix des caractères et de la taille des images, la structuration des différents contenus au sein des pages
web, mais aussi le sens donné à la rédaction, tous ces paramètres contribuent à rendre le site lisible.

La lisibilité s’inscrit ainsi dans une démarche d’utilisabilité, d’accessibilité et de UX , enjeux essentiels pour
l’amélioration de la qualité des sites web.

On peut tout lire, quel que soit le caractère utilisé : vrai mais l’écran rend la lecture plus difficile.
• Font web-safe
• UTF-8 : Universal Character set : un codage de caractères informatique conçu pour coder l’ensemble
des caractères – On le retrouve dans le <head> d’une page HTML.

Plus c’est écrit gros, plus c’est lisible : vrai et faux : laisser le contrôle à l’internaute

Ò Gagner en lisibilité, c’est améliorer l’accessibilité

Lecture sur écran plus lente. Une différence est tout de même remarquer. La vitesse de lecture est plus
lente de 25% sur écran, selon Jakob Nielsen.

49
10. Les « ingrédients » du UI

A. L’Atomic design :

L’Atomic design est une nouvelle approche du design modulaire conçue par Brad Frost afin de créer des
Design Systems à partir de composants plus simples : atom, molécules, organismes, template et pages.

Abstrait Concret

50
 B. Texte et typographie

Il n’y a pas de mauvaise typo, il n’y a que des mauvais usages (sauf exception dans le cas des Comics).
L’identité passe par la typo (ex : new york times), utiliser trop de différentes typo peut mener à la
confusion (et c’est pas beau).

Comment choisir une bonne typo ?

1. Pensez pratique
2. Pensez à la famille de fonte
3. Pensez auc caractères spéciaux (Graisse & Glyphes)

Explorer les graisses de la typo pour avoir plus de latitude dans la sémantique
visuelle de votre site web ou App. Même typo mais graisse différente Exemple
avec la typographie Ubuntu.

Un glyphe est une représentation graphique d'un signe typographique, autrement dit d'un caractère
(glyphe de caractère) ou d'un accent (glyphe d'accent), ou bien d'une ligature de ces caractères.

Il faut garder à l’œil : le rapprochement des lettres, les dates et les ligatures !

Une ligature c’est la fusion de deux ou trois graphèmes d’une écriture pour en former un
nouveau, considéré ou non comme un caractère à part entière.

La Font web safe ? Les standards du web sont Arial - Trebuchet MS - Tahoma – Verdana. Il faut éviter une
police avec sérif mais à la mode sur le web comme The Times – Georgia.

Ò Éviter les polices avec sérif mais à la mode sur le web

Les alternatives sont @Font face CSS (providers de typos). La règle @font-face permet de charger des
polices personnalisées sur une page Web. Une fois ajoutée à une feuille de style, la règle demande au
navigateur de télécharger la police depuis l'endroit où elle est hébergée, puis de l'afficher comme spécifié
dans la feuille de style.

51
 Pourquoi un provider de typos ? Pas de gestion de droit (licence), les fichiers sont
sécurisés et facile à implémenter. Le provider est souvent accompagné d’outils
d’aide et de suivi mais un budget est à prévoir.

Penser également aux icônes ! il faut garder une cohérence visuelle entre le style de vos icônes ! Privilégier
le format .svg au .png et pour le style : Flat design, Outline, Gradient (penser Icon Set).

C. Texte et mise en forme

Le corps de texte doit toujours faire entre 12px et 18px, c’est la taille idéale pour le corps de texte sur
smartphone, tablette et desktop. Maximum 45 à 75 signes par ligne et maximum 4 à 5 lignes par ligne
paragraphe.

La lézarde :

Une lézarde est formée par une succession d’espace trop grands entre les
mots d’une même ligne créant des blancs disgracieux dans une colonne de
texte. Ce défaut rencontre dans les textes justifiés dont la largeur de la
colonne est trop petite et avec les typographies à chasse fixe.

Font-face :

La règle @font-face permet de charger des polices personnalisées sur une page Web.
Une fois ajoutée à une feuille de style, la règle demande au navigateur de télécharger la police depuis
l'endroit où elle est hébergée, puis de l'afficher comme spécifié dans la feuille de style.

Providers de typos :

• Pourquoi un provider de typos?

• Pas de gestion de droit (licence)
• Les fichiers sont sécurisés
• Facile à implémenter
• Souvent accompagné d’outils d’aide et de suivi
• Mais budget à prévoir

52
Les icones :
Il faut garder une cohérence visuelle entre le style de vos icônes! Privilégiez le
format .svg au .png
Le Style ? : Flat design, Outline, Gradient ... Penser Icon Set!

Les logos | sponsors – partenaires :

Ne pas avoir peur de « délogotiser » les logos de vos partenaires – sponsors
> Affiches – Flyers – site web App ...

Les couleurs :
Pour construire sa palette de couleurs, focus sur le principe d’affordance et l’effet Stroop.

• Couleur neutre : texte, arrière-plans, panneaux, contrôles de formulaire - presque toutes les
interfaces utilisent du gris et pas noir ! Il ne faut pas craindre le blanc comme arrière-plan.

• Couleur primaire : une ou 2 couleurs. Cela détermine l’aspect général du site car elle est la
couleur qui s'affiche le plus souvent sur les écrans et les composants de votre application (Ex.
facebook).

• Couleur secondaire : sert l’accentuation, la mise en avant du contenu (boutons + call to

action).

(exemple : pwp 4, slides 126)

En résumé, pour composer sa palette : 3 couleurs maximum (hors couleurs neutres) ! Couleurs Primaires +
camaïeu, Couleurs secondaires + camaïeu, Couleurs neutres. Utiliser l’outil Adobe Color.
53
11. Smartphone

A. Contexte et enjeux

Point commun des GAFA et des entreprises de livraison (Uber, Deliveroo, etc.) ? Le mobile est le pivot
de leur stratégie digitale.
L’évolution des téléphones mobiles depuis 30 ans qui fait qu’ils seront bientôt le canal dominant dans le
monde (avec le nombre de connexions le plus élevé).

En Belgique, 60% des foyers belges possèdent une tablette. Développement de l’offre conjointe <->
avènement des nouveaux appareils + consumérisation numérique (apporter mon propre appareil au
travail).

Protocoles internet :
Ce sont le WAP (Wireless Application Protocol) et les différentes G (de la 2G - MMS et SMS
Max 50Kbps – Edge à la 5G).

App, web app & Responsive (RWB) :

APP : Application native : développé spécifiquement pour le système d’exploitation de votre mobile avec
une logique de téléchargement (Appstore – Google play). S’utilisent en Off-line & On-line. Les éléments
techniques et graphiques sont intégrés au périphérique (appareil photo, GPS, notifications push, etc...).

WEBAPP : site web développé et mis en forme spécifiquement pour les mobiles et les desktops. Ne
permet pas de tirer parti de toutes fonctionnalités offertes par le système d’exploitation du
mobile. La consultation se fait directement depuis le navigateur – Emulateur – et nécessite
donc une connexion internet pour pouvoir être chargée.

Responsive web design (RWD) : Le responsive web design englobe les techniques de conception de
contenus Internet qui permettent de proposer des contenus auto-adaptables en fonction des interfaces
de consultation utilisées par le visiteur.

54
RWD, pourquoi mobile first ?

Mobile First est un concept orienté UX/UI afin d’optimiser un site web pour le mobile au-delà
du Responsive Web Design. Il consiste à concevoir un site en mettant la priorité sur la version
mobile et en adaptant progressivement le web design pour les écrans plus large.

B. Gestuelle

« L’utilisateur de smartphone c’est un pouce et un œil… »

Nos doigts sont des instruments de pointages approximatifs (>< pointeur de la souris).

Cela demande une taille minimum des boutons, 3 niveaux

de hiérarchisation :

55
 C. Onboarding (didacticiel – démo)

Afin d’optimiser l’UX de votre App, il est primordial de mettre en place un mini didacticiel ou une mini
démo : le onboarding !

L’onboarding doit se faire sur 4/5 écrans maximum, doit capitaliser sur les gestuelles existantes, enlever
toutes ambiguïtés pour l’utilisateur finale et laisser l’opportunité de passer skiper la démo.

D. Navigation sur Smartphone

La liste :

La tab bar :

Tab bar top : navigation secondaire Moteur de recherche

Tab bar bottom : navigation principale
Maximum 5 éléments de navigation : Icônes + textes (mais pas toujours)

56
Off-Screen Push – Pushy :

Icons wall :

Cards :

E. Contraintes et opportunités du Smartphone

Le smartphone est soumis à des contraintes et opportunités comme la performance du réseau mais pas
uniquement ! Disponibilité n’importe où et n’importe quand mais… on reste tributaire du réseau, de notre
appareil, abonnement etc.

57
Partie Leynen
1. Élément de vocabulaire du web

What is the internet ? https://www.youtube.com/watch?v=Dxcc6ycZ73M

A. Navigateur web (browser)

Un navigateur web (browser) est un logiciel qui permet d'afficher des pages web. Les navigateurs les plus
utilisés sont : Chrome, Firefox, Safari, Edge, Opera.

Un navigateur utilise une adresse web (http://www...) pour trouver la page web demandée. Grâce à
l'adresse web introduite par l'utilisateur (ou suite à un clic sur un hyperlien) le navigateur sait à quel
serveur il doit s'adresser et quel document il doit demander en retour.

Le navigateur récupère les données envoyées par le serveur et les traite pour afficher la page web
demandée. Ces données sont composées de code informatique indiquant la manière de présenter la page,
des textes présents dans la page mais également de tous les contenus "médias" (images, vidéos, sons, etc.)
qui doivent s'afficher dans la page.

B. Client / serveur / protocole

L'architecture du web est basée sur le modèle client / serveur.

Le logiciel qui fait la demande (requête) d'une ressource (p.ex. une page web) est appelé client. Par
extension, on désigne indistinctement par client le logiciel qui fait la demande et l'ordinateur sur lequel
tourne ce logiciel. Le navigateur est un client.

L'ordinateur qui réceptionne la demande et la traite est appelé serveur. Il s'agit d'un ordinateur connecté
en permanence à Internet, qui est en attente des demandes des clients.

Clients et serveur doivent "parler la même langue" pour pouvoir se comprendre l'un l'autre. On appelle ces
langues communes des protocoles de communication.
Le protocole le plus connu et le plus utilisé sur le web est le protocole HTTP (HyperText Transfer
Protocol), aujourd'hui remplacé par HTTPS, S pour Secure.

Parmi les autres protocoles utilisés sur le web, citons: SMTP (Simple Mail Transfer Protocole), FTP (File
Transfer Protocol), TCP/IP (Transmission Control Protocol / Internet Protocol), etc.

58
 C. Adresse web (URL) et DNS

Une adresse web – ou URL (Uniform Resource Locator) permet au navigateur de s'adresser au bon
serveur qui, en retour, renverra le fichier html demandé par l'utilisateur.

Chaque page, chaque ressource, sur le web possède son adresse propre qui est absolument unique (sans
quoi il serait impossible de pointer vers une page ou un document précis).

Une URL est composée de différentes parties. Chacune de ces parties correspond à une information
précise :

Techniquement, chaque nom de domaine donné au navigateur est traduit en adresse IP (une suite de
chiffres, ex: 177.83.204.221) par un service intermédiaire (entre le client et le serveur) : les serveurs DNS
(Domain Name System).

D. Front-end / Back-end

Quand on aborde le développement d'un site web, on distingue la partie front-end et la partie back-end :
• La partie front-end d'un site désigne tout ce qui se joue dans le navigateur, côté client. Le front-
end ce sont tous les éléments du site que l’on voit à l’écran et avec lesquels on peut interagir. Ces
éléments sont composés de HTML, CSS et de Javascript.

• La partie back-end d'un site désigne l'ensemble des technologies et des processus qui s'exécutent
sur le serveur, en arrière-plan d'un site : gestion des bases de données, traitement des requêtes
client, etc. Ces processus sont invisibles pour l'utilisateur mais ils sont néanmoins essentiels. Parmi
les langages back-end, citons PHP, Python, Ruby, Javascript, etc.

Front-end et back-end sont les deux faces d'une même pièce et, ensemble, constituent l'écosystème d'un
site web.

59
2. Les langages du web

Aperçu d’ensemble des technologie black-end et front-end :

A. HTML / CSS / JAVASCRIPT

Les trois langages de programmation les plus courants du côté front-end (client) sont HTML, CSS et
JavaScript. Ces langages sont utilisés pour créer les interfaces des sites et des applications web. Leur
utilisation conjointe permet de créer des pages web graphiquement complexes et interactives.

Lorsque vous consultez une page web, votre navigateur reçoit entre autres du code HTML, du code CSS et
du code Javascript de la part du serveur Web qui héberge le site. Le navigateur interprète ces codes pour
afficher correctement la page demandée.

La plupart des pages web comprennent également du contenu supplémentaire tel que des images, du son,
des vidéos, etc. Ces contenus additionnels sont également envoyés par le serveur au client.

Le design graphique, les animations et les interactions possibles sur une page web sont déterminés par
l'action conjointe de ces trois langages au sein du navigateur.

3. HTML :

HTML et CSS sont deux langages incontournables car tout le web est construit sur eux. Tous les projets
web (blog, e-commerce, app mobile, etc.) utilisent HTML et CSS. HTML et CSS sont (toujours à l'heure
actuelle) de véritables standards du web sans concurrents. En ce sens, ils sont incontournables.
De plus en plus d'applications et de services se déclinent sur le web.

Les CMS et les outils no- code/low-code s'appuyent sur HTML/CSS. Connaître ces langages permet de
résoudre certains problèmes. Même avec Wordpress HTML/ CSS sont omniprésents et leur compréhension
est souvent requise.

Toutes les pages Web sont écrites en utilisant du code HTML (HyperText Markup Language). Le langage
HTML a été développé par Tim Berners-Lee au début des années 1990.

60
L'objectif premier du HTML est de définir
la structure des pages web. Par structure, on entend
l'organisation et la hiérarchie des différents éléments qui composent la page.
Un document HTML est constitué de texte et d'éléments HTML : les balises HTML (tags en anglais).

Les balises sont des instructions qui indiquent au navigateur la nature et l'importance des contenus de la
page. Elles permettent d'ajouter du texte, des images et des vidéos à votre page Web et de diviser les
informations en sections.

Un document HTML est composé uniquement de texte et de balises. Les contenus médias de la page web
ne sont pas dans le code html : des balises pointent vers ces contenus et indiquent au navigateur où et
comment les afficher.

A. Anatomie d’une balise HTML :

Les balise HTML sont des instructions entourées des symboles < et >. Ces instructions sont destinées au
navigateur (l'utilisateur ne les voit pas).

Elles fonctionnent quasiment toujours par paires (il existe des exceptions) et englobent un contenu.
La balise indique la nature de ce contenu au navigateur : paragraphe, titre, image, etc.

Une balise de fermeture est similaire à sa balise d'ouverture à ceci près que l'instruction est précédée du
caractère /.

L'exemple ci-contre illustre la balise <p> qui est la balise de paragraphe. On repère bien la balise de
fermeture car elle contient un /. Grâce aux balises, le navigateur comprend que le texte entre les deux
balises est un paragraphe et doit être affiché comme tel.

B. Une première page web :

De quoi avez-vous besoin pour créer une première page web ?

Au minimum : un éditeur de texte* pour écrire votre code et d'un navigateur pour afficher le résultat (que
vous devez sauver avec l'extension .html). Une connexion web n'est pas nécessaire pour créer et afficher
une page web sur sa propre machine.

*Notepad (windows) ou textedit (macos) en mode 'plain text' suffisent. Des éditeurs spécialisés gratuits existent facilitent le
travail : SublimeText, Atom, Brackets, etc.
61
Le code source (html) d'une page web type :
Cette page contient un paragraphe de texte.

C. Structure type d’une page web :

Le rendu du code précédent dans un navigateur :

62
 D. Logique d’emboitement des balises :

Si on prête attention au code précédent, on constate que les

paires de balises s'emboitent les unes dans les autres (à la manière
des matriochkas).
Le code d'une page web est une combinaison entre des
emboîtement et des successions de balises et d'éléments
textuels.

Le décalage des lignes de code sur la droite (appelé indentation)

illustre l'emboîtement des éléments. Ce décalage est facultatif. Si
toutes les balises se suivaient sur une seule et même ligne, le
navigateur pourrait quand même lire et interpréter correctement
le code. Toutefois, l'indentation est précieuse car elle facilite la
lecture du code et permet de s'y retrouver plus facilement.

E. La balise <title> :

La balise <title> est trop souvent négligée. On pourrait se dire, qu'après tout, le titre principal n'apparaît
que dans l'onglet du navigateur. Or, ce titre est d'un importance capitale :

• Comme on l'a vu, il apparaît dans l'onglet du navigateur et permet donc de retrouver facilement
une page si plusieurs onglets sont ouverts.
• Ce titre est le texte utilisé lors de l'ajout d'une page dans les favoris.
• Enfin, le plus important, ce titre joue un rôle dans le référencement de la page. C'est également le
texte repris dans l'affichage des résultats des moteurs de recherche. Le choix des mots de ce titre
est donc crucial, ils doivent refléter le contenu de la page.

F. HTML : le texte :

Les balises du langage html relatives au texte peuvent remplir deux rôles :
• un rôle de structuration et de hiérarchisation : balises de titres, de paragraphes, de listes.
• un rôle sémantique : certaines balises apportent uniquement une indication sémantique au
navigateur sans modifier la structure du document. Il s'agit des balises indiquant une emphase sur
le texte, une citation, une référence, une abréviation, etc. Les balises à caractère sémantique
peuvent toutefois influer sur le rendu visuel de leur contenu.

Nous avons déjà rencontré la balise <p> qui permet d'ajouter un paragraphe de texte à son document.
C'est la balise de base de la plupart des textes d'une page web.

Il existe également des balises permettant d'ajouter des titres (headings) à sa page. Le langage html offre
six niveaux de titres : le titre de niveau 1 étant le plus important, le titre de niveau 6 étant le moins
important. Il est rare qu'une page dépasse trois voire quatre niveaux de titres.

Ces titres sont visibles dans la page, ce sont des titres de contenus. Ils ne doivent pas être confondus
avec le titre du document qu'on ajoute dans la balise <title>.

63
 On constate que :
• Les paragraphes sont représentés comme des blocs et séparés par
un espace vertical les uns des autres.
• Chaque paragraphe occupe toute la largeur disponible. Si la fenêtre
de navigateur est redimensionnée, la longueur de ligne du texte
s'adaptera en conséquence,
• Les retours à la ligne dans le code n'ont aucune incidence sur le
rendu du texte dans le navigateur.

Ò Les paragraphes sont des éléments html de type bloc.

G. <BR> : le retour à la ligne :

La balise <br> opère un retour à la ligne au sein d'un texte.

Nouveauté : la balise <br> est une balise "vide", c'est-à-dire qu'elle n'a pas
de balise de fermeture. Elle s'insère à l'endroit où l'on veut forcer un retour
à la ligne (au sein d'un paragraphe, d'un titre, etc.).

Attention, <br> ne s'utilise pas pour ajouter des espaces supplémentaires

entre des paragraphes ou d'autres éléments html. La gestion des espaces se
fait via le langage CSS.

H. <Strong> et <Em> :

La balise <strong> est utilisée pour signifier qu’un contenu est très important et doit être considéré
comme tel par les moteurs de recherche (et les navigateurs).

Par défaut, le navigateur affichera le contenu de l’élément strong en gras. L'objectif premier de <strong>
n'est pas la mise en gras. L'intérêt de cette balise est sémantique et non pas stylistique.

La balise <em> est utilisée pour mettre du texte en emphase. Elle permet de souligner un contraste au
niveau du sens. Le résultat visuel par défaut de <em> est la mise en italique, mais comme pour <strong>,
ce n'est pas le but premier de la balise.

Ò <strong> et <em> sont des élements de type inline.

64
 I. Les titres : <H1>...</H1>,<H2>...</H2>,<H3>...</H3> ... <H6>...</H6> :

On constate que comme pour les paragraphes, les titres sont représentés comme des blocs et séparés par
un espace vertical des autres éléments html, chaque titre occupe toute la largeur disponible, les retours à
la ligne dans le code n'ont aucune incidence sur le rendu des titres dans le navigateur.

Par défaut, les titres ont une taille d'affichage relative à leur importance
(de1à6), une page html peut contenir plusieurs <h1> sous certaines
conditions*.

Ò Les titres sont des éléments html de type bloc.

J. Les listes : <UL>, <OL>, <LI> :

Les listes en html peuvent être ordonnées (numérotées) ou non-ordonnées (à puces) :

• <ul>...</ul> encadre une liste non-ordonnée (ul pour unordered list)

• <ol>...</ol> encadre une liste ordonnée (ol pour ordered list)
• <li>...</li> encadre chaque élément d'une liste (li pour list item)

Les listes peuvent s'imbriquer les unes dans les autres, quels que soient
leurs styles.
<ol>, <ul> et <li> sont des éléments html de type bloc.

K. HTML : les liens :

Les liens sont la base du web puisque c'est grâce à eux que la navigation entre les sites web est rendue
possible. Le nom même du langage utilisé pour 'créer' toutes les pages web est une référence explicite à la
notion de lien hypertexte : HTML signifiant Hypertexte Markup Language.

Rappelons que le web est à l'origine un moyen simple pour lire et naviguer entre différents documents.
Tout ce qui tourne autour du web consiste en des documents et à la façon d'y accéder.

Un lien peut renvoyer vers une page d'un même site (lien interne), vers une page d'un autre site (lien
externe) ou encore vers un autre endroit d'une même page (lien ancre).

Le principe d'un lien est très simple : en cliquant sur le contenu visible d'une page (un texte, une image, ...),
l'utilisateur est redirigé vers le document cible (le plus souvent une page).

Enfin, les liens (tant internes qu'externes) sont fondamentaux pour le référencement naturel d'un site :
pour évaluer et indexer un site web, les moteurs de recherche en parcourent les pages et en mesurent la
pertinence selon plusieurs critères dont, entre autres, ses hyperliens.

65
 L. <A>…</A> : La balise des liens :

La balise <a> permet de créer un lien.

L'utilisateur voit uniquement le contenu placé entre <a> et </a>. C'est ce contenu qui est cliquable et avec
lequel l'utilisateur peut interagir. Par défaut, le texte d'un lien est représenté en bleu et souligné.

On remarque que la balise d'ouverture <a> est différente des balises vues
jusqu'à présent : elle contient une information supplémentaire, à savoir
l'URL de la page vers laquelle pointe le lien.
Cet élément additionnel au sein de la balise est un attribut. Cet attribut
contient une valeur qui est l'URL.
La balise <a> est un élément de type inline.

M. Attribut de balise :

Un attribut de balise est une valeur supplémentaire qui complète un l'élément html (l'élément <a> dans
l'exemple) ou qui détermine son apparence ou son comportement.

Certains attributs sont facultatifs, d'autres sont obligatoires. L'attribut href de la balise <a> est un attribut
obligatoire car c'est lui qui précise la cible du lien. Sans cette information additionnelle, autrement dit
sans cet attribut, le lien n'est pas un lien. href signifie hypertext reference.

La forme générale d'un attribut de balise est attribut="valeur".

On peut enchaîner plusieurs attributs au sein d'une même balise. Il suffit de les séparer par un espace et
leur ordre n'a pas d'importance.

Par exemple : l'attribut target permet de cibler dans quelle fenêtre du navigateur doit s'ouvrir le document
ciblé. Ainsi, la balise suivante, complétée avec l'attribut target, ouvrira la page d'accueil de l'ihecs dans un
nouvel onglet (ou une nouvelle fenêtre) :

<a href="http://www.ihecs.be" target="_blank">ihecs/<a>

O. HTML : les images :

Les formats d'images les plus utilisés sur le web sont : le jpg (ou jpeg), le gif, le png, le svg. Chaque format
possède ses caractéristiques et ses avantages / inconvénients :

• Le format jpg est un format qui compresse l'image (entraînant une dégradation visuelle). C'est le
format idéal pour les photographies.
• Le format gif est un vieux format d'image au nombre de couleurs limité à 256. Son seul intérêt
réside aujourd'hui dans sa capacité à être animé.

66
 • Le format png est un format créé pour remplacer le format gif. L'intérêt principal du png est qu'il
gère la transparence. Il a également un très bon taux de compression sans dégradation visuelle.
• Le format svg est un format vectoriel et donc potentiellement très léger. Le svg permet donc
l'agrandissement sans dégradation. Il peut également être contrôlé et animé via css et/ou
javascript. L'intérêt principal du svg est son faible poids. Il convient au formes simple mais pas à la
photographie.

P. <IMG> : la balise d’insertion d’une image :

La balise <img> (img pour image) permet d'insérer une image dans un
document.

<img> requiert l'attribut src (src pour source) dont la valeur doit pointer vers
le fichier image à insérer dans la page.

L'attribut alt (texte alternatif) est également nécessaire. Il permet d'ajouter un

texte alternatif à l'image, le plus souvent une description. Ce texte influence le
référencement et favorise l'accessibilité.

Une image s'affiche en pleine taille. Il est possible de forcer cette taille avec les attributs width et height
(la valeur est le plus souvent exprimée en pixel) mais réduire la taille d'affichage d'une image ne réduit pas
son poids!

La balise <img> est un élément de type inline.

Q. Liens relatifs/ lien absolus :

Un lien absolu contient l’URL complète (incluant le protocole) vers une page web ou un fichier précis
(image, vidéo, pdf, etc.). Les liens absolus sont nécessaires quand on pointe vers une ressource externe
(logée sur un autre site, un autre serveur).

Exemples :

Un lien relatif n’inclut que le nom d’un fichier ou d’une page spécifique. Le chemin vers la ressource
(fichier ou page) est relatif à partir du site ou de la page dans laquelle se trouve le lien. les liens relatifs
peuvent être utilisés au sein d'un même site web.

Exemples :

Parfois, vous devrez inclure plus d’informations que le nom d’un fichier pour créer un lien relatif.
Dans le dernier exemple ci-contre, logo.png n'est pas dans le même dossier qu'index.html mais dans un dossier appelé images. Le lien relatif
entre index.html et logo.png doit inclure le nom du dossier.

67
3. CSS (& HTML)

CSS (Cascading Style Sheet – feuilles de style en cascade) est un langage permettant de gérer / contrôler
l'apparence et la disposition des éléments html qui s'affichent à l'écran. D'un point de vue graphique, CSS
est le complément idéal et incontournable du langage HTML.

Quasiment tout est gérable par CSS. À l'aide de règles de styles, il est possible de modifier, par exemple,
les couleurs de fond, de texte, de bordures, les polices de caractères, la taille des éléments, leur
alignement, la grille de mise en page, l'adaptation des styles selon l'écran, les styles pour l'impression
d'une page, etc.

A. Principes :

Afin d'appliquer un style à un élément html, il faut pouvoir cibler cet élément. Ce ciblage est possible grâce
à des sélecteurs. Les sélecteurs sont l'une des bases fondamentales du langage CSS.

Le type de sélecteur le plus simple est le sélecteur d'élément (html). Il permet de cibler tous les éléments
d'un même type (ex: tous les paragraphes, ou tous les titres h1, etc.) en vue de leur appliquer un style.

D'autres sélecteurs permettent des ciblages spécifiques.

Une fois un type d'éléments ciblé, il faut définir quel(s) aspect(s) de cet élément la règle de style va
modifier. À cette fin, on détermine quelle est la propriété à modifier et on applique une valeur à cette
propriété.

Le couple propriété / valeur est appelé une déclaration. L'ensemble sélecteur et déclarations est appelé
une règle de style.

Ce premier exemple illustre chaque composante d'une règle de style :

Cette règle utilise le sélecteur p pour cibler tous les paragraphes d'une page. Les différents styles qu'on
souhaite appliquer à nos éléments p sont regroupés entre accolades. Cet exemple ne comprend qu'un
style qui va modifier la couleur des paragraphes. La règle indique que la propriété color des paragraphes
doit prendre la valeur rouge.

L'ensemble propriété : valeur est appelée déclaration. Chaque déclaration se termine par un point-virgule.
On peut ajouter autant de déclarations que souhaité au sein d'une règle.

68
 B. Ou écrire le code CSS ?

Il existe trois méthodes pour ajouter des styles au html :

1. Directement dans une balise html,
2. En début de page html, dans l'en-tête (<head>) du document,
3. dans un fichier externe (= la méthode idéale).

1. Méthode 1 : style dans un élément HTML :

La première façon d'ajouter des styles est de les ajouter directement à l’intérieur même d’un élément
HTML, à l'aide de l'attribut style. Ce style ne s'appliquera alors qu'à l'élément auquel il a été ajouté.
Cette méthode d’écriture du CSS n’est pas recommandée.

Pour ajouter des styles au sein même d'une balise, on utilise l'attribut style auquel on passe comme
valeur(s) la ou les déclarations CSS souhaitées. Par exemple :

Cette méthode semble pratique et facile. Elle n’est toutefois pas recommandée pour des raisons de
performance et de maintenance : elle demande d'ajouter les styles à chaque élément et rend les mises à
jour compliquée. De plus, la multiplication des déclarations augmente le risque de différences
involontaires dans les styles.

2. Méthode 2 : style dans l’en tête (<head>) du document :

La seconde façon d'ajouter des styles est de les placer dans l'entête du document, à l'intérieur d'une
balise <style>.

Ces styles s'appliqueront alors à tous les éléments correspondants aux sélecteurs utilisés dans <style>.
Il faut bien sûr répéter l'opération dans chaque page html du site, ce qui alourdit l'ensemble et complique
la maintenance des styles.

69
 3. Méthode 3 : styles dans un fichier CSS séparé :

Nous pouvons écrire notre code CSS dans un fichier séparé portant l’extension .css . C’est la méthode
recommandée, qui sera utilisée autant que possible.

Cette méthode comporte de nombreux avantages. La séparation (dans des fichiers distincts) des contenus
(fichiers html) et de la mise en forme de ces contenus (fichiers css) facilite la maintenance des styles,
allège l'ensemble des documents et enfin rend le code plus lisible.

L'avantage principal de cette méthode est qu’on va pouvoir appliquer des styles à plusieurs pages HTML
en même temps.

En utilisant l’une des deux premières méthodes, nous sommes obligés de réécrire nos styles CSS dans
chaque page HTML (méthode 2) voire même dans chaque élément (méthode 1).

La liaison entre une page html et un fichier css se fait à l'aide de la balise <link>, qu'on place dans l'en-tête
du fichier html :

C. Sélecteur CSS principaux :

Sélecteur d'élément :
Applique la règle à tous les éléments html correspondants à la balise choisie comme sélecteur. Tous les
titres de niveau 2 seront en bleu.

Classe :
Applique la règle uniquement aux éléments html ayant le nom de la classe en attribut (class). Seuls les
éléments ayant l'attribut class ="center" auront un texte centré. Le nom de la classe est précédé d'un point
lors de sa définition en CSS.

Id :
Applique la règle de style au seul élément ayant cet id (identifiant unique). Un seul élément par id est
permi dans une page html. Seul l'élément ayant l'attribut id="para1" aura un texte en rouge sur
fond jaune. Le nom d'un id est précédé d'un # lors de sa définition en CSS.

70
 D. Élément block / élément inline :

De manière schématique, il existe deux grands types d’affichage principaux pour les éléments HTML : un
élément HTML est soit de type block, soit de de type inline.

Ces types d’affichage vont définir la façon dont les éléments vont se comporter dans une page par rapport
aux autres éléménts, et la place ou l'espace qu’ils vont occuper dans la page.

Connaître le type d’affichage d’un élément HTML est important pour créer et mettre en forme une page
web car les éléments block les éléments inline se comportent de façon différente dans une page et
certaines propriétés CSS vont avoir des comportements différents selon le type d’affichage d’un élément.
Il est possible de changer le type d'affichage d'un élément à l'aide de la propriété display en CSS.

Notons l'existence du type hybride inline-block dont les éléments se comporte comme les éléments inline
mais ayant la possibilité de se voir attribuer une largeur (width) et une hauteur (height).

Comportement des éléments BLOCK :

• Un élément BLOCK commence toujours sur une nouvelle ligne, et les navigateurs ajoutent
automatiquement un espace (une marge) avant et après cet élément.
• Un élément BLOCK occupe toujours toute la largeur disponible (il s'étend à gauche et à droite
autant qu'il le peut).
• Les éléments BLOCK couramment utilisés sont :
<p> (paragraphes) et <h1> - <h6> (titres)
<div> qui définit une division ou une section dans un document HTML.

Comportement des éléments INLINE :

• Un élément INLINE ne commence pas sur une nouvelle ligne.

• Un élément INLINE n'occupe que la largeur nécessaire.
• Les éléments INLINE les plus courants sont :
<a> pour les liens
<span> qui permet de définir une partie de texte, par exemple au sein d'un paragraphe, pour
ensuite lui appliquer un style à l'aide d'une classe CSS.
<img> (insertion d'images en html)

71
Les éléments BLOCK peuvent s'imbriquer. Les éléments INLINE peuvent s'imbriquer.
Un élément BLOCK peut contenir des éléments INLINE mais un élément INLINE ne peut pas contenir
d'élément BLOCK.

E. Le modèle de boite (box model) :

En CSS, tout élément est considéré comme étant inclus dans une boîte ("box"
en anglais). On parle de modèle de boite, ou box model. Connaître les
composantes et le fonctionnement du box-model est essentiel pour maîtriser
la mise en page web.

Le box model est essentiellement une boite qui entoure chaque élément
HTML. Cette boite est composée dans l'ordre et de l'extérieur vers l'intérieur :
de marges (margin), de bordures (border), de "marges intérieures" (padding)
et enfin du contenu (content) proprement dit.
Les composantes du box model :

• Content : le contenu de la boite, où le texte et les images apparaissent.

• Padding ("marge intérieure" ou "remplissage") : permet de dégager une zone autour du contenu.
• Border : une bordure qui entoure le padding et le contenu.
• Margin : espace vide situé à l'extérieur de la bordure. La marge est transparente.

Tous les éléments de type BLOCK obéissent à ce principe.

La largeur et la hauteur des boites peuvent être définies à l'aides des propriétés CSS width et height. Les
tailles sont exprimées en pixels ou dans d'autres unités qui soit soit absolues soit relatives.

Par défaut, la largeur et la hauteur (d'une boite) définies en CSS prennent en compte uniquement le
contenu ; padding et border s'ajoutant ensuite.

Pour contrôler précisément la taille totale d'une boite (contenu + padding + border), on utilisera la
déclaration box-sizing: border-box; (la valeur par défaut, ne prenant en compte que le contenu étant box-
sizing: content-box;)

F. Les sélecteurs CSS

Toute règle CSS commence par un sélecteur qui est une expression indiquant au navigateur
à quelle(s) entité(s) HTML s'applique la règle.
On va voir les principaux sélecteurs CSS :

1. Le sélecteur universel :

Le sélecteur universel est représenté par un astérisque. Il est dit universel car
il pointe tous les éléments html de la page. Ce sélecteur peut être utilisé pour
supprimer les marges et les marges par défaut de tous les éléments.
72
 2. Les sélecteurs de type :

Ce sélecteur simple permet de cibler les éléments html correspondant au nom de balise indiqué.

3. Les sélecteurs de classe :

Les sélecteurs de classes permettent de cibler le ou les élément(s) HTML auquel est associé le nom de la
classe CSS : tous les éléments HTML ayant un attribut class="nomDeLaClasse" seront formatés selon la
règle de style correspondante.

Attention : en CSS, le nom d'une classe commence toujours par un point. Ce point n'est pas utilisé dans
l'attribut class de l'élément html.

4. Les sélecteurs d’ID :

Un sélecteur d'identifiant (ID selector) permet de cibler un élément grâce à la valeur de son attribut id.

La différence entre ID et classe (cf. slide précédent) est qu'une classe peut être utilisée autant de fois que
souhaité dans un document html, alors qu'un ID doit être unique : il ne peut y avoir qu'un seul élément
ayant l'id dans une page html. Notez l'utilisation du symbole # lors de la définition de la règle en CSS.

73
 G. Principales propriétés CSS :

Quelques propriétés css parmi les plus courantes :

1. Le texte :

Principales propriétés CSS pour le texte :

2. Background :

Principales propriétés CSS pour les background :

74
 3. Propriétés du box-model :

Principales propriétés du box-model :

75
 H. Principales balises HTML et leur attributs

1. HTML : structure générale d’une page :

<!DOCTYPE> :

Tous les documents HTML doivent commencer par une déclaration <!DOCTYPE>. Cette déclaration n'est
pas une balise HTML mais elle néanmoins obligatoire.

C'est une 'information' destinée au navigateur et qui indique le type de document auquel il doit s'attendre.
Le Doctype est unique (pas de balise de fermeture).

L'exemple ci-dessous correspond à la déclaration d'un document rédigé en HTML 5.

<html> :

La balise <html> représente la racine d'un document HTML.

Cette balise est le conteneur de tous les autres éléments HTML, à l'exception de la balise <!DOCTYPE> qui
la précède. L'attribut lang déclare la langue de la page web afin d'aider les moteurs de recherche et les
navigateurs.

<head> :

L'élément <head> est un conteneur pour les métadonnées (données sur les données) et est placé entre la
balise <html> et la balise <body>. Les métadonnées sont des données sur le document HTML. Elles ne
sont pas affichées.

Ces métadonnées définissent généralement le titre du document, le jeu de caractères, les styles, les scripts
et d'autres informations méta.

76
<body> :

La balise <body> définit le corps du document.

L'élément <body> contient tout le contenu d'un document HTML, comme les titres, les paragraphes, les
images, les hyperliens, les tableaux, les listes, etc. Il ne peut y avoir qu'un seul élément <body> dans un
document HTML.

2. HTML : balise d’en-tête :

<title> :

La balise <title> définit le titre du document. Cette balise est obligatoire dans tous les documents HTML.

Le contenu (textuel uniquement) de cette balise est important pour l'optimisation pour les moteurs de
recherche (SEO). Ce titre définit : le texte de l'onglet dans le navigateur, le texte d'ajout aux favoris, le titre
pour la page dans les résultats de recherche.

En conséquence, ce titre doit être précis et descriptif. Il faut éviter les titres très courts et les titres
génériques comme accueil, bienvenue ou produits et les titres trop courts. Il doit faire max 50-60 signes.

77
<style> :

La balise <style> est utilisée pour définir les informations de style (CSS) d'un document HTML. Les styles
définis dans cette balise ne seront appliqués qu'à la page html qui la contient.

<link> :

La balise <link> définit la relation entre le document actuel et une ressource externe.

Cette balise est le plus souvent utilisée pour créer un lien vers des feuilles de style externes (fichiers .css)
ou pour ajouter un favicon (icone qui s'affiche dans l'onglet du navigateur) à votre site Web.

L'élément <link> est un élément vide (pas de balise de fermeture) et ne contient que des attributs.

<meta> :

La balise <meta> définit les métadonnées d'un document HTML.

Les balises <meta> se placent toujours à l'intérieur de l'élément <head> et sont généralement utilisées
pour spécifier le jeu de caractères, la description de la page, les mots-clés, l'auteur du document, les
paramètres d'affichage, etc.

Comme tous les informations placées dans <head>, les métadonnées ne sont pas affichées sur la page,
mais elles sont utilisées par le navigateur (comment afficher le contenu ou recharger la page), par les
moteurs de recherche (mots-clés, description, etc.). La balise meta permet aussi définir d’indiquer
comment le navigateur doit afficher la page sur différents appareils (laptops, tablettes, smartphones,
etc.).

78
 3. HTML : titres :

<h1> – <h6> :

Les balises <h1> à <h6> sont utilisées pour définir les titres HTML. A ne pas confondre avec <title> !
<h1> définit le niveau de titre le plus important. <h6> définit le moins important.

On privilégie habituellement un seul <h1> par page mais on peut les multiplier à la conditions que chacun
soit le titre d'une section spécifique du document. Ne sautez pas de niveau de titre. Commencez par <h1>,
puis utilisez <h2>, et ainsi de suite.

4. HTML : paragraphes :

<p> :

La balise <p> définit un paragraphe. Les navigateurs ajoutent automatiquement une seule ligne vierge
avant et après chaque élément <p>.
79
 5. HTML : retour à la ligne :

<br> :

La balise <br> insère un seul saut de ligne. C'est une balise vide (pas de balise de fermeture). Cette balise
ne peut pas servir pour créer de l'espacement entre les éléments.

6. HTML : listes :

<ol> – <ol>

La balise <ol> définit une liste ordonnée. Une liste ordonnée peut être numérique ou alphabétique. Son
complément est la balise <li> qui définit chaque élément de la liste.

80
 7. HTML : hyperliens :

<a> :

La balise <a> définit un hyperlien, qui sert à relier une page à une autre.
L'attribut le plus important de l'élément <a> est l'attribut href, qui indique la destination du lien. Par
défaut, les liens s'affichent souligné et bleu (ou violet si la destination a déjà été visitée).
Une page liée s'affiche dans la fenêtre actuelle du navigateur, sauf si vous spécifiez une autre cible.

8. HTML : emphase :

<em> :

La balise <em> est utilisée pour définir un texte mis en valeur. Le contenu qu'elle contient est
généralement affiché en italique. Un lecteur d'écran prononcera les mots dans <em> avec une emphase,
en utilisant l'accentuation verbale.

9. HTML : importance :

<strong> :

La balise <strong>est utilisée pour définir un texte ayant une forte importance. Le contenu qu'elle
contient est généralement affiché en gras.

81
 10. HTML : images :

<img> :

La balise <img> est utilisée pour insérer une image dans une page HTML. Les images ne sont pas
techniquement insérées dans la page web, elles sont liées aux pages Web grâce à la balise. Par défaut une
image s'affiche à sa taille d'origine. Modifier sa taille d'affichage ne modifie pas le fichier (ni son poids).

11. HTML : conteneur générique de type block :

<div> :

La balise <div> définit une division ou une section dans un document HTML.

La balise <div> est utilisée comme conteneur pour les éléments HTML. La division (ou section) créée est
souvent ensuite stylisée avec CSS (en lui ajoutant une classe ou un id) Tout type de contenu peut être
placé à l'intérieur de la balise <div>.

12. HTML : conteneur générique de type inline :

<span> :

La balise <span> est un conteneur en ligne utilisé pour marquer une partie d'un texte, ou une partie d'un
document. Cette balise est facilement stylisée par CSS (souvent via une classe ou un id).

La balise <span> ressemble beaucoup à l'élément <div> mais <div> est un élément de type block alors que
<span> est un élément de type inline.
82
 13. HTML : balises sémantiques HTML 5 :

<header>,<nav>,<main>,<article>,<section>,<aside>,<footer> :

Une balise sémantique est une balise HTML qui apporte une indication sur le contenu d'une page web.

Au contraire des balises non-sémantiques comme <div> ou <span>, une balise sémantique donne du sens
et informe les robots d'indexation des moteurs de recherche sur l'importance et la nature des contenus
qu'elle encadre.
Elle permet donc aux moteurs de recherche de mieux comprendre et appréhender la nature et le rôle les
contenus.

Certaines de ces balises comme <header>, <footer> ou encore <article> permettent un découpage précis
des pages web en délimitant des zones spécifiques, ce qui permet aux robots de mieux interpréter la page.

Un autre atout de ce type de balisage est le fait qu’il permet une meilleure accessibilité des contenus pour
les personnes nécessitant des logiciels de lecture de site pour consulter le web, comme par exemple les
personnes non-voyantes.

Les balises sémantiques complètent la balise <div> qui reste toujours légitime en tant que conteneur
générique.

14. HTML : haerder :

<header> :

La balise <header> sert à encadrer les contenus introductifs d'une page (ou d'un <article>).
Ces contenus peuvent être : logo, baseline, navigation, liens réseaux sociaux, info de contact, zone de
recherche, texte introductif, etc.

83
 15. HTML : nav :

<nav> :

La balise <nav> sert à encadrer des éléments de navigation (les liens du menu principal ou d'un menu
secondaire, par exemple). Cette balise peut être placée dans le <header> principal de la page mais ce n'est
pas une obligation.

(pour les éléments d'une navigation, on utilise habituellement une liste <ul> qu'on formate visuellement avec CSS)

<main> :

La balise <main> sert à encadrer le contenu principal de la page, hors <header>,<nav> et <footer>. Une
page web contiendra un seul <main>. Cette balise englobera les différentes parties du contenus comme
les <section> et les <article>.

<article> :

La balise <article> spécifie un contenu autonome, ayant un sens en soi et étant dès lors susceptible d'être
distribué ou réutilisé de manière indépendante. Un document HTML peut contenir plusieurs <article>.

Par exemple : message de forum, article de magazine ou de journal, article de blog, fiche produit,
commentaire d'utilisateur, etc.

84
<section> :

La balise <section> spécifie un contenu qui, contrairement à <article>, ne doit pas pouvoir être considéré
comme autonome ni réutilisable ailleurs. C'est une balise générique qui sert à découper une page web en
différents éléménts (ou différentes "sections"). Une section peut contenir plusieurs articles. Idéalement,
chaque section doit avoir un heading

<aside> :

La balise <aside> définit un contenu à part du contenu dans lequel elle est placée. <aside> (« aparté » en
français) représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le contenu
principal du document. Les apartés sont fréquemment présents sous la forme d'encadrés ou de boîtes de
légende.

85
<footer> :

La balise <footer> définit un pied de page pour un document ou une section. Un élément <footer> contient
généralement : un copyright, des liens vers les conditions d'utilisations, sur la vie privée, des infos de
contact, un retour en haut de page, etc.

I. Comment choisir la bonne balise sémantique :

4. CMS

CMS : content management system

86
 A. Principes :

CMS = Content Management System = Système de gestion de contenu

Un CMS est un "outil" permettant de gérer un site web sans avoir besoin de code. L'objectif principal d'un
CMS est donc de faciliter la prise en main et la gestion d'un site web et d'assurer une autonomie
concernant la gestion de ses contenus.

Un ou plusieurs administrateurs peuvent alimenter le site en contenus (texte, medias, ...)

Un CMS propose une interface de gestion (aussi appelée back-office ou 'admin'), l'accès à cette interface
est protégée et son accès nécessite une autorisation (login/mot de passe). Selon le CMS, divers rôles
peuvent être attribués aux contributeurs (admin, simple éditeur, etc.)

Des templates ('thèmes' dans WordPress) assurent un affichage maîtrisé et cohérent des contenus en
front-end.
Les CMS peuvent proposer des fonctionnalités techniquement "complexes" (messagerie, chat, forum,
etc.) soit nativement soit via l'utilisation de plugins.

Certains CMS sont généralistes (permettent tous types de sites web), tandis que d'autres sont spécialisés,
par exemple en e-commerce, en eLearning (ex: Learn est basé sur Moodle).

B. Les CMS gratuits et open-sources :

Pourquoi opter pour une solution open-source ? Indépendance / Ouverture / Pérennité.

C. Wordpress

1. Avantages et inconvénients :

Avantages Inconvénients
Interface d'administration "user-friendly" & Peut vite devenir une "usine à gaz" si mauvaise
"beginner-friendly" gestion

Quantité et diversité des plugins & thèmes CMS le plus populaire > cible privilégiée d'attaques
(probl de sécurité / vulnérabilité)
87
 • Nécessite des mises à jour très régulières (du
coeur du système & des plugins)

CMS le plus populaire > large communauté Pas de contrôle 'officiel' sur la qualité des plugins &
d'utilisateurs et de développeurs thèmes disponibles.

Orienté SEO (Search Engine Optimization). La personnalisation (par des développeurs) peut
Notamment grâce à des plugins dédiés (Yoast) vite devenir coûteuse.

Open-source & gratuit

S'adapte à tous types de sites (blog, business, e-

shop, forum, event, eLearning, etc.)

Bonne intégration réseaux sociaux

Gestion & rôles des utilisateurs

Gestion multilingue via plugins (pas unique à WP)

2. WordPress.org VS wordPress.com :

WordPress.org :

• Propose le téléchargement du package de fichiers de WP pour installation sur son propre serveur.
• Tous les plugins & thèmes sont installables.
• Accès au code source, contrôle total sur l'ensemble du système.
• Pas de publicité.
• Accès aux fichiers FTP.
• Requiert plus de compétences techniques. Requiert maintenance et mises à jour. Nécessite d'avoir
un hébergement.

WordPress.com :

• Site commercial permettant d'héberger un site WP mais avec limitations. Propose des offres
payantes (4€ à 45€ / mois). Version gratuite limitée.
• Choix des thèmes et plugins limités.
• Ne permet pas d'uploader le thème de son choix. N'autorise pas certains plugins.
• Supprimer les publicités a un coût annuel. Pas d'accès FTP aux fichiers.
• Maintenance & mises à jour automatiques.

3. WordPress : exigences techniques :

Un serveur supportant PHP version 7.4 ou supérieure :

PHP est un langage côté serveur produisant des pages web dynamiques via un serveur HTTP. Une page
web dynamique est une page générée à la demande (<> page web statique) en fonction d'informations qui
ne sont disponibles qu'au moment de sa consultation : résultats d'une recherche sur Amazon, fil
personnel Facebook ou Instagram, page d'accueil d'un site de presse en ligne, etc.
88
On considère qu'environ 80% des sites web utilisent PHP. Facebook, Wikipedia, etc. utilisent PHP !

MySQL, version 5.7 ou supérieure :

MySQL est un système de gestion de bases de données relationnelles

Support du protocole https

En résumé, WP fonctionne comme ceci : tous les contenus du site sont stockés dans une
grande base de données. Lorsqu'un utilisateur veut consulter une page, le serveur reçoit
la requête et va récupérer les contenus de la page demandée dans la base de données
tandis que des scripts PHP génèrent le code HTML de la page.

4. Wordpress côté admin : interface d’administration :

1. la barre d'outils : accès rapide au site, aux mises à jour, aux

commentaires, à la création et l'ajout de nouveaux
contenus
2. le dashboard : informations principales relatives au site
3. la navigation principale de l'admin : accès détaillé aux
éléments de gestion des contenus et d'administration
générale du site.

5. Ajouter du contenu : les articles :

Les articles sont les éléments principaux (ou contenus) d’un site WordPress. Il s’agit
d’un type de publication d’un site WordPress, dans lequel l’aspect chronologique
intervient, tout autant que leur classement dans une hiérarchie de catégories ou de
leur regroupement sous diverses étiquettes.

Les catégories permettent une classification de vos articles dans des groupes et des
sous-groupes, ce qui aide les personnes visitant votre site à naviguer dans les contenus
et à utiliser votre site. Chaque article dans WordPress peut être classé dans une ou
plusieurs catégories.

Les étiquettes (tags si vous travaillez avec WP en anglais) sont des "mots-clés" que vous pouvez associer à
chaque article afin de les classer. À la différence des catégories, les étiquettes n’ont pas de hiérarchie, ce
qui signifie qu’elles n’ont pas de relation entre elles. Par contre, tout comme les catégories, les étiquettes
fournissent un autre moyen d’aider les personnes visitant votre site à accéder aux divers contenus de
votre site.

!!!! Exemple : Vous faites un site proposant des recettes de cuisine. Chaque recette sera un article.
Vos catégories seront par exemple : entrées, plats, desserts. Vos étiquettes seront : végétarien, légumes, chocolat, salé, été, bon
marché, etc. Vos recette seront classées selon vos catégories (qui pourraient servir à établir la navigation), et chaque recette
pourra être associée à une ou plusieurs étiquettes. En consultant une recette, un utilisateur pourra cliquer sur les catégories et
les étiquettes accolées à cette recette pour poursuivre sa navigation selon ses envies et ses intérêts.
89
 6. Ajouter du contenu : les médias

Les Médias sont les images, les vidéos, les enregistrements audios ou les fichiers
(pdf, etc) que vous uploadez ("téléverser" dans WP en français) et utilisez ensuite dans
votre site.

La Médiathèque vous permet d’ajouter, modifier, supprimer ou visualiser les médias

déjà uploadé. De multiples médias peuvent être sélectionnés simultanément pour
être supprimés. Une fonction de recherche et de filtrage est aussi proposée pour vous
permettre de trouver le média souhaité.

Tous les médias ajoutés au site sont accessibles via la Médiatèque. Un média qui a été uploadé est
utilisable autant de fois que souhaité dans le contenu du site.

Typiquement, un média est uploadé dans la médiathèque et est ensuite inséré dans le contenu lorsque
vous rédigez vos publications (articles ou pages), mais il est également possible d'ajouter un nouveau
média directement lors de l'édition du contenu d'un article ou d'une page.

7. Ajouter du contenu : les pages :

Les pages constituent un autre moyen d’ajouter du contenu à votre site WordPress et
sont souvent utilisées pour présenter des contenus statiques concernant le site ou
l’organisation qui le propose, les pages sont typiquement des contenus « intemporels »
par nature, sans notion de chronologie.

Un bon exemple de page est l’information contenue dans « À propos », « Historique »

ou encore « Contact ».

Les pages ne doivent pas être confondue avec les articles, ni avec le mot « page » (telle que la page
d’accueil, ou la page d’une catégorie) qui désigne toute page web ou tout document HTML.
Dans le jargon de WP, une page est un type de publication différent de celui des articles.

Parce que les pages ne sont pas intégrées dans la chronologie normale des articles du site (ou d’un blog),
et en tant que telles, elles ne sont pas affichées avec les articles, mais individuellement.
Les pages ne sont pas non plus reliées aux catégories et aux étiquettes.

8. WP : les thèmes (les apparence du site) :

WordPress vous offre la possibilité de facilement modifier et personnaliser la

présentation de votre site en installant et activant de nouveaux thèmes ou en
personnalisant le thème par défaut.

Un thème correspond à la conception globale d’un site et englobe les couleurs, le

graphisme, la mise en page. WordPress permet de choisir son thème. Une énorme
quantité de thèmes sont disponibles en lignes, certains gratuits, d'autres payants. La
plus grande plateforme de thèmes disponibles pour WP est (à l'heure actuelle)
ThemeForest.

90
Personnaliser permet la modification de certains éléments du thème (les options de ce sous-menu
changent selon le thème) et l'ajout de règles CSS personnalisées.

Les widgets sont des blocs secondaires (c’est-à-dire dont le contenu n’est pas primordial), situés en
dehors du contenu des publications, dans des espaces qui leurs sont alloués via le thème, et qui vous
permettent d’ajouter divers éléments d’information qui complètent le contenu de votre site, dans la
colonne latérale ou encore dans le pied de page. Les widgets, par exemple, peuvent être utilisés pour
ajouter une liste de catégories, d’archives, articles ou commentaires récents.

La fonctionnalité des menus vous permet de créer un menu de navigation composé de pages,
catégories, liens personnalisés, étiquettes, etc. qui est présenté aux internautes. Un widget WordPress de
menu personnalisé vous permet d’afficher un menu personnalisé dans la colonne latérale ou dans toute
autre zone de widgets proposée par votre thème.

9. WP : les extensions (plugins) :

Les extensions (plugins en anglais) permettent d’ajouter à votre site de nouvelles

fonctionnalités qui ne sont pas fournies dans une installation par défaut. Il existe une
très riche variété d’extensions disponibles pour WordPress, dont l’installation et la
gestion se font aisément.

Si vous souhaitez ajouter une nouvelle fonctionnalité à un site WP, il est fort probable
qu'il existe une extension qui permette de le faire.

Parmi les fonctionnalités susceptibles d'être ajoutée à un site WP via une extension, citons : gestion de galeries d'images,
optimisation moteurs de recherche (Yoast) , sécurité renforcée (Wordfence), création et gestion de formulaires de contact et
autres (WPForm, Contact7), liaison Google Analytics pour les stats de visite directement dans le dashboard, constructeurs de
mises en pages avancées (Elementor), gestion e-commerce (WooCommerce), mise en cache des contenus, gestion des 'lightbox',
filtre anti-spam (akismet, installé par défaut avec WP), etc.

Lors du choix d'une extension, il est conseillé de vérifier : la popularité de l'extension (a-t-elle été installée
dix fois ? cinq mille fois ? un million de fois ? Au plus au mieux, évidemment), la date de la dernière mise à
jour de l'extension (une extension n'ayant pas été mise à jour depuis plus d'un an est peut-être
abandonnée par ses développeurs), la compatibilité avec la version de WP utilisée.

10. WP : les comptes utilisateurs :

Les comptes vous permet de gérer, c’est-à-dire ajouter, modifier ou supprimer les
comptes des utilisateurs et utilisatrices de votre site.
Chaque type de compte se voit assigner un rôle qui détermine les autorisations de
l'utilisateur :

Administrateur : un compte administrateur n’a aucune restriction dans WordPress, il a

accès à tout le contenu, réglages et les fonctionnalités du site. Il peut créer d’autres
comptes administrateurs. Par contre, seul le compte administrateur utilisé pour créer le
site peut transférer la possession du site à d’autres administrateurs, et lui seul peut
supprimer le site web.

91
Éditeur : un compte qui est utilisé pour éditer des contenus dans WordPress. Il a donc accès à l’intégralité
des articles, pages, commentaires, catégories, étiquettes et liens.

Auteur : contrairement à un compte Éditeur, un compte Auteur ne peut que créer, modifier et publier ses
propres articles.

Contributeur : comme un Auteur, un Contributeur peut créer et modifier ses propres articles seulement,
il ne peut pas les publier.

Abonné : un abonné ne possède aucun privilège dans WordPress. Seulement, les abonnés de votre site
recevront des notifications sur les articles auquel ils ont commenté, et sur les nouvelles publications de
votre site WordPress.

Général propose les réglages de configuration générale du site : titre, baseline, url du
site, email du gestionnaire, langue du site, format d'affichage des dates et heures,...

Écriture permet de définir la catégorie (et le format) par défaut des articles, etc.

Lecture permet de définir ce qu’affiche la page d’accueil (les derniers articles ou une
page de votre choix), le nombre d’articles affichés par page, si les listes d'articles les
affichent en entier ou juste leur intro. Enfin, vous pouvez demander aux moteurs de
recherche de ne pas indexer le site.

Permaliens offre la possibilité de créer une structure d’URL personnalisée pour les URL permanentes des
articles et des archives. Cela peut améliorer l’esthétique, la convivialité, la compatibilité de vos liens et le
SEO.

Confidentialité permet de définir quelle page affiche la politique de confidentialité du site parmi les
pages existantes. Une page nommée « Privacy policy » ou « Politique de confidentialité » est créée à
l’installation de WordPress, mais il est nécessaire de l’adapter à son site.

11. WP : l’éditeur Gutenberg :

Gutenberg est le nom de l'éditeur actuel de WP.

C'est par Gutenberg qu'on ajoute tous les contenus à nos

articles et nos pages : titres, textes, listes, images, fichier
audio, vidéo, vidéo youtube, liens, séparateur visuel,
calendrier, tweet, etc.

Chaque contenu est un "bloc" avec ses options propres

(l'icone + en bleu dans le coin supérieur gauche du
screenshot) permet l'ajout d'un bloc.

Gutenberg prend en compte le thème actuel du site pour montrer (au plus proche) à quoi ressemblera la
publication. En ce sens Gutenberg essaie d'être WYSIWIG (What You See Is What You Get).

92
Partie Lambiotte
1. Fondamentaux de la lettre

A. Typographie : corps et interlignage

L interlignage se mesure en points d’une ligne de base à l’autre. La valeur de l’interlignage

comprend le nombre de points du caractère et l’espace réel entre les lignes. Ainsi, un caractère de 10
points avec 12 points d’interligne signifie en réalité deux points d’espace entre chaque ligne.

Un texte est une succession de lettres groupées en mots. Comment donc la typographie, composant
unique, ne pourrait-elle pas avoir une incidence sur la perception d’un texte ? Pourquoi d’ailleurs
existerait-il autant de caractères différents, si leurs formes n’avaient aucune importance ?

B. Quels critères choisir une police de caractère ?

Morphologie :
Le rapport entre pleins et déliés, c’est-à-dire les parties les plus grasses et les plus maigres de la lettre,
ainsi que l’axe selon lequel ils s’organisent ont une incidence majeure sur la couleur et la forme.

Empattements :
L’esprit d’un texte change suivant que la typographie utilisée a ou non des empattements. S’il est
vrai que les empattements marquent plus nettement la ligne de texte, il est hâtif de penser qu’un
caractère avec empattement est plus lisible qu’un caractère bâton, (c’est-à dire sans empattement) car
beaucoup d’autres paramètres influent sur la lisibilité.

93
Couleur :
La graisse des caractères, c’est-à-dire l’épaisseur des lettres influe sur la couleur du texte et son
impact. On parle aussi de nuances et de contrastes.

Proportions :
La chasse est l’espace total d’encombrement d’une lettre. Elle comprend la largeur de la lettre
additionnée de ses approches, c’est-à-dire les espaces qui le séparent du caractère précédant et suivant.
Le dessin de lettre ainsi que la nature de la lettre influencent la chasse.

La chasse, c’est-à-dire la largeur des lettres et de leurs approches, a une incidence sur l’encombrement du
texte mais également sur le rythme de lecture. Les caractères étroits présentent un réel intérêt pour la
composition de titres mais leur usage dans les petits corps est plus délicat.

Du fait de leurs proportions, les caractères étroits sont moins lisibles, d’une part parce que la forme de
chaque lettre est moins différenciée des autres, et d’autre part parce que les contreformes sont moins
importantes. L’interlettrage qui est en rapport avec les contreformes et la chasse des lettres est d’autant
plus réduit que le caractère étroit.

C. Jargon typographique

Police de caractère / fonte : C’est le style du dessin de lettre. Les polices sont classées en différentes
catégories.

Plein et délié : C’est, respectivement, les parties les plus épaisses et les plus fines du caractère.

Empattement : C’est un petit trait ou une forme rectangle ou triangle qui prolonge les extrémités des
lettres.

Axe droit ou oblique : C’est l’axe de construction de la lettre. Un axe droit indique un dessin symétrique
de la lettre, sans contraste dans les épaisseurs. Un axe oblique a pour effet d’ajouter du plein et du délié
dans l’aspect de la lettre.

94
Chasse : C’est l’espace total d’encombrement d’une lettre. Elle comprend la largeur de la lettre
additionnée de ses approches, c’est à dire les espaces qui le séparent du caractère précédant et suivant. Le
dessin de lettre ainsi que la nature de la lettre influencent la chasse. Il existe des fontes dites à chasse fixe,
c’est à dire que l’encombrement de chaque caractère est identique.

Contreforme : C’est l’espace partiellement ou totalement clos à l’intérieur de la panse d’une lettre.

Interligne : C’est la distance entre deux lignes de texte successives. Elle s’exprime en point ou en pixel.

Texte en drapeau / justifié : Un texte en drapeau est un texte qui n’est ni justifié ni centré. Toutes les
lignes sont alignées soit à gauche (on parle de fer à gauche), soit à droite (on parle de fer à droite).

C’est un texte dont toutes les lignes ont la même longueur. Les attributs d’ajustement pour « étirer le texte
» afin de remplir la ligne sont les suivants : les espaces inter-mots, l’approche, les césures.

Inter-mots : C’est l’espace entre les mots d’un texte. Ils sont définis en fonction du corps, mais on peut
laisser une amplitude en pourcentage pour les modifier (notamment pour gérer les textes justifiés).

Lézarde : C’est l’espace entre les mots d’un texte. Ils sont définis en fonction du corps, mais on peut
laisser une amplitude en pourcentage pour les modifier (notamment pour gérer les textes justifiés).

Interlettres : C’est l’espace horizontal entre deux caractères. Il est défini par le typographe mais sa valeur
peut être changée de façon à rapprocher les lettres ou les éloigner : on parle d’interlettrage serré, normal,
ou large.

95
Crénage : C’est l’ajustement de la distance (espace optique) entre les lettres pour une police de
caractère donnée. Idéalement, elle doit être réglée à la main (ou plutôt à l’oeil) et être homogène pour
toutes les paires de lettres. Par ex. : ab, ba, ac, ca, ad, da etc.

Césure : C’est la coupure d’un mot à la fin d’une ligne. Par convention, on évite de laisser deux caractères
en début de ligne et on coupe généralement les mots de 6 lettres au moins. Les césures sont à éviter sur
les textes en drapeau mais indispensables sur les textes justifiés.

Variantes typographiques : Ce sont les différents dessins de lettre que l’on peut trouver pour une
police de caractère. On trouve des variantes de graisse (light, regular, bold, black, etc.), d’oblique (italique)
et de chasse (condensé, régulier ou étendu).

Bas-de-casse : C’est l’ensemble des caractères minuscules d’une fonte. Ils sont appelés comme ça car ils
étaient rangés en bas de la casse typographique.

Capitale : C’est l’ensemble des caractères en grand format pour une fonte donnée. En français, chaque
phrase démarre par une capitale.

Ligature : C’est la fusion de deux graphèmes d’une écriture pour en former un nouveau. Le « oe » est une
ligature bien connue en français, mais beaucoup d’autres existes comme st, ft, ae, etc. Elles enrichissent les
possibilités offertes au graphiste qui compose le message.

2. Grilles de mise en page

Une grille typographique est une structure à deux dimensions, composée de séries d’axes verticaux et
horizontaux se croisant, permettant ainsi de structurer le format et de hiérarchiser les éléments du
contenu.

Elle est incontournable pour les documents d’édition, les affiches, les formats de presse ou numériques.

96
La grille de mise en page a été théorisée par le graphiste suisse Josef Müller- Brockmann dans les années
1960.

Elle permet de découper le format dans sa largeur (et plus tard dans sa hauteur) en plusieurs parties
égales, séparées par des espaces verticaux. L’usage des colonnes ainsi créées permet de travailler avec des
« zones », proportionnelles entre elles, ce que l’œil du lecteur perçoit immédiatement.

A. Le format

Au départ, il y a le format. Étant donné que le travail se fait en deux dimensions, le format, c’est donc la
largeur et la longueur.

Dans ce format, c’est là que tout va se passer. Ce qui induit une notion maîtresse en art graphique : la
notion de limite. Il y a une zone définie, finie, avec des bords. Ainsi, le hors champs, le non montré, le « en
dehors du cadre » doit également être pris en compte.
C’est dans la zone active, visible, que va se déployer la mise en page avec ses éléments graphiques tels que
les typographies, photos, illustrations, graphiques, formes, etc.

La grille va nous y aider, en fournissant des repères de positionnement cohérents entre eux et avec le
format. En somme, la cohérence des parties entre elles et avec le tout.

B. Lisibilité

Déjà au 15ème siècle, Gutenberg utilisait une grille puisqu’il scindait en deux colonnes sa bible à 42 lignes.

Primordialement, il faut considérer la lisibilité du texte. Une ligne est constituée d’un certain nombre de
signes, espace compris. Si la longueur de la ligne (on parle de sa « justification ») est trop longue, l’œil se
fatigue beaucoup plus vite.

Au-delà de 60 à 80 signes, la longueur devient trop importante et l’œil se décourage. Bien qu’elle ne soit
pas la seule composante de la lisibilité, la grille, et donc l’agencement dans la page qu’elle sous-tend,
contribue grandement à la lisibilité.

Le retour à la ligne imprime un rythme à la lecture. Il opère des relances naturelles qui permettent de
garder la concentration du lecteur. Mais ce n’est pas tout un pavé de texte composé en justification courte
semble plus « digeste » que le même texte composé en justification longue.

C. La circulation des blancs

La grille permet, par ses gouttières (espace entre chaque colonne), de faire circuler les blancs dans la page.

Et cette respiration est cruciale, notamment lorsque la quantité de texte mise en page est importante
parce que les blancs segmentent l’information et permettent de faire respirer la page.

Si l’on ajoute aux gouttières qui séparent les colonnes les sauts de lignes et sauts de paragraphes, on
obtient naturellement une circulation des blancs qui rythme la page.

97
 Sans respiration, pas de lisibilité donc pas de lecture. C’est comme en musique.
Les silences sont nécessaires au rythme. Tout comme la lumière émerge de
l’ombre, les blancs de la page s’équilibrent, se contrastent, s’opposent,
dialoguent avec les « masses ». La grille offre une structure, une matrice à cette
complémentarité qui ouvre la voie vers l’harmonie.

D. Le rythme

Comme en musique, le rythme est un élément constitutif de la mise en

page. Le contraste est la notion qui amène le rythme. Car comment rythmer
sans faire dialoguer les opposés ? Noir/blanc, ombre/lumière, chaud/froid,
rapide/lent, etc. Qui dit rythme dit aussi répétition, cycle, ordre. Le rythme,
c’est le rapport entre le fragment et le tout, entre la partie et totalité.

On n’imagine pas une musique qui changerait huit fois de rythme. La même
règle est vraie pour la mise en page : la grille qui est la trame du rythme ne
doit pas être changée au gré de la mise en page, au risque que l’ensemble
ne devienne chaotique.

Mais allons plus loin : la grille, comme le tempo, est le cycle invisible qui
sous-tend l’ensemble de la structure.

E. L’unité de la variété

La grille est un élément déterminant dans la déclinaison d’une mise en page : site internet, magazine, livre,
plaquette, etc. Tous les supports qui se déclinent sur plusieurs pages gagnent énormément à utiliser une
grille de mise en page.

Celle-ci permet de créer de la variété, de la surprise, de la nouveauté au gré des pages tout en assurant
une cohérence générale. La grille assure des rapports de proportions toujours justes, ce qui n’est pas
évident si l’on s’en passe.

F. Les types de grilles

a. Grille multicolonne :

Grille divisée dans sa largeur. On trouve régulièrement des grilles de 2 à 12 colonnes,

quelques fois, 16 colonnes, et plus rarement, 24.

Quelques exemples de colonnes de largeurs différentes : cinq colonnes peuvent par exemple
se superposer à trois colonnes. On parle alors de grille superposée : cette superposition
permet de créer des espaces, des réserves, des décrochés.
98
Combinaisons :

Le principe de la grille multicolonne consiste à diviser la largeur d’un format en plusieurs colonnes à
l’intérieur des marges et séparées par des gouttières. Pour une division harmonieuse, il est recommandé
que gouttières, marges latérales et colonnes aient un rapport de proportion entre elles.

Pour davantage de clarté, il est préférable concevoir une grille de telle sorte que les colonnes quelles que
soient leurs largeurs soient de valeurs entières, multiples également de la gouttière.

Le nombre impair de colonnes permet de créer un système dynamique en jouant sur l’asymétrie des
compositions. Une grille multicolonne permet d’envisager une multitude de combinaisons en faisant varier
les blocs de composition sur une, deux, trois, quatre ou cinq colonnes. Chaque bloc et ainsi en harmonie
constante avec les autres.

Une grille :

Une grille multicolonne, si elle permet de structurer un document, n’est pas pour autant réductrice. Elle
doit être utilisée en « arrière-plan » d’une composition de manière à définir les alignements qui la
stabilisent, mais n’a pas pour objectif d’être perçue au premier abord.

Deux grilles :

Deux grilles multicolonne distinctes ayant les mêmes marges peuvent également se superposer sur une
page et ainsi être utilisées conjointement pour composer les éléments suivant une logique précise (nature
des éléments : titre, texte, visuel ; nature des textes :textes longs, textes courts légendes, etc.).

b. Grille modulaire :

La grille modulaire est un découpage du format en plusieurs modules, en général

rectangulaires. Ces modules sont ensuite utilisés par 1, 2, 3, 4, etc. Cette grille permet non
seulement de segmenter le contenu dans la largeur mais aussi d’avoir des points de repères
dans la hauteur de la page.

Modules identiques :

Le principe de la grille modulaire consiste à diviser l’espace de composition en module les séparer par des
gouttières. Les images sont recadrées pour que leurs dimensions correspondent à celles d’un ou plusieurs
modules. La composition consiste alors à disposer les éléments suivant les modules en « jouant » avec les
principes fondamentaux de la composition.

99
 G. Jargon (grilles)

Marges : c’est égal aux petit fond, grand fond, blanc de tête et blanc de pied.

Colonnes : Les colonnes structurent la page. Elles consistent en une division de

l’espace utile (zone entre les marges) en espaces proportionnels.

Gouttières : Les gouttières sont les zones entre chaque colonne. Par leur espace,
elles permettent la circulation du blanc dans la page et son aération.

Fonds perdus : Les fonds perdus sont une zone, en général de 3 ou 5 mm autour
document (ajouté au format fini donc), qui servent à garantir l’absence d’interruption
des éléments graphiques au moment du massicotage (découpe).

Ligne de force : Les lignes de force sont arbitrairement placées dans la page, de
sorte à donner une dynamique à la mise en page par l’accrochage d’éléments sur
cette ligne invisible.

La définition d’une ou plusieurs lignes de force, axes autour desquels sont distribués les éléments, permet
de créer un principe de composition visuellement fort et de structurer l’espace de la page et les
informations. L’usage d’un tel principe permet aussi de créer le lien fort entre toutes les pages d’un même
document.

Règle des 1/3 et points de force : Le découpage du format en deux ou en trois

dans la largeur et dans la hauteur donne des points (1 ou 4 par page) à
l’intersection de ces lignes qu’on appelle point de force. Ces points de force
attirent naturellement le regard

La présentation des documents est primordiale pour donner envie de lire. Elle peut éviter que certains y
trouvent une raison de ne pas s’y intéresser, peut-être même arrivera-t-elle à leur donner le sentiment que
la lecture n’est pas aussi pénible qu’ils l’imaginaient.

3. Le rapport texte/image

La composition texte/image dans un même espace a pour rôle de décider du rapport entre réflexion et
sensibilité.

Le texte et les images cohabitent sur un document. Ils font référence l’un à l’autre, ils s’opposent ou se
complètent. Suivant le rapport entre texte et image, la composition revêt des aspects très différents et la
lecture s’en trouve modifiée.
100
 ? Le texte, succession de mots organisés pour développer un propos, argumenter, informer, est
support à réflexion.
? L’image, elle, fait d’abord appel à la sensibilité même si elle est le résultat d’une construction
intellectuelle.

Une première lecture globale, instantanée de la page, de l’affiche ou d’un écran permet au lecteur de «
jauger » ce rapport, de le dissuader ou au contraire de déclencher la lecture.

• Le texte l’emporte sur l’image : la réflexion domine sur la sensibilité.

• Le texte et l’image ont part égale : réflexion et sensibilité sont stimulées de manière équivalente.
• L’image domine le texte : sensibilité d’abord, réflexion ensuite.

C’est donc à vous de faire des choix en fonction de l’importance que vous souhaitez donner à chaque
élément et à la lecture que vous souhaitez établir.

4. S’adapter

Une même grille permet à la fois de définir des proportions entre les éléments placés sur une page et
l’unité entre les pages. Elle permet, entre autres, d’assurer la cohérence entre une série de documents ou,
au sein d’un même ouvrage (ou site), entre des pages de types différents.

Une grille efficace permet également la gestion d’éléments « parasites » (non conformes à la grille), sans
mettre en péril l’unité mais plutôt en assurant un certain dynamisme au fil des pages. Par ailleurs, une
grille n’est pas exclusive. Par ses déclinaisons, elle permet au metteur en pages d’affirmer tel ou tel parti
pris. Tout en respectant la grille, il peut adapter la composition en fonction des éléments qui lui sont
confiés.

Trop souvent, grille est synonyme de « monotonie » soit parce qu’elle est trop stricte, soit parce que le
metteur en pages l’applique sans chercher à se l’approprier. Il ne faut pas oublier qu’une grille est une
trame sur laquelle il faut composer et même profiter des « accidents », et non un système fermé,
autoritaire et réducteur.

Ò En résumé, une grille doit être appliquée avec rigueur et souplesse.

5. Comment définir une grille ?

Pour définir une grille qui soit parfaitement adaptée au travail, il est nécessaire d’en déterminer la nature
en effectuant une étude précise des éléments à mettre en page :

Images :
• Type (photographies, illustrations, graphiques)
• Quantité (par page)
• Spécificité (recadrage, taille, détourage, etc.)

Texte :
• Quantité (nombre de signes par page)
• Nature (niveaux de lecture)
• Hiérarchie, organisation (introduction, texte principal, notes, légendes, etc.

101
Tous les autres éléments (titre courant, folio, etc.)
La grille doit pouvoir admettre des variations dans ces paramètres lorsqu’il s’agit de la mise en page d’un
ouvrage, d’un magazine, d’un journal ou dans le cadre de la conception d’un site web.

6. Fondamentaux du graphisme :

Les outils les plus élémentaires et fonctionnels du designer graphique sont :

A. Le point

C’est l’élément géométrique le plus simple et le plus épuré utilisé en création graphique. Il occupe une
place essentielle en géométrie, physique, graphisme vectoriel et autres domaines analogues.

B. La ligne

Les emplois d’une ligne sont illimités. Elle peut joindre, organiser, séparer, diriger, construire et déplacer
d’autres objets graphiques. Une ligne peut être réelle ou implicite.

Elle peut servir de bords ou de frontières pour des objets, ainsi que de contours (cadres) pour des formes
et des silhouettes. Une ligne peut donner du mouvement et de l’énergie à toute composition.

C. Le contour

Une figure est un plan graphique paraissant plat, défini par un contour, une couleur, une valeur, une
texture ou une typographie.

Le contour qui la définit est une ligne qui part d’un point pour revenir à ce point d’origine, créant ainsi un
espace clos ou figure. Les figures servent à créer un nombre indéfini d’éléments dans une composition
graphique.

Ne pas confondre figure (2D > L+H-P) et forme (3D > L+H+P)
102
 D. La forme

Les volumes de base découlent de figures fondamentales (carré > cube, cercle > sphère, triangle >
pyramide). Une forme est donc obtenue en ajoutant profondeur ou volume à une figure (L+H+P).
Une forme est donc un volume créé par d’autres éléments fondamentaux de conception (points, lignes et
figures).

La notion de volume induit donc des notions de projection et de perspective.

E. Le cadre

En communication visuelle, un cadre peut être employé pour séparer, organiser, unifier, contenir et
distinguer, ainsi qu’augmenter la visibilité et l’impact immédiat de tout message visuel.

F. La couleur

La couleur (lumière) véhicule une énergie visuelle. Elle sert à attirer l’attention, à regrouper des éléments
disparates, à renforcer la signification et l’harmonie. Elle peut également susciter une émotion immédiate,
contribuer à la création d’une ambiance spécifique.

Les couleurs contiennent aussi des significations subjectives inhérentes qu’elles communiquent sans mot
ni image (feu, sang, solidarité/mer, glace, ciel).

Notion de teinte/saturation/valeur, roue chromatique, lumière, température, etc.

G. Le ton

En communication visuelle, le ton (terme polysémique qui peut désigner aussi bien la valeur que la teinte
d’une couleur) mesure le degré de luminosité apparent à la surface d’un objet, ou le degré relatif de
lumière dans une couleur – son taux de noir ou de blanc.

103
En ce sens, le ton est synonyme de valeur. Le ton aide à définir la taille, la forme et la position d’un objet
relativement à son orientation et à la composition. Contrairement à une couleur « brute », le ton donne
par exemple de la profondeur spatiale ou du mouvement.

H. Le mouvement

Le mouvement se définit comme le fait ou le processus de se déplacer ou de changer de position. Il peut

être réel ou implicite. En communication visuelle, le mouvement impose à nos yeux de bouger
constamment et de chercher un ou plusieurs éléments dans la composition.

Notion de rythme, alternance entre sons et silences = forme et espace

I. L’espace

Contrairement à d’autres éléments tels que la ligne, la figure, la forme, la couleur, l’espace en lui-même ne
peut pas être placé ou localisé dans l’œuvre. Il fait référence à la distance ou à la surface qui séparent les
éléments de la composition (lignes, figures, formes, couleurs, cadres et images). On parle d’espace réel,
pictural, psychologique et physique.

J. L’équilibre

L’équilibre est obtenu dans une composition lorsque les éléments visuels sont régulièrement répartis et
agencés de façon à donner un sentiment de stabilité et d’harmonie.

Il existe trois types d’équilibre visuels :

- formel et symétrique,
- dynamique et asymétrique,
- radial.

104
 K. La symétrie/l’asymétrie

La symétrie est un principe fondamental et intemporel de la perception visuelle. Elle garantit équilibre,
stabilité et harmonie. Lorsque des éléments sont centrés ou parfaitement répartis, ils sont dans un état
d’équilibre visuel qualifié de symétrique. Ils peuvent être organisés sur un axe vertical ou horizontal.

L’asymétrie désigne l’absence de symétrie. Un équilibre asymétrique ou équilibre informel, est donc
dépourvu de symétrie. Cette définition n’a en elle-même rien à voir avec l’équilibre : elle signifie
simplement que les images d’une composition ne se reflètent pas les unes aux autres. Ce terme est
toutefois généralement utilisé pour décrire un type d’équilibre qui ne se repose pas sur les lois de la
symétrie.

Notion de tension entre les éléments

L. La tension

Comme l’équilibre, la tension est présente d’une façon évidente et constante dans notre vie quotidienne.

La tension est d’abord un moyen, graphique et psychologique, de capter l’attention. C’est le fruit d’un
délicat équilibre entre des éléments formels antagonistes, provoquant chez le lecteur aussi bien de
l’anxiété, du stress et de la peur ou que de l’excitation, de l’exubérance et de la joie.

Tension et équilibre sont apparentés en communication visuelle

105
 M. L’expression

L’expressivité repose entièrement sur les idées et les humeurs personnelles du designer graphique, son
regard subjectif sur le monde et sa place dans celui-ci. Dans tout message graphique, l’expression est
perçue visuellement, ainsi que psychologiquement.

Principe subjectif, l’expression reflète directement l’époque et les expériences personnelles du graphiste et
ne peut donc pas être enseignée : elle est un reflet de ses pensées. Rêves, fantaisies et imagination
influencent aussi le processus créatif et les choix qui s’y opèrent.

N. Le contraste

Le contraste est un procédé qui soumet au regard une différence importante entre deux objets – grand et
petit, rouge et vert, lumineux et sombre ou chaud et froid.

En communication visuelle, le contraste joue sur les différences graphiques des éléments d’une
composition pour en faire ressortir un de son environnement. Il peut être obtenu en exagérant les
différences de taille, de forme, de couleur entre les composants.

Le contraste attire et dirige l’attention, suggère une émotion, hiérarchise et souligne les informations
essentielles d’un message complexe.

O. Le fond et la forme

La dualité fond-forme correspond fondamentalement à la relation visuelle entre l’avant-plan et l’arrière-

plan d’une composition. Les éléments graphiques apparentés que sont forme, contour et contraste
possèdent un effet capital et direct sur l’interaction fond-forme.

P. La proportion

En communication visuelle, la proportion se rapporte le plus souvent à un rapport de tailles. Plus

largement, la proportion représente la relation de grandeur entre deux parties ou entre une partie et la
totalité d’une composition, en terme de taille, de quantité ou de degré.

La vocation de tout système de proportion est de produire cohérence et harmonie entre ses éléments.

Notion de nombre d’or, etc.

106
 Q. Les échelles

Établir une échelle consiste à classer par taille, quantité, importance ou rang les éléments d’une
composition.

Les proportions et les échelles sont des principes connexes en communication visuelle : la proportion
reflète la taille des éléments d’une composition par rapport à l’espace occupé tandis que l’échelle rend
compte d’un rapport de taille entre les différents éléments.

R. L’image

Une image est un artefact généralement défini comme la représentation ou l’illustration, en deux
dimensions, d’une idée, d’une impression, d’une personne ou d’un objet.

Une image puissante et mémorable peut faire ou défaire toute communication visuelle. Une
photographie, une illustration et d’autre types d’images peuvent communiquer une idée ou une émotion
spécifique, attirer l’attention du lecteur, stimuler son imagination et finalement enrichir un message visuel.

S. La typographie

La typographie concerne les caractères. Le terme lettre est de préférence employé pour les caractères
alphabétiques – à la rigueur les chiffres et signes de ponctuation – servant à composer des mots, des
phrases et des textes. L’expression police de caractères fait référence à l’ensemble de ces caractères
unifiés par des caractéristiques visuelles communes.

T. Les grilles

Une grille est fondamentalement composée d’une série de lignes horizontales et verticales permettant au
graphiste d’exploiter des alignements et des intersections, avec plus ou moins de réussite.

Employée comme un système d’organisation spatiale, elle permet d’agencer le contenu d’une page. C’est
une armature qui organise le contenu visuel, le flux narratif, d’une façon rationnelle, esthétique qui
maximise l’accessibilité.

107
Partie Bries
1. De l’image de marque à image de la marque

“L’image de la marque” est une figure métonymique : pas une image en tant que telle mais bien
l’ensemble des images, évocations, réminiscences, impressions qui sont convoquées lorsque une marque
est évoquée, perçue, entendue...

A. Exemples :

- Greenpeace :

Quelles sont les images qui viennent immédiatement à l’esprit ?

Le logotype est sans doute moins présent que les actions coup-de-poing menées par l’association et qui
frappent l’imagination. GreenPeace exploite très peu sa marque en tant que telle. Sa logique de
communication est ailleurs.

Les actions de GreenPeace sont toujours d’ordre symboliques. Outre les symboles que les activistes
utilisent, les interventions s’attaquent pacifiquement à des signes reconnus (marque, entreprise,
monument, ...) et construisent des images prêtes à être relayées par les médias. La télé et les réseaux
sociaux en particulier.

Tout en partageant certaines préoccupations communes, Greenpeace et WWF marques ont un

positionnement différent.

Ò Chaque acteur a sa spécificité propre, son positionnement et son public.

- WWF :

Au contraire de l’activisme de GreenPeace, le WWF est une marque, porteuse de valeurs fortes proches
mais présentes de manière plus familiale, plus sage et plus conventionnelle.

108
Le Panda est l’emblème historique de la marque. Le branding, très fort et sympathique tout à la fois, se
décline dans des produits de merchandising au service de la cause. Le Panda est la personnification de la
marque. Une mascotte en plus d’un emblème. L’utilisation du symbole Panda-WWF rend le visuel plus
efficace car sémantiquement plus direct.

- Ushuaïa :

Autre exemple de marque qui se positionne forte de sa notoriété télévisuelle pour la défense de
l’environnement. Une spécificité perçue de manière très variable...

Ushuaïa s’est développé comme une vraie marque, présentant en plus d’un canal d’émission propre, une
gamme de produits mainstream plus ou moins thématiques. Une première dérive commerciale d’une
marque aux mains du créateur et de TF1.

- Greta Thunberg :

La force symbolique d’une égérie tient dans le respect des valeurs prônées dans la ligne
éditoriale du discours et de la communication. Greta Thumberg est devenue le symbole des
attentes d’une certaine génération.

A ce titre la responsabilité de la marque Greta Thumberg est énorme. Ses faits et gestes sont scrutés, son
discours disséqué, son instagram scanné, son langage corporel analysé, ... Aujourd’hui ce symbole libre
n’est pas associé à un mouvement, une association ou une marque. Pas de récupération de notoriété.
Les sollicitations ne doivent pourtant pas manquer.

- Apple :

Une marque doit pouvoir survivre à son créateur et porte-drapeau, aussi forte soit sa
personnalité. La personnification d’une cause ou d’une marque active davantage
d’affect, de préférence, d’engagement…

La visibilité des valeurs y est plus évidente. L’image de la personne, sa tenue sont
récurrentes.

109
Personnifier une marque, l’incarner, même par un personnage fictif, c’est conférer à la fois davantage de
tangibilité, de sympathie et de charge émotionnelle. L’image de la personne devient l’image de la marque
(Karl Lagerfeld).

Une marque, un avatar :

- Black lives matter :

George Floyd est un martyr devenu un symbole de la cause. Son visage est devenu un signe.
Sa phrase tragique extraite de la vidéo une sorte de sentence. Presque un baseline.

Le mouvement Black Lives Matter a trouvé une icône, traitée instinctivement à la manière d’une marque.
Martin Luther King et son rêve ont subi le même sort, relayé par la pop culture.

2. Branding

« Ce que je cherche à réaliser avec un logotype, c’est un exposant très élevé de fixation de la mémoire
visuelle. Notre but est que quiconque a vu le logotype ne puisse pas l’oublier. »

Les marques ce sont tout un patrimoine visuel commun, une pop culture, partagée, détournée,
questionnée... L’objet est la marque autant que le logotype et la charte graphique. Il peut donc incarner la
marque par une personnification.

La bouteille parle à la première personne par un headline interpellant et ambigu.

Ai-je, moi, embrassé Elvis? Ou Marilyn?

La nouvelle image mentale du Père-Noël construite par Coca-Cola

110
Pourquoi tant d’identités en rouge ?
(Mcdo, Coca, Malboro, etc.)

Le rouge est la longueur d’onde la plus longue du spectre de couleur, c’est à dire la fréquence la plus base
(350TZ) juste avant les infrarouges, invisibles pour l’œil.

L’énergie du rayonnement de chaque couleur (watt/m2) montre la puissance du rouge par rapport aux
autres teintes : violet 10w - vert 15w - rouge 20w. Cette force du rouge explique la raison pour laquelle
beaucoup (trop) de marques se l’approprient.

Ò Le rouge, pour augmenter la prégnance de sa marque.

Des marques concurrentes, une charte chromatique quasi identique qui capitalise sur la prégnance du
rouge et son pouvoir connotant.

Mais les codes sont faits pour être utilisés, détournés, combattus, supprimés, etc. Pour être remplacés par
d’autres signes graphiques, typographiques, chromatiques qui connotent une marque, animée par un
positionnement différent.

La direction artistique contrôle l’enrichissement de sens qu’apporte le style d’image. les codes sont faits
pour être détournés. Les communicants jouent avec les marques et les produits en s’appuyant sur
l’analogie formelle et la mystification.

Ò Le rouge, une force symbolique parfois encombrante.

Changer d’identité visuelle (ici la seule couleur rouge) est souvent motivé par la recherche d’un nouveau
positionnement. Ce changement visuel doit - devrait- traduire de nouvelles valeurs, de nouveaux produits
ou services, une nouvelle éthique, une nouvelle cible ...

Une différenciation formelle et factuelle par rapport à la concurrence. Dans ce cas, une entreprise
supposée être plus éco-responsable, offrant des produits vegan, plus sains, locaux, etc. éloignés du cliché
du Fa(s)t-Food. Moins de rouge, c’est moins de viande et une image moins mainstream.

Capitaliser sur sa signature ou ses produits, jouer avec eux. Capitaliser sur les analogies
formelles, s’amuser avec son branding, le détourner. Rebondir sur l’actualité en
détournant son propre logotype !

111
Un coup de communication, entaché par une enquête d’investigation de journalistes qui a démontré un
statut de femme chez Mac Donald peu enviable : pas de présence au CA, différence barêmique, conditions
de travail difficiles.

Un message affectif doit être aussi (et surtout!) effectif dans la réalité. A défaut, une campagne très
contre-productive.

Ò Le rouge, une couleur très présente qui freine le repositionnement.

Comment la marque peut-elle répondre à une nouvelle stratégie de positionnement, en particulier vers
davantage de produits locaux et biologiques, tout en préservant le capital visuel de son identité ?
En sachant que sa charte historique (rouge-noir-typo droite-symbole classique du lion, tracé très anguleux,
etc.) est éloignée des codes actuels.

Le rôle connotant des couleurs est essentiel comme signe pour orienter la perception de la clientèle,
nouvelle ou en mutation. Evocation plus alimentaire et éco-biologique, renforcé par le wording.
Typographie minuscule et lettres arrondies.

Une refonte totale de la charte graphique, en par•culier de la gamme chromaSque mais aussi de la
direcSon arSsSque du shoo•ng et du wording pour l’ensemble de sa communica•on.

La cohérence de l’expression d’une marque augmente la confiance en cette marque. Une incohérence,
même infime, sème le doute.

Au-delà de la question de l’unité de la direction artistique, toute mon expérience vécue avec la marque
doit former un ensemble cohérent, tant dans la forme que dans le fond.

Les valeurs exprimées, véhiculées et sous-tendues dans la communication se retrouvent partout. A chaque
instant. En ligne, sur le point de vente. Ailleurs. Sans exception.

112
 Ò Le rouge, n’est pas du seul ressort du graphisme.

Une libre inspiration pour moderniser l’identité de la marque et la repositionner plus premium.
Juxtaposition de codes pour la maison Dandoy.

Ò Le rouge, un symbole ancré dans la culture.

Chaque culture propose un rapport différent à la symbolique des couleurs. Une connotation politique. En
Chine par exemple, le rouge est bien plus ancien que le communisme de Mao. Le rouge, symbole de la
gauche socialo-communiste, militante et contestataire.

3. Branding : l’appropriation d’une couleur

Si la couleur est une variable visuelle essentielle sa capacité différenciante n’est pas toujours effective et
surtout sujette à confusion dans des secteurs spécifiques.

La prégnance des couleurs primaires est indéniable mais surexploitée. L’utilisation de ces couleurs
concerne avant tout les marques et les enseignes grand public. S’additionne une habitude, un code social
induit qui associe ces couleurs au bon marché.

L’utilisation radicale du bleu et jaune renforce le positionnement low cost de la campagnie, qui ne
capitalise pas sur une image qualitative ni sur une relation très affective avec sa clientèle.

Au contraire d’autres compagnies aériennes qui travaillent leur positionnement premium en capitalisant
sur des images sophistiquées, allégoriques et une gamme chromatique soft.

La campagne Airfrance s’appuie sur une analogie formelle et des métaphores, la

trainée de l’avion s’associant à d’autres réalités qui font sens. L’image s’appuie aussi sur
une métonymie : le logo Air France suggère l’objet avion tout entier, figuré ici dans une
version simplifiée.

La couleur est souvent considérée comme la vendeuse silencieuse et doit immédiatement

créer une identité de marque.
113
Au sein d’un même marché concurrentiel, la couleur est un (des) identifiant(s) de la marque.

? L’augmentation de la saturation des couleurs augmente l’impact du packaging mais interfère avec
la perception de qualité du produit testé et goûté.
? La diminution de saturation ou l’absence de couleur (noir-blanc-gris) assure une image de la
marque ou du produit plus premium.

C’est toute la question des codes à solliciter et des pouvoirs connotant de la couleur, question
omniprésente dans la création des marques. Le blanc est aussi une couleur.

4. Les composants d’une image de marque

A. Le nom

Le nom est la première image d’une marque. Le nom désigne clairement (FaceBook), évoque (instagram),
suggère (tik-tok) un premier feeling : un nom claque, chante, interpelle, amuse, raconte, se mémorise,

Sa forme graphique génère aussitôt un dialogue sémantique entre l’image mentale évoquée et la
typographie désignée, le signe dessiné, la couleur destinée. Redondante parfois, complémentaire le plus
souvent, la forme visuelle précise le champ sémique de la marque.

Une appelation qui définit l’essence et la particularité de l’enseigne. Redondance entre le nom et le signe,
Le cercle suggère le bidon. La typographie stencil évoque le marquage des sacs et des caisses de livraison.

B. Le logotype

Le choix typographique connote le nom. Le logo (le nom) choisit son type (typeface). La marque s’écrit
inévitablement. La nature de la typographie dialogue avec le nom.

Certains logos sont un héritage historique, témoin de choix typographique d’une époque, forcément daté.

114
Ford : une identité visuelle inchangée depuis plus d’un siècle.

Au contraire, d’autres logotypes se renouvellent à une cadence soutenue. Mais toujours du N/b dans ce
cas. Pas de signe, pas de logotype en tant que tel, mais une identité qui s’appuie sur le choix et l’utilisation
d’une typographie dédiée.

C. Le signe

Le signe est souvent la quintessence de la marque. Le signe accompagne le logotype pour créer la marque
Le signe s’articule avec le logotype, se passe aussi de lui. Le signe condense parfois à lui seul la marque.

Un changement d’image de marque s’appuie sur une volonté de changer la perception de la marque et
souvent d’une modification de positionnement ou de stratégie commerciale.

La question du signe est plus vaste que le seul signe-emblème de l’identité visuelle. D’un point de vue
sémiologique, la marque est associée à une série de signes. Le pouvoir connotant de l’image qui interfère
sur l’image mentale du mot.

Le cas particulier des villes :

La ville peut être considérée comme un produit, une marque dont on retient le nom, qui est associée à des
images, à des valeurs, à une icône, à un signe, etc. Par exemple, la vocation de la Tour Eiffel conçue pour
l’exposition universelle de 1889 de Paris a été d’emblée symbolique.

La déclinabilité d’une identité est une qualité aussi essentielle que son sens symbolique, sa puissance
suggestive ou sa force graphique. Ainsi, la création intègre immédiatement cette qualité, au même titre
que les possibilités d‘animation en motion design ou une potentielle 3e dimension.

5. La direction artistique

L’expérience avec la marque, c’est un faiseau de stimuli. Sa communication, en général et sur les réseaux
sociaux spéfiquement, l’interactivité avec la communauté, l’utilisation probante de ses produits,
l’expérience d’achat et en particulier l’expérience sur le lieu, etc.

Plus petit est le produit, plus grand et premium devient le lieu de vente, de
découverte, de rêve. Par exemple : acheter Apple est une expérience.
La marque saisit aussi la force des couleurs, sans se faire piéger par les teinte
pures et saturées.
115
 Des valeurs effectives autant qu’affectives.

Les valeurs d’une marque, d’une entreprise, d’une institution, d’une association, d’un collectif... sont des
concepts d’abord traduits en mots, en principes, en statements. Equité, transparence, respect, durabilité,
partage, etc. Ces valeurs sont souvent très proches. Ce qui compte, c’est leurs manifestations, leurs
traductions en messages et en actions concrètes.

Ces présences, multiples, s’incrivent dans une même logique et s’articulent en suivant une direction
artistique et conceptuelle cohérente. Cette cohérence n’est pas une question purement esthétique ou
identitaire, elle se profile aussi comme la garante de la confiance dans la marque.

A défaut d’être lue au premier degré, cette direction induit une lecture plus subliminale des valeurs, du
positionnement, de la cible, etc. La force de la direction artistique est d’induire plus que de dire, de
suggérer plus que de montrer, d’évoquer plus que d’expliquer, etc.

La direction artistique contrôle l’essence et le sens des différents signes envoyés, perçus, vécus par
l’audience.

Ces signes ne sont jamais neutres mais au contraire à très haut pouvoir connotant. Ils identifient la
marque autant qu’ils véhiculent le message et les valeurs de celle-ci.

116
6. Le moodboard

C’est un outil de travail et de présentation qui permet justement de retranscrire l’esprit de la direction
artistique d’un projet en devenir face à l’impuissance des mots, à la fois trop généralistes et trop
personnels dans leur interprétation.

• C’est quoi un lieu cool ?

• C’est quoi un discours trendy ?
• C’est quoi une famille éco-responsable ?
• C’est quoi un message alternatif ?
• C’est quoi une attitude alter-mondialiste ?

Le moodboard c’est une compilation de références qui permet de définir la ligne dite artistique autant
qu’un positionnement de la marque et son potentiel perceptif. Le moodboard utilise les codes flous
pourtant bien effectifs qui qualifient la nature, l’esprit, les préceptes, la cible d’un projet et en orientent la
lecture.

Le moodboard aide aussi à repositionner une marque, à identifier les leviers créatifs, à sentir l’air du
temps, à décoder les tendances, à décrypter les nouvelles références d’un public en mutation et d’une vie
en société sans cesse requestionnée.

Ò Le moodboard compile et organise l’ensemble de ces signes.

Le moodboard capitalise sur le pouvoir connotant des images et le texte connote à son tour l’image et en
oriente sensiblement sa signification. Créer une marque, c’est connaître la nature des codes mais
s’affranchir des clichés pour trouver son identité.

Faire sentir les valeurs de la marque par l’image, les couleurs et l’univers graphique est souvent plus
convaincant que par la sècheresse des mots. L’injonction ou l’affirmation du message écrit outrepasse un
discours de marque d’aujourd’hui et nuit au sentiment d’adhésion et de complicité.

117