Il existe de nombreux endroits où vous pouvez personnaliser votre plateforme avec des images (photos ou graphiques) afin de rendre votre plateforme plus attrayante et de communiquer la bonne image et la bonne sensation. Voici les directives exactes pour chaque type d'image afin de vous assurer que vos images sont correctement recadrées et qu'elles ne sont pas floues.
1. Types d'images sur votre plateforme
Une image peut être une simple photo, un visuel ou un graphique. Il s'agit des différents types d'images que vous pouvez intégrer à votre plateforme et à vos projets :
Bannière de la page d'accueil
Carte de projet/dossier
Bannière du projet/dossier
Carte d'entrée (idée)
Logo
Images in-text
Propositions
2. Taille des images
Pour éviter les images pixellisées, assurez-vous toujours que votre image est suffisamment lourde, c'est-à-dire qu'elle doit avoir une résolution (dpi) de 72 dpi au moins. Les images doivent être au format png ou jpg et d'une taille maximale de 5 Mo.
* dpi, ou dots per inch, est une mesure de la résolution d'une image. Plus la densité de points est élevée, plus la résolution de l'image est importante.
3. Dimensions de l'image, ratio et réactivité
Les dimensions recommandées varient selon le type d'image. Il est important de noter que les images s'affichent différemment selon l'appareil que vous utilisez pour visiter la plateforme. Voir le point 4 pour les recommandations en matière d'affichage.
Ce tableau indique les dimensions suggérées pour et le ratio par type d'image. L'outil de téléchargement d'images vous aide à recadrer n'importe quelle image au bon ratio à tout moment.
Type d'image | Où sont-elles affichées ? | Dimensions | Ratio |
|
Bannière de la page d'accueil | Il peut s'agir d'une bannière pleine largeur ou d'une ligne ou d'une colonne, en fonction de vos paramètres. | 1440 x 480 px | 3:1 | Peut être affiché à un rapport d'environ 1:1 sur les téléphones portables. |
Carte de projet/dossier
- Carré | Sur la page d'accueil ou dans un dossier pour représenter un projet | 500 x 500 px | 4:3 | S'affiche également en 4:3 sur les téléphones portables. |
Bannière du projet/dossier | Affiché en haut de la page de votre projet ou de votre dossier de projet | 1440 x360px | 4:1 | Peut être affiché dans un rapport d'environ 3:1 sur les téléphones portables. |
Carte d'entrée (idée) | Affiché en haut de l'entrée (idée e.a) ou dans la vue d'ensemble de l'entrée |
| 1:1 | Peut être affiché comme approximativement 2:1 ou 3:1 sur les téléphones portables. |
Logo du site | En haut à gauche dans le menu de navigation | Hauteur minimale 45 px; pas de largeur minimale ou maximale | ||
Carte d'événement dans un projet | Affiché au bas des pages de votre projet | aucune dimension d'image forcée n'est appliquée | (ratio classique de 3:1 recommandé pour les bannières) | |
Carte de proposition | L'image principale est affichée sur la liste avec toutes les autres propositions.
| 1000x500px | ||
Image in-text | dans les descriptions de projets/phases ou les questions d'enquête
Les titres des images sont obligatoires pour des raisons d'accessibilité | peuvent être redimensionnés dans le texte |
Votre plateforme est réactive. Cela signifie que les images s'affichent différemment selon le type d'écran (ordinateur de bureau, tablette, téléphone portable). Nous vous recommandons donc d'éviter tout texte ou information sur l'image et de n'utiliser que des images décoratives.
Pourquoi est-il recommandé de ne pas faire figurer de texte ou d'informations sur les images ?
Non seulement cela améliore l'accessibilité et la lisibilité, mais tout texte est susceptible d'être recadré en fonction de la taille du navigateur. Vous pouvez utiliser les champs titre et description pour transmettre des informations écrites et ajouter des images supplémentaires aux descriptions de vos projets et dossiers si vous souhaitez fournir plus d'informations aux visiteurs de votre plateforme.
4. Affichage de l'image dans la bannière de la page d'accueil (+exemples)
Pour la bannière de la page d'accueil, vous avez le choix entre 3 options : "Pleine largeur", "Deux rangées" ou "Ratio fixe".
Pour chacune des trois options de mise en page, il est important de choisir une image qui, de préférence, ne contient pas de texte ou d'informations.
Pour chaque type d'image, il existe un comportement différent, afin de s'assurer que la plateforme fonctionne bien sur tous les appareils. La "zone de sécurité" est la zone qui est affichée en permanence.
Bannière pleine largeur
La bannière pleine largeur donne le meilleur effet visuel, mais c'est elle qui redimensionne le plus les images de & . N'utilisez cette méthode qu'avec des images abstraites.
Bannière à deux rangs
Cette bannière est particulièrement utile pour les images qui ne s'accordent pas bien avec le texte du titre, du sous-titre ou du bouton. Ces éléments seront placés sous la bannière.
Bannière à rapport fixe
La bannière à rapport fixe conserve en permanence sa hauteur et la majeure partie de sa largeur. Il s'agit d'un bon type de bannière si vous souhaitez que la partie principale de l'image soit visible à tout moment.
Le ratio recommandé pour la bannière à rapport fixe est de 3:1. Cette image est toujours recadrée selon un certain ratio afin de s'assurer que tous les aspects cruciaux sont affichés à tout moment. Si vous téléchargez une image dont le rapport n'est pas déjà de 3:1, vous pourrez faire glisser l'image vers le haut et vers le bas pour vous assurer que les parties importantes apparaissent dans la zone fixe.
5. Affichage d'images dans les projets
Dans un projet, vous pouvez ajouter des images à trois endroits : Carte de projet/dossier, bannière de projet/dossier et carte d'entrée (idée).
Lorsque vous téléchargez une image pour l'utiliser comme carte de projet/dossier ou comme bannière de projet/dossier, vous pouvez faire glisser l'image et choisir la partie de l'image qui sera toujours visible. La grille indique ce qui sera toujours visible et la partie vague de l'image sera coupée. Lorsque vous téléchargez une image qui a déjà les bonnes dimensions, vous ne pouvez pas faire glisser l'image.
Les cartes d'idées s'affichent toujours au format 4:3. Ici, il n'y a pas d'option pour faire glisser l'image dans la grille.
6. Trouver une bonne image
💡 Vous avez des difficultés à trouver une bonne image ? Les galeries d'images libres de droits telles que Pexels et Unsplash ou Burst constituent souvent un bon point de départ pour trouver de belles images de bonne qualité.
Besoin d'aide? Contactez notre équipe support via la bulle de chat .