Bånd og etiketter i webdesign
Trender kan bli født så stille og subtilt at vi sjelden merker dem.
Og når du undersøker hundrevis av nettsteder, ser du ofte mønstre som du ellers ville savne. Et slikt mønster er hyppig bruk av merker og bånd.
Disse små blomstringene er blitt stadig mer populære. Denne artikkelen omhandler de to elementene fordi de brukes sammen så ofte.
Mens båndene er selvforklarende, med merker mener jeg fauxetikettene som henger ned fra toppen av skjermen, som en tag på en t-skjorte.
Nettstedene som bruker disse elementene er virkelig enestående i kvalitet. Å sette sammen dette flotte utstillingsvinduet viste seg å være bemerkelsesverdig enkelt. Få trender er slik: man må vanligvis vade gjennom mange dårlige eksempler for å finne de velsmakende.
Hvorfor bruke disse båndene og kodene?
Etiketter er nyttige fordi de trekker brukerens oppmerksomhet ved å skape en illusjon av dybde. De skyver innholdet ut til brukeren. Etiketter er også ofte stylet med slag, enten via 3-D effekter eller dristige kontrastfarger.
Disse faktorene gjør taggen til en ypperlig plassering for kritisk informasjon: logoer, navigasjon, samtaler til handling. Vi ser dette i utstillingsvinduet under. Selvfølgelig, vurder alltid dine behov før du implementerer dette elementet på ditt eget nettsted.
Båndet deler de samme egenskapene, som faktisk er grunnen til at vi finner det og merket sammen så ofte: det trekker oppmerksomhet og er et flott sted for viktig informasjon. Formen på båndet setter den fra brikken, skjønt; de to pilene på endene ser ut til å peke på innholdet innenfor, subtilt rette brukerens oppmerksomhet.
En familie av stiler
En annen grunn til at disse to elementene ofte blir funnet sammen på nettsteder er at de begge er digitale representasjoner av stoff. Ikke overraskende da at mange av nettstedene nedenfor har andre stoffrelaterte elementer, inkludert subtile sømmer, teksturer og andre organiske elementer.
Ribbons
Letter Learner
Båndet rammer pent navnet Letter Learner her. Siden er også lagt ut som en enkelt kolonne; den ribbonte tittelen oppfordrer brukeren til å starte reisen øverst og strømme ned derfra.
Ribot
Ribot Bånd er ganske subtilt. Blomsten vokser opp på siden, mens oppsummering av selskapets fokus i en to-ords tagline. En perfekt måte å stille forventninger på, fordi selskapets navn ikke forteller oss hva det gjør.
Alex Pierce
Med teksten så enorm på hjemmesiden til Alex Pierce S portefølje, ville det ta et ganske dristig element for å balansere det. I dette tilfellet gjør båndet en god jobb med å sette av toppteksten. Jeg elsker også hvordan det foldede laget i midten av båndet legger fokus på designerenes navn.
Rockaholic!
På det ganske uvanlige Rockaholic! , båndet retter brukerens oppmerksomhet ned, spiller pent inn i vertikal rulle av nettstedet og hjelper brukeren til å grave inn i innholdet.
Paris Jones
Den deilige røde av båndet gjør bandetavnet Paris Jones dukker opp her. Selv om tekstbehandlingen er ganske subtil, sikrer det dristige mønsteret at du legger merke til det.
Blog en Bois
På Blog en Bois , bøyleffekten av båndet er spesielt kraftig, hovedsakelig på grunn av den kontrastrike mørken bak den gule. Jeg finner meg selv trukket tilbake til logoen igjen og igjen. Det er absolutt en kraftig måte å engrain merkevaren i brukerens sinn.
HTML5 Boilerplate
Den populære nettsiden HTML5 Boilerplate bruker bånd for å gjøre oppmerksomheten til de viktigste handlingsemnene på siden. Jeg elsker at båndene gjør jobben uten å måtte si "Last ned her." Kombinasjonen av bånd og etiketter forteller oss at dette er hvor du skal laste ned ressursene.
Cantilever Fish & Chips
Formålet med båndet er ikke så klart på Cantilever Fish & Chips . Detaljene om å være "Åpen 7 dager i uken" virker relativt små, men antagelig er det et viktig skille for denne restauranten.
Wells Riley
Wells Riley er et perfekt eksempel på bånd i service av estetikk. Båndene ser bra ut her og blir fokus på siden.
Dhiraj Singh Karki
Jeg elsker alltid design som går fra konvensjonen. Porteføljen av UI designer Dhiraj Singh Karki er bare et slikt nettsted. Her brukes båndet ganske smart og pakker ikke nesten samme visuelle slag som på andre nettsteder. Den blander seg rett inn i siden og har likevel nok stil, slik at designen ikke ser for enkelt ut.
Chipmunk
Chipmunk er et godt eksempel på hvor godt et bånd kan fungere med organiske elementer. Båndet rundt primærnavigasjonen passer perfekt med de rike illustrasjonene nedenfor. Det holder også navigasjonen fra å gå seg vill blant de mektige kunstverkene.
Ryan M. Stryker
Igjen ser vi kraften i båndet for å fokusere oppmerksomheten. Den sentrale beliggenheten og dristig kontrast sørger for at du ikke går glipp av det Ryan M. Stryker Navn.
Tags
Ennea
Gitt at Ennea er et klærmerke, det er ingen overraskelse at merket her inneholder logoen og merkenavnet. Noen ganger fungerer en rettferdig tilnærming best.
Philip Meissner Design
Koden inneholder hovednavigasjonen på Philip Meissner Design . Vanligvis vil jeg bli kvitt denne uvanlige konfigurasjonen av koblinger, men arrangementet og farger her sikrer at koblingene er superlette å finne.
Tinkering Monkey
Hva kan være viktigere på et e-handelsnettsted og deretter veilede brukere å sjekke ut? Tinkering Monkey har en fin liten fet etikett for å hjelpe brukerne med å fullføre kjøpet.
Parkbud
Med alle smarttelefonapplikasjonene der ute, trenger de gode til å kommunisere sine nøkkeldifferensatorer. Parkbud er ledig, og den dristige røde merket sørger for at du vet det. Merket er pent gjemt ut av veien, men alltid synlig fra hjørnet av øyet, og påminner deg om at denne smakfulle appen er ledig.
Lense
Lense er et perfekt eksempel på koder kombinert med tekstur i tekstiler. Legg merke til først den strukturert denimbakgrunnen; Også den skulpterte grensen under hovednavigasjonen føles veldig tekstilorientert.
Coreymade
Mens en liten detalj, elsker jeg virkelig måten skriptfonten gjør på taggen Coreymade føles mer som en tag på en skjorte enn en vanlig nettsidelogo. Og pseudo-3D-effekten gjør at taggen virkelig er pop for seeren.
Netastica
Koden på Netastica er hovedsakelig der for å se pen ut, selv om det fortsatt inneholder viktig informasjon og lenker besøkende til hjemmesiden.
Ryan Havoc Taylor
Merket er i en så synlig plassering på Ryan Havoc Taylor S nettsted at det ikke trenger mye kontrast for å skille seg ut. Det fungerer bra med strømmen av nettsiden og utfører sin rolle uten problemer.
Bånd og merker
I den siste delen av dette utstillingsvinduet ser vi på nettsteder som bruker både bånd og tagger.
ClearSpan Media
Bånd og merker går veldig bra sammen, som vist av ClearSpan Media . Her finner du også stoffer med mønstre, masker og subtile fargevariasjoner. De to merkene på toppen og båndet nedenfor fungerer som en slags sirkel av interesse for brukeren.
Krichevtsova Alexandra
Samtidig som Krichevtsova Alexandra Nettstedet er ganske bare bones i innhold, taggen og båndet gir ekstra liv til nøkkelelementene. Du kan nyte denne nettsiden uten å engang vite hva personen gjør.
Wes Bos
De fleste av nettstedene i denne samlingen har ganske store bånd. Ikke så med Wes Bos . Hans er mye mindre, en god påminnelse om at de ikke trenger å dominere designet for å utføre sin funksjon.
Konklusjon
Gitt kvaliteten på nettsidene i denne samlingen, satte ingen av disse designerne seg på å bygge noe "trendy". I stedet møtte de et sett behov, og det oppsto en effektiv visuell enhet for å fokusere oppmerksomhet, formidle kritisk informasjon og fremheve viktige handlinger.
Hvis du vil ha noen fine CSS-baserte bånd til ditt eget nettsted, den nettbaserte 3-D-båndgenerator er et praktisk verktøy for jobben.