Cet article est la traduction partielle d’un post Dribble écrit en 2020 par Anastasia Marinicheva, UI/UX designer
Une photo bien placée peut raconter une histoire en un seul coup d’œil, beaucoup plus efficacement que les mots.
De nombreux concepteurs sous-estiment la valeur de la photographie dans la conception Web. Pour être honnête, je passe des heures à chercher de très bonnes photos. Le problème est que vous devez savoir ce que vous recherchez. Dans cet article, je vais vous montrer les meilleurs types de photos à utiliser dans la conception d’interface utilisateur et le type de photos que vous devriez éviter.
Pourquoi est-ce important ? La photographie peut créer l’ambiance d’un design. En ce qui concerne les produits numériques Web et mobiles, la photographie est l’un des outils les plus puissants pour déterminer comment une marque s’exprime. Une photo bien placée peut raconter une histoire en un seul coup d’œil, beaucoup plus efficacement que les mots.
Voici quelques conseils à garder à l’esprit lors de l’utilisation de la photographie dans la conception de l’interface utilisateur :
1. Restez fidèle aux photos de haute qualité
Les mauvaises photos ruineront un design, même si tout le reste est superbe.
Si votre design a besoin de photographie et que vous n’êtes pas un photographe talentueux, vous avez deux options: embaucher un photographe professionnel ou utiliser une photographie de stock de haute qualité.
Il existe des tonnes d’excellentes ressources où vous pouvez acheter des photos de qualité. Il existe même des sites qui proposent gratuitement de belles photos. Je vais vous fournir une liste de ressources à la fin de cet article.
2. Laisser le «stock» hors de la photographie de stock
Bien que la photographie de stock soit une excellente option pour trouver des photos de haute qualité, il est important de bien choisir vos photos.
Combien d’écrans Web avez-vous vus montrant les mêmes visages heureux et souriants? Des gens d’affaires compétents dans des costumes impeccables? Essayez d’éviter les clichés et les photographies d’archives génériques lorsque vous le pouvez. Cela aidera vos créations à se sentir plus authentiques et humaines.
3. Assurez-vous que tout texte est suffisamment contrasté
Avez-vous déjà essayé de coller un titre sur une grande image et c’était difficile à lire? Le problème vient est l’image. Les photos peuvent être très dynamiques, avec beaucoup de zones très claires et beaucoup de zones vraiment sombres.
Si vous devez utiliser une certaine photo, vous pouvez résoudre le problème de contraste avec l’une de ces techniques:
- Ajout d’une superposition
- Réduire le contraste de l’image
- Coloriser l’image
- Ajout d’une ombre portée à votre texte
4. Utilisez uniquement des images pertinentes
Toutes les images n’améliorent pas l’expérience. Certains d’entre eux prennent simplement de la place ou, dans le pire des cas, confondent l’utilisateur.
Les utilisateurs réagissent aux visuels plus rapidement que le texte, alors assurez-vous que votre contenu correspond aux visuels associés. Vous devez sélectionner des images ayant une forte relation avec les objectifs de votre produit et vous assurer qu’elles sont adaptées au contexte.
5. Utilisez des photos haute résolution
Les images basse résolution peuvent avoir un impact significatif sur vos utilisateurs. Parfois, cela peut être dû au fait de ne pas optimiser correctement vos images ou de choisir de petites images, puis de les agrandir.
Dans tous les cas, assurez-vous que vos photos ne sont pas floues ou pixellisées. Lorsque vous téléchargez une photo, vous devez vous souvenir: plus la résolution est élevée, mieux c’est.
6. Codes visuels répétés
Un bon design a une unité : il se lie comme une entité, chaque élément soutenant les autres structurellement et viscéralement. C’est un objectif difficile à atteindre. Mais je vous promets que votre conception sera bien meilleure si vous essayez d’utiliser les mêmes codes visuels (palette de couleur, forme, type de cadrage…).
7. Less is more
Vous avez probablement déjà entendu cette phrase, non ? Parfois, la meilleure décision que vous pouvez prendre est de vous concentrer sur votre produit afin d’attirer facilement l’attention de l’utilisateur.
La page d’accueil d’Apple est un bon exemple de concentration sur l’imagerie. Elle est élégante, propre et utilise une énorme quantité d’espace blanc et de grandes images en plein écran pour créer un design audacieux. Vous pouvez visiter n’importe quelle page de leur site Web et voir que «less is more» est pratiqué – évidemment une règle d’or pour Apple.
Outils en ligne pour créer vos visuels
Comment faire lorsqu’il faut une image à un format précis, poser un texte dessus ou même l’animer ? Le web vous offre des outils précieux, bien souvent gratuits, pour vous y aider. Cela ne remplacera jamais l’intervention d’un professionnel 😉 mais sera parfait pour dépanner…
La plupart de ces outils ont une version gratuite bien souvent suffisante pour un usage ponctuel.
1. https://www.canva.com/
Canva est la norme d’excellence en matière de création graphique en ligne pour les débutants et les niveaux de compétences intermédiaires. Il offre une très belle sélection de modèles organisés par type de publication (plus de 30 formats). L’éditeur de photo avec filtres est super simple. D’autres fonctions, telles que la création de Gif animés, les fonds transparents, le magic resize et une photothèque étendue nécessitent un abonnement payant.
2. https://crello.com/fr/
Crello comme Canva proposent toutes les fonctionnalités nécessaires pour faciliter le travail créatif : des milliers de modèles prêts à l’emploi, des dizaines de formats, des milliers d’icônes, de formes, d’éléments vectorisés, de typographies, etc.
3. https://www.designbold.com/ (en)
DesignBold propose des milliers de modèles modifiables. Chaque modèle est facile à personnaliser grâce à l’interface glisser-déposer du logiciel. Et, bien sûr, vous pouvez également créer vos propres modèles à partir de zéro.
4. https://spark.adobe.com/fr-FR/
Si vous recherchez l’équilibre parfait entre minimalisme et puissance dans un outil de conception graphique, essayez Adobe Spark. Les capacités d’ajustement de l’image sont minimes, mais il existe plusieurs filtres de base.
5. https://getstencil.com/ (en)
Stencil est un outil de conception graphique axé sur le marketing et sur les médias sociaux. Son interface minimaliste vise avant tout la rapidité. L’application est conçue pour être simple à apprendre et facile à utiliser.
6. https://pixlr.com/fr/
Plus proche des logiciels pro tels que Photoshop et consorts, Pixlr permet la retouche d’images par exemple. Revers de la médaille : il est aussi plus complexe à prendre en main, comme ses grands frères de la gamme pro.
Si vous cherchez des images libres de droits, gratuites ou payantes, nous avons établi une liste de ressources sur cette page.
Conclusion
J’espère qu’après avoir lu cet article, vous vous sentirez beaucoup plus confiant quant à l’utilisation efficace de la photographie dans vos sites web, vos app et sur les réseaux sociaux.
Vous le savez : rien ne remplacera le travail professionnel d’un photographe et d’un graphiste mais, dans beaucoup de cas, vous pourrez obtenir un résultat satisfaisant.
Si vous n’en sortez pas, contactez-nous 😉