Monoline Emojis for Microsoft

Role/Contributions: Lead Designer
Tools & Technology: Adobe Illustrator, Adobe Photoshop
Date (Year): 2015

While contracting with Microsoft OSG, I was tasked with leading the design and crafting design guidance for Microsoft’s proposed brand-alignment of emoji for Microsoft platforms. 

This would involve updating designs for almost 1,400 individual emoji (consistent with Unicode 9.0), reaching a potential audience of up to 2 billion smartphone users daily and accounting for more than 50 million Windows Phone users, (plus additional devices relying on the Windows platform).

Scheduling and resources were both top concerns. The guidance and tools employed in the process were required to best facilitate the needs of a small team producing a large volume of multiple iterations on an accelerated schedule. With those limitations in mind, the catalog was also intended to reflect the fun, casual nature of emojis, while emulating the client’s universal brand. 


 
 

BEST OF BOTH WORLDS

Combining the Microsoft monoline design philosophy with the existing family of Microsoft-specific emoji involved bridging a significant visual gap. The clean, formal style of Microsoft monoline icons did not naturally invoke the fun, flippant, and casual spirit of Microsoft's branded emoji.

My background as a cartoonist certainly helped in this part of the process; finding the living, representational figure in a collection of simple, geometric shapes is the primary discipline of cartoon art.

HALF MEASURES

Designed at a pixel scale of 32x32, the collection translates easily to the most common stage for emoji use – 16x16 (or, really, 15x15, allowing for 15px font-size on most handheld devices) – without losing significant detail. The full size emoji are designed using 1px and 2px widths for all lines, which renders the finer details at ½px on a handheld display. This doesn’t hinder the readability of the symbol, but increases its visual resonance.

At scales exceeding 32x32, the line variation keeps the values between detail and outline consistent. This includes large-scale reproduction (e.g. signage, apparel, etc).

 


 
 
 

BITS AND PIECES

To facilitate the consistency of emoji across the board, the elemental building blocks of the emoji catalog were broken out into component pieces. The highly accessible toolbox of shapes, lines and weights meant that even the most complicated design could be quickly built, edited and refined without having to reinvent the wheel on every occasion.

ROUNDED EDGES

At the smallest possible scale, the rounded terminals which cap the open lines do not necessarily register with the user. However, at larger scales, the rounded caps ensure that the pleasing shapes of the individual emoji are retained, no matter the application.


 
 
 
 

MORE THAN WORDS

Emoji have become a phenomenon, and are embraced as more than mere communication by their audience. While more than 45 billion messages are sent with emoji every day, the more popular glyphs also find a second life as merchandise – apparel, arts and crafts, lifestyle accessories, and more

The monoline style emoji were designed to be attractive and entertaining at a multitude of scales, and to serve as a design element independent of media.

 


 
 

COLOR SAFE

Accounting for light, dark and custom backgrounds on chat windows, the default “black” value for the emoji catalog is substituted for a dark grey (R:34 G:34 B:34). On white and light-colored backgrounds, the distinction between black and near-black isn’t noticeable but, on black and dark-colored backgrounds, the near-black pops as a distinct color.

A RAINBOW OF DONUTS

Unicode 9.0 allows for distinctive palettes on individual emojis. While this is primarily used for skin tones, this assortment of wonderful donuts makes a powerful argument for the wider implementation of the customization, wouldn’t you say?

Mmm, multi-chromatic donuts.

 


 
 

Home > UX Design / General Design > Monoline emoji for Microsoft

Age Verification and Date tool (Proof of Concept)

Age Verification and Date tool (Proof of Concept)

The Birds of Shakespeare

The Birds of Shakespeare

Work in progress

Work in progress