Web design

Badges and ribbons - refreshing elements in web design

We have already presented the button as a useful element for the call to action. However, what are actually the "badges" that are used? Moreover, what are "ribbons"? The joy of web designers is enormous when it comes to these web design elements - they are just so versatile. We want to introduce to you a couple of nice ideas on the use of badges and ribbons in web design.

The badge in use

In contrast to the button, the badge is usually more than a call to action. It can serve as a central element for the identity of a website and emerge as a reminder feature on every sub-site. The logo of the company is included in this case in the badge. In part, it is used directly as the logo of the company. Often, the badge is used for its importance as a home button. Of course, there are more possibilities for use.

Bamb Bamb is directly placed at the centre of the header.
Source: http://bamb-bamb.co.uk/services.html

The badge of the printing Agency, "Bamb Bamb" is directly placed at the centre of the header. It also serves as the home button. Due to its size and central position in the design, it stands out in particular and remains in the memory.

The applications for the ribbon

The ribbon – to the Germans, the "loop" - is used more often as a decorative element. The view of the user is also drawn to the corresponding component. However, the ribbon is not an equivalent central element to the badge or button. The loop or the ribbon can give more attention to a particular element of the website.

An example of the application of ribbons is the integration of social media buttons in the web design. They can, by the appropriate placement of a ribbon stylish and consistently be associated with the web design of the website.

The web designer "Olive  & Twist" use two ribbons on their website.
Source: http://www.oliveandtwist.com/

The web designer "Olive & Twist" use two ribbons on their website. The home button, which also bears the name of the studio, was designed as a ribbon. Care was taken that this also reflects the leather texture of the header in the ribbon. The texture of the sidebar differs from the header. However, the same colour has been chosen as the home button. At first glance, you might think that the sidebar is not a ribbon. However, the end of the loop can be found in the footer of the page again - a tasteful, final design element.


The combination of both elements

Here the badge has  been overlaid with the ribbon to present the message more clearly and to decorate  it.
Source: http://www.webiqquiz.com/

Often, a ribbon is also connected with a badge. In contrast to the button, more creative freedoms are open here. Thus, the badge is also more complex to design than the button.

The website “The Web IQ Quiz” is a beautiful example of the combination of the two elements. Here the badge has been overlaid with the ribbon to present the message more clearly and to decorate it.

The classic use of ribbons

The app "Parkbud" demonstrates  the classic: the "new" Ribbon.
Source: http://www.parkbud.com/

There are also quite classical possibilities of using ribbons. One is the traditional "new" loop or similar status-loops. With this, a certain state of the product is presented. These are of course always positive characteristics.

The app "Parkbud" demonstrates the classic: the "new" Ribbon. The element is not interactive, but it immediately appears like this to the visitor. He/she knows immediately that the product is new. The app through the loop be taken into consciousness in a positive manner - a marketing ploy, which was taken over into Web Design.

The diversity of the ribbon

The complete web design of Evanto was built around the ribbons.
Source: http://wp1000.envato.com/

To round off the article, we would like to introduce you to a page that includes the ribbon as the main element in their web design. The complete page is permeated with loops. They serve as a banner for the header, as sub-headings, as links and as a bearer of messages. The complete web design was built around the ribbons. We show you a small part of the cited website.

Here just the top part of the website is to be seen. In this section, there are three ribbons. The top banner in the shape of a loop is a link directly to the reputation-giving 1000 WP themes. The lower both lead to the featured websites. In the further course of the website, you will find even more loops. All were explicitly adapted to the web page.


The badge and the ribbon can be applied in a multi-faceted way. They offer good opportunities in many ways to refresh the web design of a page. In particular, as the central design element, the badge offers exactly that. The ribbons are rather ornaments, to focus attention on a particular item or a message.

Care should always be taken to ensure that the elements used for the remaining web design match and they are not be inserted at random. Moreover with the sensitivity for matching, a web page with ribbons and badges can win a brand new charm.