Fitas e Tags no Web Design
As tendências podem nascer tão silenciosa e sutilmente que raramente as notamos.
E quando você pesquisa centenas de sites, muitas vezes você vê padrões que, de outra forma, você perderia. Um desses padrões é o uso freqüente de tags e fitas.
Esses pequenos floreios tornaram-se cada vez mais populares. Este artigo aborda os dois elementos porque eles são usados juntos com tanta freqüência.
Embora as fitas sejam auto-explicativas, por tags, quero dizer as etiquetas falsas que ficam penduradas no topo da tela, como uma tag em uma camiseta.
Os sites que usam esses elementos são realmente excelentes em qualidade. Juntar este lindo mostruário acabou sendo incrivelmente fácil. Poucas tendências são assim: geralmente é preciso percorrer muitos exemplos ruins para encontrar os saborosos.
Por que usar essas fitas e tags?
Tags são úteis porque atraem a atenção do usuário criando a ilusão de profundidade. Eles empurram seu conteúdo para o usuário. As tags também são frequentemente estilizadas com punch, seja por meio de efeitos 3D ou de cores contrastantes ousadas.
Esses fatores tornam a tag uma localização privilegiada para informações críticas: logotipos, navegação, calls to action. Nós vemos isso no mostruário abaixo. Naturalmente, como sempre, avalie suas necessidades antes de implementar esse elemento em seu próprio site.
A fita compartilha as mesmas qualidades, o que, de fato, é a razão pela qual a encontramos e a etiqueta se reúne com tanta frequência: chama a atenção e é um ótimo lugar para informações importantes. A forma da fita a diferencia da tag; as duas setas em suas extremidades parecem apontar para o conteúdo interno, direcionando sutilmente a atenção do usuário.
Uma família de estilos
Outra razão pela qual esses dois elementos costumam ser encontrados juntos em sites é que eles são representações digitais do tecido. Não é surpresa, portanto, que muitos dos sites abaixo tenham outros elementos relacionados ao tecido, incluindo costura sutil, texturas e outros elementos orgânicos.
Fitas
Aprendiz de carta
A fita molda bem o nome Aprendiz de carta Aqui. Além disso, a página é apresentada como uma única coluna; o título com fitas encoraja o usuário a iniciar sua jornada no topo e a descer de lá.
Ribot
Ribot A faixa de opções é bastante sutil. O floreio anima a página, enquanto soma o foco da empresa em um slogan de duas palavras. Uma maneira perfeita de definir expectativas, porque o nome da empresa não nos diz o que faz.
Alex Pierce
Com o texto sendo tão grande na home page do Alex Pierce Do portfólio, seria necessário um elemento bastante ousado para equilibrar isso. Nesse caso, a fita faz um bom trabalho ao ajustar o cabeçalho. Eu também amo como a camada dobrada no meio da fita adiciona foco ao nome do designer.
Rockaholic!
No bastante incomum Rockaholic! , a faixa de opções direciona a atenção do usuário para baixo, tocando bem na rolagem vertical do site e ajudando o usuário a acessar o conteúdo.
Paris Jones
O delicioso vermelho da fita faz o nome da banda Paris Jones estourar aqui. Embora o tratamento do texto seja bastante sutil, o padrão em negrito garante que você o perceba.
Blog em Bois
Em Blog em Bois , o efeito da flecha da fita é especialmente poderoso, em grande parte devido ao contraste escuro atrás do amarelo. Eu me vejo atraído de volta para o logotipo uma e outra vez. É certamente uma maneira poderosa de incorporar a marca na mente do usuário.
Boilerplate HTML5
O site popular Boilerplate HTML5 usa fitas para chamar nossa atenção para os itens de ação mais importantes da página. Eu adoro que as fitas façam seu trabalho sem ter que dizer “Faça o download aqui”. A combinação de fitas e rótulos nos diz que é para baixar os recursos.
Peixe Cantilever e Chips
O propósito da fita não é tão claro Peixe Cantilever e Chips . O detalhe de ser “Aberto 7 dias por semana” parece relativamente menor, mas presumivelmente é uma distinção importante para este restaurante.
Wells Riley
Wells Riley é um exemplo perfeito de fitas a serviço da estética. As fitas ficam ótimas aqui e se tornam o foco da página.
Dhiraj Singh Karki
Eu sempre adoro designs que partem da convenção. O portfólio de designer de interface do usuário Dhiraj Singh Karki é apenas um desses sites. Aqui, a fita é usada de forma bastante inteligente e não tem quase o mesmo impacto visual que em outros sites. Ele se mistura diretamente na página e ainda tem estilo suficiente para evitar que o design pareça simples demais.
Esquilo
Esquilo é um ótimo exemplo de como uma fita pode funcionar com elementos orgânicos. A fita ao redor da navegação primária se encaixa perfeitamente com as ilustrações ricas abaixo. Também evita que a navegação se perca entre a poderosa obra de arte.
Ryan M. Stryker
Mais uma vez, vemos o poder da fita para focar a atenção. Sua localização central e contraste arrojado garantem que você não perca Ryan M. Stryker Nome de
Tag
Enea
Dado que Enea é uma marca de roupa, não é surpresa que a etiqueta aqui contenha o logotipo e o nome da marca. Às vezes, uma abordagem direta funciona melhor.
Philip Meissner Design
A tag contém a navegação principal no Philip Meissner Design . Normalmente eu ficaria desconcertado com essa configuração incomum de links, mas o arranjo e as cores aqui garantem que os links sejam super fáceis de encontrar.
Mexer Macaco
O que poderia ser mais importante em um site de comércio eletrônico, em seguida, orientando os usuários a fazer o checkout? Mexer Macaco tem uma pequena tag em negrito para ajudar os usuários a concluir a compra.
Parkbud
Com todos os aplicativos para smartphones disponíveis, os bons precisam comunicar seus principais diferenciais. Parkbud é grátis, e a tag vermelha em negrito garante que você a saiba. A tag está bem fora do caminho, mas sempre visível do canto do olho, lembrando que esse aplicativo saboroso é gratuito.
Lente
Lente é um exemplo perfeito de tags combinadas com texturas de tecido. Observe primeiro o fundo denim texturizado; Além disso, a borda recortada sob a navegação principal é muito orientada para os têxteis.
Coreymade
Enquanto um pequeno detalhe, eu realmente amo o jeito que a fonte do script faz a tag Coreymade sinta-se mais como uma tag em uma camiseta do que um logotipo normal do site. E o efeito pseudo-3D faz com que a tag seja realmente pop para o espectador.
Netastica
A tag em Netastica está principalmente lá para parecer bonito, embora ainda contenha informação importante e links os visitantes à home page.
Ryan Havoc Taylor
A tag está em um local tão visível Ryan Havoc Taylor Website que não precisa de muito contraste para se destacar. Ele funciona bem com o fluxo do site e executa seu papel sem esforço.
Fitas e tags
Na parte final deste mostruário, veremos sites que usam fitas e tags.
Mídia ClearSpan
Fitas e tags combinam muito bem, como mostrado por Mídia ClearSpan . Aqui você também encontrará tecidos com padrões, pontos e variações sutis de cores. As duas tags no topo e a fita abaixo funcionam como uma espécie de círculo de interesse para o usuário.
Krichevtsova Alexandra
Enquanto Krichevtsova Alexandra O site da Web é bastante barebones no conteúdo, a tag e a fita adicionam vida extra aos principais elementos. Você pode desfrutar deste site sem saber o que a pessoa faz.
Wes Bos
A maioria dos sites desta coleção tem fitas bastante grandes. Não é assim com Wes Bos . Seus são muito menores, um bom lembrete de que eles não precisam dominar o design para executar sua função.
Conclusão
Dada a qualidade dos sites desta coleção, nenhum desses designers se propôs a construir algo “moderno”. Ao contrário, eles se depararam com um conjunto de necessidades e, a partir dessas necessidades, surgiram um dispositivo visual eficaz para focalizar a atenção, comunicando informações críticas. e destacando ações importantes.
Se você quiser algumas boas fitas baseadas em CSS para o seu próprio site, a Web-based Gerador de fita 3-D é uma ferramenta útil para o trabalho.