1. Uso "desequilibrado" do espaço

O espaço pode ter uma enorme influência em um projeto de design. Ela afeta o fluxo visual e pode gerar engajamento.

Ultimamente, muitos projetos adotaram uma abordagem mais equilibrada e simétrica ao uso do espaço, mas isso está mudando novamente com mais sites que apresentam um uso "desequilibrado" do espaço. (E é muito bom.)

Estamos chamando essa tendência de "desequilibrada", porque o espaço aberto pode ou não usar um contrapeso para impedir que o design pareça desequilibrado. Existem várias maneiras diferentes de fazê-lo: com espaço em branco, em imagens, com camadas e como os elementos são empilhados e com padrões. Essa pode ser uma técnica bastante desafiadora, pois os pontos de interrupção responsivos podem mudar drasticamente a aparência do espaço se você não tomar cuidado.

Cada um desses projetos aborda o espaço "desequilibrado" de uma maneira diferente e igualmente elegante.

O Yukon 1000 cria dois bits diferentes de espaço desequilibrado de duas maneiras diferentes:

  • No lado esquerdo da tela, com espaço em branco de fundo para o qual a imagem não se estende e inclui camadas de texto.
  • Na imagem em si com uma forma distinta e muito espaço aberto na água.

Ambos os elementos são desequilibrados quando estão sozinhos, mas combinados o espaço aberto à esquerda e o espaço aberto na imagem puxam o olho de volta para a área de conteúdo intermediária do design.

yukon

O site Art of Tea usa espaço na imagem com um bom empilhamento e o uso de formas no posicionamento de objetos em um espaço desequilibrado. Observe como o lado esquerdo da imagem é comparado com a desolação do lado direito. Até o texto se estende apenas parcialmente.

Essa estética ajuda a atrair os olhos pela tela para ler o texto e depois passar o rolo de papel.

chá

O Growcase pode ser um estudo de caso no uso do espaço em si, mas com foco na parte superior da tela. A identidade da marca se estende por cerca de um terço do caminho e é alcançada por nada além de um pequeno trio de links de mídia social / portfólio.

Também há muito espaço abaixo e espaços negativos em cada um dos blocos do portfólio. As áreas em preto o guiam pelo design, esteja você pronto para movê-lo ou não.

growcase

2. Novos conceitos do controle deslizante de imagem

Faz tanto tempo que os designers de sites praticamente declararam que os sliders estavam mortos.

Eles voltaram.

Mas eles parecem muito diferentes e são muito mais interessantes.

A tendência no design de slider é usar elementos deslizantes com animações e formas interessantes que não se parecem com sliders. O interessante são os pontos em comum entre eles - mesmo que pareçam espetacularmente diferentes.

Cada um desses exemplos de controle deslizante:

  • Usa um ponteiro de círculo que se expande quando você passa o mouse sobre um elemento de clique
  • Dicas visuais, como setas de navegação, estão presentes
  • Cada site apresenta algum tipo de conteúdo do portfólio
  • As imagens do controle deslizante podem ficar isoladas e não são cobertas com palavras ou outros elementos

Além disso, cada exemplo possui alguns truques divertidos.

O Clarity usa um controle deslizante que se move automaticamente com base na posição do mouse e em todas as imagens, dentro do quadro do círculo.

claridade

O Revise Concept também usa um controle deslizante de rolagem automática com imagens que se movem na diagonal. Você também pode usar as setas para rolar para frente e para trás por conta própria.

revisar

O Prezman apenas visualiza o controle deslizante na página inicial, mas clique sobre ele e ele se expande para tela cheia para mostrar uma variedade de partes do portfólio com animação simples, mas elegante.

prezman

3. Dados do Coronavírus

O sinal mais óbvio do coronavírus no design do site é o número de sites que contêm informações sobre o vírus. As tendências parecem ser designs de sites que fornecem diferentes tipos de visualizações de dados sobre o COVID-19.

O Google tem uma página (simples no formato real do Google), mas esses exemplos levam os dados a novos níveis visuais. As visualizações de dados variam nos dados apresentados - local versus mundial - e na forma como as informações são reunidas.

Embora todos esses sites tenham finalidades distintas, eles fornecem bons exemplos de como lidar com grandes quantidades de dados em um formato visual.

O Coronavirus Now pega uma variedade de dados e usa potes virtuais de bolas para mostrar relações proporcionais entre três pontos de dados. O que é realmente interessante nesse design é o uso de animação e rotulagem para tornar os dados compreensíveis.

coronanow

O Painel de dados global COVID-19 divide informações e pontos de dados diferentes em vários tipos de gráficos - barra, círculo e muito mais. O uso de visualizações diferentes pode facilitar para as pessoas que entendem e compreendem os dados de maneiras diferentes para entender melhor as informações.

coviddata

O Mapa de Índice de Vulnerabilidade da Comunidade COVID-19 usa um sistema de mapeamento para mostrar onde possíveis surtos. O uso de dados do mapa pode ser uma maneira mais compreensível de visualizar dados complicados.

coronamap

Conclusão

Embora duas dessas tendências de design de sites não tenham nada a ver com o coronavírus, começaremos a ver mais coisas que são influenciadas por esse problema de saúde em todo o mundo. Preste atenção e é provável que o design comece a mudar para elementos com menos grupos grandes de pessoas, o uso de máscara facial e as imagens sejam mais comuns, e mesmo as cores podem desbotar em tons mais suaves. Já estamos vendo o impacto no design e é provável que continue a influenciar as tendências.