Emojifying Context: Designing HackerNoon's Emoji Credibility Indicatorsby@rex12543
272 reads

Emojifying Context: Designing HackerNoon's Emoji Credibility Indicators

by Devansh ChaudharyApril 17th, 2024
Read on Terminal Reader
Read this story w/o Javascript

Too Long; Didn't Read

HackerNoon's Emoji Credibility Indicators are all about transparency and trust. Now open-sourced, these emojis help you understand the context of stories and build trust in what you're reading. Be amongst the first to try these out on Figma Community and GitHub!
featured image - Emojifying Context: Designing HackerNoon's Emoji Credibility Indicators
Devansh Chaudhary HackerNoon profile picture

At HackerNoon, we believe transparency with the reader is the key to building trust between writer and reader. To give readers as much transparency as possible, we wanted to create quick and easy ways to tell the reader information they might want to know about a story before reading it.

This could be something as simple as telling the reader if the story is a news piece or an opinion piece. On the other hand, there are more complicated things we might want to communicate to the reader, such as whether or not the writer has a vested interest in the companies they’re writing about, or if they used AI to write the piece.

To accomplish these goals, we created Emoji Credibility Indicators! Now open-sourced on Figma Community & GitHub.

Learn more about Emoji Credibility Indicators here.

Designing Emoji Credibility Indicators

Now, let’s dive into the process of designing Emoji Credibility Indicators. The initial design brief by David and our Editorial Team included 22 Emoji Credibility Indicators (related read, Every Emoji Credibility Indicator on HackerNoon Explained) divided into two categories: context/disclaimers and content types. In addition to their description, each credibility indicator was assigned an emoji for design inspiration.

From here on in, it was on us (Me & Kien) to run wild with our imagination and bring these emoji indicators to life. Following HackerNoon’s design language, we chose the Pixel Art Style. After exploring several options for grid sizes, we opted for a 24px grid for pixelation since it retained the desired level of detail. As for the software of choice, I was a bit biased going for Adobe Illustrator since we get plenty of options when it comes to exporting to different file types + my familiarity with the grid tool (Adobe Photoshop, Aseprite, and Corel Draw are some good alternatives).

Our pixel art design process consists of 5 steps, starting from basic shapes, drawing details, creating depth, adding strokes, and then merging shapes & exporting to different file types. Let’s take a deeper dive into these steps taking the Comedy/Satire emoji credibility indicator for example.

Starting with Basic Shapes

Whenever we do Pixel-Art/8-bit Designs, we start with a basic shape that resonates with the idea we have in mind. Being an ellipse, in the case of the Comedy/Satire emoji indicator (which was inspired by the ‘😂’ emoji).

Started by drawing an ellipse on a 24 px grid

Drawing Details

Then we head on to adding more details to the shape we just drew (like facial features in this case).

Drew details such as facial features and those tears

Creating Depth: Highlights & Shadows

To make it more realistic and less flat, we add highlights and shadows to the face. In this case, the light source was assumed to be up front and center which makes the shadows move to the edges and the highlights to the center.

Pro Tip: Always try to use three shades of a color. One for the base, the lighter one for highlights, and the darker one for shadows.

Added depth to the emoji, using highlights and shadows.

Adding Stroke

To make it more defined, we added a stroke to wrap things up.

Finished up by adding an outline or stroke.

Merging Shapes and Exporting

To make them more usable, we merged the shapes and exported them as both PNGs and SVGs.

Merged those shapes and viola! we're all set.

Then, we repeated this whole process 21 more times and ended up with the Emoji Credibility Indicators we have on HackerNoon today.

The Final Product: An Open Sourced Pixelated Emoji Pack

Screenshot from the Figma Community file for Emoji Credibility Indicators

In conclusion, the Emoji Credibility Indicators are yet another step towards enhancing online communication between our readers and writers. These pixelated emojis not only serve as credibility indicators adding context to content but have impacted users’ trust & engagement with content. They serve as an example of how thoughtful design can convey complex concepts in a simple yet intuitive manner.

Join us on this quest of emojifying context, and try out The Emoji Credibility Indicators by HackerNoon.

Now available on Figma Community and GitHub

Stay Creative, Stay Iconic.