Bänder und Tags im Webdesign
Trends können so leise und subtil entstehen, dass wir sie selten bemerken.
Und wenn Sie Hunderte von Websites durchsuchen, sehen Sie oft Muster, die Sie sonst übersehen würden. Ein solches Muster ist die häufige Verwendung von Etiketten und Bändern.
Diese kleinen Schnörkel sind immer beliebter geworden. Dieser Artikel behandelt die zwei Elemente, weil sie so häufig zusammen verwendet werden.
Während Bänder selbsterklärend sind, meine ich mit Tags die falschen Labels, die von der Oberseite des Bildschirms hängen, wie ein Etikett auf einem T-Shirt.
Die Websites, die diese Elemente verwenden, sind wirklich herausragend in der Qualität. Es war bemerkenswert einfach, dieses wunderschöne Schaufenster zusammenzustellen. Wenige Trends sind so: Man muss sich normalerweise durch viele schlechte Beispiele waten, um die schmackhaften zu finden.
Warum diese Bänder und Tags verwenden?
Tags sind nützlich, weil sie die Aufmerksamkeit des Benutzers auf sich ziehen, indem sie die Illusion von Tiefe erzeugen. Sie pushen ihren Inhalt an den Benutzer. Tags werden oft auch mit Punch gestylt, ob über 3D-Effekte oder kräftige Kontrastfarben.
Diese Faktoren machen den Tag zu einem erstklassigen Ort für wichtige Informationen: Logos, Navigation, Handlungsaufforderungen. Wir sehen das in der Vitrine unten. Wie auch immer, bewerten Sie Ihre Bedürfnisse, bevor Sie dieses Element auf Ihrer eigenen Website implementieren.
Das Band hat die gleichen Eigenschaften, und das ist in der Tat der Grund, warum wir es und das Etikett so oft zusammen finden: Es macht Aufmerksamkeit und ist ein großartiger Ort für wichtige Informationen. Die Form des Farbbands unterscheidet es jedoch vom Etikett. die beiden Pfeile an seinen Enden scheinen auf den Inhalt zu zeigen und lenken die Aufmerksamkeit des Benutzers auf subtile Weise.
Eine Familie von Stilen
Ein weiterer Grund, warum diese beiden Elemente oft zusammen auf Websites zu finden sind, ist, dass sie beide digitale Darstellungen von Stoffen sind. Kein Wunder also, dass viele der unten genannten Websites andere stoffbezogene Elemente enthalten, einschließlich subtiler Nähte, Texturen und anderer organischer Elemente.
Bänder
Buchstabe Lerner
Das Band umrahmt den Namen Buchstabe Lerner Hier. Außerdem ist die Seite als eine einzige Spalte angelegt. Der Titel mit dem Farbband ermutigt den Benutzer, seine Reise an der Spitze zu beginnen und von dort herunterzufließen.
Ribot
Ribot Das Band ist ziemlich subtil. Die Aufblähung belebt die Seite und fasst den Fokus des Unternehmens in einem 2-Wort-Slogan zusammen. Ein perfekter Weg, Erwartungen zu setzen, denn der Firmenname sagt uns nicht, was er tut.
Alex Pierce
Mit dem Text, der auf der Homepage von so enorm ist Alex Pierce Um dies auszugleichen, wäre ein ziemlich mutiges Element erforderlich. In diesem Fall leistet das Farbband eine gute Arbeit, um den Header abzusetzen. Ich mag auch, wie die gefaltete Schicht in der Mitte des Bandes den Namen des Designers betont.
Rockaholic!
Auf der eher ungewöhnlichen Rockaholic! Das Menüband lenkt die Aufmerksamkeit des Benutzers nach unten, spielt freundlich in die vertikale Bildlaufleiste der Website und hilft dem Benutzer, sich in den Inhalt einzuarbeiten.
Paris Jones
Das köstliche Rot des Bandes macht den Bandnamen aus Paris Jones hier herauskommen. Auch wenn die Textbehandlung eher subtil ist, sorgt das kräftige Muster dafür, dass Sie es bemerken.
Blog de Bois
Auf Blog de Bois Besonders effektvoll ist der Pfeileffekt des Bandes, vor allem wegen der kontrastierenden Dunkelheit hinter dem Gelb. Ich fühle mich immer wieder zu dem Logo hingezogen. Es ist sicherlich eine leistungsstarke Möglichkeit, die Marke in den Kopf der Nutzer zu bringen.
HTML5-Kesselplatte
Die beliebte Website HTML5-Kesselplatte Mithilfe von Farbbändern können Sie auf die wichtigsten Aktionselemente auf der Seite aufmerksam machen. Ich liebe es, dass die Bänder ihre Arbeit machen, ohne "Download hier" sagen zu müssen. Die Kombination von Farbbändern und Etiketten zeigt uns, dass wir hier die Ressourcen herunterladen können.
Freitragende Fish & Chips
Der Zweck des Bandes ist nicht so klar auf Freitragende Fish & Chips . Das Detail über "7 Tage die Woche geöffnet" erscheint relativ unbedeutend, aber vermutlich ist es eine wichtige Auszeichnung für dieses Restaurant.
Wells Riley
Wells Riley ist ein perfektes Beispiel für Bänder im Dienste der Ästhetik. Die Bänder sehen hier gut aus und werden zum Schwerpunkt der Seite.
Dhiraj Singh Karki
Ich liebe immer Designs, die von der Konvention abweichen. Das Portfolio des UI-Designers Dhiraj Singh Karki ist so eine Website. Hier wird das Ribbon geschickt eingesetzt und packt nicht annähernd den gleichen visuellen Punch wie auf anderen Webseiten. Es fügt sich nahtlos in die Seite ein und hat dennoch genug Stil, um das Design nicht zu einfach erscheinen zu lassen.
Streifenhörnchen
Streifenhörnchen ist ein gutes Beispiel dafür, wie gut ein Band mit organischen Elementen arbeiten kann. Das Band um die Hauptnavigation passt perfekt zu den folgenden Illustrationen. Es verhindert auch, dass die Navigation unter den mächtigen Kunstwerken verloren geht.
Ryan M. Stryker
Wiederum sehen wir die Kraft des Bandes, um die Aufmerksamkeit zu fokussieren. Seine zentrale Lage und der kühne Kontrast sorgen dafür, dass Sie nicht verpassen Ryan M. Stryker Der Name.
Stichworte
Ennea
Angesichts dessen Ennea ist eine Bekleidungsmarke, es ist keine Überraschung, dass der Tag hier das Logo und den Markennamen enthält. Manchmal funktioniert ein direkter Ansatz am besten.
Philip Meissner Design
Das Tag enthält die Hauptnavigation an Philip Meissner Design . Normalerweise würde mich diese ungewöhnliche Konfiguration von Links abschrecken, aber die Anordnung und die Farben hier sorgen dafür, dass die Links super leicht zu finden sind.
Bastelender Affe
Was könnte auf einer E-Commerce-Website wichtiger sein, als Benutzer zum Auschecken zu leiten? Bastelender Affe hat ein nettes kleines fettes Tag, um Benutzern zu helfen, ihren Kauf abzuschließen.
Parkbud
Mit all den Smartphone-Anwendungen müssen die Guten ihre wichtigsten Unterscheidungsmerkmale kommunizieren. Parkbud ist kostenlos, und das fett gedruckte rote Tag stellt sicher, dass Sie es wissen. Das Etikett ist schön versteckt, aber immer sichtbar aus dem Augenwinkel und erinnert Sie daran, dass diese leckere App kostenlos ist.
Linse
Linse ist ein perfektes Beispiel für Tags in Kombination mit Stofftexturen. Beachten Sie zuerst den strukturierten Denim-Hintergrund; Auch die Wellenränder unter der Hauptnavigation fühlen sich sehr textilorientiert an.
Coreymade
Während ein kleines Detail, ich liebe die Art und Weise, wie die Skriptschriftart das Tag aktiviert Coreymade fühle mich mehr wie ein Tag auf einem Shirt als ein normales Website-Logo. Und der Pseudo-3D-Effekt lässt den Tag für den Betrachter wirklich populär werden.
Netastica
Das Tag an Netastica ist hauptsächlich da, um hübsch auszusehen, obwohl es immer noch wichtige Informationen enthält und Besucher auf die Homepage verlinkt.
Ryan Havoc Taylor
Das Tag ist an solch einer sichtbaren Stelle auf Ryan Havoc Taylor Der Website, dass es nicht viel Kontrast braucht, um aufzufallen. Es funktioniert gut mit dem Fluss der Website und übernimmt seine Rolle mühelos.
Bänder und Tags
Im letzten Teil dieser Präsentation werden wir uns Websites ansehen, die sowohl Ribbons als auch Tags verwenden.
ClearSpan Medien
Bänder und Tags gehen sehr gut zusammen, wie von ClearSpan Medien . Hier finden Sie auch Stoffe mit Mustern, Stichen und feinen Farbvariationen. Die zwei Tags oben und das unten liegende Band fungieren als eine Art Interessenszone für den Benutzer.
Krichewtsowa Alexandra
Während Krichewtsowa Alexandra Die Website ist eher barfuß im Inhalt, das Tag und das Band geben den Schlüsselelementen zusätzliches Leben. Sie können diese Website genießen, ohne zu wissen, was die Person tut.
Wes Bos
Die meisten Websites in dieser Sammlung haben ziemlich große Bänder. Nicht so mit Wes Bos . Seine sind viel kleiner, eine gute Erinnerung, dass sie das Design nicht dominieren müssen, um ihre Funktion auszuführen.
Fazit
Angesichts der Qualität der Websites in dieser Sammlung hat keiner dieser Designer versucht, etwas "Trendiges" zu schaffen. Stattdessen wurden sie mit einer Reihe von Bedürfnissen konfrontiert, und aus diesen Bedürfnissen entwickelte sich ein effektives visuelles Gerät, um Aufmerksamkeit zu fokussieren und wichtige Informationen zu vermitteln und Hervorhebung wichtiger Aktionen.
Wenn Sie ein paar nette CSS-basierte Ribbons für Ihre eigene Website möchten, die Web-basiert 3-D-Bandgenerator ist ein praktisches Werkzeug für den Job.