Tendência de design: texto obstruído

Alguns sites parecem ótimos, mesmo que desafiem a sabedoria convencional ou os princípios da teoria do design. Uma nova tendência de design está mostrando essa mesma idéia com elementos que cobrem ou obstruem parte do texto do design.

É uma tendência interessante, porque vai contra tudo o que geralmente falamos em design - que deve ser legível para conectar-se aos usuários rapidamente.

Escusado será dizer que esta pode ser uma técnica complicada para se obter efetivamente, mas os designs são impressionantes e impactantes quando bem executados. Aqui está um detalhamento da tendência e algumas idéias de como você pode experimentá-lo.

Explorar recursos de design

Obstrução simples

Se o texto estiver coberto em um design, todo o resto deverá ser visualmente super simples para que o usuário não se perca com muitos efeitos.

Em todo ponto de interrupção responsivo, o texto não é mais obscurecido do que qualquer outro.

O Root Studio faz um ótimo trabalho com uma primeira impressão que chama a atenção com cores e a simples girafa animada que cobre parte das letras grandes. O truque aqui é que, embora algumas das letras estejam obstruídas, não há dúvida de qual é a palavra na tela. As letras ainda são legíveis, devido ao tamanho, simplicidade do tipo de letra e localização do elemento obstrutivo.

A equipe de design teve um cuidado especial com a obstrução do texto para manter a integridade de "ROOT", que é a marca deste site em particular. Em todo ponto de interrupção responsivo, o texto não é mais obscurecido do que qualquer outro. (É aqui que muitos desses designs ficam aquém. Eles ficam ótimos nas resoluções da área de trabalho, mas o texto está muito obstruído para ser legível em telas menores.)

Camadas tridimensionais

A adição de um efeito em camadas tridimensional pode ajudar os elementos a saltarem da tela para que os usuários quase sintam que podem alcançar e tocá-los. O texto pode servir como esse elemento de plano de fundo em alguns casos.

Apenas certifique-se de que a camada na parte superior do texto não cubra muito a palavra (ou palavras). E é sempre vital garantir que as obstruções do texto não resultem em palavras indesejadas devido ao posicionamento de outros elementos.

O Simply Chocolate usa bem esse efeito de camadas. Funciona principalmente devido à combinação de letras grandes que usam palavras comuns em um tipo de letra em negrito e um elemento superior que não é muito grande e contém exatamente as mesmas palavras que são obscurecidas pelo elemento doce.

Esse tratamento torna as letras grandes no fundo mais um elemento gráfico do que o legível, criando um novo contraste e um excelente efeito de camadas. (Você pode percorrer todos os diferentes sabores de doces para ver como eles criam o efeito de maneiras diferentes.)

Esqueça as regras do espaço

Às vezes, as obstruções de texto não cobrem as letras, mas invadem seu espaço.

É uma daquelas regras que a North Street quebra sem que o design pareça confuso ou desarticulado. A descrição da empresa colide com a regra vertical central na tela (o restante do design usa esse divisor para uma estética de tela dividida).

Se alguém dissesse que iria usar esse tratamento, você provavelmente tentaria convencê-los do contrário, mas aqui funciona. A composição visual é muito clara - graças à abundância de espaços em branco - e as opções de tipos de letra são ousadas o suficiente para que a linha cinza leve quase caia no fundo, mesmo entrando no espaço que deveria ser reservado para o texto.

Uma segunda linha cinza divide ainda mais o texto na navegação, mas a maioria dos usuários provavelmente nem notará a obstrução.

Apenas para letras grandes

Olhando para todos os exemplos aqui, você provavelmente notará um tema comum. Todas as letras obstruídas são muito grandes e usam caracteres simples.

Letras pequenas normalmente não oferecem espaço suficiente para cobrir parte do texto de maneira que pareça proposital. Se você planeja projetar com uma obstrução de texto, ela deve ser intencional e ter significado.

Scripts complicados de estilos de novidade são muito difíceis de ler com um elemento em cima deles.

Cobrir letras pequenas é incrivelmente difícil, em termos de design e legibilidade propositais. É por isso que a técnica é combinada com tipografia de grandes dimensões.

Esses tipos de letra grandes, geralmente sem serifa, são fáceis de ler de relance e geralmente têm larguras médias de traço e tigelas e balcões grandes que tornam os elementos de camadas mais práticos. Para fazer esse conceito funcionar, você precisa de letras com formas que se prestem a esse conceito. Estilos de tipo fino ou condensado nem sempre funcionam, e scripts complicados de estilos de novidade são muito difíceis de ler com um elemento em cima deles.

Elementos com pouco contraste

Às vezes, a obstrução do texto não é um elemento que está no topo do texto; é a relação entre o elemento de texto e o que o rodeia. A falta de contraste entre os elementos de texto e de fundo também pode resultar em uma obstrução de texto.

Novamente, esse pode ser um conceito difícil de ser realizado com eficácia. O texto existe naturalmente para ser lido. A falta de contraste pode tornar isso difícil.

Quando emparelhados com texto altamente legível, os elementos de texto de baixo contraste são lembretes sutis na tela. Esses elementos serão lidos após outros elementos de maior contraste.

No design da Anew, acima, a descrição do negócio é mais importante que a marca. É isso que o design diz aos usuários por causa do tipo de tratamento. As palavras-chave “telhado + cozinha de teste” são fáceis de ver e ler. O nome “Novamente” aparece em um local de baixo contraste sob a marca. O olho ainda é atraído por causa do logotipo grande, mas não é o principal foco quando se trata de leitura e coleta de informações.

Parte da razão pela qual esse tratamento funciona nesse espaço é devido ao conteúdo do design. Pense na simbiose entre a palavra "Novamente" e os pratos brancos brilhantes. Parece fresco, diferente e atraente.

Conclusão

Desenhos de texto obstruídos estão se tornando mais populares o tempo todo. Não faz muito tempo, você teria dificuldade em encontrar algo com esse estilo online. (Os designs de impressão o usaram de maneira mais consistente, porque os designers não precisavam se preocupar com pontos de interrupção responsivos.)

Apenas tome cuidado ao criar algo com texto que não seja totalmente visível. Certifique-se de que as palavras ainda digam (e signifiquem) o que você pretende. Se você tiver alguma dúvida sobre como um design será percebido ou lido ao usar texto obstruído, considere outra opção. Você nunca deseja dificultar o seu design para os usuários entenderem.