À propos de ce cours
Cette leçon présente les visuels d'une application : les types (photo, illustration, pictogramme, infographie, état vide), les moments où ils aident l'usager (accueil, états vides, erreurs, confirmations), la définition d'un style cohérent, les formats (JPG, PNG, SVG, WebP) et les proportions, les droits d'utilisation (droit d'auteur, licences Creative Commons, banques d'images) et la rédaction des textes alternatifs. Trois activités conduisent à définir le style visuel de CantineCampus.
| Durée | Niveau | Prérequis | À la fin de la leçon |
|---|---|---|---|
| 1 heure (cours et 3 activités) | Débutant, chapitre « Les éléments graphiques et la charte graphique » | Les icônes | Vous savez choisir le bon type de visuel, l'exporter au bon format et vérifier vos droits d'utilisation |
-
Objectifs
- Distinguer les types de visuels: photo, illustration, pictogramme, infographie, état vide.
- Savoir où un visuel aide l'usager dans une application.
- Définir un style visuel cohérent.
- Choisir le bon format et les bonnes proportions.
- Respecter les droits d'utilisation et rédiger des textes alternatifs.
-
Les types de visuels
- La photo montre le réel : les plats, le lieu, les personnes. Elle crée l'envie et la confiance (« c'est vraiment ce que je vais manger »).
- L'illustration explique, accueille, donne une personnalité. Elle permet de montrer ce qu'une photo ne peut pas : une idée, une étape, une émotion.
- Le pictogramme signale une information en un coup d'œil : végétarien, sans gluten, plat chaud.
- L'infographie rend des chiffres lisibles : l'affluence par heure, le temps d'attente.
- L'état vide remplit un écran sans contenu (panier vide, aucune commande) et dit quoi faire.
-
Où placer des visuels dans une application ?
- L'accueil (onboarding): présenter le service en une image et une phrase.
- Les contenus: la photo de chaque plat aide à choisir plus vite qu'une description.
- Les états vides: expliquer pourquoi l'écran est vide et proposer l'action suivante (« Voir les menus »).
- Les erreurs: dédramatiser (« Pas de connexion ») et rassurer (« Votre panier est gardé »).
- Les confirmations: montrer clairement que l'action a réussi.
- Un visuel qui n'aide pas l'usager à comprendre ou à agir est du décor: il ralentit le chargement et occupe une place précieuse.
-
Un style visuel cohérent
- Comme pour les icônes, on choisit un style et on le garde : photos ou illustrations pour un même usage, pas un mélange au hasard.
- Pour les photos: même angle de prise de vue (de dessus, à 45°), même lumière (naturelle, chaude), même fond, même cadrage. Des photos de plats prises chacune différemment donnent une impression de désordre.
- Pour les illustrations: même trait, mêmes formes (rondes ou anguleuses), mêmes couleurs, celles de la palette.
- La charte décrit ce style avec des exemples et des contre-exemples.
🍽 Exemple : CantineCampus
- Les plats de CantineCampus sont photographiés de dessus, en lumière du jour, sur le même plateau clair, au format carré 1:1. Le cuisinier peut ainsi prendre lui-même les photos chaque semaine.
- Les états vides et les erreurs utilisent de simples illustrations au trait, dans les couleurs de la palette, avec les formes arrondies du logo.
-
Formats et proportions
- JPG: pour les photos. Léger, sans transparence.
- PNG: pour les captures d'écran et les images avec transparence. Plus lourd.
- SVG: pour le logo, les icônes et les illustrations vectorielles. Très léger et net à toutes les tailles.
- WebP ou AVIF: formats récents, bien plus légers que le JPG à qualité égale, pour le web et les applications.
- Les proportions (ratios) se fixent dans la charte : 16:9 pour une bannière, 4:3 ou 1:1 pour une photo de plat, 1:1 pour un avatar.
- Les écrans de téléphone sont à haute densité: une image affichée sur 320 px est exportée en 640 px (2×) et 960 px (3×).
-
Droits d'utilisation
- Une image trouvée sur Internet est protégée par le droit d'auteur, même sans mention. L'utiliser sans autorisation est interdit, y compris dans un projet scolaire publié.
- Domaine public / CC0: utilisation libre, même commerciale, sans citer l'auteur.
- CC BY: utilisation libre à condition de citer l'auteur. CC BY-NC: pas d'usage commercial, donc à éviter pour une application.
- Les banques d'images libres (Unsplash, Pexels, Pixabay) ont chacune leur propre licence : lisez-la et vérifiez les restrictions (pas de revente, pas de personnes reconnaissables dans certains usages…).
- Le plus sûr reste de créer ses visuels : photos prises par l'équipe, illustrations dessinées dans Figma.
- Pour une image générée par une IA, lisez les conditions d'utilisation du service et indiquez-le dans la charte : ce n'est pas une photo des vrais plats.
- Notez pour chaque visuel : la source, l'auteur, la licence, la date.
-
Le texte alternatif
- Le texte alternatif (attribut
alt) décrit l'image pour les personnes qui ne la voient pas : lecteur d'écran, image qui ne charge pas. - Il décrit l'information que porte l'image, pas le fichier : « Couscous aux légumes servi dans un bol », pas « image1.jpg » ni « photo ».
- Une image purement décorative reçoit un texte alternatif vide (
alt="") pour être ignorée. - La charte fixe la règle de rédaction, et le designer fournit le texte avec la maquette.
- Le texte alternatif (attribut
⚠ Piège : « Je l'ai trouvée sur Google Images » n'est pas une licence. Sans source ni licence notées, un visuel n'entre pas dans la charte.
-
Activités
Activité 1Auditer les visuels d'une application · ⏱ 15 min
- Choisissez une application de votre téléphone et faites l'inventaire de ses visuels (écran, type, rôle).
- Pour chacun, dites s'il aide l'usager (informer, guider, rassurer) ou s'il est décoratif.
- Repérez les écrans où un visuel manque : état vide, erreur, confirmation.
📁 Résultat attendu : un tableau : écran, visuel, type, rôle, avis.
Activité 2Trouver des visuels libres · ⏱ 20 min
- Trouvez trois photos de plats sur une banque d'images libres.
- Pour chacune, notez la source, l'auteur et les conditions de la licence (usage commercial, mention obligatoire).
- Rédigez leur texte alternatif, puis exportez-les en WebP au ratio 1:1, en 1× et 2×.
📁 Résultat attendu : trois visuels exportés et leur fiche (source, auteur, licence, alt).
Activité 3Le style visuel de CantineCampus · ⏱ 20 min
- Décidez : photos, illustrations, ou les deux selon l'usage. Justifiez avec les valeurs du brief.
- Rédigez quatre règles de style (angle, lumière, cadrage, couleurs) avec un exemple et un contre-exemple.
- Dessinez dans Figma l'illustration de l'état « Panier vide » dans les couleurs de votre palette.
📁 Résultat attendu : les règles de style illustrées et l'écran « Panier vide ».
-
Erreurs fréquentes
| Symptôme | Cause | Solution |
|---|---|---|
| Des photos de plats toutes différentes | Pas de règle de prise de vue | Un angle, une lumière, un cadrage fixés dans la charte |
| Application lente au chargement | Photos de 5 Mo en PNG | WebP ou JPG compressé, exporté à la taille affichée (2×) |
| Logo flou sur grand écran | Logo exporté en PNG trop petit | Logo et icônes en SVG |
| Image retirée après une réclamation | Licence non vérifiée | Source, auteur et licence notés pour chaque visuel |
| alt="photo" | Texte alternatif écrit pour la forme | Décrire l'information portée par l'image |
-
Bilan
- Chaque visuel a un rôle: informer, guider, rassurer. Sinon, c'est du décor.
- Les états vides, les erreurs et les confirmations gagnent beaucoup à être illustrés.
- Un style unique, décrit par des exemples et des contre-exemples, rend l'application cohérente.
- Le bon format (SVG, WebP, JPG) garde l'application nette et rapide.
- Aucun visuel sans licence vérifiée ni texte alternatif.
Une image vaut mille mots, à condition qu'elle dise quelque chose, qu'on ait le droit de l'utiliser, et qu'on sache la décrire.