The Trinity Icons - The Backstory

Apps, Pulse, and Favourites - these are the three major areas of Magnolia 5. Ever wondered about the backstory of the three icons that stand for these key realms? This post will shed some light on the design process and the thoughts that went into our new icons.

The trinity icons that head and structure the Magnolia 5 UI were designed by atelier MUY in Zurich. While the icons of Magnolia 4.5 were drawn from a standard, limited set of icons, they were custom-made for Magnolia this time. Before starting the design, Michael Dier, Urs Scheiwiller und Yvi Mahoney researched other icons and content management systems. Here is a glimpse into atelier MUY's visual research:

After much sketching and drafting, the trinity icons were born. What may surprise you, though, is that not all icons are self-explanatory at first sight. Urs from atelier MUY thinks that this makes perfect sense: "People often need time to get used to icons and learn what they mean. Think of the pictogram that signifies that there's a toilet. At some point, everyone just knew that the little guy stands for the men's restrooms. It's similar with the Magnolia 5 trinity icons - it will take you some time to get used to them".

First, there's the Apps icon, similar to the inner part of a "real-life" button that you find on shirts and sleeves. The center reaches out into the corner and connects four dots. This is the essential experience with Magnolia 5, too: apps allow you to focus on specific tasks (the dots) and combined, they solve the bigger tasks on your list (the center). You return to the Apps screen to pick an app or to switch between them. "The design of the Apps icon was the most difficult one", says Urs. atelier MUY combined the other two icons with drafts for the Apps icon until the desired trinity was achieved. "We had about 40 drafts for the apps icon and put them all next to the other two to find out what fits the concept best".

The second item stands for Pulse. Its dynamic structure signifies the constant movement that also characterises the functionality of Pulse. There is a constant stream of messages and alerts, filtered and sorted for the user in Pulse. "This was the icon that we designed first", Urs says. "There wasn't a lot of controversy about this one, it came about quite naturally".

This can't be said about the asterisk-like symbol that signifies Favorites. "First, we thought we'd go for something like a traditional star icon for Favorites", explains Urs. "However, we realised that this wouldn't fit entirely. The star figure was too hard on the others, the harmony was disrupted". The icon that made it into the final design suits the balance much better.

To finish off, we'd like to include a quote by graphic designer Kyle Tezak that atelier MUY always had in the back of their mind when designing the new icons. "Trying to capture the essence of an object or idea with only a few lines and at the same time maintaining its elegance is pretty much design in a nutshell. That's what's so great about icons, they're tiny poems". We hope that you enjoy the poetry of our new trinity icons. At the conference, we will reveal the magic that happens when you click on them. Sign up for it now!