La charte iconographique

Le web design moderne ne se limite pas seulement à la mise en page et à la typographie, mais englobe également l’utilisation judicieuse du contenu iconographique.Le webdesign est un aspect crucial de la conception de sites web, car c’est la première chose que les utilisateurs voient en visitant un site. Les images et les icônes ainsi que tout autre contenu iconographique jouent un rôle important dans l’expérience de l’utilisateur, en permettant de transmettre rapidement une idée ou un message visuellement.Dans cet article, nous explorerons l’importance du contenu iconographique du point de vue du webdesigner et comment l’utiliser de manière efficace pour améliorer l’expérience utilisateur et renforcer votre marque.Alors, sans plus tarder, plongeons dans le monde fascinant du contenu iconographique et du webdesign.Faire des textes pour votre site web, c’est une chose mais illustrer vos propos en choisisant un contenu iconographique pertinent améliore le web design et même s’il est parfois négligé, il est crucial pour votre image de marque et pour se démarquer de vos concurrents.Voici tous les secrets d’une bonne iconographie de site web.

Pourquoi s’attarder sur l’iconographie?

Un article agrémenté de visuels va plus loin qu’un long texte sans image car elle délivre aussi des messages. C’est un gage de qualité pour votre site web. Pictos, puces infographies, photos, vidéos, call to action sont autant d’éléments pour votre charte iconographique.Il doit donc attirer l’œil de l’internaute et être adapté à votre activité afin de transmettre une sensation agréable à vos prospects.

Capter l’attention avec des images

Le contenu d’un site internet constitue la vitrine de votre entreprise. Vos textes sont illustrés par des photos, des pictos, des icônes, des vidéos dans votre domaine d’activité. Ils constituent les éléments iconographiques.Votre univers se présente sous une forme immédiatement accessible. Car le graphisme délivre aussi des messages et renforce votre image de marque. L’image facilite la compréhension en l’illustrant. L’accès aux textes est renforcé et vous touchez la zone émotionnelle de vos internautes.On reconnaît alors un certain « pouvoir » aux images et notamment celui de renforcer votre image de marque.

Cela profite à votre référencement

Pensez à renouveler les images et les photos de votre site web. Pour rester pertinent, un site internet doit rester vivant. La fraîcheur d’une page permet de booster votre référencement naturel. Comme les photographies sont taguées, elle renforce votre référencement naturel.L’iconographie permet de fidéliser vos internautes en leur proposant toujours quelque chose de nouveau. N’hésitez donc pas à ajouter régulièrement des illustrations.

Cela améliore l’expérience utilisateur

Votre communication est adaptée à vos prospects qui recherchent souvent à être rassurés à travers une mise en page simple et évidente et à trouver la bonne information sur votre site internet. L’iconographie web fait que la mise en page de votre texte est plus aérée et votre site est plus convivial.L’ergonomie qui passe par le zoning de vos pages web doit inclure les éléments graphiques qui permettent de gagner en lisibilité afin d’améliorer l’expérience utilisateur.Différents supports peuvent être utilisés pour illustrer votre page et attirer le regard : des icônes, des infographies, des images 3D, des photos, des pictos, des call to action. 

Les différents types d’éléments iconographiques

Les infographies : le contenu iconographique idéal

Les infographies permettent d’illustrer vos propos sur un thème de votre secteur. C’est une illustration qui présente souvent sous forme de schémas, des chiffres, de stats, les dernières informations ou connaissances dont vous disposez sur le sujet.Vous pouvez devenir rapidement incontournable dans votre secteur par exemple en délivrant les chiffres clés de votre activité dans une belle infographie.Plus parlante qu’un texte, une infographie peut vite devenir virale, être partagée et donc améliorer votre référencement.Une bonne infographie vous permet de mettre en valeur vos textes et d’être relayée sur les réseaux sociaux. Cela améliore votre notoriété et profite à votre référencement si votre article est partagé. 

Exemple d’infographie

 

Les images 3D

Elles sont parfaites pour proposer un site internet alors que vos locaux ne sont pas encore ouverts ou pour présenter vos projets de développement. Un logo 3D offre aussi une touche de modernité.N’oubliez pas d’ajouter des ombres portées sur vos blocs de textes. Cela donne l’impression d’une mise en page 3D.

Les icônes

Des centaines d’icônes libres de droits pour illustrer votre site sont présentes sur font-awesome ou sur  the noun project. Fontello : meilleure banque d’icônes gratuite Icomoon : plus de 2000 icônes gratuites Glyphsearch : compilation de plusieurs banque d’icônesVous trouverez aussi des exemples à télécharger sur Iconfinder et sur UxwingFlaticon  permet également de trouver des ressources gratuites. Redshot dispose aussi d’une section :  » icônes gratuites ». Freepik dispose d’une section :  » icônes « .

