¿Cómo usar la tipografía cinética para hacer que su sitio web sea interactivo?

La tipografía cinética se refiere a una forma de animación. Aquí, hacemos que las palabras salgan en vivo.

Digo palabras, pero puede ser cualquier cosa, desde una sola letra hasta un párrafo completo. Depende de lo que quieras lograr con ese movimiento. Con eso en mente, su tipo de movimiento debe ser reflexivo e intencional. No puedes simplemente hacer que tus palabras salten y exploten por el puro placer de hacerlo.

Bueno, puedes, pero este uso superficial no tendrá el mismo impacto.

Porque cuando usa el lenguaje de movimiento en el diseño web, ya sea creando una animación de diseño de logotipo o mediante una tipografía cinética, está haciendo que el diseño se abra a los usuarios.

En otras palabras, está ayudando a los usuarios a olvidar que solo están tocando una pantalla y, en cambio, presenta su sitio web como algo vivo que puede responder. Puede sonreír, decirte qué hacer a continuación, bailar cuando haces clic en el botón derecho y explotar en estrellas cuando tienes éxito.

Cuando los usuarios pueden interactuar con su diseño, pueden decidir pasar más tiempo en él, sentirse encantados con él, comprenderlo más completamente y, en última instancia, sentir una afinidad con él.

https://dribbble.com/shots/14187210-Behance

5 formas en que los elementos interactivos mejoran la experiencia del sitio web

Eleva la estética

La estética lo es todo cuando se trata de su sitio para causar su primera impresión. Si su sitio se ve monótono y mal organizado, esa impresión también se trasladará a su marca, lo que hará que su resultado final se vea afectado.

Por otro lado, si un sitio se ve hermoso y ofrece características que no muchos han visto antes en la mayoría de los sitios (tipo cinético, por ejemplo), es una gran victoria.

Dado que el tipo cinético también hace que la estética sea más viva, el impacto aumenta. Ahora tiene un hermoso sitio web que las personas pueden tocar, hablar, responder y recibir comentarios.

Esto es algo que un buen sitio web estático no puede hacer.

Permitir que se destaque

Para dejar tu huella indeleble en el mundo digital, tienes que tener cosas que otros no tienen.

Por las razones incomprensibles que sean, ninguna marca importante se está beneficiando de lo que puede hacer el tipo cinético. Olvídate de las grandes marcas, las startups también están ciegas ante las maravillas de esta hermosa maravilla.

Aquí es donde puedes atacar.

Incluya efectos de tipo cinético sutiles, atractivos y de marca en su sitio web para reclamar la experiencia como exclusivamente suya. Muéstrale a la gente lo que puedes hacer.

La gente observará su innovación, verá cuán impecablemente la ha manejado y cómo ayuda a su empresa a transmitir su mensaje, y comenzarán a confiar en usted. Te mirarán como alguien que sabe lo que está haciendo. Cuando se establece ese fideicomiso, pronto sigue una transacción monetaria.

Mantener al usuario comprometido

Toda la premisa de Internet y las redes sociales se basa en el compromiso. Su contenido debe brindar a las personas algo que pueda mantenerlas comprometidas con el contenido, el creador y la plataforma.

El uso de características de tipografía cinética en su sitio web logra las calificaciones de participación con las que solo puede soñar.

En lugar de obligarlos a leer una copia estática, les está dando palabras de acción en vivo que se transforman, cambian, adaptan y funcionan para que el viaje del usuario sea más comprensible y divertido.

Mejorar la jerarquía visual

La jerarquía visual se refiere al orden organizativo en el que se presentan las cosas al usuario. El texto con la fuente más grande es el más importante, luego el más pequeño y así sucesivamente. Del mismo modo, las fuentes en colores brillantes captan nuestra atención más rápido que las fuentes en gris o azul claro, por ejemplo.

Usando estas señales visuales, ayudamos a las personas a guiar su atención hacia varias partes de la página en un orden organizado.

El tipo móvil puede ser de gran ayuda aquí. En lugar de señales estáticas, podemos usar tipografía fluida y hacer que nuestras letras y palabras se transformen en íconos y formas que ayuden a guiar la atención del usuario.

Educar a los usuarios

