Co.Design

How Frog Created the Mac Icons for Microsoft Office 2011

A product-design firm is an odd choice for such a high-profile graphics job. But Microsoft wanted the firm's exhaustive research process.

On Apple computers, there's almost no design detail quite as wide-reaching and ubiquitous as the iconography for Microsoft Office: 75% of all Mac owners use the software. Messing around with those icons isn't something Microsoft takes lightly. So for the new icons in Office 2011, available today, they didn't tap a graphic-design firm. Instead, they use the industrial-design powerhouse Frog, best-known for creating some of the earliest Mac hardware.

"For Mac users, it really is a part of everyday life. It's rare that you ever get to work with something as widespread," says Sean Rhodes, a creative director at Frog. And here's what they came up with:

These icons won out over upwards of 30 concepts, ranging from illustrative dioramas to abstractions, created by Frog offices around the world. All of these entered a three-week "shoot-out," of which three concepts emerged: The winning one above, "mosaic," and "evolution," is an incremental change to the existing iconography:

Eventually, the ribbons won for several reasons. At a most basic level, the ribbons represent the biggest new feature of Office 2011: The software can now sense what you're doing within the different programs, and bring up a context-sensitive ribbon of buttons, so that the proper tools are always a single click away. The huge number of options in Office is essentially hidden, but continually updated according to what you do. Thus, the ribbon might chain in Excel if you're editing a ream of data, a chart, or a pivot table.

On a more aesthetic level, Frog says that the ribbon reflects the ideal user they were going after. "The users are entrepreneurs, whether they're students or small business owners. And Office is how the ideas that people have get captured and presented," says Rhodes. Thus, the ribbon design is meant to seem like an actual artifact. "We were thinking about it being something that people could actually lay their hands on, like a piece of material that was bent by user."

The specific letterforms and proportions are based on the proportions you find in classical art -- for example, the 3:1 ratio you often find in ancient compositions of circles. The textures and colors, meanwhile, are borrowed from the program itself.

Microsoft, for its part, says they choose Frog precisely for their sweeping process and organizational expertise. "We interviewed lots of graphic design agencies for the job," says Tai Bonfiglio, Microsoft's marketing manager for Mac products. "But brand can't be designed in a bubble. There's so many people involved in the process, and Frog understood how all that would come together. Other firms just didn't have that same approach."

Add New Comment

2 Comments

  • Karen Newcombe

    Uh Oh - the last time the Office suite "sensed what you're doing within the different programs" we got a dancing paper clip "assistant" that popped up and offered to "help", thereby driving everyone utterly mad within three minutes. So it sounds like the paper clip has become a "context sensitive ribbon of buttons"? That's just great...no, really... I'm sure it's just wonderful...