pattern

Brief design illustrations Tunnel Q/R

Introduction

Ces illustrations apportent un complément d'information afin de faciliter la compréhension des différentes réponses proposées. Elles peuvent aussi représenter un élément spécifique inconnu de l'utilisateur. L'illustration est dans la plus part des cas accompagnée d'un texte pour compléter.

Objectif

Le premier élément que va repérer l'utilisateur est l'illustration. En effet, les utilisateurs ont besoin d' 1/10 de seconde seulement pour avoir une perception générale d'un élément visuel. Ces illustrations ont donc l'avantage de pouvoir transmettre un message plus rapidement que du texte. Les images étant assez techniques, il va être crucial de créer une identité plus chaleureuse et sympathique afin de parer au côté froid et moins accessible de ces éléments. Toujours dans cette optique de créer un lien de confiance avec l'utilisateur, les illustrations ont pour but de lui permettre une meilleure compréhension, en l'aidant au mieux à se représenter les différents éléments. Pour ce faire, l'illustration doit visuellement capter l'attention de l'utilisateur de manière “Smart et Friendly”. C'est-à-dire décomplexifier un message technique tout en apportant une touche plus sympathique.

Pour qui

Ces illustrations doivent s’adresser autant à un utilisateur expérimenté qu’à quelqu’un qui n’a aucune notion technique. Elles doivent également être lisibles par une personne qui présente des problèmes de vue (éléments pas trop petits, visibles et différenciants).

Typographie

local pro Dans le cas où un texte doit être ajouté à l’illustration, utilisez notre typographie TT Norms en privilégiant les hauts-de-casse Voir l’exemple ci-contre : Télécharger la typographie ici

Spécificités

L’illustration doit être simplifiée (ne pas l’encombrer de détails non nécessaires à sa compréhension) mais néanmoins reconnaissable, c’est à dire qu’elle doit tout de même se rapprocher suffisamment de la réalité. Les illustrations doivent être homogènes (même style graphique et mêmes couleurs) et chartées IZIbyEDF. Voici différentes règles à respecter pour l’élaboration des illustrations :

  • 1. Travailler dans un cadre de 250x250px
  • 2. Sauvegarder vos fichiers en nom_du_fichier.svg sans accent ni caractères spéciaux
  • 3. Se rapprocher plus de la réalité. Ne pas hésiter à ramener un peu de relief à certains éléments via des ombres et des lumières en aplat de couleurs.
  • 4. Privilégier des cadrages plus rapprochés sur l’élément nécessaire, voir des cadrages légèrement de biais (pour les perspectives notamment), qui apportent plus de dynamique à l’image
  • 5. Utiliser les couleurs proposées dans la charte et jouer sur les différentes tonalités
  • 6. Être plus chaleureux dans l’illustration, moins carré, moins strict et conventionnel
  • 7. Ne pas utiliser de contour

À éviter

  • • Éviter un cadrage trop frontal, trop basique, ennuyeux.
  • • Une surcharge visuelle > Trop de détails risque d’embrouiller l’utilisateur.
  • • 3D avancée (modélisation 3D) > Illustration beaucoup trop lourde, trop complexe et non nécessaire.
photo détaillé appartement

Exemple : L’utilisateur va consacrer trop de temps à analyser les détails de l’illustration ( les motifs de la couverture, le nombre de foyers de la plaque de cuisson…) qu’à se concentrer sur l’élément le plus important dans ce cas précis : la superficie globale de l’habitation.

check

Contre exemple : Pourquoi cette image fonctionne moins bien ? :

  • _ Cadrage trop frontal _ Couleurs fades → trop triste _ Trop de blanc
  • _ Contours
  • _ Différence de design entre le sol et le reste. Les lignes sont trop fines

Inspirations

machine à laverballon d'eau chaudeballon d'eau chaudetable fer à repassérouleau speinture

Couleurs

couleur#3E5887
couleur#4588C4
couleur#8BB8EA
couleur#90C5F4
couleur#A6D3F4
couleur#D4EFFA
couleur#001A70
couleur#2B4EAF
couleur#1B6BC1
couleur#3285F3
couleur#E0EAF4
couleur#0C273E
couleur#929385
couleur#AAA89B
couleur#A9AFAB
couleur#C0CAC9
couleur#F7F7F7
couleur#FFFFFF
couleur#D69B6B
couleur#EDB888
couleur#FFCC99

Pièce vue de face

illustration pièce d'angle
Couleurs dominantes
  • Sol
  • Murs
  • Zone importante
couleur#FFCC99
couleur#D69B6B
couleur#E0EAF4
couleur#F5F6F9
couleur#3285F3
couleur#D4EFFA

Cuisine vue de face

illustration cuisine
Couleurs dominantes
  • Sol
  • Murs
  • Zone importante
couleur#FFCC99
couleur#F5F6F9
couleur#3285F3
couleur#2B4EAF
couleur#0C273E

Salle de bain vue de face

illustration salle de bain
Couleurs dominantes
  • Sol
  • Murs
  • Mobilier
couleur#4688C4
couleur#90C5F4
couleur#FFCC99
couleur#FFFFFF
couleur#D4EFFA