Ribbons og Tags i Web Design
Trends kan fødes så lydløst og subtilt, at vi sjældent mærker dem.
Og når du undersøger hundredvis af hjemmesider, ser du ofte mønstre, som du ellers ville savne. Et sådant mønster er den hyppige brug af mærker og bånd.
Disse små blomstrer er blevet stadig mere populære. Denne artikel omhandler de to elementer, fordi de bruges sammen så ofte.
Mens bånd er selvforklarende, betyder det med mærker fauxetiketterne, der hænger ned fra toppen af skærmen, som et mærke på en t-shirt.
De websteder, der bruger disse elementer, er virkelig fremragende i kvalitet. At sammensætte denne smukke showcase viste sig at være bemærkelsesværdigt let. Få tendenser er som dette: man skal normalt vade gennem mange dårlige eksempler for at finde de velsmagende.
Hvorfor bruge disse bånd og tags?
Tags er nyttige, fordi de trækker brugerens opmærksomhed ved at skabe illusionen om dybden. De skubber deres indhold ud til brugeren. Etiketter er også ofte stylet med slag, enten via 3-D effekter eller fed kontrastfarver.
Disse faktorer gør taggen til en førsteklasses placering for kritiske oplysninger: logoer, navigation, opkald til handling. Vi ser dette i udstillingsvinduet nedenfor. Selvfølgelig skal du som altid vurdere dine behov inden du implementerer dette element på din egen hjemmeside.
Båndet deler de samme kvaliteter, hvilket er grunden til, at vi finder det og mærket sammen så ofte: det gør opmærksom og er et godt sted for vigtig information. Formen af båndet sætter den dog adskilt fra mærket; de to pile på dens ender synes at pege på indholdet inden for, subtly instruere brugerens opmærksomhed.
En familie af stilarter
En anden grund til at disse to elementer ofte findes sammen på hjemmesider er, at de begge er digitale repræsentationer af stof. Ikke så overraskende, at mange af nedenstående websteder har andre stofrelaterede elementer, herunder subtile sømninger, teksturer og andre organiske elementer.
Medaljer
Letter Learner
Båndet rammer pænt navnet Letter Learner her. Siden er også lagt ud som en enkelt kolonne; den båndede titel opfordrer brugeren til at starte deres rejse øverst og strømme derfra.
Ribot
Ribot S bånd er ret subtilt. Det blomstrede liv op på siden, mens opsummering af virksomhedens fokus i en to-word tagline. En perfekt måde at sætte forventninger på, fordi firmaets navn ikke fortæller os, hvad det gør.
Alex Pierce
Da teksten er så enorm på hjemmesiden til Alex Pierce S portefølje, ville det tage et ret modigt element for at afbalancere det. I dette tilfælde gør båndet et godt stykke arbejde med at sætte hovedet af. Jeg elsker også hvordan det foldede lag i midten af båndet tilføjer fokus til designerens navn.
Rockaholic!
På den temmelig usædvanlige Rockaholic! , båndet leder brugerens opmærksomhed nede og spiller pænt ind i den vertikale rulle af hjemmesiden og hjælper brugeren med at grave ind i indholdet.
Paris Jones
Det lækre røde af båndet gør bandets navn Paris Jones pop ud her. Selvom tekstbehandlingen er ret subtil, sikrer det dristige mønster, at du bemærker det.
Blog en Bois
På Blog en Bois , båndets effekt af båndet er specielt kraftfuldt, hovedsageligt på grund af den kontrasterende mørke bag den gule. Jeg finder mig selv trukket tilbage til logoet igen og igen. Det er bestemt en stærk måde at engrain mærket i brugerens sind.
HTML5 Boilerplate
Den populære hjemmeside HTML5 Boilerplate bruger bånd til at gøre vores opmærksomhed på de vigtigste handlinger på siden. Jeg elsker, at båndene gør deres arbejde uden at skulle sige "Download her." Kombinationen af bånd og etiketter fortæller os, det er her, hvor du skal downloade ressourcerne.
Cantilever Fish & Chips
Formålet med båndet er ikke så klart på Cantilever Fish & Chips . Detaljerne om at være "Åben 7 dage om ugen" synes at være forholdsvis små, men formodentlig er det en vigtig skelnen for denne restaurant.
Wells Riley
Wells Riley er et perfekt eksempel på bånd i service af æstetik. Båndene ser godt ud her og bliver fokus på siden.
Dhiraj Singh Karki
Jeg elsker altid design, der afviger fra konventionen. Porteføljen af UI designer Dhiraj Singh Karki er bare sådan et websted. Her bruges båndet ganske klogt og pakker ikke næsten samme visuelle slag som på andre hjemmesider. Det smelter helt ind i siden og har dog nok stil til at holde designet fra at se for simpelt ud.
Chipmunk
Chipmunk er et godt eksempel på, hvor godt et bånd kan arbejde med organiske elementer. Båndet omkring den primære navigation passer perfekt sammen med de rige illustrationer nedenfor. Det holder også navigationen tabt blandt de magtfulde kunstværker.
Ryan M. Stryker
Endnu en gang ser vi kraften i båndet for at fokusere opmærksomheden. Dens centrale beliggenhed og fed kontrast sikrer, at du ikke går glip af Ryan M. Stryker Navn.
Tags
Ennea
I betragtning af det Ennea er et tøjmærke, det er ikke overraskende, at mærket her indeholder logoet og mærkenavnet. Nogle gange virker en retfærdig tilgang bedst.
Philip Meissner Design
Tagget indeholder hovednavigationen på Philip Meissner Design . Normalt vil jeg blive afskrækket ved denne usædvanlige konfiguration af links, men arrangementet og farverne her sikrer, at linkene er superlette at finde.
Tinkering Monkey
Hvad kunne være vigtigere på et e-handelswebsted og derefter lede brugerne til at tjekke ud? Tinkering Monkey har en dejlig lille fed tag til at hjælpe brugerne med at gennemføre deres køb.
Parkbud
Med alle de smartphone applikationer derude, skal de gode kommunikere deres nøgle differentiatorer. Parkbud er gratis, og den dristige røde etiket sikrer, at du ved det. Tagget er pænt gemt ud af vejen, men altid synligt fra hjørnet af dit øje, og minder dig om, at denne velsmagende app er gratis.
Lense
Lense er et perfekt eksempel på tags kombineret med stofstruktur. Bemærk først den strukturerede denim baggrund; Også den skulpterede kant under hovednavigationen føles meget tekstilorienteret.
Coreymade
Mens jeg er en lille detalje, elsker jeg virkelig måden scriptet skrifttype gør tagget på Coreymade Føler mere som et mærke på en skjorte end et normalt website logo. Og den pseudo-3D-effekt gør taggen virkelig pop for seeren.
Netastica
Tagget på Netastica er hovedsagelig der for at se godt ud, selv om det stadig indeholder vigtige oplysninger og links besøgende til hjemmesiden.
Ryan Havoc Taylor
Etiketten er på et så synlig sted Ryan Havoc Taylor S hjemmeside, at det ikke behøver meget kontrast at skille sig ud. Det fungerer godt med strømmen af hjemmesiden og udfører sin rolle ubesværet.
Ribbons og tags
I den sidste del af denne udstillingsvindue ser vi på hjemmesider, der gør brug af både bånd og tags.
ClearSpan Media
Bånd og tags går meget pænt sammen, som det fremgår af ClearSpan Media . Her finder du også stoffer med mønstre, søm og subtile farvevariationer. De to mærker øverst og båndet nedenunder fungerer som en slags cirkel af interesse for brugeren.
Krichevtsova Alexandra
Mens Krichevtsova Alexandra S hjemmeside er ret barebones i indhold, tag og bånd tilføje ekstra liv til nøgleelementer. Du kan nyde denne hjemmeside uden selv at vide, hvad personen gør.
Wes Bos
De fleste af hjemmesiderne i denne samling har ret store bånd. Ikke så med Wes Bos . Hans er meget mindre, en god påmindelse om, at de ikke behøver at dominere designet for at udføre deres funktion.
Konklusion
På grund af kvaliteten af hjemmesiderne i denne samling har ingen af disse designere valgt at opbygge noget "trendy". De blev snarere konfronteret med et sæt behov, og der opstod en effektiv visuel enhed til at fokusere opmærksomhed og kommunikere kritisk information og fremhæve vigtige handlinger.
Hvis du vil have nogle gode CSS-baserede bånd til din egen hjemmeside, den web-baserede 3-D Ribbon Generator er et praktisk værktøj til jobbet.