Je peux prendre deux sites construits avec la même grille, les mêmes couleurs et une typographie très proche. Je change uniquement les images.
Le résultat peut sembler appartenir à deux marques différentes.
Une photographie documentaire donne de la proximité. Une illustration géométrique rend l’ensemble plus conceptuel. Une scène 3D peut installer une dimension plus technologique, plus artificielle ou plus expérimentale.
C’est pour cela que je préfère définir le langage visuel assez tôt dans un projet. Attendre la fin de la maquette pour chercher « de belles images » oblige souvent à remplir des rectangles déjà décidés, au lieu de construire la composition avec les images.
Le choix ne se résume pas à photographie, illustration ou 3D. Il faut aussi définir les cadrages, la lumière, la palette, le niveau de détail, la manière dont les visuels se combinent avec le texte et la capacité à produire de nouveaux contenus dans le temps.
Une image ne devrait pas simplement remplir une zone prévue dans la maquette. Elle doit apporter quelque chose que le texte, la couleur ou la typographie ne disent pas déjà.
Ce qu’un langage visuel définit réellement
Dire qu’une marque utilise de la photographie ne donne encore presque aucune indication sur son identité.
Une campagne photographiée en lumière naturelle, avec des cadrages imparfaits et des personnes prises sur le vif, ne produira pas la même sensation qu’un shooting studio très frontal avec des fonds unis et un éclairage parfaitement contrôlé.
Le média est le même. Le langage change.
Je regarde donc plusieurs paramètres : sujets, cadrages, lumière, contraste, couleurs, niveau de retouche et manière dont les images occupent la page.
Pour une illustration, les règles sont différentes : épaisseur du trait, formes, textures, niveau de détail, proportions, ombres ou palette.
La 3D ajoute encore d’autres décisions : matériaux, éclairage, réalisme, profondeur, animation éventuelle.
Ces choix répétés finissent par créer une signature identifiable. Ils prolongent directement le travail sur l’identité visuelle d’un site web.
Commencer par ce qu’il faut montrer
Je ne commence généralement pas par demander : « Photo ou illustration ? »
Je demande ce que l’utilisateur doit voir pour comprendre l’offre.
Une marque de mobilier possède des objets physiques. Les photographier paraît assez logique, notamment sur les fiches produit où les matières, les proportions et les détails comptent.
Un cabinet de conseil vend surtout une expertise et une relation de travail. Les personnes, les situations ou les résultats peuvent devenir plus intéressants que des objets.
Un logiciel de cybersécurité doit souvent expliquer des mécanismes invisibles. Photographier un écran rempli de code apporte rarement beaucoup d’informations. Une illustration ou une visualisation 3D peut être plus pertinente.
J’ajoute une autre question très concrète : qui produira les prochains visuels ?
Une direction exigeant une production 3D complexe pour chaque actualité sera difficile à tenir si l’entreprise publie plusieurs fois par semaine.
La photographie quand la réalité mérite d’être montrée
La photographie est difficile à remplacer lorsqu’elle apporte une preuve.
Une chambre d’hôtel, une collection de vêtements, un atelier, une équipe ou un produit ont intérêt à être montrés tels qu’ils existent réellement.
Sur un site d’artisan, photographier le geste peut aussi raconter beaucoup plus qu’une illustration décorative.
La photographie fonctionne particulièrement bien lorsqu’il existe une différence réelle entre l’entreprise et ses concurrents : un lieu, une fabrication, une équipe identifiable, des matières spécifiques.
À l’inverse, une série de photographies génériques de bureaux modernes peut réduire cette différenciation.
Définir une vraie direction photographique
« Nous voulons des photos naturelles » reste trop vague pour préparer un shooting.
Naturelles comment ?
Avec une lumière douce ou très contrastée ? Des personnes qui regardent l’objectif ou prises sur le vif ? Des cadrages serrés ou beaucoup d’environnement ? Une palette chaude ou neutre ?
Prenons une marque de café.
Une première piste peut montrer les mains du barista, la vapeur, les clients et la lumière du matin. L’univers devient vivant et documentaire.
Une deuxième utilise un produit isolé sur des fonds colorés, avec une lumière studio très graphique.
Une troisième travaille les gros plans sur la mousse, les grains et les surfaces avec une ambiance beaucoup plus sombre.
Le café est le même. La marque perçue ne l’est pas.
Je préfère donc formaliser quelques règles visuelles avant de produire des dizaines d’images.
Les banques d’images ne sont pas toujours le problème
Je n’ai rien contre une image de stock simplement parce qu’elle vient d’une banque d’images.
J’ai davantage de mal avec les images interchangeables.
Une poignée de main devant un laptop, une équipe qui rit autour d’un tableau blanc ou une dirigeante pointant un graphique peuvent convenir à presque n’importe quelle entreprise B2B.
Le problème est là.
Avec une recherche plus exigeante, on peut construire un corpus intéressant : même type de lumière, cadrages comparables, gamme colorée proche, sujets récurrents.
Je préfère constituer cette sélection en une fois plutôt que rechercher une nouvelle photo indépendante pour chaque page.
Sinon, le site finit souvent par mélanger une photographie très froide, une autre très chaude, un portrait studio et une scène de vie ultra-saturée.
Préparer un shooting pour le web
Un shooting destiné à un site doit être pensé avec les futurs formats en tête.
Si toutes les photos sont cadrées très serrées en vertical, elles seront compliquées à utiliser dans un hero panoramique avec un texte à gauche.
Je prépare donc généralement plusieurs besoins : vues horizontales, portraits, détails, plans d’ambiance et images avec suffisamment d’espace négatif pour accueillir du contenu.
Le photographe peut aussi varier la position du sujet.
Un portrait centré est parfait pour certaines fiches. Un portrait décalé à droite sera beaucoup plus facile à utiliser lorsque le texte doit apparaître à gauche.
Le site et le shooting gagnent donc à être pensés ensemble, même si les maquettes ne sont pas encore finalisées.
L’illustration pour représenter ce qui se photographie mal
L’illustration est particulièrement utile pour les sujets abstraits.
Une plateforme de cybersécurité peut vouloir expliquer le passage d’une donnée entre plusieurs systèmes, une menace ou un mécanisme de protection. Une photographie littérale d’un ordinateur n’explique rien de cela.
L’illustration permet de choisir exactement ce qui doit apparaître et ce qui peut être supprimé.
Elle peut simplifier une notion complexe, exagérer un élément important ou représenter quelque chose qui n’existe pas physiquement.
Elle est aussi intéressante pour construire un univers de marque très identifiable.
À condition de ne pas la traiter comme une série d’images isolées.
Transformer un style d’illustration en système
Une illustration réussie ne garantit pas que la suivante lui ressemblera.
Pour créer un système, je définis ce qui doit rester stable : formes, traits, couleurs, texture, proportions, niveau de détail ou traitement des ombres.
Prenons une marque qui utilise des personnages très simplifiés avec des aplats colorés et aucun contour.
Si une nouvelle page ajoute soudainement une illustration isométrique très détaillée avec des contours noirs, l’écart se voit immédiatement.
C’est fréquent lorsqu’une entreprise achète des illustrations au cas par cas auprès de plusieurs banques.
Je préfère donc créer ou documenter un vocabulaire suffisamment précis pour que plusieurs visuels puissent être produits sans perdre l’unité.
La 3D pour maîtriser ou inventer la scène
La 3D permet un niveau de contrôle difficile à obtenir en photographie.
Une marque peut modifier l’angle d’un objet, sa matière, son éclairage ou sa couleur sans refaire un shooting complet.
Elle est très pratique lorsqu’un produit n’existe pas encore ou lorsqu’il faut montrer de nombreuses variantes.
Elle devient encore plus intéressante lorsque l’objectif est d’inventer une scène impossible : objet en lévitation, matière déformée, données transformées en volumes ou environnement complètement fictif.
Dans ces cas-là, je préfère souvent assumer le caractère artificiel du rendu plutôt que chercher une imitation parfaite de la photographie.
Éviter la 3D générique
Une sphère chromée sur un fond dégradé peut être très belle.
Elle ne raconte pourtant pas grand-chose sur une marque.
On retrouve le même problème qu’avec la photographie de stock : le visuel paraît contemporain mais pourrait être réutilisé tel quel par un logiciel financier, une startup IA ou une agence digitale.
Je fais souvent un test très simple : remplacer mentalement le logo par celui d’un concurrent.
Si rien d’autre n’a besoin de changer, la direction manque probablement encore de caractéristiques propres.
La personnalisation peut venir des formes, des matériaux, des couleurs, du mouvement ou des objets représentés. Il n’est pas nécessaire de tout réinventer, mais il faut au moins un vocabulaire identifiable.
Mélanger plusieurs médias sans créer trois identités
Photographie, illustration et 3D peuvent très bien cohabiter sur le même site.
Je préfère simplement attribuer un rôle à chacun.
Sur un site B2B, les photographies peuvent présenter les équipes et les réalisations. L’illustration sert à expliquer une méthodologie. Quelques créations 3D portent les campagnes ou les pages de marque.
La cohérence peut venir d’éléments communs.
Les photographies peuvent être recadrées dans les mêmes formes que les illustrations. La 3D reprend la palette. Les trois médias utilisent une lumière ou une texture similaire.
Le mélange fonctionne alors comme un système.
Le traitement visuel peut créer la cohérence
Des photographies issues de plusieurs sources peuvent parfois être rapprochées grâce à un traitement commun.
Je peux réduire légèrement la saturation, harmoniser les températures de couleur, travailler des cadrages similaires ou ajouter une texture discrète.
Je reste prudente avec les filtres très visibles.
Un traitement colorimétrique extrêmement marqué peut devenir rapidement daté et détériorer les tons de peau ou les produits.
Je préfère quelques règles stables à un effet appliqué systématiquement.
Le cadrage change la perception d’une marque
Un portrait centré, face caméra, crée une relation très directe.
Le même portrait placé en bord de cadre avec beaucoup d’espace autour devient plus éditorial.
Sur un produit, un plan large permet de comprendre l’objet entier. Un gros plan sur la matière peut donner une impression beaucoup plus sensorielle.
Ces choix peuvent être répétés pour créer une signature.
Par exemple : tous les portraits sont cadrés très près, les produits toujours légèrement décentrés et les scènes d’ambiance laissent une zone calme pour accueillir du texte.
Ce type de règle me semble souvent plus utile qu’un effet graphique ajouté sur chaque photo.
Faire entrer les images dans la palette
Une palette peut fonctionner parfaitement dans une charte et se déséquilibrer dès que les vraies photographies arrivent.
Un site basé sur un vert sauge, un ivoire et un brun doux changera fortement d’ambiance si toutes ses images contiennent des bleus électriques ou des rouges très saturés.
La direction artistique doit donc aussi prendre en compte les couleurs présentes dans les décors, vêtements, objets ou arrière-plans.
Lors d’un shooting, ces éléments peuvent être préparés.
Avec l’illustration ou la 3D, le contrôle est encore plus direct puisque la palette peut être intégrée dès la création.
Ce travail prolonge celui sur la palette de couleurs d’une identité visuelle.
Prévoir l’image et la typographie ensemble
Une photographie très chargée laisse peu de place à un titre.
Si le visage, les objets et les contrastes occupent toute la surface, poser du texte par-dessus devient rapidement compliqué.
Je préfère donc prévoir le rapport entre image et typographie avant la fin de la production.
Une photographie peut être cadrée avec une zone volontairement calme. Une illustration peut être dessinée autour du texte. Un titre très grand peut même devenir une partie de la composition visuelle.
Cette relation dépend aussi du caractère choisi.
Une serif très expressive occupe différemment l’espace qu’une sans serif compacte. J’aborde cette question plus précisément dans mon article sur la typographie web.
L’image modifie directement la composition
Je trouve les placeholders utiles pour travailler une structure très tôt, mais ils ont vite leurs limites.
Un rectangle gris ne dit pas où se trouve le visage dans la future photographie, quelle partie doit rester visible ou si l’image contient déjà beaucoup de contrastes.
Une photo verticale, une illustration panoramique et un rendu 3D presque carré ne produisent pas le même équilibre.
Je préfère donc introduire assez tôt des visuels proches du résultat final.
Dans mon article sur la composition web, je détaille la manière dont les cadrages, les masses et les espaces modifient la lecture d’une page.
Produit, service et logiciel : trois besoins différents
Pour un produit physique
Je donne généralement la priorité aux images qui permettent de voir précisément ce que l’on achète.
Une marque de chaussures peut posséder un univers illustré très fort. La fiche produit doit malgré tout montrer la chaussure sous plusieurs angles, ses matières et ses détails.
Pour un service
Le service lui-même n’est souvent pas visible.
Je peux montrer les personnes qui le réalisent, les résultats obtenus, les lieux d’intervention ou utiliser une direction plus conceptuelle pour expliquer la méthode.
Pour un logiciel
Les captures de l’interface sont importantes lorsqu’il faut montrer une fonctionnalité précise.
Mais un site entièrement constitué de screenshots placés dans des écrans finit vite par devenir monotone.
J’aime alors alterner captures fonctionnelles et langage plus conceptuel pour les bénéfices ou les pages institutionnelles.
Montrer des personnes quand la relation humaine compte
Certains projets essaient d’éviter complètement les portraits parce qu’ils associent immédiatement la photo d’équipe au corporate classique.
Je trouve la réaction compréhensible, mais la solution peut être trop radicale.
Si je choisis un cabinet de conseil, un architecte ou une agence, je peux avoir envie de savoir avec qui je vais travailler.
La réponse n’est pas forcément la photo devant un mur blanc avec les bras croisés.
On peut photographier les personnes dans leur environnement, pendant une réunion, en extérieur ou avec une direction plus éditoriale.
Le sujet n’est pas le problème. Le traitement peut l’être.
Documenter des règles qui pourront être reproduites
Une direction artistique doit continuer à fonctionner après la mise en ligne du site.
Je documente donc des éléments concrets : sujets à privilégier, cadrages, lumière, contraste, couleurs, traitements autorisés et formats habituels.
Pour l’illustration, j’ajoute les règles de dessin.
Pour la 3D, je précise le niveau de réalisme, les matériaux, les formes ou le type d’éclairage.
Quelques exemples « à faire / à éviter » sont généralement beaucoup plus utiles qu’une phrase comme « utiliser des images authentiques ».
C’est cette étape qui transforme un moodboard en direction artistique exploitable.
Adapter le cadrage au mobile
Une grande photographie panoramique peut fonctionner parfaitement sur desktop et devenir presque inutile sur smartphone.
Si le sujet occupe seulement un quart de l’image, il deviendra minuscule une fois l’ensemble réduit.
Dans ce cas, je préfère utiliser un cadrage différent.
La version desktop peut montrer une personne dans son environnement tandis que la version mobile utilise un portrait plus serré.
MDN décrit précisément ce cas comme un problème de « direction artistique » dans sa documentation sur les images adaptatives.
L’élément HTML <picture> permet notamment de proposer différentes sources selon les conditions d’affichage.
Prévoir le poids technique des médias
Une photographie haute définition, une vidéo et une scène 3D interactive ne demandent pas les mêmes ressources.
Je préfère intégrer cette réalité assez tôt.
Si toute l’identité du hero repose sur une vidéo très lourde, il faut savoir comment elle se comporte sur mobile, sur une connexion lente ou lorsque la lecture automatique n’est pas souhaitable.
Les images responsives permettent de fournir des fichiers mieux adaptés à l’espace réellement disponible grâce à des mécanismes comme srcset, sizes ou <picture>.
Voir : MDN – L’élément HTML picture.
Pour la 3D, une image calculée à l’avance et une scène interactive en temps réel sont deux choix techniques complètement différents. Je préfère le savoir avant de construire toute la direction autour du second.
Déterminer si une image est informative ou décorative
Le texte alternatif dépend du rôle de l’image dans la page.
Le W3C distingue notamment les images informatives, décoratives, fonctionnelles et complexes dans son tutoriel consacré aux images.
Une image informative doit disposer d’une alternative qui restitue l’information utile.
Une image purement décorative utilise généralement un attribut alt="", ce qui permet aux technologies d’assistance de l’ignorer.
Le même fichier peut changer de rôle selon son contexte.
La photographie d’un atelier placée derrière un titre peut être purement décorative. Utilisée plus bas pour montrer une étape précise de fabrication, elle devient informative.
Le W3C propose également un arbre décisionnel pour déterminer l’alternative textuelle.
Trois exemples de directions visuelles
Un cabinet de conseil
Je ne choisirais pas une direction fondée uniquement sur des photos de réunions issues d’une banque d’images.
Je privilégierais des portraits et quelques scènes de travail réelles pour montrer les consultants. Les méthodes complexes pourraient être expliquées avec des schémas illustrés.
Les deux médias partagent ensuite les mêmes couleurs et certains principes de composition.
La photographie apporte la réalité. L’illustration prend le relais lorsqu’il faut expliquer.
Une marque de cosmétique
Le produit doit être vu.
Je travaillerais donc principalement avec de la photographie : flacons, texture, peau, ingrédients, lumière proche de la palette de marque.
La 3D pourrait compléter certaines campagnes en créant des compositions impossibles à réaliser facilement en studio : flacon suspendu, liquide en mouvement, produit éclaté.
Je garderais les images réelles sur les zones où l’utilisateur doit évaluer précisément le produit.
Un SaaS B2B
Les screenshots sont nécessaires lorsqu’une fonctionnalité doit être comprise.
Ils n’ont pas besoin d’occuper toutes les pages.
Je peux conserver les captures dans les sections produit, utiliser l’illustration pour expliquer les flux et réserver éventuellement la 3D à quelques moments de marque.
Le site gagne ainsi en variété sans rendre le produit abstrait.
Les erreurs que je rencontre le plus souvent
Choisir les images une par une
Chaque image peut être belle isolément et pourtant créer un ensemble incohérent.
Utiliser des photographies interchangeables
Si le même visuel convient à cinq secteurs différents, il apporte peu de personnalité à la marque.
Créer une direction impossible à alimenter
La production doit correspondre au rythme réel de publication.
Remplacer une preuve réelle par une illustration
Sur une fiche produit, montrer précisément le produit reste souvent prioritaire.
Utiliser la 3D uniquement parce qu’elle est à la mode
Un rendu contemporain ne devient pas automatiquement une identité.
Préparer un shooting sans penser aux formats du site
Les cadrages doivent anticiper hero, cartes, portraits et mobile.
Intégrer du texte directement dans les visuels
Le texte HTML s’adapte mieux au responsive, au zoom et aux besoins d’accessibilité.
Conserver le même cadrage partout
Une variante mobile peut être nécessaire pour garder le sujet lisible.
Décider du texte alternatif après coup
Le rôle informatif ou décoratif de l’image peut être identifié dès la conception.
Confondre cohérence et uniformité
Les images n’ont pas besoin d’être identiques. Elles doivent partager suffisamment de règles pour sembler appartenir au même projet.
Ma méthode pour définir un langage visuel
Je commence par un inventaire.
Quelles images existent déjà ? Sont-elles exploitables ? Quels nouveaux contenus devront être produits après la mise en ligne ?
Identifier ce qui doit être montré
Je distingue les preuves réelles, les personnes, les produits et les concepts qui nécessitent une représentation plus abstraite.
Explorer plusieurs pistes
Le moodboard permet de comparer rapidement une direction très photographique, une piste illustrée ou une solution hybride.
Tester avec de vrais contenus
Je veux voir le système sur plusieurs pages : hero, service, équipe, réalisation, article et mobile.
Une direction qui fonctionne uniquement sur la page d’accueil est trop fragile.
Définir les règles de production
Je précise les cadrages, traitements, couleurs, formats et règles propres aux illustrations ou à la 3D.
Vérifier la réalité de production
Qui créera les prochains visuels ? À quelle fréquence ?
Une marque peut très bien avoir deux niveaux de production : des visuels très travaillés pour les campagnes et un système plus léger pour les contenus courants.
Documenter avec des exemples
Je préfère montrer plusieurs bons et mauvais exemples plutôt qu’écrire une longue série d’adjectifs.
Ce travail s’intègre naturellement dans une démarche de création d’identité visuelle.
Ma checklist avant validation
- Les images montrent-elles quelque chose d’utile ou remplissent-elles simplement la page ?
- La direction correspond-elle réellement à la personnalité de la marque ?
- Les photographies partagent-elles suffisamment de règles communes ?
- Le style d’illustration peut-il être reproduit sur de futurs contenus ?
- La 3D apporte-t-elle une fonction ou uniquement un effet ?
- Chaque média possède-t-il un rôle identifiable ?
- Les couleurs des images fonctionnent-elles avec la palette ?
- Les cadrages laissent-ils de la place aux textes lorsque nécessaire ?
- Les versions mobiles conservent-elles le sujet principal ?
- La production reste-t-elle réaliste dans six mois ?
- Le rôle informatif ou décoratif de chaque image est-il clair ?
- Les médias lourds sont-ils justifiés par ce qu’ils apportent ?
FAQ : photographie, illustration et 3D
Faut-il privilégier la photographie pour un site professionnel ?
Non. Elle est particulièrement utile lorsqu’il faut montrer des produits, des lieux, des personnes ou des réalisations réelles. Pour des notions abstraites, l’illustration ou la 3D peuvent être plus efficaces.
Les photos de banque d’images sont-elles mauvaises pour une marque ?
Pas en elles-mêmes. Le problème vient surtout des images génériques ou choisies indépendamment les unes des autres. Une sélection cohérente peut fonctionner lorsque le shooting n’est pas possible.
Quand utiliser l’illustration ?
Elle convient bien aux concepts difficiles à photographier, aux explications visuelles et aux marques qui souhaitent développer un univers graphique très spécifique.
Quand la 3D est-elle réellement utile ?
Elle permet de représenter un produit avant sa fabrication, de contrôler très précisément un rendu ou de créer une scène impossible à photographier. Elle devient moins pertinente lorsqu’elle sert uniquement de décoration générique.
Peut-on mélanger photographie, illustration et 3D ?
Oui. Le mélange fonctionne mieux lorsque chaque média possède une fonction claire et que des règles communes maintiennent la cohérence.
Faut-il utiliser la même image sur desktop et mobile ?
Non. Un recadrage différent peut être préférable lorsque le sujet devient trop petit ou sort du cadre sur smartphone.
Toutes les images doivent-elles avoir un texte alternatif ?
L’attribut alt doit être présent sur les images HTML, mais son contenu dépend de leur fonction. Une image informative nécessite une alternative utile. Une image décorative utilise généralement alt="".
Comment rendre une direction photographique cohérente ?
En définissant des règles suffisamment concrètes sur la lumière, les cadrages, les sujets, les couleurs et le traitement.
Comment repérer un langage visuel trop générique ?
On peut imaginer le même visuel avec le logo d’un concurrent. S’il fonctionne exactement de la même manière, il manque probablement encore des caractéristiques propres à la marque.
Sources et ressources
- W3C – Images Tutorial : rôles des images et principes relatifs aux alternatives textuelles.
- W3C – Decorative Images : traitement des images purement décoratives.
- W3C – Informative Images : alternatives textuelles pour les images qui transmettent une information.
- W3C – Arbre décisionnel pour l’attribut alt : aide pour déterminer le traitement approprié selon le rôle de l’image.
- MDN – Utiliser les images adaptatives en HTML : résolution, responsive et direction artistique selon l’espace disponible.
- MDN – L’élément HTML picture : utilisation de plusieurs sources d’images selon les conditions d’affichage.
À lire également sur TooNetCreation
- Comment créer une identité visuelle forte sans sacrifier l’expérience utilisateur ?
- Moodboard : comment passer de l’inspiration à une véritable direction artistique ?
- Comment choisir une palette de couleurs pour son identité visuelle et son site web ?
- Typographie web : comment choisir et associer les polices d’un site sans sacrifier la lisibilité ?
- Minimalisme ou maximalisme : quel style choisir pour son site web ?
- Composition web : comment créer une mise en page originale sans perdre la lisibilité ?
- UX mobile : pourquoi adapter l’expérience et pas seulement réduire la maquette ?
- Création d’identité visuelle et charte graphique
- Conception UX/UI et expérience utilisateur
