Over the last month I’ve been following a new(ish) trend in web design that I call “the ribbon”. I’ll show you some real-world examples shortly, but first here’s a mockup illustrating the basic idea.
Bunsen's website, using straightforward boxes
Here’s the homepage of Bunsen’s. The designer has separated the list of links (“log in”, “sign up”, etc) from the main content of the page by putting them in a little box. This is fairly standard practise, and works well enough.
But now let’s imagine Bunsen’s wants to refresh their site design. “Can we make it a bit more 2010”, they ask the designer, “without really changing anything”? It’s at this point that the designer might reach for the ribbon and produce something like this:
The ribbon to the rescue
It’s nothing more than a positioning adjustment, drop shadow, and a little triangle, but it makes the “links” box look like it’s been draped over the larger one. The design has a bit more depth to it even though the change is purely at the visual layer (as opposed to structural or functional).
Now that we’ve seen “the ribbon” in its basic form, let’s look at some screenshots of real “ribbons” found in the wild.
The first is from online activism site Avaaz.org. The “ribbon” is used for the box’s title, “Sign the petition”, and probably helps it compete for the user’s attention with the main image to its left:
And here’s a close-up:
The next one is from Vodafone, and was used on their “12 Days of Smiles” campaign site in the run-up to Christmas. You might remember this campaign for its ill-fated #mademesmile Twitter stunt. After all it generated more press than this ribbon did:
Vodafone's festive campaign site
A decidedly festive ribbon
What’s interesting about this ribbon is that it definitely has a seasonal dimension. The cut-out triangle at the edge intentionally references festive ribbons (wrapped-up presents, mistletoe, etc) to make the campaign site more Christmassy. I guess that working with Vodafone, you can’t evoke a yuletide atmosphere the easy way by using lots of red: it’s their main colour after all. So “the ribbon” is a handy gimmick here.
This ribbon example from Western Union is also intended to have festive connotations, I think, but it’s not as explicit. You’ll notice that that isn’t from a website but from a poster campaign (yes, this is my attempt at being “cross-media”):
Western Union poster near Kensington Olympia
The final two examples aren’t festive, but instead show the ribbon being used by companies that want to appeal to an early-adopter, urban, techie kind of audience. If “the ribbon” is to the early 2010s what the curved-border gradient button was to the “Web 2.0” mid-2000s, these sites are at least partly to blame.
The first is Foursquare, who have used “the ribbon” pretty sparingly. It makes an arrow leap out of the screen slightly, but it’s not very prominent:
The Foursquare "arrow" ribbon
The next example is far less subtle, however, and is the most extreme use of “the ribbon” that I’ve found so far.
Here’s the website of Notion Ink, the company behind the forthcoming Android-based Adam tablet. They’ve had a lot of attention over the last year and its old Flash-based site was rightly criticised for looking like a bit of a relic. So they launched this new site shortly before making their product available for pre-order:
Click the image to see in full size
A fairly normal “ribbon” crosses the header of the page, acting as a backdrop for the primary navigation links, but after that it goes out of control, bouncing around the page’s background like a 3D game of “Snake”. In fact the ribbon pretty much is the design – apart from the slightly discordant bird, there is no graphical (e.g. not text or video) element on this page that is not part of the ribbon.
Here’s another page from the Notion Ink site that shows the “ribbon” off to maximum effect:
This ribbon seems to extend very far into the space of the screen, emerging from the distance to jut in front of the Adam tablet and the main text box. The page title (“The Philosophy”) is the only element that remains in front of the ribbon. This is the most extreme use of the ribbon I’ve found so far.
Is the ribbon a good or bad thing? I can see why some designers like it – it helps situate screen elements in a quasi-3D space, contributing to “user illusions” of spatiality that computer interface designers have been relying on for decades. But it could also become a modish gimmick, something designers lazily reach for when asked for “something that looks a bit more Web 3.0”. Maybe there’ll be a ribbon backlash. Or maybe it’ll become a strictly seasonal piece of design frippery, used only for festive campaigns as in the Vodafone example.
What do you think about the ribbon? Is it something you’ve noticed yourself? And if you know of any more examples of it, let me know in the comments.