Cuando lanzas un nuevo sitio web, puede ser difícil para las personas entenderlo. Pero las características interactivas pueden ayudar.

Según un estudio de marketing de contenidos, el 93 % de los profesionales del marketing creen que el contenido interactivo es "altamente eficaz para educar a los clientes potenciales".

Ahora, este contenido interactivo podría ser cualquier cosa: una publicación de blog, un video, una infografía, cualquier cosa, pero cuando introduce movimiento en varias áreas de su sitio web mediante el tipo de movimiento (navegación, menú, barra de búsqueda, lo que sea), aumenta la educación. y la comprensión de un nuevo diseño multiplicado por diez.

Así es como el tipo cinético puede hacer que su sitio web sea interactivo

1. Haga que el tiempo de espera de carga de su página sea más divertido

https://dribbble.com/shots/6189182-Counter-01

Ninguno de nosotros somos fanáticos de las páginas web que tardan una eternidad en cargarse. De hecho, según Google, las páginas de carga lenta son una de las principales razones por las que algunos sitios tienen una tasa de rebote más alta que otros.

Pero la actividad de la fuente puede ayudar aquí.

Piense en una página donde los cambios en el tamaño del texto le informen cuánto tiempo de espera queda.

A medida que el tipo pasa de un tamaño más pequeño a uno más grande, puede alertar a los usuarios sobre cuánto tiempo más tendrán que esperar. Si bien es posible que las personas no respondan positivamente a los tiempos de carga de la página, cuando les dice qué tan pronto puede terminar la espera, es probable que se queden por más tiempo.

Puede hacer que el tiempo de espera sea aún más divertido haciendo que la copia sea más interesante, la animación más atractiva y los efectos más naturales.

2. Atraiga la atención del usuario e insinúe el siguiente paso

https://dribbble.com/shots/18058873-Internet-Speed-Test-Aplicación

Para aquellos que no estén muy familiarizados con su sitio web, encontrar el siguiente paso en el viaje del usuario puede ser un poco confuso.

Mover el tipo puede ayudarlo a llamar la atención de los usuarios hacia el área correcta del sitio web en el momento adecuado. Por ejemplo, mover el tipo de letra en el menú digital de un restaurante puede ayudarlo a orientar su atención hacia los tamaños de las porciones a medida que finaliza sus platos. O, cuando está reservando un viaje, la tipografía cinética en el calendario incorporado puede ayudarlo a asegurarse de haber elegido las fechas correctas.

Cuando hace que el viaje del usuario sea fácil de seguir y más predecible, es una señal de que ha creado una interfaz intuitiva que la mayoría de la gente entenderá fácilmente.

https://dribbble.com/shots/17559699-Move-On-Up

3. Dile a la gente en qué enfocarse

https://dribbble.com/shots/9287077-hop

Otra área clave en la que los tipos móviles pueden mejorar un sitio web es cuando tienes que decirle a la gente en qué concentrarse.

Piense en una página Mis servicios. Si bien una página estática tradicional puede hacer su trabajo, a través del tipo cinético puede decirle a la gente qué servicio es su producto principal, cuál es el segundo, y así sucesivamente. De esta manera, el tipo cinético lo ayuda a establecer y promover su nicho.

Además del movimiento, también puede hacer que el tipo se convierta en diferentes formas relevantes para sus servicios para que su mensaje sea más visual. Por ejemplo, si es escritor, un ícono de pluma puede hacer referencia a sus habilidades como editor, mientras que un símbolo de bombilla puede significar consultoría creativa.

A medida que las diferentes letras de su copia se transforman en estos nuevos íconos, no solo se ven increíblemente divertidos y atractivos, sino que también muestran un poco de su personalidad, y en marketing, eso es (en su mayoría) siempre una ventaja.

https://dribbble.com/shots/13945869-Mis-Servicios

4. Preparar a los usuarios para un cambio de estado o transición

https://dribbble.com/shots/11258557-Creative-Coding-5

El comercio electrónico o una experiencia de navegación web está inundada de transiciones. Siempre vas del punto A al B, al C y así sucesivamente. Las transiciones difíciles crean una experiencia de usuario molesta. A nadie le gusta sentirse sacudido de un lugar a otro. La tipografía fluida y similar a un líquido ayuda a mantener todo fluido.