Outils pour créer des icônes :

https://iconion.com/ : un outil pour créer des icônes gratuites.
IconsDB : outil gratuit pour créer des icônes

C’est idéal pour renforcer votre message et rassurer les visiteurs.Pensée pour résumer une action ou un service, une icône délivre un message instantané sans faire de long discours.

Les images

Les images offrent un terrain de jeu encore plus grand. Plus variées que ce que permet la photos, une image peut bousculer l’imaginaire et favoriser la transmission d’une impression positive.

Les photos

N’hésitez pas à ajouter vos propres photographies. Si vous n’en avez pas, voici quelques astuces pour en trouver à moindres frais :Site de photographie :

• Pexels: Une banque d’images et vidéos gratuites et libres de droits, proposées par des photographes du monde entier.
• Pixabay: Une plateforme offrant des millions d’images, vidéos et musiques libres de droits pour un usage personnel et commercial.
• Unsplash:Une collection de photos haute résolution gratuites, prises par des photographes passionnés et accessibles pour tous les projets.
• O-Dan: Un moteur de recherche d’images gratuites agrégeant les résultats de plusieurs banques d’images libres de droits.
• Freepng: Un site spécialisé dans les images PNG avec fond transparent, idéales pour le graphisme et le webdesign.
• Adobe Stock: Une plateforme premium d’images, vidéos et illustrations de haute qualité pour les créateurs et professionnels.
• Visual Hunt: Une bibliothèque d’images gratuites en haute résolution, avec des licences variées incluant le domaine public.
• Pikwizard: Une large sélection de photos et vidéos libres de droits, avec un accent sur les portraits et les images d’entreprise.
• CCSearch: Un outil de recherche d’images sous licence Creative Commons provenant de diverses sources fiables.
• Flickr: Une plateforme de partage de photos avec une vaste collection d’images sous différentes licences, y compris Creative Commons.
• StockVault: Une banque d’images gratuite proposant des photos, textures et illustrations pour les designers et créateurs.
• Isorepublic : Des photos et vidéos libres de droits en haute qualité, couvrant divers thèmes pour les créatifs.
• GettyImages: Un leader du marché des images et vidéos premium sous licence pour les entreprises et les médias.
• Freeimages: Un site proposant une collection variée de photos gratuites et libres de droits pour tous types de projets.
• Redshot: Une banque d’images gratuites mettant l’accent sur les photos de qualité pour un usage commercial et personnel.
• Freerangestock:Une plateforme proposant des photos haute résolution gratuites pour des usages commerciaux et éditoriaux.
• Picjumbo: Une collection de photos gratuites et premium, souvent utilisées pour le marketing et le webdesign.
• Freepik: Une ressource incontournable pour les images, vecteurs et fichiers PSD gratuits et premium.
• Picography : Une sélection de photos artistiques libres de droits, idéales pour les blogs et les réseaux sociaux.
• Lifeofpix: Des images artistiques gratuites en haute résolution, fournies par des photographes professionnels.
• Foodiesfeed (photos alimentaires): Banque d’images spécialisée dans la photographie culinaire, idéale pour les blogueurs et restaurateurs.
• Kaboompics : Banque d’images gratuites avec une forte orientation lifestyle, mode et design.
• StockSnap : Collection d’images haute résolution gratuites, régulièrement mise à jour avec de nouvelles photos.

8 banques d’images gratuites:

• Burst (by Shopify) : Photos libres de droits pour entrepreneurs et créateurs de contenu.

• Gratisography : Images originales et décalées en haute résolution, libres de droits.

• Negativespace : Photos HD gratuites avec licence CC0, triées par catégories.

• Skitterphoto : Banque d’images libres de droits prises par des photographes passionnés.

• LibreShot : Photos gratuites pour un usage personnel et commercial, sans attribution requise.

• Morguefile : Collection d’images libres d’utilisation, souvent utilisées pour des inspirations créatives.

• Jay Mantri : Photos artistiques gratuites avec un style minimaliste et épuré.

• New Old Stock : Photos d’archives vintage gratuites et libres de droits.

Des images vectorielles

• Vectorstock: Plateforme spécialisée dans les illustrations vectorielles, proposant des fichiers gratuits et premium.
• Vector4Free: Collection de vecteurs gratuits pour un usage personnel et commercial, idéale pour les graphistes.
• Vecteezy: Large bibliothèque de vecteurs, photos et vidéos gratuites, avec une option premium pour du contenu exclusif.

 

Banques d’images payantes (ou freemium):

• Shutterstock : L’une des plus grandes plateformes d’images premium avec des millions de fichiers.

• iStock (by Getty Images) : Banque d’images abordable avec un large choix de visuels de qualité.

• Depositphotos : Service de photos, vecteurs et vidéos libres de droits avec abonnement.

