Les illustrations dans la documentation technique doivent aider à la

Les illustrations dans la documentation technique doivent aider à la
compréhension et être pertinentes. Elles servent à appuyer un texte,
éventuellement à le remplacer. Elle permettent de conforter l’utilisateur en
illustrant un résultat attendu.
Les graphiques en documentation technique doivent respecter les principes de
clarté du texte:
- Précis (éviter les abstractions trop poussées)
- Neutre (prendre en compte les implications culturelles de certains choix
graphiques)
- Concis (pas trop d’éléments dans un même graphique)
- Logique (respecter l’alignement et le regroupement)
- Vivant (esthétique et attractif)
- Professionnel (qualité du rendu, respecte les contraintes de globalisation et
les règles légales de copyright et trademark)
Infographique sur la rédaction technique: https://www.udemy.com/technicalwriting-and-editing/#interview
Site dédié à l’infographisme: http://www.informationisbeautiful.net/
Comment réaliser un infographique:
http://www.onextrapixel.com/2010/05/21/huge-infographics-design-resourcesoverview-principles-tips-and-examples/
1
Contraste
Si deux éléments varient légèrement, visuellement ils doivent être très
différents. Pour du texte, on peut utiliser des polices très différentes.
Le contraste permet de différencier différentes parties d’un document, et aider
la navigation (titres).
Pas assez de contraste donne une impression d’incohérence, de confusion.
Répétition
Style et éléments visuels doivent être répétés de manière cohérente.
La même chose doit être présentée de la même manière: typographie,
couleurs, mise en page, icones.
Evite à l’utilisateur de « réapprendre » des codes.
Alignement
L’alignement et les distances égales ont un effet rassurant.
L’alignement crée un rapport entre les choses. Par conséquent, si les choses
ne sont pas liées entre elles, ne pas les aligner.
Proximité
Permet de grouper les choses qui sont liées entre elles.
De la même manière, la distance sert à séparer les choses qui n’ont pas de
rapport entre elles.
2
Image à fond perdu
• Imaginaire
• Émotion
• Plaisir
• Affect
Image cadrée
• Textuelle
• Information
• Document
• Rationnel
• Pédagogique
Image encadrée
• Encadrée, l’image devient une oeuvre
• Plus-value
• Qualité
• Vérité
• Créateur
• Art
3
Image détourée
• Isoler l’objet, la forme, la silhouette
• La cote conventionnelle autour de l’image doit être 5 mm
Images superposées et superposées multiples
• Imaginaire
• Ludique
• Zapping
• Convulsif
• Jeu
3
L’utilisation de photos de visages a un impact très fort.
Quand on utilise de telles photos avec du texte, toujours s’assurer que le
regard des personnes photographiées se dirige vers le texte.
Source images: https://blog.kissmetrics.com/eye-tracking-studies/
4
Le pictogramme est par essence une abstraction, une métaphore. Par
exemple, un homme et une femme (un couple) pour représenter les toilettes.
Le pictogramme est une forme de typographie, il doit signifier, donner du sens,
mais demeurer accessible au plus grand nombre et le plus rapidement
possible.
Les pictogrammes sont un peu les « termes » de la communication visuelle.
Les mêmes principes de choix du mot juste s’appliquent aux pictogrammes:
- Simple (éviter trop de traits et formes, les effets originaux)
- Usuel (introduire un pictogramme uniquement si cela est nécessaire et
pertinent, utiliser le vocabulaire visuel connu du plus grand nombre)
- Cohérent (à chaque chose son pictogramme)
Source image:
https://www.facebook.com/davewittybanter/photos/a.406707178203.177983.8
6523883203/10152850248573204/
5
Prenez connaissance du cercle chromatique pour étayer vos choix de
couleurs:
- Primaires, secondaires, tertiaires
- Froides, chaudes
- Nuances (noir, blanc, gris)
Source images: http://www.colormatters.com/color-and-design/basic-colortheory
6
Les significations des couleurs restent très culturelles, ce qui importe donc
c’est de ne pas se baser sur la couleur seule pour faire passer un message.
Le rouge – la couleur la plus visible
• La vie
• Émotion
• Affects
• Excès
• Positif : mouvement, extrême, performance, exploit
• Négatif : violent, agressif, tendu, danger
Le rose – la couleur de la douceur
• Douceur
• Légèreté
• Sentiments
Le violet – la couleur de l’imaginaire
• Visible, invisible
• Mystère
• Occulte
• Fantastique
• Imaginaire
7
Le bleu – la couleur de l’esprit
• La communication
• Collectif, groupe, fédération (ex : l’Europe)
• Association
• Services aux personnes (police, assistance)
• Mondialisation (Casques Bleus, Unicef, etc.)
• Réseau (ex : FaceBook)
• Institution
• Information
• Air – Eau – Glace
• Valeurs liées à l’humain (tolérance, fraternité, confort)
Le vert – la couleur de la nature
• Nature
• Ecologie
• Environnement
• Bio
• Terre, plantes
• Qualité de vie
• Sécurité
• Services (pharmacie, transport, etc.)
Le jaune – la couleur de la création, la recherche
• Intellect
• Pensée
• Concept
• Lumière
• Brillance, éclat
7
L’orange – la couleur de l’optimisme
• Optimisme
• Chaleureux
• Bien-être
• Enthousiasme
• Forme
• Energie positive
• Actif
• Confiant
Le noir – la “couleur” du graphisme
• Texte à lire sur papier
• Signature, marque
• Trait
• Dessin
• Lisibilité
• Impression
Le blanc – la « couleur » de la pureté
• Simplicité
• Lumière
• Sobriété
• Propreté
Source image: http://www.ecrirepourleweb.com/theorie-couleurs-de-lemotionwebdesign/?utm_content=buffer622b8&utm_medium=social&utm_source=twitter.c
om&utm_campaign=buffer
7
En partant du cercle chromatique, vous pouvez définir des harmonies de
couleurs:
Monochrome
Nuances d’une seule couleur
Complémentaire
Fort contraste, à utiliser parcimonieusement, et surtout pas pour du texte.
Analogue
Sérénité, confort, harmonie, nature.
Attention à avoir suffisamment de contraste. Choisissez une couleur pour
dominer, une 2ème en support, la 3è pour accentuer.
Triadique
Eclatant. Une couleur domine, les deux autres servent à accentuer.
Double complémentaire
For contraste comme la complémentaire, mais avec moins de tension.
Un choix sûr.
Carré et rectangulaire
Combine deux complémentaires. Choisir une couleur dominante, et faire
attention à l’équilibre entre les couleurs froides et chaudes.
Permet beaucoup de variations.
Source: http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm
8
La charte graphique donne des règles fondamentales à appliquer afin de
conserver une cohérence graphique dans les publications d’une entreprise.
Pour que cette charte graphique communique de manière efficace et
cohérente l’identité visuelle de l’entreprise, elle doit s’appliquer à l’ensemble
des documents de l’entreprise.
Elle commence par interroger les valeurs de l’entreprise et l’image (au sens
général) qu’elle cherche à véhiculer.
Puis elle décline cette image par un ensemble d’éléments visuels:
- Logo
- Typographie
- Palette de couleurs
- Catalogue photographique
Ces éléments sont ensuite appliqués à des modèles de documents:
- Présentations
- Cartes de visite
- Documents
- Affiches
- Gadgets
Plus d’infos sur l’identité visuelle et les chartes graphiques:
http://www.sati.tv/fileadmin/user_upload/pdf/04_12_2013.pdf
9
10
http://www.infographicpins.com/other-infographics/time-management-factsfigure
11
http://www.facegroup.com/blog/infographics-style-over-substance/
12
http://www.creditnet.com/blog/infographic-how-can-bad-credit-credit-cardboost-your-score
13
14
15