Band och etiketter i webbdesign
Trender kan födas så tyst och subtilt att vi sällan märker dem.
Och när du undersöker hundratals webbplatser ser du ofta mönster som du annars skulle missa. Ett sådant mönster är den vanliga användningen av taggar och band.
Dessa små blomningar har blivit alltmer populära. Denna artikel behandlar de två elementen eftersom de används så ofta tillsammans.
Medan band är självförklarande, med taggar menar jag de fauxetiketter som hänger ner från toppen av skärmen, som en tagg på en t-shirt.
De webbplatser som använder dessa element är verkligen enastående i kvalitet. Att sätta ihop den här underbara presentationen visade sig vara märkvärdigt lätt. Få trender är så här: man måste vanligtvis vada genom många dåliga exempel för att hitta de goda.
Varför använda dessa band och taggar?
Taggar är användbara eftersom de drar användarens uppmärksamhet genom att skapa djupets illusion. De skjuter upp innehållet till användaren. Etiketter är också ofta utformade med stans, antingen via 3-D-effekter eller djärva kontrasterande färger.
Dessa faktorer gör taggen till ett utmärkt läge för kritisk information: logotyper, navigering, samtal till handling. Vi ser det här i utställningen nedan. Naturligtvis, som alltid, bedöma dina behov innan du genomför detta element på din egen hemsida.
Bandet delar samma egenskaper, vilket är faktiskt anledningen till att vi hittar den och taggen tillsammans så ofta: den uppmärksammar och är en utmärkt plats för viktig information. Bandets form sätter den dock ifrån märkningen; De två pilarna på dess ändar tycks peka på innehållet inom, subtilt rikta användarens uppmärksamhet.
En familj av stilar
En annan anledning till att dessa två element ofta finns på webbplatser är att de är båda digitala representationer av tyg. Ingen överraskning då att många av webbsidorna nedan har andra tygrelaterade element, inklusive subtila sömmar, texturer och andra organiska element.
Ribbons
Letter Learner
Bandet ramar snyggt namnet Letter Learner här. Sidan läggs också ut som en enda kolumn; Den bandade titeln uppmuntrar användaren att börja sin resa på toppen och flyta ner därifrån.
Ribot
Ribot Bandet är ganska subtilt. Blomningen lever upp på sidan, samtidigt som man sammanfattar företagets fokus i en tvåordig taglinje. Ett perfekt sätt att ställa förväntningar på, eftersom företagets namn inte berättar för oss vad det gör.
Alex Pierce
Med texten är så enorm på hemsidan av Alex Pierce S portfölj, skulle det ta ett ganska djärvt element för att balansera det. I det här fallet gör bandet ett bra jobb att sätta av huvudet. Jag älskar också hur det vikta lagret mitt i bandet lägger fokus på designerns namn.
Rockaholic!
På den ganska ovanliga Rockaholic! , bandet riktar användarens uppmärksamhet, spelar snyggt in i vertikal rullning av webbplatsen och hjälper användaren att gräva in i innehållet.
Paris Jones
Bandets läckra röda band gör namn på bandet Paris Jones dyka upp här. Även om textbehandlingen är ganska subtil, säkerställer det djärva mönstret att du märker det.
Blog en Bois
På Blog en Bois , pilens pilseffekt är särskilt kraftfull, till stor del på grund av den kontrasterande mörka bakom den gula. Jag finner mig själv dragen tillbaka till logotypen om och om igen. Det är verkligen ett kraftfullt sätt att engagera varumärket i användarens sinne.
HTML5 Boilerplate
Den populära hemsidan HTML5 Boilerplate använder band för att uppmärksamma de viktigaste åtgärderna på sidan. Jag älskar att banden gör sitt jobb utan att behöva säga "Ladda ner här." Kombinationen av band och etiketter berättar att det här är var du ska ladda ner resurserna.
Cantilever Fish & Chips
Syftet med bandet är inte så klart på Cantilever Fish & Chips . Detaljerna om att vara "Öppna 7 dagar i veckan" verkar vara relativt mindre, men förmodligen är det en viktig skillnad för denna restaurang.
Wells Riley
Wells Riley är ett perfekt exempel på band som tjänar estetik. Banden ser bra ut här och blir fokus på sidan.
Dhiraj Singh Karki
Jag älskar alltid mönster som avviker från konventionen. Portföljen av UI-designer Dhiraj Singh Karki är bara en sådan hemsida. Här används bandet ganska smart och packar inte nästan samma visuella slag som på andra webbplatser. Det smälter in i sidan och har ändå tillräckligt stil för att hålla designen alltför enkel att se.
Chipmunk
Chipmunk är ett bra exempel på hur bra ett band kan fungera med organiska element. Bandet runt den primära navigeringen passar perfekt med de rika illustrationerna nedan. Det håller också navigeringen från att gå vilse bland de mäktiga konstverk.
Ryan M. Stryker
Återigen ser vi kraften i bandet att fokusera uppmärksamhet. Dess centrala läge och djärva kontrast säkerställer att du inte saknar Ryan M. Stryker Namn.
Tags
Ennea
Givet att Ennea är ett klädmärke, det är ingen överraskning att taggen här innehåller logotypen och varumärket. Ibland fungerar det enkelt med ett rakt tillvägagångssätt.
Philip Meissner Design
Koden innehåller huvudnavigeringen på Philip Meissner Design . Vanligtvis skulle jag avskräckas av denna ovanliga konfiguration av länkar, men arrangemanget och färgerna här gör att länkarna är superlätta att hitta.
Tinkering Monkey
Vad kan vara viktigare på en e-handelswebbplats och leda användarna att kolla in? Tinkering Monkey har en trevlig liten fet tagg för att hjälpa användarna att slutföra sitt köp.
Parkbud
Med alla smartphoneapplikationer där ute behöver de bra kommunikera sina nyckeldifferentiatorer. Parkbud är fri, och den djärva röda etiketten gör att du vet det. Taggen är snyggt undangömd men alltid synlig från ögonhörnet, och påminner dig om att denna läckra app är gratis.
Lins
Lins är ett perfekt exempel på taggar i kombination med tygtexturer. Lägg märke till den texturerade denimbakgrunden först; Även den kantade gränsen under huvudnavigering känns väldigt mycket textilorienterad.
Coreymade
Medan en liten detalj, älskar jag verkligen hur skrivteckensnittet gör taggen på Coreymade känner sig mer som en tagg på en tröja än en vanlig webbplatslogo. Och pseudo-3D-effekten gör taggen verkligen pop för tittaren.
Netastica
Taggen på Netastica är främst där för att se bra ut, även om det fortfarande innehåller viktig information och länkar besökare till hemsidan.
Ryan Havoc Taylor
Taggen är i en sådan synlig plats på Ryan Havoc Taylor S hemsida att det inte behöver mycket kontrast att sticka ut. Det fungerar bra med flödet av webbplatsen och utför sin roll enkelt.
Band och taggar
I den sista delen av den här presentationen tittar vi på webbplatser som använder både band och taggar.
ClearSpan Media
Band och taggar går väldigt snyggt tillsammans, vilket framgår av ClearSpan Media . Här hittar du också tyger med mönster, stygn och subtila färgvariationer. De två märkena uppåt och bandet nedanför fungerar som ett slags intresse av intresse för användaren.
Krichevtsova Alexandra
Medan Krichevtsova Alexandra S hemsida är ganska barebones i innehåll, taggen och bandet ger extra livslängd till nyckelelement. Du kan njuta av denna webbplats utan att ens veta vad personen gör.
Wes Bos
De flesta av webbplatserna i denna samling har ganska stora band. Inte så med Wes Bos . Hans är mycket mindre, en bra påminnelse om att de inte behöver dominera designen för att utföra sin funktion.
Slutsats
Med tanke på kvaliteten på webbplatserna i denna samling, utgjorde ingen av dessa designers att bygga något "trendigt". Snarare mötte de en uppsättning behov, och från dessa behov uppstod en effektiv visuell enhet för att fokusera uppmärksamhet, kommunicera kritisk information och markera viktiga åtgärder.
Om du vill ha några bra CSS-baserade band för din egen hemsida, den webbaserade 3-D Ribbon Generator är ett praktiskt verktyg för jobbet.