Nastri e tag in Web Design
Le tendenze possono nascere così silenziosamente e sottilmente che raramente le notiamo.
E quando controlli centinaia di siti web, spesso vedi schemi che altrimenti ti mancheranno. Uno di questi è l'uso frequente di tag e nastri.
Questi piccoli svolazzi sono diventati sempre più popolari. Questo articolo affronta i due elementi perché vengono utilizzati insieme così frequentemente.
Mentre i nastri si spiegano da soli, per tag intendo le etichette false che pendono dalla parte superiore dello schermo, come un'etichetta su una maglietta.
I siti web che utilizzano questi elementi sono davvero di qualità eccezionale. Mettere insieme questa splendida vetrina si è rivelata straordinariamente facile. Poche tendenze sono come questa: di solito si devono guadare attraverso molti esempi poveri per trovare quelli gustosi.
Perché usare questi nastri e tag?
I tag sono utili perché attirano l'attenzione dell'utente creando l'illusione della profondità. Spingono i loro contenuti all'utente. I tag sono spesso disegnati con il punch, sia con effetti 3D o con colori contrastanti in grassetto.
Questi fattori rendono il tag una posizione privilegiata per le informazioni critiche: loghi, navigazione, inviti all'azione. Lo vediamo nella vetrina sottostante. Naturalmente, come sempre, valuta le tue esigenze prima di implementare questo elemento sul tuo sito web.
Il nastro condivide le stesse qualità, che è davvero la ragione per cui lo troviamo e il tag insieme così spesso: attira l'attenzione ed è un ottimo posto per informazioni importanti. La forma del nastro lo distingue dal tag, però; le due frecce alle sue estremità sembrano indicare il contenuto all'interno, indirizzando sottilmente l'attenzione dell'utente.
Una famiglia di stili
Un altro motivo per cui questi due elementi si trovano spesso insieme sui siti Web è che sono entrambe rappresentazioni digitali del tessuto. Non sorprende quindi che molti dei siti sottostanti presentino altri elementi correlati al tessuto, tra cui impunture sottili, trame e altri elementi organici.
nastri
Letter Learner
Il nastro incornicia bene il nome Letter Learner Qui. Inoltre, la pagina è strutturata come una singola colonna; il titolo a nastro incoraggia l'utente a iniziare il proprio viaggio in alto e a scorrere da lì.
Ribot
Ribot Il nastro è abbastanza sottile. Il fiorire ravviva la pagina, riassumendo l'attenzione dell'azienda in uno slogan a due parole. Un modo perfetto per impostare le aspettative, perché il nome della società non ci dice cosa fa.
Alex Pierce
Con il testo che è così enorme sulla home page di Alex Pierce Il suo portafoglio, ci vorrebbe un elemento piuttosto audace per bilanciarlo. In questo caso, il nastro fa un buon lavoro di impostazione dell'intestazione. Mi piace anche come lo strato piegato nel mezzo del nastro aggiunga attenzione al nome del designer.
Rockaholic!
Sul piuttosto insolito Rockaholic! , il nastro dirige l'attenzione dell'utente verso il basso, giocando piacevolmente nel rotolo verticale del sito Web e aiutando l'utente a scavare nel contenuto.
Paris Jones
Il delizioso rosso del nastro rende il nome della band Paris Jones saltar fuori qui. Anche se il trattamento del testo è piuttosto sottile, lo schema in grassetto ti assicura di notarlo.
Blog in Bois
Sopra Blog in Bois , l'effetto della freccia del nastro è particolarmente potente, in gran parte a causa del contrasto scuro dietro il giallo. Mi ritrovo ritratta al logo più e più volte. È certamente un modo potente per incidere il marchio nella mente dell'utente.
Caldaia HTML5
Il famoso sito web Caldaia HTML5 usa i nastri per attirare la nostra attenzione sugli elementi di azione più importanti sulla pagina. Mi piace il fatto che i nastri facciano il loro lavoro senza dover dire "Scarica qui". La combinazione di nastri e etichette ci dice che qui è dove scaricare le risorse.
Pesce e patatine a sbalzo
Lo scopo del nastro non è così chiaro Pesce e patatine a sbalzo . Il dettaglio dell'essere "Aperto 7 giorni a settimana" sembrerebbe relativamente minore, ma presumibilmente è una distinzione importante per questo ristorante.
Wells Riley
Wells Riley è un perfetto esempio di nastri al servizio dell'estetica. I nastri sembrano grandi qui e diventano il punto focale della pagina.
Dhiraj Singh Karki
Amo sempre i disegni che partono dalla convention. Il portfolio del progettista dell'interfaccia utente Dhiraj Singh Karki è solo un sito web. Qui, il nastro è usato in modo piuttosto intelligente e non ha quasi lo stesso impatto visivo di altri siti web. Si integra perfettamente nella pagina e tuttavia ha uno stile sufficiente per impedire al design di apparire troppo semplice.
Chipmunk
Chipmunk è un grande esempio di quanto bene un nastro può lavorare con elementi organici. Il nastro attorno alla navigazione primaria si adatta perfettamente alle ricche illustrazioni qui sotto. Mantiene anche la navigazione da perdersi tra le potenti opere d'arte.
Ryan M. Stryker
Ancora una volta vediamo la potenza del nastro focalizzare l'attenzione. La sua posizione centrale e il contrasto audace fanno sì che non manchi Ryan M. Stryker Il nome
tag
Ennea
Dato che Ennea è un marchio di abbigliamento, non sorprende che il tag qui contenga il logo e il nome del marchio. A volte un approccio diretto funziona meglio.
Philip Meissner Design
Il tag contiene la navigazione principale attiva Philip Meissner Design . Di solito, rimpiango questa insolita configurazione di collegamenti, ma la disposizione e i colori qui assicurano che i collegamenti siano estremamente facili da trovare.
Scimmia armeggiare
Cosa potrebbe essere più importante su un sito di e-commerce, quindi guidare gli utenti a fare il check-out? Scimmia armeggiare ha un bel piccolo tag grassetto per aiutare gli utenti a completare il loro acquisto.
Parkbud
Con tutte le applicazioni per smartphone là fuori, quelle buone hanno bisogno di comunicare i loro principali elementi di differenziazione. Parkbud è gratuito e l'etichetta in grassetto rosso fa in modo che tu lo sappia. L'etichetta è ben nascosta ma sempre visibile con la coda dell'occhio, per ricordarti che questa gustosa app è gratuita.
Lente
Lente è un perfetto esempio di tag combinati con trame di tessuto. Si noti prima lo sfondo denim texture; inoltre, il bordo smerlato sotto la navigazione principale sembra molto orientato al tessile.
Coreymade
Mentre un piccolo dettaglio, mi piace molto il modo in cui il carattere dello script fa il tag Coreymade sembra più un'etichetta su una maglietta che un normale logo del sito web. E l'effetto pseudo-3D rende il tag davvero pop per il visualizzatore.
Netastica
Il tag su Netastica è principalmente lì per sembrare bello, anche se contiene ancora informazioni importanti e collega i visitatori alla home page.
Ryan Havoc Taylor
Il tag è in una posizione così visibile su Ryan Havoc Taylor Sito web che non ha bisogno di molto contrasto per risaltare. Funziona bene con il flusso del sito Web e svolge il suo ruolo senza sforzo.
Nastri e tag
Nella parte finale di questa vetrina, esamineremo i siti Web che utilizzano entrambi i nastri e i tag.
ClearSpan Media
I nastri e le etichette vanno molto bene insieme, come mostrato da ClearSpan Media . Qui troverai anche tessuti con motivi, punti e sottili variazioni di colore. I due tag in alto e il ribbon in basso funzionano come una sorta di cerchio di interesse per l'utente.
Krichevtsova Alexandra
Mentre Krichevtsova Alexandra Il contenuto del sito Web è piuttosto scarno, il tag e il nastro aggiungono vita extra agli elementi chiave. Potresti goderti questo sito senza nemmeno sapere cosa fa la persona.
Wes Bos
La maggior parte dei siti Web di questa raccolta hanno nastri piuttosto grandi. Non così con Wes Bos . Le sue sono molto più piccole, un buon promemoria che non hanno bisogno di dominare il design per svolgere la loro funzione.
Conclusione
Data la qualità dei siti web di questa collezione, nessuno di questi designer ha deciso di creare qualcosa di "trendy". Piuttosto, si sono trovati di fronte a una serie di esigenze e da quelle esigenze è emerso un efficace dispositivo visivo per focalizzare l'attenzione, comunicare informazioni critiche e evidenziando le azioni importanti.
Se vuoi dei bei nastri basati su CSS per il tuo sito web, il web-based Generatore di nastri 3D è uno strumento utile per il lavoro.