Build Design Systems With Penpot Components
Jul 21, 2:15 AM
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.
smashingmagazine.com
medium bookmark / Raindrop.io |
“It’s a communication issue,” says Rachel Been, Creative Director on Google’s Material Design. “If I sent my friend the dancing woman on iOS, and I’m on an Android device and I see a blob, there’s a miscommunication.”
And now, thanks be to Google, that miscommunication is being fixed.
“We’re doing a full redesign of the emoji set,” says Gus Fonts, Product Manager, Android. “We took a look at many things, but mostly the thing that’s most striking is, perhaps, that yes, the candy dots or blobs, are now substituted with a set of squishy circles–for a lot of good reasons.”
–– ADVERTISEMENT ––
The full update, which will roll out with Android O later this year, represents a year and a half of work within Google. It isn’t just a design overhaul of the (melting, yellow) elephant (dung) in the room, though. It also addresses deeper problems within Google’s emoji set: As Google has made its emoji people more realistic, the company had to completely rethink how–and why–it represents people the way it does.
Old, left. New, right. Note the stroke and gradient. And the cooler haircut. [Image: Google]
What Happens When Emoji Become People
It’s a problem born from progress. Google lobbied for the introduction of female professions last year with Android N. People loved them when they hit, but these new emoji were highly detailed figures, complete with torsos and props. On an aesthetic level, these more detailed emoji only clashed with Google’s existing, dumpy, gum drop emoji. “As we looked at this, for N, converting the blobby people to actual people, to moving for racial selection, we started asking, ‘do we need a stylistic overhaul to bring in one cohesive piece?’” recalls Been.
As part of its design overhaul, Google rounded out its old, blobby expressions into circular faces, giving them continuity with the rest of the emoji universe. Other unifying graphic guidelines match the old guard emoji with the new inside Google’s emoji language. For instance, dark strokes outline shapes, while subtle gradients simulate lighting to create a subtle dimensionality that might seem inherently unhip just a few years ago during the era of flat design. The yellow “simple smile” emoji and the female scientist inherently match in a way that they formerly did not.
To develop the more cohesive look, Google didn’t just create a bunch of new emoji. It created a new emoji logic. Unicode adds as many as 100 new emoji each year–each of which can have many permutations for gender or skin tone. To create each as a bespoke graphic takes time, but it also has requires the designer to start from scratch for every image. Been wondered if the efficient graphic language Google had developed in Material Design–in which a few fundamental rules ground how everything from app icons to menu bars are designed–might simplify and clarify the production of new emoji. “We used a lot of reusable components. Expressions have a very consistent set of eyes and mouths,” says Been. “We [also] used a grid system, most specifically and prevalent in people and expression emoji, and based it on the Material Design grid system, so there was parity there.
“It allowed us to create these much quicker,” Been continues. “If the expression is really sad, you hit certain grid lines…to hit a sad expression.”
Google’s new women at work. [Image: Google]
Designing Gender Stereotypes Out Of Emoji
The underlying challenge of the project, for Google, was to tackle some of the lingering stereotypes lurking within the emoji themselves. After all, emoji are symbols, meant to be instantly recognizable as a thing or emotion. But it’s precisely this sort of iconographic treatment that makes some people feel misrepresented, or pigeonholed. The design team wanted to address some of these existing cultural stereotypes with its update–most notably when it came to gender.
“I don’t think any of our emoji were culturally insensitive, but the things we tried to do when having conversations about representation [was to ask], ‘since these are global, how do we remove any representation of same gender, and what it means to be a woman in any culture,’” says Been. “We purposely moved away from just putting the girls in pink. We needed for legibility purposes to tell the difference of men and women, but why did she need to be in a stereotypical color? And we put women in pants.”
The team also shied away from jewelry and makeup, scrubbing men and women of those props in acknowledgement of a shift already taking place within emoji culture: The new Unicode standard features three gender-neutral figures, and it’s easy to imagine emoji continuing to move beyond binary representations of gender so that everyone feels more welcome.
“We wanted to make sure the system was ready to expand if we were to release wider representation of gender,” says Fonts. “In the old set, the style we had wasn’t very adaptable.”
The new mind blown emoji. [Image: Google]
Can There Be An Emoji For Everyone?
When I ask about the team’s most passionate arguments over the course of the redesign, they laugh. Something as simple as the tinfoil texture on the burrito emoji led to great debates. And new emoji, like the “mind blown” expression, raised nearly existential questions: What does a blown mind really look like? Is it a nuclear bomb drop? Or something closer to a firecracker? (Yes, these things have to be decided by someone.)
Google’s new burrito emoji–a work of great debate. [Image: Google]However superficial these burrito foils and minds explosion arguments may have been, they always embodied the same high stakes question from the user: Does this image–even if it’s a stupid taco–represent my taco? Does this visual word represent my human experience?
