Tendencia de diseño: texto cortado y tipografía

Los puristas dicen que nunca debes alterar la tipografía. Las letras deben aparecer según lo previsto por el diseñador de tipos, o debe seleccionar una fuente diferente por completo. Si bien esto es mayormente cierto, la excepción está en la tendencia del texto dividido.

El ingenioso efecto hace que los elementos tipográficos parezcan cortados con una herramienta de precisión y pueden agregar interés visual a logotipos, titulares y bloques de texto simples. Los efectos de texto dividido pueden variar desde sutilmente sutil (como una pequeña letra que falta) hasta partes principales de palabras que faltan por completo.

Lo que hay que tener en cuenta al usar texto dividido es que las palabras siempre deben ser legibles : ¿qué punto hay de lo contrario? - y debe prestar mucha atención para que no aparezcan combinaciones de letras o palabras no deseadas debido al corte. Aquí hay un vistazo a cómo hacer que funcione para usted con algunos ejemplos de diseños que lo hacen bien.

Explore los elementos de Envato

Rebanada "tradicional"

El texto dividido incluye una apariencia casi en capas con un elemento de texto, como una palabra o un pequeño grupo de palabras, que se corta y se superpone en dos planos. Este efecto crea profundidad y puede hacer que un conjunto simple de personajes sea visualmente interesante.

Resoluut utiliza este efecto en combinación con un ampersand para atraer a los usuarios al centro del diseño. El texto cortado refleja el mensaje a continuación que la compañía se centra en el "diseño digital con actitud", porque el texto cortado transmite un cierto ambiente más afilado que las letras directas.

Esta técnica funciona mejor cuando los conjuntos de caracteres son simples (piense primero en los tipos de letra sans serif) y las palabras tienen un punto de ruptura natural donde se pueden cortar y mantener la legibilidad.

Cortar texto y fotos

El efecto de capas no se limita a una combinación de fuente y espacio. Los diseñadores también pueden usar imágenes y texto para crear un efecto de corte genial, como el ejemplo anterior de The Shift.

Las combinaciones de corte inclinado de una sola imagen (también cortada) con letras atrae al usuario al diseño.

Si bien algunas de las palabras son un poco más difíciles de discernir al principio, hay suficiente tiempo entre animaciones para entender el mensaje con facilidad.

Esta tendencia funciona bien para las agencias digitales y los sitios de cartera como una forma de mostrar un aspecto moderno y resaltar las habilidades creativas.

Rebanada con animación

El efecto de texto cortado también se puede combinar con otros elementos de diseño de moda. Mezclar el corte con la animación puede dar como resultado un buen elemento visual.

En el ejemplo anterior, cada uno de los elementos de texto dividido es en realidad navegación. Los usuarios pueden hacer clic en cualquiera de los elementos, pero lo que es más impresionante es la acción de desplazamiento, que vuelve a unir el texto cortado.

Para logotipos

El texto dividido puede ser una forma divertida de crear un logotipo cuando los únicos elementos con los que tiene que trabajar son texto. Un logotipo divertido puede ser más que una marca para el reconocimiento de marca; También puede ser un elemento altamente gráfico para múltiples usos, como el diseño de la camisa, arriba.

Cuando trabaje con texto cortado, busque una forma y una pendiente naturales para el corte, de modo que sea interesante observarlo mientras mantiene la facilidad de lectura.

Presta atención a la forma en que el corte crea espacios en blanco. El diseño anterior utiliza una amplia porción de información adicional dentro de él. El uso más común de la división es a menudo una línea delgada, pero los enfoques (como puede ver en los ejemplos de esta publicación) pueden variar de manera bastante dramática.

Crear interactividad

Permita a los usuarios cortar su propio texto con una combinación interactiva de texto y pincel, como en el ejemplo anterior. Si bien el texto no se divide exactamente en sí, el efecto se crea en el proceso de creación artística.

Cualquier herramienta que permita a los usuarios alterar el diseño puede resultar en tiempos más largos en el sitio debido al componente interactivo.

Trazos verticales en rodajas

Los cortes verticales tienden a ser más cortos porque cada corte es parte de una sola letra.

Si bien la mayoría de los diseñadores parecen estar usando la tendencia de la misma manera con un corte más orientado horizontalmente, los cortes también pueden ser verticales.

Los cortes verticales tienden a ser más cortos porque cada corte es parte de una sola letra. El truco para hacer que los cortes verticales funcionen es la consistencia. La forma en que se hacen los cortes debe imitarse entre sí para que las letras parezcan ir juntas. Este método de corte debería verse como si fuera casi una parte prevista del tipo de letra. (No en el ejemplo anterior, las rebanadas tienen el mismo ancho de letra a letra y las mismas letras tienen las mismas rebanadas).

Establecer flujo visual

Los recortes casi crean una sensación de urgencia en la lectura, de modo que puede cruzar las letras y pasar a la imagen principal en la pantalla.

Una consecuencia del texto dividido, intencionado o no, es que crea un flujo visual. El ojo de un usuario seguirá la dirección del corte y el espacio en blanco que lo rodea.

Mira el logotipo en el ejemplo anterior. Con cortes en las R y o en Robocath (más la parte faltante normal de la c) hay una atracción direccional obvia a través de la pantalla de izquierda a derecha.

La atracción es más fuerte de lo que asocias con la lectura normal (también de izquierda a derecha) porque las rebanadas te empujan rápidamente a través de los caracteres. Los recortes casi crean una sensación de urgencia en la lectura, de modo que puede cruzar las letras y pasar a la imagen principal en la pantalla.

Agregue énfasis a las letras

La razón final, y posiblemente la más convincente, para usar la tendencia del diseño de texto dividido es agregar énfasis a las letras o al mensaje. Rebanar puede ser prácticamente cualquier alteración de letras donde falta parte del carácter en el diseño.

MJND, arriba, usa más un efecto de capas para ocultar o cortar formas de letras para ayudar a agregar énfasis al mensaje. La imagen podría comunicarse fácilmente aquí, pero este efecto ayuda a que el usuario vuelva a la mensajería principal. La combinación es simple, efectiva y visualmente interesante.

Recursos de aprendizaje

Hay algunas formas de crear efectos de texto divididos para proyectos, dependiendo exactamente de lo que intente crear. Las opciones más populares incluyen crear el efecto de texto a mano usando un software de edición o CSS para crear el efecto para proyectos web.

Aquí hay tutoriales para cada una de esas opciones para que pueda intentar crear un efecto de texto cortado de moda:

• Video: Cómo crear texto cortado en Adobe Illustrator
• Cortar fragmento de efecto de texto usando CSS

Conclusión

Usar la tendencia de texto dividido puede ser un poco complicado porque implica alterar elementos de tipo. Es importante que la legibilidad no se pierda o podría perder usuarios con este efecto.

Sin embargo, los efectos de texto dividido pueden ser una solución divertida y ayudar a generar un punto focal. Agregar un toque de animación también puede ayudar a llevarlo al siguiente nivel. (Muchos de los ejemplos incluidos en esta publicación hacen exactamente eso; asegúrese de visitar esos sitios web y hacer clic).