Contexte émoticône : conception des indicateurs de crédibilité Emoji de HackerNoon

Chez HackerNoon, nous pensons que la transparence avec le lecteur est la clé pour établir la confiance entre l'écrivain et le lecteur. Pour donner aux lecteurs autant de transparence que possible, nous voulions créer des moyens rapides et simples de fournir au lecteur les informations qu'il souhaiterait connaître sur une histoire avant de la lire.

Cela pourrait être quelque chose d'aussi simple que de dire au lecteur si l'histoire est un article d'actualité ou un article d'opinion. D'un autre côté, il y a des choses plus compliquées que nous pourrions vouloir communiquer au lecteur, comme par exemple si l'écrivain a ou non un intérêt direct dans les entreprises sur lesquelles il écrit, ou s'il a utilisé l'IA pour écrire l'article.

Pour atteindre ces objectifs, nous avons créé des indicateurs de crédibilité Emoji ! Désormais open source sur Figma Community et GitHub .

Concevoir des indicateurs de crédibilité Emoji

Passons maintenant au processus de conception des indicateurs de crédibilité Emoji. Le dossier de conception initial de David et de notre équipe éditoriale comprenait 22 indicateurs de crédibilité Emoji (lecture connexe, Chaque indicateur de crédibilité Emoji sur HackerNoon expliqué ) divisés en deux catégories : contexte/avertissements et types de contenu. En plus de leur description, chaque indicateur de crédibilité s'est vu attribuer un emoji pour l'inspiration du design.

À partir de maintenant, c'était à nous (Me & Kien ) de laisser libre cours à notre imagination et de donner vie à ces indicateurs emoji. Suivant le langage de conception de HackerNoon, nous avons choisi le style Pixel Art. Après avoir exploré plusieurs options de tailles de grille, nous avons opté pour une grille de 24 pixels pour la pixellisation car elle conservait le niveau de détail souhaité. En ce qui concerne le logiciel de choix, j'étais un peu parti pris pour Adobe Illustrator car nous disposons de nombreuses options en matière d'exportation vers différents types de fichiers + ma familiarité avec l'outil de grille ( Adobe Photoshop , Aseprite et Corel Draw sont quelques bons alternatives).

Notre processus de conception de pixel art comprend 5 étapes, commençant par les formes de base, dessinant les détails, créant de la profondeur, ajoutant des traits, puis fusionnant les formes et exportant vers différents types de fichiers. Examinons plus en profondeur ces étapes en prenant par exemple l'indicateur de crédibilité des emoji Comédie/Satire.

Commencer par les formes de base

Chaque fois que nous réalisons des conceptions Pixel-Art/8 bits, nous commençons par une forme de base qui résonne avec l'idée que nous avons en tête. Être une ellipse, dans le cas de l'indicateur emoji Comédie/Satire (inspiré de l'emoji « 😂 »).

Détails du dessin

Ensuite, nous ajoutons plus de détails à la forme que nous venons de dessiner (comme les traits du visage dans ce cas).

Créer de la profondeur : reflets et ombres

Pour le rendre plus réaliste et moins plat, nous ajoutons des reflets et des ombres au visage. Dans ce cas, la source de lumière a été supposée être située à l'avant et au centre, ce qui fait que les ombres se déplacent vers les bords et les hautes lumières vers le centre.

Ajout d'un trait

Pour le rendre plus défini, nous avons ajouté un trait pour conclure.

Fusionner des formes et exporter

Pour les rendre plus utilisables, nous avons fusionné les formes et les avons exportées au format PNG et SVG.

Ensuite, nous avons répété tout ce processus 21 fois de plus et nous sommes retrouvés avec les indicateurs de crédibilité Emoji que nous avons sur HackerNoon aujourd'hui.

Le produit final : un pack d'Emojis pixélisés open source

En conclusion, les indicateurs de crédibilité Emoji constituent une nouvelle étape vers l’amélioration de la communication en ligne entre nos lecteurs et écrivains. Ces émojis pixélisés servent non seulement d'indicateurs de crédibilité ajoutant du contexte au contenu, mais ont également eu un impact sur la confiance et l'engagement des utilisateurs envers le contenu. Ils servent d’exemple de la façon dont une conception réfléchie peut transmettre des concepts complexes d’une manière simple mais intuitive.

Rejoignez-nous dans cette quête de contexte émoticône et essayez les indicateurs de crédibilité Emoji de HackerNoon.

Restez créatif, restez emblématique.