What an incredible…

…Icon set you’ve discovered!

So just like last week, I wanted to break down another icon set. Once again, Facebook (and Lucasfilm, LTD.) provided a fantastic set to analyze. So I am just going to dive right in!

The Icon Set

This icon set are part of Facebook Messenger’s sticker collection. They are fun and more complex emojis, with some dynamic and some static collections. Over the past four years, when a major blockbuster movie hits theater, the marketing campaigns will sometimes create a sticker set to help promote their film. In this case, Lucasfilm, LTD and Facebook created a set for Star Wars; The Last Jedi.

The Common Elements

When we look at this set, the first major element that the twenty stickers are tied together by, is that each of the characters are being framed by a circle filled with a gradient. To create variation through out the set, there are a few different sized circles in the set.

One of the other rules that have been applied is that if the character is as tall as a normal human adult, or taller, then they are cropped from about the waist to mid-chest. The smaller characters, with the exception of R2-D2, are fully rendered.

The Sith

Next, there is a common background depending upon  if the character aligns themselves with the Dark Side. The background is a dark red gradient. For those that are either Light Side, or neutral in their political standing, we see that the set employs a lot of blues and purples, with a couple of yellows to help add some contrast.

Personality

One of the major traits of each of these stickers is that if the character’s face is visible, a particular style was implemented. The eyes are almost all identical, with a line being drawn through the bridge of the nose.

Exclamations and Questions

Like I said earlier, these stickers are meant to be a very complex emoji set, so for some emotions, a little punctuation was used to get the emotion across. Where it was used, there were placed in the exact same spot, and break past the circle.

Breaking out

To help create an interesting icon set, it is important to look at each icon’s silhouetted shape. If the shape is plain, you can end up with a very boring icon. To add some visual interest, each of the stickers breaks outside of that basic circle shape on average of 2-3 times. If you look at the draw-over to the right, I circled where each icon broke past the circle.

Some of my own critiques

After analyzing this amazing icon set, I noticed a few things that could be improved on. For example, when I did the “breaking out” analysis, I noticed that there were a few icons that had points where they created tangents with the circle, where they almost escape its borders, but felt content to just touch it (i.e.: C-3PO’s left arm). As for the color of the circles, when it came to the Dark side, I felt it was very well executed, where as for the others, it left a bit to be desired. The missed opportunity I think that they could have used was that the Light side could have all been shades and hues of blue, while the Neutral characters could have been purple. The two yellow stickers feels out of place with the rest of the set.

Hope you enjoyed this post! I will be posting one more time before the end of the week with some of my own icons that I have been working on for the past two weeks!

How do you React?

Let’s find out!

Hello everyone! Sorry it has been so long since my last post- a semester ended, I went to a wedding out of state, work schedule changed, and now a new one has begun. To ease back into the swing of things, I thought it would be a perfect time to once again do a Reverse Engineer post about some professional work, complete with my own draw-overs! Today, I will be analyzing the Facebook Reaction emojis.

About the Reaction Emojis

Facebook Reaction Emojis

Facebook unrolled these set of emojis in February 2016, in response to user request. Up until that point, the only way to interact with any post was to either “Like” by hitting a thumbs-up icon, or to create a thread on the post with a comment. Many users were wanting more options. What if users wanted to react, and not comment, to something sad? Clearly the then thumbs-up icon would be inappropriate for the post, and presented a problem for users. Facebook met this challenge and developed six additional emotion icons for users to use to react to posts. The user would either touch and hold the “Like” button, or click and hover their mouse over it, and all seven emojis would pop up, each with its own little animation and one word description, and then the user would select the emoji that they wanted for the post. After the selection, the emoji would no longer be animated and would sit where the like button was, along with the accompanying one word.

Now to break it down

The Reaction Emojis are a set of icons that follow specific rules that help to identify them as being part of the same system. They are pretty basic rules, but having followed them, the emojis are of professional quality.

Shape

The emojis are circles.

Each of the emoji icons are bound within the same shape, outlined in red in the draw-over. Regardless of whether that icon was an silhouetted shape or a face, each of the seven emojis are contained within the same sized  circle.

The Silhouettes

The “Like” and “Love” Emojis

There are two distinct icons in this set; the “Like” and “Love” emojis. These two icons are bound in a same sized circle, and then they are silhouetted on a solid background color. The icon themselves are also relatively the same size within the circle and are centered.

The Face Emojis

Face Reaction Emojis

The remaining five icons are all faces that display an emotion. Once again, each emotion is contained within the same sized circle. The sad emoji is the only exception. It has an added element (the tear drop) that creates a variation in the established pattern, but if it were removed, the emotion would still be contained within the circle and be still easily recognized as part of the same system.

Color Pallete

Color Swatches for the Emoji System

Across the seven emojis, there is a consistent color pallete that helps to tie all of the icons together. In the draw over, I created swatches of the four colors that Facebook implemented in the system. As can be seen, these colors are implemented across all of the emojis.

Some Final Thoughts

Something really interesting to note is the “Like” icon. The  original “Like” icon did not change with the update, and at first glance, the new reaction emojis can feel slightly out of place with it. But because of the icon set’s rules that we just outlined, we can see that they all actually fit together. Facebook created circular shaped icons, created another single silhouetted icon to match the design with the “Love” emoji, and the tear drop on the “Sad” emoji is the exact same blue. Each of the icons are bound together as part of the same system. Well done Facebook!