• Dreamstime : Banque d’images avec des fichiers premium et une section gratuite.

• 123RF : Plateforme d’images, vidéos et audios libres de droits avec tarifs abordables.

• Alamy : Immense collection d’images premium, souvent utilisées par les médias et agences.

Les générateurs d’image via l’intelligence artificielle (IA):

Bing CreatorJ’ai testé pour vous la requête « webmaster freelance ».  

Générateurs d’image plébiscités mais qui nécessitent la création d’un compte :

 

Les pictos

Ils sont plus qualitatifs que les icônes. Idéal pour renforcer la sensation de plaisir, c’est un élément iconographique de qualité s’ils sont conçus sur mesure.Il s’agit d’un bon compromis pour enrichir votre site web en lui donnant une touche personnelle. Ils ajoutent à la compréhension et structurent la page en simplifiant votre message.L’avantage des pictos est d’annoncer le contenu de votre texte tout en donnant une image positive. Ils agrémentent aussi la mise en page en donnant de la plus-value à vos annonces. Un picto résume votre propos en une image tout en ajoutant une proximité entre le visiteur et votre site internet grâce au fait que cela simplifie la compréhension. Il contribue ainsi à renforcer votre message.Certains pictos sont appelés « Call to Action » et permettent d’attirer le regard de l’internaute pour l’inciter à effectuer une action mais les pictos ne sont pas destinés à jouer un rôle interactif sur la page.Ils permettent aussi de gratifier l’internaute en cas de succès lors d’une interaction avec le site internet. 

Les appels à l’action

Comme les pictos, ils peuvent être personnalisés. Les call to action ont la même fonction qu’un bouton et sont là pour inciter les internautes à l’action. Ici dans ce cas, le pictogramme incite à l’action de « liker » tout en faisant la promotion du réseau social.Généralement lié à l’interactivité d’un site web, ils annoncent la page suivante ou le bénéfice que le visiteur va tirer en cliquant sur le lien.Ils sont aussi là pour augmenter la sensation de plaisir sur un site web.

Les plans

Très courants sur les pages contacts, les plans peuvent rassurer l’internaute.Cela permet aussi de gagner du temps en permettant à votre visiteur de vous situer en un coup d’œil et cela peut pousser le visiteur à vous rendre visite s’il connaît votre localisation.Allez sur Google MyMaps et ajoutez vos propres repères : que ce soit vos différents magasins, succursales, votre siège social, vos clients, vos partenaires…Vous proposez ainsi de l’interactivité à vos visiteurs en proposant aux internautes de se familiariser avec le quartier où sont vos locaux.

Les puces

Voici quelques exemples de puces pour agrémenter votre site web. Couleur, forme, taille, il n’y a pas de limites à votre imagination.

• Exemple puce personnalisée
• Exemple carré
• Exemple rond
• Exemple cercle
• Exemple sans puce

Les listes à puces permettent de structurer votre contenu.C’est important pour la compréhension. Il est aussi possible d’en créer sur mesure avec une feuille de style CSS.

Les vidéos

Aujourd’hui avec les smartphones, les vidéos occupe une place de plus en plus grandissante que ce soit sur les réseaux sociaux, sur Youtube et même sur les sites web.Une courte description de vos intentions ou une présentation vivante de votre activité aura plus d’impact que vous ne le pensez. Elle permet de mieux vous connaître et d’interagir avec l’internaute. Sachez qu’une vidéo est plus consultée qu’un texte ou une photo.Vous pouvez aussi sous-titrer les vidéos pour permettre à ceux qui consultent Facebook dans les transports de suivre votre propos sans écouteurs.

Conclusion

En conclusion, en intégrant judicieusement du contenu iconographique dans votre web design, vous pouvez créer un site web esthétiquement plaisant, convivial et mémorable pour vos utilisateurs.Il fait partie intégrante de la charte graphique. C’est un élément du webdesign clé pour améliorer l’expérience utilisateur et renforcer votre marque en ligne.Photos, icônes, pictos, vidéos, call to action, ils permettent de transmettre un message clair et souvent plus rapidement qu’un long texte en laissant aux internautes une impression agréable. Les images et les icônes peuvent transmettre rapidement une idée ou un message visuellement, ce qui peut aider à rendre votre site plus attrayant et facile à comprendre pour les utilisateurs.Cependant, il est important de choisir les images et les icônes avec soin pour s’assurer qu’ils renforcent votre message et votre marque, et non pas les diluent. Attention néanmoins à ne pas alourdir considérablement le poids de vos pages pour ne pas pénaliser la vitesse de chargement de votre site internet ce qui serait contre-productif.En utilisant le contenu iconographique de manière stratégique et en veillant à ce qu’il soit cohérent avec votre marque et votre style, vous pouvez améliorer considérablement l’expérience utilisateur sur votre site web.