Prepara a la gente para un cambio que está por venir. Les dice que se preparen para ello. Les ayuda a tener la mentalidad de prepararse para la siguiente etapa de compras, descargas o simplemente navegación.

Una transición suave también es efectiva para retener la atención del usuario. En lugar de una página estática que muestra una señal de espera, todos recibirán una buena copia con un movimiento simbólico y ayudarán a la marca.

5. Enfatice palabras clave, frases o áreas del sitio web

https://dribbble.com/shots/11138509-La-verdad-vale la pena

Gran parte del sitio web está compuesto de texto. Copia web, descripciones y CTA son algunos ejemplos. Cuando decide utilizar el tipo cinético, puede permitir que estos elementos textuales se animen. Resaltar su mensaje central se vuelve más fácil.

Piense en un CTA que se transforme en un ícono de carrito de compras cuando finalice su pedido en línea. O un mensaje de error que muestra decepción al convertirse en un ceño triste. O bien, una lista de episodios de podcast donde cada título se vuelve más grande a medida que pasa el mouse sobre su nombre.

Como parte del diseño de movimiento, el tipo cinético lo ayuda a acentuar lo que quiere decir. Duplica el poder de tus palabras. Entonces, úsalo con intención y pensamiento.

6. Proporcione retroalimentación visual cuando una tarea se completa con éxito

https://dribbble.com/shots/16174668-KEEP-IT-UP

Cuando un usuario interactúa con su interfaz de usuario, ayuda saber que lo está haciendo bien. Los mensajes de error, las confirmaciones y otras formas de comentarios visuales ayudan a los usuarios a comprender lo que deben hacer. Reforzar la acción de los usuarios los ayuda a mantenerse comprometidos y aumenta la probabilidad de que sigan adelante con lo que tienen que hacer.

La tipografía animada es una forma efectiva de retroalimentación visual. Es rápido, mantiene intacta la emoción de la experiencia y alienta al usuario a tomar más medidas.

Especialmente juega un papel clave cuando lo usa para sus mensajes de error. Quiere que las personas vuelvan a intentarlo, que no se sientan frustradas y que les diga exactamente qué salió mal. Entonces, por ejemplo, cuando un usuario ingresa su contraseña incorrectamente dos veces, y la tercera vez lo bloqueará de la aplicación, puede incluir un mensaje de error animado que lo alerte para que pueda tener más cuidado ahora.

Como puede ver, no tiene que inundar su sitio web con el tipo de movimiento. Todo parecerá, francamente, extraño y demasiado abrumador. Como sigo diciendo, sé más sutil y reflexivo cuando trabajes con cualquier tipo de animación. Hazlo cuando mejore la experiencia, e incluso entonces, mantén el efecto ligero y suave.

7. Ayuda a establecer el tono de la marca

https://dribbble.com/shots/17070314-SIMPLE

Si bien el texto animado puede ayudar a todas y cada una de las industrias, es más eficiente en algunas que en otras. Tome la banca o los seguros, por ejemplo. Puedes animar tu tipografía allí, pero tendrás que ser muy discreto. Porque si te pasas de la raya, aunque sea un poco más, el carácter de tu marca puede verse afectado.

Pero piense en la moda, el estilo de vida, las ventas minoristas, los bienes raíces, los artículos/ropa/juguetes para niños y tantos otros, y una buena dosis de tipo cinético para hacer que la interfaz de usuario sea más interesante parece tener mucho más sentido.

Si bien, por sí solo, no puede establecer toda su marca, pero puede funcionar como un gran activo junto con otras herramientas.

la comida para llevar

Hay tres:

1. Sea decidido . No lo hagas solo porque se ve bonito. Hazlo porque tiene un propósito, y luego hazlo hermoso.
2. Sea frugal con su tipo de mudanza . Puede ser mucho tomar. Por lo tanto, solo agréguelo en las áreas de la interfaz de usuario donde tenga espacio y donde logrará la mayoría de los resultados.
3. Sé claro . Use estilos de fuente que no pierdan legibilidad cuando agregue animación. Además, manténgase alejado de los estilos de animación que estropearán los estilos de letra perfectamente legibles.