Nauhat ja tunnisteet Web-suunnittelussa
Trendit voivat syntyä niin hiljaa ja hienovaraisesti, että harvoin huomaamme heitä.
Ja kun tutkimat satoja sivustoja, näet usein kuvioita, joita muuten jäisit. Yksi tällainen malli on tarrojen ja nauhojen usein käytetty käyttö.
Nämä pienet kukoistukset ovat yhä suosittuja. Tässä artikkelissa käsitellään kahta elementtiä, koska niitä käytetään niin usein.
Vaikka nauhat ovat itsestään selviä, tunnuksilla tarkoitan faux-tarroja, jotka ryntävät alas ruudun yläosasta, kuten t-paidan tunnisteen.
Näitä elementtejä käyttävät sivustot ovat todella laadukkaita. Yhdessä tämä upea esitys osoittautui erittäin helppokäyttöiseksi. Vain harvat suuntaukset ovat tällaisia: tavallisella on tavata monia huonoja esimerkkejä löytääksesi maukkaita.
Miksi käyttää näitä nauhoja ja tunnisteita?
Tunnisteet ovat hyödyllisiä, koska ne vetävät käyttäjän huomion luomalla syvyyden illuusion. He työntävät sisältöä käyttäjälle. Tunnisteita kutsutaan usein myös punsilla, joko 3-D-tehosteilla tai lihavilla kontrastiväreillä.
Nämä tekijät tekevät tagista erinomaisen sijainnin kriittisille tiedoille: logot, navigointi, toiminnot. Näemme tämän seuraavassa näytöksessä. Tietenkin, kuten aina, arvioi tarpeesi ennen tämän elementin toteuttamista omalla verkkosivustollasi.
Nauhalla on samat ominaisuudet, mikä on todellakin syy siihen, että se ja tag yhdessä ovat niin usein: se kiinnittää huomiota ja on hyvä paikka tärkeille tiedoille. Nauhan muoto asettaa sen erillään tagista; kaksi nuolta osoittavat nuolet viereen sisällön sisälle ja ohjaavat hellästi käyttäjän huomion.
Tyylilaji
Toinen syy, joka näistä kahdesta tekijästä löytyy usein verkkosivustoilta, on se, että ne ovat sekä kudoksen digitaalisia esityksiä. Ei ole yllättävää, että monet alla olevista verkkosivuista sisältävät muita kangasta liittyviä elementtejä, kuten hienot ompeleet, tekstuurit ja muut orgaaniset elementit.
nauhat
Kirjeopettaja
Nauha kuvastaa nimeä hyvin Kirjeopettaja tässä. Lisäksi sivu on määritelty yhtenä sarakkeena; nauhan otsikko rohkaisee käyttäjää aloittamaan matkansa ylhäältä ja virtaamaan sieltä.
Ribot
Ribot Nauha on melko hienovarainen. Kukoistus elävöittää sivun ja tiivistää yrityksen keskittymän kaksisanaiseen tekstiviivaan. Täydellinen tapa asettaa odotuksia, koska yrityksen nimi ei kerro mitä se tekee.
Alex Pierce
Kun teksti on niin valtava kotisivulla Alex Pierce S portfolio, se olisi melko rohkea elementti tasapainottaa sitä. Tässä tapauksessa nauha tekee hyvää työtä poistamalla otsikko. Rakastan myös, kuinka taitettu kerros nauhan keskelle lisää tarkennuksen suunnittelijaan.
Rockaholic!
Melko epätavallista Rockaholic! , nauha ohjaa käyttäjän huomion alaspäin, pelaa hienosti sivun pystysuorassa selauksessa ja auttaa käyttäjää kaivaa sisältöä.
Paris Jones
Nauhan herkullinen punainen tekee bändistä Paris Jones ponnahtaa tänne. Vaikka tekstinkäsittely on melko hienovarainen, rohkea malli takaa, että huomaat sen.
Blog en Bois
Päällä Blog en Bois , nauhan nuolen vaikutus on erityisen voimakas, mikä johtuu paljolti kontrastisesta pimeästä keltaisen takaa. Minusta on tullut takaisin logoon yhä uudelleen. Se on varmasti tehokas tapa kiinnittää brändi käyttäjän mieleen.
HTML5 Boilerplate
Suosittu sivusto HTML5 Boilerplate käyttää nauhoja kiinnittääkseen huomion sivun tärkeimpiin toimintoihin. Rakastan, että nauhat tekevät työtä ilman sanoja "Lataa täältä." Nauhojen ja tarrojen yhdistelmä kertoo, että tämä on paikka ladata resurssit.
Cantilever Fish & Chips
Nauhan tarkoitus ei ole niin selkeä Cantilever Fish & Chips . Yksityiskohtia siitä, että se on avoinna 7 päivää viikossa, näyttäisi suhteellisen vähäiseltä, mutta oletettavasti se on tärkeä ero tässä ravintolassa.
Wells Riley
Wells Riley on täydellinen esimerkki nauhoista estetiikan palveluksessa. Nauhat näyttävät hyvältä ja tulevat sivun painopisteeksi.
Dhiraj Singh Karki
Rakastan aina malleja, jotka poikkeavat sopimuksesta. UI-suunnittelija Dhiraj Singh Karki on vain tällainen verkkosivusto. Täällä nauhaa käytetään melko taitavasti, eikä pakkaus ole lähes sama visuaalinen booli kuin muilla verkkosivuilla. Se sekoittuu suoraan sivuun, mutta siinä on tarpeeksi tyyliä, jotta malli pysyisi liian yksinkertaisena.
Maaorava
Maaorava on hyvä esimerkki siitä, kuinka hyvin nauha voi toimia orgaanisten elementtien kanssa. Ensisijaisen navigoinnin ympärillä oleva nauha sopii täydellisesti alla oleviin rikkaisiin kuvioihin. Se myös pitää navigointia häviämästä voimakkaan taideteoksen kesken.
Ryan M. Stryker
Jälleen kerran näemme nauhan voiman keskittää huomiota. Sen keskeinen sijainti ja rohkea kontrasti takaavat, että et kaipaa Ryan M. Stryker N nimi.
Tunnisteet
Ennea
Olettaen että Ennea on vaatetusbrändi, ei ole mikään yllätys, että tunniste sisältää logon ja tuotenimen. Joskus yksinkertainen lähestymistapa toimii parhaiten.
Philip Meissner Design
Tunniste sisältää päävalikkoa Philip Meissner Design . Yleensä haluaisin poistaa tämän epätavallisen linkkikokoonpanon, mutta järjestely ja värit varmistavat, että linkit ovat helposti löydettävissä.
Tinkering Monkey
Mikä voisi olla tärkeämpää sähköisen kaupankäynnin verkkosivustolla ja sitten ohjata käyttäjiä tarkistamaan? Tinkering Monkey on mukava pieni, lihavoitu merkki, jonka avulla käyttäjät voivat täydentää ostoksensa.
Parkbud
Kaikilla älypuhelinten sovelluksilla, hyvien on ilmoitettava keskeiset erittelijät. Parkbud on ilmainen, ja rohkea punainen tunniste varmistaa, että tiedät sen. Tunniste on kätevästi poissa tieltä, mutta aina näkyvissä silmänurkastasi, muistuttamalla, että tämä maukas sovellus on ilmainen.
lense
lense on täydellinen esimerkki tunnisteista, jotka on yhdistetty kudoskuvioihin. Ilmoita ensin teksturoitu denim tausta; myös päävarusteiden alla oleva sorkkatehtävä tuntuu erittäin paljon tekstiilisuuntautuneelta.
Coreymade
Pienen yksityiskohdan ansiosta rakastan todella sitä, miten kirjoitusfontti tekee tagista Coreymade tuntuu enemmän kuin tunniste paitalla kuin normaali verkkosivun logo. Ja pseudo-3D-tehoste tekee tagistä todella ponnahduksen katsojalle.
Netastica
Tunniste Netastica on lähinnä siellä, että näyttää hyvältä, vaikka se sisältää edelleen tärkeitä tietoja ja linkit vierailijoille kotisivulle.
Ryan Havoc Taylor
Tunniste on niin näkyvässä paikassa Ryan Havoc Taylor Sivuston, että se ei tarvitse paljon kontrastia erottumaan. Se toimii hyvin verkkosivuston virran kanssa ja suorittaa tehtävänsä vaivattomasti.
Nauhat ja tunnisteet
Tämän esittelyn viimeisessä osassa tarkastelemme verkkosivustoja, joissa käytetään sekä nauhoja että tunnisteita.
ClearSpan Media
Nauhat ja tunnisteet kulkevat erittäin mukavasti yhteen, kuten on osoitettu ClearSpan Media . Täältä löydät myös kankaita, joissa on kuviot, ompeleet ja hienot värit. Nämä kaksi merkintää ylhäällä ja alhaalla oleva nauha toimivat eräänlaisena kiinnostuksen piireinä käyttäjälle.
Krichevtsova Alexandra
Sillä aikaa Krichevtsova Alexandra Sivuston sisältö on varsin paljaita, tarra ja nauha lisää ylimääräistä elämää keskeisiin elementteihin. Voit nauttia tästä verkkosivustosta tietämättä, mitä henkilö tekee.
Wes Bos
Suurin osa tämän kokoelman verkkosivuista on melko suuria nauhoja. Ei niin Wes Bos . Hänen on paljon pienempi, hyvä muistutus siitä, että heidän ei tarvitse hallita muotoilua toimimaansa.
johtopäätös
Tämän kokoelman verkkosivujen laadun vuoksi yksikään näistä suunnittelijoista ei halunnut rakentaa jotain "trendikästä". Sen sijaan he joutuivat kohtaamaan tarpeita, ja näistä tarpeista syntyi tehokas visuaalinen laite, joka kiinnittää huomiota ja välittää kriittisiä tietoja ja korostetaan tärkeitä toimia.
Jos haluat hienoja CSS-pohjaisia nauhoja omalle verkkosivustolle, web-pohjainen 3-D nauha-generaattori on kätevä työkalu työhön.