Tendências Essenciais de Design, dezembro de 2016
Você já se deu conta de que certo elemento de design continua aparecendo? Mesmo esses pequenos detalhes que parecem um tanto insignificantes podem ser indicadores de tendências de design. Isso é particularmente verdadeiro com os elementos do roundup deste mês.
Cada uma dessas tendências - bordas brancas emoldurando um design da Web, cinemagraphs e pequenas animações de carregamento - são detalhes aparentemente simples que aprimoram a experiência visual dos usuários.
Veja o que é tendência no design este mês:
1) bordas brancas
Mais projetos da Web estão usando bordas brancas ou enquadradas ao redor do perímetro do design no navegador da web. É uma nova reviravolta em uma ideia antiga quando mais sites foram criados para determinados tamanhos e o enquadramento foi usado para larguras ímpares de navegador.
É algo que desapareceu à medida que mais designers optaram por designs ágeis e de largura total.
O novo toque com enquadramento é interessante e é uma ótima maneira de criar uma tela para o design. A maioria dos sites que usam essa tendência inclui uma borda branca - comum, mas não obrigatória - em torno do design. Tem alguns pixels de largura e é comumente colocado em torno de três ou quatro lados do desenho. (Alguns estão optando por deixar o quadro na parte inferior do design para incentivar a rolagem).
O bom sobre a borda branca é que o design é limpo com linhas brancas que podem ajudar a dar foco a escolhas de cores fortes, chamar a atenção da borda da tela para outros elementos claros (como caixas de texto ou chamadas à ação) e a borda pode ajudar a criar uma tela de plano de fundo para rolagem de paralaxe ou outros efeitos animados.
Cervejaria de Camden Town faz isso excepcionalmente bem. O enquadramento branco preenche os elementos do design para criar profundidade e foco para o usuário. A separação de branco separa cada nova seção de conteúdo na tela e contribui para a organização geral do design. (Além disso, os toques em branco realçam a forte paleta de cores vermelha e preta para evitar que a combinação pareça excessiva.)
2) Cinemagraphs
Cinemagraphs são fotos com um elemento de movimento nelas. Pode ser qualquer coisa, desde uma foto de uma pessoa que pisca os olhos até o movimento sutil da nuvem no céu, onde nada mais se move. Embora os usos mais comuns da tendência de design ainda pareçam estar nos anúncios e nas mídias sociais, os web designers também estão começando a incorporar essa técnica de "foto ao vivo".
Isso funciona porque os usuários ficam intrigados com o movimento. É eficaz por muitas das mesmas razões que o vídeo é uma boa opção para chamar a atenção do usuário. Movimento e ação são envolventes. É interessante. Parece real.
Quando se trata de trabalhar com cinemagraphs, o bônus é que você pode criar um design com movimento, mas sem parte da alta produção que vem com um projeto de vídeo.
O truque para fazer cinemagraphs trabalho é enraizar o movimento na realidade. Mesmo que a cena seja mais imaginada, como Paris monocromática , as leis da física devem se aplicar ao movimento na tela. A água deve fluir a jusante, por exemplo, a gravidade deve ser uma força em como o movimento ocorre.
O movimento também precisa ser simples e sutil. Muito movimento e um vídeo pode ser uma opção melhor. O que atrai os usuários para uma cinemagrafia é esse elemento de surpresa. O que parece uma foto em uma imagem de herói, na verdade, tem algo acontecendo nela. Esse pequeno divot ajudará a atrair pessoas, a mantê-las envolvidas com o design por mais tempo e, com sorte, resultará em uma conversão de website.
3) minúsculos animações de carregamento
Os tempos de carregamento são um grande problema. Mas nem sempre é possível contabilizar a velocidade da rede em que o usuário está. é aí que minúsculas animações de carregamento podem se tornar um grande negócio.
O que é diferente na pequena tendência de animação de carregamento é que às vezes você a vê, às vezes você não cria um elemento. De qualquer forma, a equipe de design tomou cuidado especial para garantir que todos os usuários acessem o site com uma experiência positiva.
Essas minúsculas animações são identificáveis pelo fato de não fazerem parte da experiência do usuário que conta para o objetivo geral do site. Eles são um elemento simples e pequeno que atrai sua atenção por um segundo, enquanto o design do site principal é exibido.
A coisa legal sobre a tendência é que essas pequenas animações de carregamento são realmente pequenas, do tamanho do próprio visual à ação na tela, não há muito o que ver, mas o que está lá é absolutamente delicioso.
Aqui estão três ótimos exemplos:
- Hannah Purmort’s A animação de carregamento é um único traço em movimento na combinação de cores oposta da tela principal. O traço é realizado através do design no efeito de rolagem também.
- Susa Ventures apresenta um pequeno ícone com uma pequena barra de carregamento. Este chama a atenção porque o pequeno gorila é visualmente interessante e deixa você curioso sobre o conteúdo do site.
- FPG usa um esboço que parece ser desenhado na tela enquanto o restante da página inicial é carregado. A única sugestão de que é realmente uma animação de carregamento é que o resto da tela é muito mais elaborado, uma vez carregado com vídeos em execução e ainda mais esboços. O efeito é contínuo e termina quase antes do usuário perceber que foi iniciado.
Conclusão
Os detalhes estão no centro de todo bom design. É importante lembrar que projetar (e contabilizar) coisas que nem todo usuário notará é importante. É assim que cada uma dessas tendências se conecta - através de pequenos elementos de design que não são uma parte óbvia da estética geral.
Esses pequenos elementos podem ser o que realmente diferencia seu site para um usuário. Pode ser o elemento de prazer que traz alguém de volta ao seu design. Detalhes podem ser o diferenciador entre sucesso e fracasso.
Quais tendências você está amando (ou odiando) agora? Eu adoraria ver alguns dos sites que você está fascinado. Me mande um link no Twitter ; Eu adoraria ouvir de você.