Den Button haben wir bereits als nützliches Element für den Aufruf zum Handeln vorgestellt. Aber wofür werden eigentlich “Badges” genutzt? Und was sind “Ribbons”? Die Freude bei Webdesignern ist groß, wenn es um diese Webdesign-Elemente geht - sie sind einfach so vielfältig einsetzbar. Wir wollen euch ein paar schöne Ideen zur Nutzung von Badges und Ribbons im Webdesign vorstellen.
Der Badge im Einsatz
Im Gegensatz zum Button ist der Badge meist mehr als ein Aufruf zum Handeln. Er kann als zentrales Element für die Identität einer Webseite dienen und taucht als Erinnerungsmerkmal in jeder Unterseite auf. Das Logo der Firma ist in diesem Fall im Badge enthalten. Zum Teil wird er direkt als das Logo der Firma genutzt. Oftmals dient der Badge durch seine Bedeutsamkeit auch als Home-Button. Natürlich gibt es noch mehr Gebrauchsmöglichkeiten.
Quelle: http://bamb-bamb.co.uk/services.html
Die Printagentur “Bamb-Bamb” setzt ihren Badge direkt in die Mitte der Kopfleiste. Hier dient er ebenfalls als Home-Button. Durch seine Größe und zentrale Stellung im Design sticht er besonders hervor und bleibt im Gedächtnis.
Die Anwendungsmöglichkeiten für die Ribbon
Die Ribbon - im Deutschen die “Schleife” - wird eher als zierendes Element genutzt. Der Blick des Nutzers wird ebenfalls auf die entsprechende Komponente gelenkt. Allerdings ist die Ribbon nicht ein gleichwertig zentrales Element wie der Badge oder der Button. Die Schleife oder die Ribbon kann eher auf ein bestimmtes Element der Webseite aufmerksam machen.
Ein Beispiel für die Anwendung von Ribbons ist die Einbindung von Social Media-Buttons in das Webdesign. Sie können durch die passende Platzierung einer Ribbon stilsicher und stimmig in das Webdesign der Webseite eingebunden werden.
Quelle: http://www.oliveandtwist.com/
Die Webdesigner “Olive & Twist” benutzen gleich zwei Ribbons auf ihrer Webseite. Der Home-Button, der auch den Namen des Studios trägt, wurde als Ribbon designt. Hierbei wurde darauf geachtet, dass sich die Ledertextur des Headers ebenfalls in der Ribbon widerspiegelt. Die Textur der Sidebar unterscheidet sich vom Header. Allerdings ist dieselbe Farbe wie beim Home-Button gewählt worden. Auf den ersten Blick könnte man denken, dass die Sidebar gar keine Ribbon ist. Aber das Ende der Schleife findet sich im Footer der Seite wieder - ein geschmackvolles, abschließendes Designelement.
Die Verbindung beider Elemente
Quelle: http://www.webiqquiz.com/
Oftmals wird eine Ribbon auch mit einem Badge verbunden. Im Gegensatz zum Button sind hier gestalterisch mehr Freiheiten offen. Somit ist der Badge auch aufwendiger zu designen als der Button.
Ein schönes Beispiel für die Verbindung der beiden Elemente ist die Webseite “The Web IQ Quiz”. Hier ist der Badge mit der Ribbon überlegt worden um die Botschaft klarer zu gestalten und ihn zu verzieren.
Der klassische Einsatz von Ribbons
Quelle: http://www.parkbud.com/
Es gibt auch ganz klassische Möglichkeiten Ribbons anzuwenden. Eine davon ist die traditionelle “New”-Schleife oder ähnliche Status-Schleife. Mit dieser wird ein bestimmter Zustand des präsentierten Produkts gekennzeichnet. Das sind natürlich immer positive Ausprägungen.
Die App “Parkbud” demonstriert den Klassiker: Die “New”-Ribbon. Das Element ist nicht interatkiv, aber dafür fängt es sofort den Blick des Besuchers ein. Er weiß sofort, dass das Produkt neu ist. Die App wird durch die Schleife positiv in das Bewusstsein eingehen - ein Marketing-Trick, der ins Webdesign übernommen wurde.
Die Vielfältigkeit der Ribbon
Quelle: http://wp1000.envato.com/
Um den Artikel abzurunden möchten wir euch eine Seite vorstellen, die die Ribbon als Hauptelement in ihr Webdesign einbezieht. Die komplette Seite ist mit den Schleifen durchzogen. Sie dienen als Banner für den Header, als Zwischenüberschriften, als Links und als Botschafter. Das komplette Webdesign wurde um die Ribbons aufgebaut. Wir zeigen euch einen kleinen Teil der besagten Webseite.
Hier ist nur der oberste Teil der Webseite zu sehen. In diesem Abschnitt befinden sich drei Ribbons. Das obere Banner in Form einer Schleife ist ein Link direkt zu den namensgebenden 1000 WP-Themes. Die unteren Beiden führen zu den vorgestellten Webseiten. Im weiteren Verlauf der Webseite finden sich noch mehr Schleifen. Alle wurden explizit an das Webdesign der Seite angepasst.
Fazit
Der Badge und die Ribbon können facettenreich angewendet werden. Sie bieten in vielerlei Hinsicht gute Möglichkeiten das Webdesign einer Seite aufzufrischen. Insbesondere als zentrales Designelement bietet sich der Badge geradezu an. Die Ribbon sind dabei eher Verzierungen, die auf bestimmtes Element oder eine Botschaft aufmerksam machen sollen.
Hierbei sollte immer darauf geachtet werden, dass die eingesetzten Elemente zum restlichen Webdesign passen und nicht wahllos eingefügt werden. Aber mit dem passenden Fingerspitzengefühl kann einer Webseite mit Schleifen und Abzeichen ein ganz neuer Charme verliehen werden.