Trends can be born so silently and subtly that we seldom notice them.
And when you survey hundreds of websites, you often see patterns that you would otherwise miss. One such pattern is the frequent use of tags and ribbons.
These small flourishes have become increasingly popular. This article addresses the two elements because they are used together so frequently.
While ribbons are self-explanatory, by tags I mean the faux labels that hang down from the top of the screen, like a tag on a t-shirt.
The websites that use these elements are truly outstanding in quality. Putting together this gorgeous showcase turned out to be remarkably easy. Few trends are like this: one usually has to wade through many poor examples to find the tasty ones.
Why use these ribbons and tags?
Tags are useful because they draw the user’s attention by creating the illusion of depth. They push their content out to the user. Tags are also often styled with punch, whether via 3-D effects or bold contrasting colors. These factors make the tag a prime location for critical information: logos, navigation, calls to action. We see this in the showcase below. Of course, as always, assess your needs before implementing this element on your own website. The ribbon shares the same qualities, which is indeed the reason we find it and the tag together so often: it draws attention and is a great place for important information. The shape of the ribbon sets it apart from the tag, though; the two arrows on its ends seem to point to the content within, subtly directing the user’s attention.A family of styles
Another reason these two elements are often found together on websites is that they are both digital representations of fabric. No surprise then that many of the websites below have other fabric-related elements, including subtle stitching, textures and other organic elements.Ribbons
Letter Learner
The ribbon nicely frames the name Letter Learner here. Also, the page is laid out as a single column; the ribboned title encourages the user to start their journey at the top and flow down from there.Ribot
Ribot’s ribbon is fairly subtle. The flourish livens up the page, while summing up the company’s focus in a two-word tagline. A perfect way to set expectations, because the company name does not tell us what it does.Alex Pierce
With the text being so enormous on the home page of Alex Pierce’s portfolio, it would take a rather bold element to balance it out. In this case, the ribbon does a good job of setting off the header. I also love how the folded layer in the middle of the ribbon adds focus to the designer’s name.Rockaholic!
On the rather unusual Rockaholic!, the ribbon directs the user’s attention down, playing nicely into the vertical scroll of the website and helping the user dig into the content.Paris Jones
The delicious red of the ribbon makes the band name Paris Jones pop out here. Even though the text treatment is rather subtle, the bold pattern ensures that you notice it.Blog en Bois
On Blog en Bois, the arrow effect of the ribbon is especially powerful, largely due to the contrasting dark behind the yellow. I find myself drawn back to the logo over and over again. It’s certainly a powerful way to engrain the brand in the user’s mind.HTML5 Boilerplate
The popular website HTML5 Boilerplate uses ribbons to draw our attention to the most important action items on the page. I love that the ribbons do their job without having to say “Download here.” The combination of ribbons and labels tells us this is where to download the resources.Cantilever Fish & Chips
The purpose of the ribbon is not so clear on Cantilever Fish & Chips. The detail about being “Open 7 days a week” would seem relatively minor, but presumably it’s an important distinction for this restaurant.Wells Riley
Wells Riley is a perfect example of ribbons in service of aesthetics. The ribbons look great here and become the focus of the page.Dhiraj Singh Karki
I always love designs that depart from convention. The portfolio of UI designer Dhiraj Singh Karki is just such a website. Here, the ribbon is used rather cleverly and does not pack nearly the same visual punch as on other websites. It blends right into the page and yet has enough style to keep the design from looking too simple.Chipmunk
Chipmunk is a great example of how well a ribbon can work with organic elements. The ribbon around the primary navigation fits in perfectly with the rich illustrations below. It also keeps the navigation from getting lost among the powerful artwork.Ryan M. Stryker
Once again we see the power of the ribbon to focus attention. Its central location and bold contrast ensure that you don’t miss Ryan M. Stryker’s name.Tags
Ennea
Given that Ennea is a clothing brand, it’s no surprise that the tag here contains the logo and brand name. Sometimes a straightforward approach works best.Philip Meissner Design
The tag contains the main navigation on Philip Meissner Design. Usually I would be put off by this unusual configuration of links, but the arrangement and colors here ensure that the links are super-easy to find.Tinkering Monkey
What could be more important on an e-commerce website then guiding users to check out? Tinkering Monkey has a nice little bold tag to help users complete their purchase.Parkbud
With all of the smartphone applications out there, the good ones need to communicate their key differentiators. Parkbud is free, and the bold red tag makes sure you know it. The tag is nicely tucked out of the way but always visible from the corner of your eye, reminding you that this tasty app is free.Lense
Lense is a perfect example of tags combined with fabric textures. Notice first the textured denim background; also, the scalloped border under the main navigation feels very much textile-oriented.Coreymade
While a small detail, I really love the way the script font makes the tag on Coreymade feel more like a tag on a shirt than a normal website logo. And the pseudo-3D effect makes the tag really pop for the viewer.Netastica
The tag on Netastica is mainly there to look pretty, although it still does contain important information and links visitors to the home page.Ryan Havoc Taylor
The tag is in such a visible location on Ryan Havoc Taylor’s website that it does not need a lot of contrast to stand out. It works well with the flow of the website and performs its role effortlessly.Ribbons and tags
In the final part of this showcase, we’ll look at websites that make use of both ribbons and tags.ClearSpan Media
Ribbons and tags go very nicely together, as shown by ClearSpan Media. Here you’ll also find fabrics with patterns, stitches and subtle color variations. The two tags up top and the ribbon down below function as a kind of circle of interest for the user.Krichevtsova Alexandra
While Krichevtsova Alexandra’s website is rather barebones in content, the tag and ribbon add extra life to key elements. You could enjoy this website without even knowing what the person does.Wes Bos
Most of the websites in this collection have rather large ribbons. Not so with Wes Bos. His are much smaller, a good reminder that they need not dominate the design to perform their function.Conclusion
Given the quality of the websites in this collection, none of these designers set out to build something “trendy.” Rather, they were faced with a set of needs, and from those needs emerged an effective visual device for focusing attention, communicating critical information and highlighting important actions. If you would like some nice CSS-based ribbons for your own website, the web-based 3-D Ribbon Generator is a handy tool for the job.Patrick McNeil
Patrick McNeil is a designer, developer and writer; but above all things he is a passionate educator. He is a Professor of Graphic Design at the University of Missouri St. Louis where he focuses on teaching UX Design methods and front end development techniques. Patrick is also the author of the bestselling book series The Web Designer's Idea Book and the curator of DesignMeltdown.com. For more information about Patrick visit his personal site, pmcneil.com, or follow him on Twitter @designmeltdown.
Read Next
20 Best New Websites, April 2024
Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…
Exciting New Tools for Designers, April 2024
Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…
14 Top UX Tools for Designers in 2024
User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…
By Simon Sterne
What Negative Effects Does a Bad Website Design Have On My Business?
Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…
10+ Best Resources & Tools for Web Designers (2024 update)
Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…
By WDD Staff
3 Essential Design Trends, April 2024
Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…
By Simon Sterne
15 Best New Fonts, March 2024
Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…
By Ben Moss
LimeWire Developer APIs Herald a New Era of AI Integration
Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…
By WDD Staff
20 Best New Websites, March 2024
Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…
Exciting New Tools for Designers, March 2024
The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…
Web Tech Trends to Watch in 2024 and Beyond
It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…
By Louise North