3 Tendências Essenciais de Design, dezembro de 2017
Todas as três tendências essenciais de design deste mês têm a ver com tipografia. E as tendências mostram algumas maneiras bem estelares de usar o tipo bonito para criar engajamento do usuário e causar uma ótima primeira impressão.
Um tema comum entre esses designs é que todos os estilos de tipografia são altamente legíveis. Se você planeja trabalhar com um elemento de texto mais moderno ou descolado, escolha um tipo de letra que os usuários não terão dificuldades para ler. A técnica moderna é o truque com esses designs, e não com o próprio tipo de letra.
Veja o que é tendência no design este mês:
1. Basta digitar acima do pergaminho
Embora uma ótima imagem possa ajudar a atrair usuários para um design, às vezes as palavras e o espaço corretos são o ticket.
A chave para aproveitar ao máximo essa tendência de design é refinar sua mensagem. As palavras precisam ser simples, dizer algo significativo e criar valor para o usuário.
Então como você faz isso?
- Comece com uma frase chave. Pode ser sua missão ou uma proposta de valor para os usuários. Diga aos usuários o que você traz para a mesa e por que seu website será importante para eles.
- Escolha um tipo de letra simples que tenha o mesmo estado de espírito da mensagem para blocos de cópia mais longos.
- Se o bloco de texto for curto, como com Tipos de tipo , considere uma opção de tipo de funkier para atrair usuários.
- Aproveite ao máximo o espaço. Observe que, em cada um dos exemplos abaixo, o texto tem muito espaço para respirar, facilitando a leitura em um piscar de olhos. O espaço também pode ajudar a chamar a atenção para o texto e equilibrar elementos de texto, se você não quiser centralizá-los na tela, como Design Ups .
- Use cores para ajudar a adicionar interesse visual. Tons brilhantes e modernos podem ajudar a atrair usuários para o design. A cor também pode ajudar a definir um estado de espírito relacionado ao envio de mensagens.
Ao trabalhar com um design de tipo pesado, não o force. Às vezes você não terá texto suficiente para preencher uma "tela" completa. Menos + mais e Tipo de tipo usa o bloqueio de cores para criar vários painéis dimensionados perfeitamente para o conteúdo de texto nele.
2. Texto em Caixas Brancas
Com tantos elementos visuais arrojados em projetos de design de sites - e tantos pontos de interrupção responsivos para lidar - caixas brancas estão ressurgindo como um elemento de contêiner para texto. Caixas brancas com texto escuro no interior podem garantir a legibilidade quando se trata de mensagens em cima de fotos, vídeos ou ilustrações onde há variação de cores.
E embora essa tendência possa parecer um pouco, bem ... desleixada ou preguiçosa, ela realmente fica ótima quando bem feita.
Você não pode simplesmente colocar uma caixa em qualquer lugar em uma imagem e esperar pelo melhor. Caixas brancas precisam ser colocadas estrategicamente para que não cubram partes importantes da imagem e para que os usuários se movam para elas no decorrer da observação do design.
As caixas brancas precisam ser grandes o suficiente para conter uma quantidade razoável de texto e você deve ter um plano para esse elemento em telas menores, como permitir que tudo na caixa de texto caia abaixo da imagem principal. Não tente colocar uma caixa de texto sobre uma imagem em telas menores, pois você terá uma caixa de texto pequena demais para ler ou a caixa cobrirá a maior parte da imagem em si.
Se você pote para o tratamento de caixa branca, divirta-se. Cada um dos exemplos abaixo usa caixas brancas de maneiras completamente diferentes.
Fazer espaço corta uma caixa branca no canto inferior da imagem para que a maior parte da imagem fique visível. A caixa branca sangra no espaço em branco abaixo, de modo que quase parece que sai do painel abaixo. Essa técnica ajuda a conectar o controle deslizante principal ao conteúdo abaixo (e pode até incentivar a rolagem).
HowIt usa blobs circulares para que as caixas de texto brancas correspondam melhor ao tom da ilustração de fundo. Essa mudança sutil na forma, de modo que as caixas pareçam mais fluidas, ajuda a conectar os elementos, de modo que as caixas e o fundo tenham uma sensação consistente. Você não quer que as caixas brancas de texto pareçam estar colocadas aleatoriamente no plano de fundo. (Isso não funciona e não ajudará a criar uma sensação coesa para os usuários.)
Macaulay Sinclair tem mais texto do que os outros exemplos usando uma parte de uma grade do painel de imagem para manter o elemento de texto. Aqui, a imagem atrás da caixa branca não serve valor de informação. Ele tem um esquema de cores e movimentos semelhante a outras imagens e serve principalmente para criar coesão entre o elemento de texto e o restante do design.
3. Recortes de Tipografia
Ninguém nunca disse que o texto tem que ser uma série de letras cheias e sólidas. Mais designers estão optando por recortes de tipografia que apresentam um bloco de cor sobre uma imagem para que a imagem vem através de letras claras.
Essa técnica pode trabalhar com imagens estáticas ou em movimento e com sobreposições de tela inteira, de modo que apenas uma pequena quantidade de informações seja obtida através de letras (quase para criar uma textura) ou com mais de um estilo de bloco sobre imagem com mais da imagem de fundo. visível.
O truque para fazer este trabalho é o tipo correto. As letras precisam ter traços grossos o suficiente para que a imagem ou textura no plano de fundo seja visível. Você não pode fazer isso com uma fonte fina ou condensada com qualquer sucesso consistente.
Essa técnica também funciona melhor se o número de palavras e letras for bastante limitado. Use de uma a três palavras com 10 ou menos letras ou use palavras muito comuns que os usuários saberão de imediato.
Danbury usa um recorte de texto brilhante como um atrativo para incentivar os usuários a interagir com a chamada de vídeo à ação. A caixa laranja inteira é apenas um botão gigante.
Adega Fusion usa um vídeo de fundo de uma vinha nas letras. O que é fantástico neste design é o efeito de tripla camada: Fundo de vídeo abaixo do recorte de texto em branco abaixo da imagem do produto.
The Kaneko usa uma imagem não identificável como preenchimento de letras. Se você optar por este estilo, mantenha este fundo simples como feito com este design. Há apenas um toque de cor e textura que chama a atenção para o texto na tela austero.
Conclusão
A coleção fornece inspiração para os projetos que podem não ter uma ótima imagem ou vídeo, para que você ainda possa encontrar uma maneira de criar algo que os usuários responderão. Não tenha medo de usar o texto como um elemento visual e informativo nesse design.
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ê.