Tendência de design: Texto fatiado e tipografia

Os puristas dizem que você nunca deve alterar a tipografia. As letras devem aparecer como pretendido pelo designer de tipos, ou você deve selecionar uma fonte completamente diferente. Embora isso seja verdade, a exceção está na tendência do texto fatiado.

O efeito bacana faz com que os elementos de texto pareçam ter sido cortados com uma ferramenta de precisão e pode adicionar interesse visual a logotipos, títulos e blocos de texto simples. Os efeitos de texto fatiado podem variar de super sutis (como uma pequena letra que está faltando) até a maior parte das palavras que estão faltando.

O que você deve ter em mente ao usar o texto fatiado é que as palavras devem sempre ser legíveis - que ponto existe de outra forma? - e preste muita atenção para que não ocorram combinações ou letras indesejadas de letras devido ao corte. A seguir, veja como fazê-lo funcionar com alguns exemplos de designs que funcionam bem.

Explore o Envato Elements

Fatia "tradicional"

O texto fatiado inclui uma aparência quase em camadas com um elemento de texto, como uma palavra ou um pequeno grupo de palavras, cortado e sobreposto em dois planos. Esse efeito cria profundidade e pode tornar um conjunto simples de caracteres visualmente interessante.

O Resoluut usa esse efeito em combinação com um e comercial para atrair usuários para o centro do design. O texto fatiado reflete as mensagens abaixo que a empresa foca no “design digital com atitude”, porque o texto fatiado transmite uma certa vibração mais ousada que as letras diretas.

Essa técnica funciona melhor quando os conjuntos de caracteres são simples (pense primeiro nos tipos de letra sem serifa) e as palavras têm um ponto de interrupção natural, onde podem ser cortadas e manter a legibilidade.

Texto e fotos da fatia

O efeito de camadas não se limita a uma combinação de fonte e espaço. Os designers também podem usar imagens e texto para criar um efeito fatiado legal, como o exemplo acima do The Shift.

As combinações de fatias inclinadas de uma única imagem (também fatiada) com letras atraem o usuário para o design.

Embora algumas das palavras sejam um pouco mais difíceis de discernir no início, há tempo suficiente entre as animações para entender a mensagem com facilidade.

Essa tendência funciona bem para agências digitais e sites de portfólio como uma maneira de mostrar uma aparência moderna e destacar as costeletas criativas.

Fatia com animação

O efeito de texto fatiado também pode ser combinado com outros elementos de design da moda. Misturar fatias com animação pode resultar em um bom elemento visual.

No exemplo acima, cada um dos elementos de texto fatiado é na verdade navegação. Os usuários podem clicar em qualquer elemento, mas o mais impressionante é a ação de foco, que reorganiza o texto fatiado.

Para logotipos

O texto fatiado pode ser uma maneira divertida de criar um logotipo quando os únicos elementos com os quais você trabalha são o texto. Um logotipo divertido pode ser mais do que uma marca para reconhecimento de marca; também pode ser um elemento altamente gráfico para vários usos, como o design da camisa, acima.

Ao trabalhar com texto fatiado, procure uma forma natural e uma inclinação para fatiar, de modo que seja interessante observar enquanto mantém a facilidade de leitura.

Preste atenção à maneira como o fatiamento cria espaço em branco. O design acima usa uma grande fatia de informações adicionais dentro dele. O uso mais comum do fatiamento costuma ser uma linha fina, mas as abordagens (como você pode ver nos exemplos deste post) podem variar bastante.

Criar interatividade

Permita que os usuários dividam seu próprio texto com uma combinação interativa de texto e pincel, como no exemplo acima. Embora o texto não seja fatiado exatamente por si só, o efeito é criado no processo de criação da arte.

Quaisquer ferramentas que permitam aos usuários alterar o design podem resultar em tempos mais longos no site devido ao componente interativo.

Traçados verticais fatiados

As fatias verticais tendem a ser mais curtas porque cada corte faz parte de uma única letra.

Enquanto a maioria dos designers parece estar usando a tendência da mesma maneira com uma fatia mais horizontalmente orientada, os cortes também podem ser verticais.

As fatias verticais tendem a ser mais curtas porque cada corte faz parte de uma única letra. O truque para fazer as fatias verticais funcionarem é a consistência. A maneira como os cortes são feitos deve se imitar, de modo que as letras pareçam estar juntas. Esse método de fatiar deve parecer quase uma parte pretendida do tipo de letra. (Não no exemplo acima, as fatias têm a mesma largura de letra a letra e as mesmas letras têm as mesmas fatias.)

Estabelecer fluxo visual

Os cortes quase criam uma sensação de urgência na leitura, de modo que você percorre as letras e passa para o visual principal na tela.

Uma conseqüência do texto fatiado - intencional ou não - é que ele cria fluxo visual. O olho do usuário seguirá a direção da fatia e do espaço em branco ao seu redor.

Veja o logotipo no exemplo acima. Com fatias nos R e O's no Robocath (mais a parte normal ausente do c), há um óbvio impulso direcional na tela da esquerda para a direita.

A atração é mais forte do que o que você associa à leitura normal (também da esquerda para a direita) porque as fatias o conduzem pelos caracteres rapidamente. Os cortes quase criam uma sensação de urgência na leitura, de modo que você percorre as letras e passa para o visual principal na tela.

Adicionar ênfase às letras

A razão final - e possivelmente mais atraente - para usar a tendência de design de texto fatiado é adicionar ênfase às letras ou à mensagem. Fatiar pode ser praticamente qualquer alteração de letras onde parte de um caractere está ausente no design.

O MJND, acima, usa mais um efeito de camadas para ocultar ou cortar formas de letra para ajudar a adicionar ênfase à mensagem. A imagem pode facilmente comunicar-se aqui, mas esse efeito ajuda a trazer o usuário de volta às mensagens principais. A combinação é simples, eficaz e visualmente interessante.

Recursos de aprendizagem

Existem algumas maneiras de criar efeitos de texto fatiado para projetos, dependendo exatamente do que você está tentando criar. As opções mais populares incluem a criação manual do efeito de texto, usando o software de edição ou o CSS para criar o efeito para projetos da web.

Aqui estão os tutoriais para cada uma dessas opções, para que você possa tentar criar um efeito de texto fatiado na moda:

• Vídeo: Como criar texto fatiado no Adobe Illustrator
• Cortar snippet de efeito de texto usando CSS

Conclusão

Usar a tendência de texto fatiado pode ser um pouco complicado, pois envolve a alteração de elementos de tipo. É importante que a legibilidade não seja perdida ou você poderá perder usuários com esse efeito.

Efeitos de texto fatiado, no entanto, podem ser uma solução divertida e ajudar a gerar um ponto focal. Adicionar um toque de animação também pode ajudar a elevar o nível seguinte. (Muitos dos exemplos incluídos nesta postagem fazem exatamente isso; visite esses sites e clique ao redor.)