Avez-vous déjà employé un mot si obsolète que votre ami vous a jeté un drôle de regard ? Si ça ne vous est jamais arrivé, vous pouvez facilement imaginer quelqu’un d’autre dans ce genre de situation. Rien d’étrange, tous les mots du dictionnaire ne sont pas employés tous les jours dans la vie moderne. Certains mots gagnent en popularité tandis que d’autres tombent en archaïsme.
Mais apparemment, les mots ne sont pas les seuls éléments du langage humain qui peuvent se démoder. Par exemple, l’émoji « rieur » 😂 est tout à fait dépassé. En tout cas, c’est ce que pensent de nombreux net-citoyens de la génération Z, selon un article de CNN. Un autre émoji, le fameux « mourir de rire » 🤣, n’est plus en vogue, toujours selon l’article.
Quoi qu’il en soit, on peut se mettre d’accord sur une chose : il semble que, tout comme pour les mots, les gens doivent aussi faire attention à leurs pictogrammes. C’est pourquoi, dans cet article, nous allons découvrir ce qu’est réellement un pictogramme, à quoi ça sert, où on peut trouver des pictogrammes gratuits et comment choisir le bon pour son site web ou son blog.
Définition de pictogramme
Un pictogramme, ou picto en abrégé, est un symbole qui renvoie à une certaine information ou à un certain sentiment. Un Emoji est un exemple d’icône qui représente une émotion. Cependant, dans le contexte du développement du web, les icônes sont utilisées non seulement pour représenter des impressions, mais pour presque tout. Beaucoup de choses sur le web sont représentées par tel ou tel pictogramme : compétences, concepts, fonctionnalités des applications, ce que vous voulez !
Pour les besoins de cet article, nous nous concentrerons sur deux fonctions pour lesquelles les pictogrammes sont souvent utiles pour les sites web : enrichir le contenu textuel et créer des liens vers les réseaux sociaux, appelés « pictogrammes sociaux. »
Mais avant d’en parler, jetons un bref coup d’œil à quelques classifications concernant les pictogrammes.
Les types de pictogrammes
En ce qui concerne l’expérience utilisateur, les pictogrammes peuvent être subdivisés en trois sortes : les pictogrammes universels, les pictogrammes « contradictoires » et les pictogrammes uniques.
Les pictogrammes universels sont quelques icônes qui jouissent d’une reconnaissance quasi universelle parmi les utilisateurs. Les symboles pour la maison, imprimer, rechercher et le panier d’achat sont de telles icônes.
Une sous-catégorie est ce que nous appelons les Icônes accessibles. Les icônes accessibles sont celles qui peuvent être comprises par tous les visiteurs du site web, indépendamment de leurs déficiences ou de leurs handicaps. Pour être accessibles, les icônes doivent être clairement visibles. Si elles nécessitent d’abord des interactions pour être vues, elles risquent de passer inaperçues.
Par exemple, une loupe, qui signifie « rechercher, » est l’une des rares à être vraiment reconnue. Pour la plupart des pictogrammes, il est nécessaire d’accompagner l’image d’une étiquette de texte pour éviter toute ambiguïté.
Ensuite, il y a les pictogrammes contradictoires, c’est-à-dire ceux qui ont des significations contradictoires. On peut citer comme exemple le cœur, pictogramme qui peut signifier « sauvegarder, » « aimer » ou « ajouter à une liste de souhaits. »
Et puis nous avons les icônes uniques, qui sont des icônes choisies ad hoc, ou spécialement créées par un designer spécifique dans un but précis. Prenez par exemple le pictogramme « Waffle » de Google, cette grille de neuf points gris que vous trouvez dans le coin supérieur droit de votre navigateur lorsque vous utilisez un service Google.
On peut aussi classer les pictogrammes en icônes graphiques et en icônes textuelles. Le second type utilise des polices d’icônes, c’est-à-dire des polices qui contiennent des symboles et des glyphes au lieu de chiffres ou de lettres. Elles sont populaires auprès des concepteurs de sites web, car vous pouvez les styliser avec du CSS de la même manière que le texte normal.
De plus, comme ce sont des images vectorielles, elles sont faciles à dimensionner. Cependant, si pour une raison quelconque, les polices web distantes (polices chargées du web lors du chargement d’un site) sont bloquées par l’utilisateur final (par ex. avec un logiciel antipub), les pictos textuels ne s’afficheront pas, mais un texte de remplacement apparaîtra, ce qui risque de ne pas faire joli.
Maintenant que nous avons une idée de quelques catégories de pictogrammes, examinons leur fonction première, à savoir compléter le texte.
Les pictogrammes enrichissent le texte
Les pictogrammes sont à la base de certains des plus anciens alphabets de l’histoire de l’humanité, notamment les anciens caractères égyptiens, mésopotamiens et chinois. Voilà qui montre à quel point la représentation visuelle est importante pour la communication humaine.
Pas étonnant alors que, même après des milliers d’années passées à développer le langage, les gens continuent de se servir de pictogrammes dans leur vie quotidienne. Internet ne fait pas exception à la règle.
Un exemple célèbre de pictogrammes utilisés sur le web est la favicon, abréviation de l’anglais « favorite icon. » Il s’agit de ce pictogramme qui distingue votre site des autres dans la barre d’onglets du navigateur.
Les pictogrammes sont des moyens parfaits de représenter visuellement un texte car ils sont minimalistes tout en offrant un équilibre visuel parfait pour équilibrer votre contenu. Ils sont une partie essentielle de nombreuses interfaces utilisateur, exprimant visuellement des objets, des actions et des idées.
Quand ils sont bien conçus, ils communiquent l’idée principale et l’intention d’un produit ou d’une action, en plus d’apporter de nombreux avantages aux interfaces utilisateur, comme l’économie d’espace à l’écran et l’amélioration de l’esthétique.
Lors de la création de votre site web, il est de votre intérêt de trouver un bon équilibre entre vos informations et les éléments visuels qui les représentent ; une bonne façon d’y parvenir est d’utiliser des pictogrammes.
Ainsi, au lieu d’utiliser des mots et des légendes pour désigner les différentes colonnes ou barres d’un graphique, pourquoi ne pas utiliser des pictogrammes pour communiquer un même concept ? De même, vous pouvez tout simplement accentuer vos légendes et les rendre plus faciles à comprendre en un clin d’œil.
Et vous pouvez aussi utiliser des pictogrammes pour aider les gens à partager facilement votre contenu sur les réseaux sociaux, à lire ci-après.
Les pictogrammes sociaux
Parmi les sites web les plus visités, on trouve des sites de médias sociaux comme Twitter et Facebook. Mais pour profiter de la visibilité qu’il vous offre, votre propre site web doit être constamment présent dans les divers réseaux sociaux. Votre site doit être à un clic de ce vaste espace de partage, et rien de mieux qu’un pictogramme pour attirer l’attention de vos visiteurs.
Les pictogrammes pour partager sur les médias sociaux vous aident à élargir la base de marché de votre site web. Ajoutez des liens de diffusion sur les réseaux sociaux, c’est ce qu’on appelle l’intégration des réseaux sociaux. Il existe bien sûr des bonnes pratiques pour ce faire.
Strikingly vous donne tout simplement la possibilité de choisir entre les pictogrammes et les boutons pour la fonctionnalité de partage du contenu dans les médias sociaux.
Il vous propose également Luckyicons, un outil de génération d’icônes pour vous aider à créer votre propre ensemble d’icônes sociales de n’importe quelle couleur.
Mais vous aurez peut-être besoin de plus de pictogrammes que de simples icônes sociales, et il y a plein d’endroits où vous pouvez dénicher les pictogrammes de votre choix.
Où trouver des pictogrammes
Les pictogrammes sont une formule intéressante pour les concepteurs qui cherchent à mieux guider les utilisateurs lorsqu’ils interagissent avec leur site.
Cependant, la mise en place de pictogrammes exige la même attention aux détails et la même réflexion que pour tout autre élément de votre design. Ainsi, si vous n’êtes pas vraiment prêt à créer vos propres pictogrammes, vous pouvez en trouver de nombreux sur Internet avec des options infinies.
Voici une liste de quelques-uns des meilleurs sites web pour trouver et télécharger des pictogrammes gratuits :
- Flaticon : le site contient plus de deux millions de pictogrammes vectoriels. Le portail facilite l’accès aux pictogrammes en proposant des packs de pictogrammes classés par thème et une barre de recherche permettant de cibler les demandes. De nombreux pictogrammes gratuits sont disponibles en téléchargement aux formats SVG, PNG et autres. En plus des icônes gratuites, le site propose également des fichiers payants plus raffinés.
- Icon Icons : un portail disponible en français avec de nombreux pictogrammes gratuits qui peuvent être téléchargés aux formats SVG et PNG. A noter tout de même que le choix des pictos peut être restreint si la finalité de leur usage est commerciale.
- Icon Finder : le site propose plus de quinze mille pictogrammes gratuits. Son interface est intuitive, les pictogrammes gratuits étant regroupés par catégorie et par origine. Une barre de recherche avec filtres permet d’affiner les requêtes. Vous pouvez y trouver votre meilleur pictogramme. Site incontournable pour en être sûr !
- Freepik : une plateforme de matériel visuel où de nombreux pictos sont disponibles, y compris sous forme vectorielle. Pictogrammes gratuits à télécharger à condition de faire référence à leur créateur. Site pour pictogramme disponible en français.
- Noun Project : ce service propose plus de deux millions de pictogrammes gratuits. Pour utiliser les icônes gratuites, le site doit être mentionné. Énorme archive en ligne, le Noun Project propose également de modifier les pictos avant de les télécharger au format PNG.
- FreeIcons.io : le portail se proclame la plus grande base de données d'icônes gratuites. Il contient des tonnes d'icônes disponibles en PNG, SVG, EPS, PSD et autres formats. Les icônes sont également disponibles sous forme de pack. Le site répertorie aussi les icônes les plus téléchargées du mois. Le prix de chaque icône : gratuit !
Maintenant que vous avez choisi un ensemble d’icônes qui vous plaît, il vous faut encore retenir quelques conseils sur la façon de les utiliser à la manière d’un designer pro — voici donc quelques notions de base en iconographie.
Comment choisir ses pictogrammes
Avant de placer des icônes sur votre site web, il y a quelques petits conseils à garder à l’esprit :
- Optez pour les packs de pictogrammes
Les pictogrammes ne sont pas des créatures solitaires, mais préfèrent plutôt vivre en famille. Souvent créées dans un but thématique ou esthétique, les pictogrammes peuvent introduire un langage visuel commun à l’ensemble de votre produit que le texte ou les images seuls auraient du mal à exprimer.
C’est pourquoi ils sont un bon outil pour donner de la cohérence à votre design.
Tâchez de refléter le thème général de votre site. Gardez aussi une certaine cohérence, par exemple, si vous utilisez des icônes en noir et blanc ou en couleur, des icônes au design plat ou des icônes au design riche.
- Utilisez des pictogrammes pertinents
Si votre site web ou votre application est destiné à une société, il vaut mieux opter pour une solution professionnelle. Si vous êtes une marque de mode, il est préférable de choisir quelque chose esthétiquement proche des vêtements que vous vendez.
Comme pour tout autre aspect de votre marque, assurez-vous que les pictogrammes que vous avez sélectionnés sont adaptés au thème de votre site.
Il peut vous paraître attrayant d’introduire un tout nouveau style avec votre jeu de pictogrammes. Cependant, si cela va à l’encontre de l’image de marque globale de votre site, vous risquez, là encore, de faire plus de mal que de bien.
En conservant un style et une esthétique similaires à ceux de votre marque, vous vous assurez que vos pictogrammes mettent en valeur l’aspect et la sensation d’ensemble.
- Rappelez-vous : les pictogrammes sont rarement universels
Tout comme les idées sont communiquées différemment dans les différentes langues, rares sont les pictogrammes qui ont une signification universelle pour tous les interlocuteurs.
Il importe de garder à l’esprit, par exemple, que certaines langues sont écrites de droite à gauche. Les langues de droite à gauche, comme l’arabe ou l’hébreu, peuvent donc utiliser des pictogrammes différents de ceux des langues de gauche à droite, comme le français et l’anglais.
Par conséquent, si vous envisagez de créer un site web dans une langue de droite à gauche, faites attention aux pictogrammes qui comportent des signes de direction.
Les icônes de flèches, vous devrez peut-être les mettre en miroir (c’est-à-dire inverser les directions de droite à gauche ou vice versa).
Celles qui utilisent des caractères latins, vous devrez peut-être les remplacer par des caractères propres à la langue, comme le cas de l’icône « i » parfois utilisée pour représenter une « information, » que vous pouvez également remplacer par une icône plus universelle comme l’ampoule.
Comment ajouter les pictogrammes dans son site
Maintenant que vous cochez les critères, vous pouvez ajouter un pictogramme principal pour votre site web et des pictogrammes d’ancrage pour chaque élément de texte.
Pour ajouter une icône pour votre page principale, cliquez sur « Ajouter une image/vidéo » (au milieu de la page) puis sur « Changer » puis déposez l’image (ou l’URL si l’image est sur Internet). Vous y trouverez aussi des tonnes d’icônes conceptuelles et sociales, monochromes et multicolores, dans « Bibliothèque Strikingly. »
À part ça, les icônes doivent de préférence avoir au moins 100 px de large, dans des formats adaptables comme ICO et SGV, mais d’autres formats d’image sont aussi acceptables.
Pour conclure
Dans l’esprit de votre audience, le choix de vos pictogrammes peut être aussi important que le choix de vos mots, et lorsque vous choisissez des pictogrammes pour votre site web, la première chose à retenir est que le symbole que vous choisissez doit aider à communiquer le message de votre produit.
Faites correspondre l’image de marque globale, évitez d’encombrer la page avec trop de pictogrammes, et si vous ne pouvez pas trouver le bon picto pour un usage spécifique, demandez à un expert.
