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

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

Pièce vue de face

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

Cuisine vue de face

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

Salle de bain vue de face

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