Nul besoin de redire à quel point le bouton constitue un élément utile pour l’appel à l’action. Mais à quoi bon servent les « badges » ? Et que sont les « rubans » ? Les webdesigners ne cachent pas leur joie lorsqu’il est question de ces éléments de design, car ils sont faciles et polyvalents à utiliser. Nous avons entrepris de vous présenter quelques belles idées d’utilisation de badges et de rubans dans le webdesign.
Le badge en action
Contrairement au bouton, le badge est généralement bien plus qu’un appel à action. Il peut constituer un élément central de l’identité d’un site web et apparaît sur chaque sous-page sous forme de rappel. Dans ce cas, le logo de l’entreprise est intégré au badge. D’une certaine manière, il représente directement le logo de l’entreprise. Du fait de sa signification, le badge fait souvent office de bouton Accueil. Naturellement, il existe encore bien d’autres utilisations.
Source: http://bamb-bamb.co.uk/services.html
L’agence de marketing « Bamb-Bamb » place son badge directement au centre de l’en-tête. Il y joue également le rôle de bouton Accueil. Du fait de sa taille et de sa position centrale au sein du design, il attire l’attention et reste dans la mémoire des internautes.
Les possibilités d’utilisation du ruban
Le ribbon - ou « ruban » en français - est davantage utilisé comme élément décoratif. Là aussi, le regard de l’internaute est attiré par les éléments correspondants. Néanmoins, le ruban n’est pas un élément aussi central que le badge ou le bouton. Le ruban ou ribbon est davantage mis en œuvre pour attirer l’attention sur un élément précis de la page web.
L’intégration des boutons de réseaux sociaux au webdesign est un bon exemple de l’utilisation de rubans. Grâce au positionnement adéquat du ruban, ces boutons s’inscrivent avec élégance et cohérence dans le webdesign de la page web.
Source: http://www.oliveandtwist.com/
Les webdesigners « Olive & Twist » n‘utilisent pas moins de deux rubans sur leur page web. Le bouton Accueil, qui arbore aussi le nom du studio, a été conçu sous forme de ruban. Pour les designers, il était important que la texture en cuir de l’en-tête se retrouve également dans le ruban. Si la texture de la barre latérale se distingue de celle de l’en-tête, la couleur utilisée est la même que pour le bouton Accueil. Au premier coup d’œil, on pourrait croire que la barre latérale n’est pas un ruban. Mais l’extrémité du ruban se retrouve dans le pied-de-page de la page, ce qui constitue la conclusion esthétique de cet élément de design.
L’alliance des deux éléments
Source: http://www.webiqquiz.com/
Il n’est pas rare qu’un ruban soit combiné à un badge. Contrairement au bouton, rubans et badges offrent davantage de libertés en matière de design. Ainsi le design du badge requiert-t-il davantage de travail que celui du bouton.
Un bel exemple de la combinaison des deux éléments est la page web « The Web IQ Quiz ». Ici, le ruban recouvre le badge pour un message plus clair et à des fins de décoration.
L’utilisation classique des rubans
Source: http://www.parkbud.com/
Il existe aussi des manières classiques de mettre en œuvre les rubans. L’une d’entre elles est le ruban classique « New » ou tout autre ruban de statut. Cela permet de mettre en avant le statut particulier du produit présenté. Évidemment, ce sont toujours des éléments positifs.
L‘application « Parkbud » illustre cette utilisation classique avec son bouton « New ». Certes l’élément n’est pas interactif, mais il attire immédiatement le regard de l’utilisateur. Celui-ci apprend de suite que le produit est nouveau. Grâce au ruban, l’application laissera des traces dans la conscience des gens - une astuce de marketing reprise dans le webdesign.
La diversité du ruban
Source: http://wp1000.envato.com/
Afin de compléter notre article, nous vous présentons une page qui fait la part belle au ruban en en faisant l’élement central du webdesign. La page est entièrement « quadrillée » par les rubans. Ils servent de bannière pour l’en-tête, de sous-titres et de messagers. Le webdesign dans son intégralité a été conçu autour des rubans. Nous vous présentons une petite partie de ladite page web.
On ne peut y voir que la partie supérieure de la page web. Dans cette section, on trouve trois rubans. La bannière supérieure sous forme de ruban constitue un lien direct vers les 1000 thèmes WP éponymes. Les deux rubans inférieurs mènent aux pages web présentées. Si l’on poursuit la visite du site, on découvre davantage de rubans. Tous ont été explicitement adaptés au webdesign de la page.
Conclusion
Badges et rubans offrent une utilisation variée. Ils offrent, à de nombreux égards, de bonnes possibilités de rafraîchir le webdesign d’une page. Le badge est particulièrement adapté au rôle d’élément central du design. Quant au ruban, il constitue davantage un élément décoratif dont l’objectif est d’attirer l’attention sur un élément en particulier ou un message.
Quoi qu’il en soit, les éléments utilisés doivent toujours être adaptés aux autres éléments du webdesign, et non pas intégrés au hasard. Mais mis en œuvre avec doigté, les rubans et badges peuvent faire le charme d’un site web.