The so-called “badges” are a web design element that does not have a clear and specific formulation. In some places, the term badge is used for a cumulative design that serves to show that an institution believes in our business, or that we have received some award. Badges, in this form, can also be seen on sites where there is a form of “gamification” of training, or in other words, rewarding students for their progress. We also observe a similar type of badges – serving as a reward – in games, especially mobile games, for example Angry Birds 2.
Angry Birds mobile game achievement badges.
Sample badges.
Badges are also used as rewards on some social networks and forums, such as Facebook and Reddit.
Another form of badge is one that indicates a system state, such as an error message, a “recommended” plan, or the like.
The following are the basic elements for a good and easily understandable “badge” that will be an element of your design.
Detail
Badges could be built on the basis of a value expressed in numbers or so-called basic shapes – circle, square, triangle, pentagon, star, etc.
A circle is one of the most effective types of badges when you want to indicate a change or update, as the number placed inside it will indicate the number of changes in question. We see such round badges with a numerical value of the number of changes every day on our phones.
Color
As you probably know, color is one of the most important elements of design. In this case, these colors could indicate the status that the badge is trying to communicate to us – an error, a warning, or a successfully completed task.
Be consistent in the shapes and colors of the details you use – outlines, shadows, perspective, rounding or lack of rounding of the corners (when the shape is not a circle, obviously), as well as colors.
Position
Badges, unless they are standalone elements, such as when we use them as a reward or a demonstration of trust that someone votes for us, should stand outside the main element to which they refer. Of course, as in the applications we use every day, badges can slightly overlap the main element, but in any case they should not be inside the icon/element.
Also, try to be consistent in the position where you place badges for different elements. Customers will be extremely confused if for one element the badge is in the upper right corner, say, and for another – in the lower left.
