Emojifying Context: Designing HackerNoon's Emoji Credibility Indicators

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).

Drawing Details

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

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.

Adding Stroke

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

Merging Shapes and Exporting

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

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

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.