Inside the Microsoft Emoji Design Studio

Did you know that someone designs the emoji you send to your friends? 😲

Before words, humans communicated through pictures to tell stories. We still do this today with emoji. We use emoji to help add expression and personality to text, but you might be amazed at how much thought and design energy goes into making them.

“Emoji transcends culture,” program manager Judy Safran-Aasen says. “It’s actually becoming its own writing system.” Judy’s team creates the design for each emoji available in Windows. “Our emoji design and creation process juggle many implementation and creative considerations to create emoji that work at a global scale.”

A 🌟 is born

What happens if the emoji you want to use doesn’t exist yet? You can submit a proposal for a new emoji (bubble tea, anyone?) to the Unicode Consortium. The Consortium is a nonprofit made up of tech companies and others that help promote, develop, and maintain consistency of writing systems across all software products. They review and vote on the emoji proposal. If they approve a new emoji, tech companies begin their design work.

It’s up to each company to interpret how an emoji will look in their design style. At Microsoft, our emoji are unique because they’re vector-based font glyphs. The font stacks the glyphs on top of each other to compose the final design. This allows for reuse of the same glyph for different colors like the skin tones. Our emoji font is scalable just like a text font so as you get larger the images will remain crisp and clear.

Still, a crucial part of emoji design is legibility at small sizes. “Because emoji are typically used at small sizes, it can be difficult to include enough detail to make them recognizable at those small sizes.” explains Judy. “For example, many emoji faces have only minor differences between them. In certain instances, the design will need to exaggerate certain features to make them distinct..”

For designer Mike LaJoie, designing emoji ties back to his roots. “I was a skateboard designer 20 years ago. That experience came flooding back when we were figuring out how to produce these complex emoji into a font. Vectors are what we used for skateboard screen printing, and layering vectors together is how we create emoji, too."

Keeping it 💯

When Unicode’s list of approved emoji included a skateboard, Mike knew that he had to get the design right. “Skateboards are near and dear to my heart, because I have so much experience designing them. It allowed me to explore outside of the box — from mild to wild.”

“The sample images from Unicode and others showed the top of the board with the grip tape,” Mike recalls. “Showing the top means you’re looking at a solid black object, especially in our style. I wanted it to have an interesting graphic on the bottom, because when you buy a skateboard, the design on the bottom is an expression of you, not unlike using an emoji.”

“It’s the little details that make all the difference and make it look right. The trucks needed to face the right direction and have proportionately sized wheels,” describes Mike.

As part of the design process, Mike and his team usually create four or five versions of an emoji before narrowing it down to one. In this case, they created around 20. Mike had a few ideas: a plain skateboard, one at a different angle, one referencing a classic 1980s design, and ones with different patterns and colors.

One challenge that emerged during the design phase was figuring out the best shape for an emoji skateboard. Mike drew both a classic “pool” shape and a more modern “street” style design. In the end, the modern design won. “Straight angles work better at small sizes. And it’s the skateboard shape that is more popular these days.”

The design team also had to figure out what designs on the skateboard would work at such a small size. The team considered putting Ninja Cat on the bottom of the skateboard, for example, but it was too small to be legible at the typical emoji size.

“We ended up with a skateboard design that has geometric pattern at the bottom. It’s not too outrageous, and the lines give a sense of depth on the board,” says Mike.

When it came down to either red or blue for the color, the design team looked at the whole emoji set. “You don’t want your emoji set to overuse a particular color and we realized that we needed more blue. If you have too many emoji of the same color, it’s difficult to differentiate them,” Judy says.

The 🌏 roll-out

After the emoji has been reviewed internally and approved, we introduce the emoji in the next Windows release. This involves making sure the new emoji appears in both the touch keyboard and the emoji panel.

For Mike, one of the most important parts of the emoji design process is the sheer scale of the decisions he and his team make. “Designing emoji for an operating system that has billions of users is just mind-blowing,” he says. “It’s incredibly humbling to be able to design anything for that broad of an audience. And to design things that people can express their emotions, or have fun with? I love it. That’s one reason why I keep doing it. Being able to design things that people find useful, hundreds of times a day, for years, is really cool.”

Emoji continue to change how we communicate. Once reserved for informal texts and social media, they’re becoming increasingly common across all parts of our lives. More and more people are using emoji — so it’s a good thing we have designers sweating the small stuff for us.

Running Windows 10? Press the Windows key + period (.) or Windows keys + semicolon (;) to launch the emoji panel on the desktop. Happy World Emoji Day! 🎆🎉🎊

To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.