Tendência de design: quase muitas camadas

Você já notou essa tendência no design de sites: camadas sobre camadas? Eu sinto que tenho visto mais disso em todos os lugares recentemente, e é uma polarização!

Esta é uma técnica de design que pode variar de incrível em termos de recursos visuais e usabilidade para desastroso rapidamente. É claro que existe um meio-termo onde funciona, mas é muito fácil ir longe demais!

Aqui, veremos algumas maneiras de usá-lo de maneira mais eficaz e um pouco mais sobre o que é essa tendência de design.

Identificando a tendência de design

wnpa 1
acca

Os sites que apresentam essa tendência incluem várias camadas que se unem para contar uma história visual. As camadas geralmente são interativas e incluem efeitos animados ou de rolagem, mas nem sempre é esse o caso. (Às vezes, esses designs são estáticos com uma aparência em camadas.)

Três camadas é o padrão para a maioria dos elementos aqui:

  • Plano de fundo: geralmente uma imagem, textura ou camada estática
  • Meio-termo: Muitas vezes algum tipo de imagem ou elemento interativo
  • Primeiro plano: geralmente inclui tipografia ou imagens (as camadas do meio e do primeiro plano às vezes trabalham juntas (ou inversamente) para criar o design completo

Caracteristicas principais

wp architects

Esses designs tendem a ter muitas partes móveis – literalmente. As ações de rolagem geralmente ajudam a dar vida às camadas para que você possa ver as diferenças em cada uma e como elas se unem.

A interatividade de rolagem é uma grande parte desses projetos, seja ajudando os elementos a trabalharem juntos ou movendo os usuários pelo design para encontrar mais camadas de conteúdo. Nem todos esses projetos apresentam essa tendência de design obviamente na página inicial, às vezes está abaixo da rolagem ou até mais fundo no site.

O truque para fazê-lo funcionar bem é reunir elementos de design que pareçam harmoniosos. Isso inclui tudo, desde cor até tamanho, forma e escala. Se as camadas não parecem funcionar juntas, isso pode criar problemas de usabilidade que podem impedir que o design seja eficaz.

Outra coisa que você notará nesses projetos é que muitos deles parecem apresentar uma camada com um elemento estilo cartão. Essa técnica de design é popular há algum tempo e continua com essa tendência.

Dicas para usar esta tendência de web design

lostmechanics

O design geral de cada site que usa esse estilo e tendência pode ser bem diferente porque não tem nada a ver com elementos como cor, tipografia ou imagens.

Mas cada um desses elementos tem um impacto. Você vai querer pensar em como usá-los juntos para criar uma história visual que seja envolvente e aproveite ao máximo cada camada.

A consideração mais importante ao usar essa tendência de design é pensar em como as camadas irão interagir umas com as outras. Com ação de rolagem ou outro movimento, o que o elemento faz? Idealmente, você deseja que as camadas interajam de alguma maneira que pareça e pareça proposital.

No exemplo acima para Lost Mechanics Interactive Studio, há uma camada de fundo preto, uma camada de texto, uma camada de imagem que se funde com a camada de texto e uma quarta camada de falha que está em cima de tudo para finalizar esse efeito de vídeo divertido.

A rolagem inclui outras camadas que se empilham com texto, imagens e até elementos de cartão. Embora o design esteja ocupado, ele funciona perfeitamente e tudo é fácil de usar e entender. O conteúdo é organizado e este é um exemplo sólido de como usar várias camadas de forma eficaz.

Coisas para estar ciente

Usar essa tendência de design exige cuidado e planejamento. E usar uma técnica eficaz não é necessariamente fácil.

Duas coisas importantes para estar ciente incluem:

  • Como as camadas interagem e se sobrepõem
  • Capacidade de resposta

Esses elementos estão intimamente relacionados. As interações precisam ser projetadas de tal forma que, mesmo com camadas, tudo no site seja fácil de entender e ler. Este é o maior desafio com esta tendência de design e que está em falta em muitos dos projetos que a utilizam. A legibilidade, em particular, torna-se uma preocupação para muitos desses projetos.

A capacidade de resposta é sempre uma consideração de design de site, mas uma vez que você tenha camadas certas em um tamanho, elas podem não funcionar da mesma maneira em outras. A capacidade de resposta pode ser bastante complicada com tantas partes móveis (literais).

3 exemplos que amamos

Existem alguns designs de sites que fazem um ótimo trabalho com essa tendência que fornecem inspiração para como montar esses projetos.

O levantamento do naufrágio

shipwreck

O Shipwreck Survey usa camadas elegantemente com um esquema de cores consistente e inserções de fotos entre uma imagem de fundo e tipografia de primeiro plano que adicionam uma camada extra de contexto. Os designers continuam usando camadas com elementos de imagem em toda a rolagem para ajudar a reunir a sensação visual completa. O outro bônus aqui para as pequenas imagens é que você tem uma sensação maior da aventura neste site, essas pequenas imagens são o que vendem e o efeito em camadas ajudou a incorporar mais delas no design.

Xarope

sirup

Sirup usa muito movimento, fontes divertidas, uma imagem e até uma sensação de vídeo para montar um pacote em camadas que é envolvente e interessante. Os engajamentos de rolagem também são bons, adicionando uma sensação tridimensional à imagem principal. Um dos melhores elementos de camadas aqui é uma dica de transparência que une tudo.

Gaivotas elegantes

seagulls

Elegant Seagulls usa várias camadas de uma forma que é menos em seu rosto com um efeito peek-a-boo. O fundo é um carretel de vídeo de pássaros, a camada do meio é o elemento de respingo sólido branco e há um topo interativo mais tarde com o botão redondo de call-to-action que se move com o mouse. O efeito de fundo de vídeo é usado em vários locais do design de forma elegante. (Certifique-se também de clicar no menu para um pequeno efeito de design com cartões lá.)

Conclusão

Embora essa tendência de design não seja a mais fácil de realizar, ela pode ser altamente visual e interativa quando bem feita. Para fazer o melhor uso dele, considere essa técnica de design quando você também tiver camadas de conteúdo.

Combinar o conteúdo com a estética do design é a melhor maneira de criar um projeto ideal para os visitantes do site.

Source link

Amazon Coaching Grátis

Venda 25K Dólares com apenas um Produto no Amazon.

Artigos Relacionados

LEAVE A REPLY

Please enter your comment!
Please enter your name here

cinco × 5 =

- Ana Pereira -spot_img

Últimos Artigos