¿Necesitas una imagen de héroe? Tal vez la tipografía es suficiente
El concepto básico cuando se trata de la zona heroica del diseño de un sitio web es una imagen o video con texto y una llamada a la acción. Pero no todos los diseños tienen imágenes de alta calidad para hacer que este estilo de imagen de héroe funcione.
Plantea la pregunta: ¿realmente necesitas una imagen de héroe?
Para algunos proyectos de sitios web, la respuesta es no. Puede diseñar una zona de héroe estelar para un sitio web con una gran tipografía y algunos pequeños detalles. Echemos un vistazo a cómo hacerlo y algunos ejemplos que nos encantan.
Los beneficios de una imagen de héroe
Las principales ventajas de usar una imagen o un video destacados para un sitio web son el carácter llamativo de la imagen y la información que transmite. Una imagen puede decir mucho sobre su sitio o proyecto y de qué se trata el contenido.
Las imágenes son una parte vital de la narración de historias y sería difícil crear un diseño completo sin ellas. Si bien estamos pensando en diseñar un encabezado de héroe sin una imagen aquí, es importante tener en cuenta que estos sitios web rara vez están completamente libres de imágenes.
Los seres humanos, en su mayor parte, son innatamente visuales. Adquirimos comprensión al ver las cosas. Es por eso que las imágenes de héroes son tan populares.
Los beneficios de una imagen de héroe también incluyen:
- Mostrar un producto o servicio
- Conecte visualmente a los visitantes del sitio con lo que hace o sobre lo que hace
- Crea una sensación de deseo o necesidad de lo que está en la imagen.
- Lleva el foco visual en la pantalla a otros elementos, como texto o llamadas a la acción
- Brinda a los usuarios algo con lo que interactuar y permanecer en la pantalla por más tiempo.
Los beneficios de un héroe basado en tipografía
La principal ventaja de un área de encabezado de héroe basada en tipografía es que comunica algo claramente. Las palabras, especialmente con una gran legibilidad y facilidad de lectura, son la forma principal de comunicar información desde la pantalla a un visitante del sitio web.
Puede usar la tipografía para decirles a los usuarios exactamente lo que quiere que sepan.
Otros beneficios de una zona de héroe basada en tipografía incluyen:
- Enfoque nítido y comprensión para el diseño.
- Potencialmente más espacio para las palabras
- Página de inicio visualmente disruptiva que llamará la atención porque es diferente
- Funciona en cualquier tamaño de pantalla sin tener que pensar en diferentes culturas.
- Puede fluir bien con otros elementos de diseño, como pequeñas animaciones, sonido o colores llamativos.
5 razones por las que la tipografía podría ser la mejor
La decisión de utilizar una zona de héroe basada en tipografía para el diseño de su sitio web no debe tomarse por capricho o porque no le gusta una foto. Debe tener una intención determinada, al igual que cualquier otro elemento de diseño que elija.
Entonces, además de no tener la imagen correcta, ¿por qué usarías un héroe basado en tipografía?
- Un tipo de letra interesante se adapta mejor a su producto o negocio que una imagen. Comunica una historia más consistente.
- Tienes mucho que decir y qué poner énfasis en las palabras. Envía un mensaje más directo.
- La tipografía está alineada con lo que haces. Comunica una habilidad o técnica que es aplicable a su sitio web.
- Puedes usarlo para crear capas de profundidad e información o para establecer relaciones espaciales. Puede comunicar un sentimiento que coincida con las palabras.
- Las imágenes o los videos parecen fallar y crean una desconexión con los visitantes del sitio web. Comunica claridad y visión.
Prueba fuentes interesantes
Cuando se trata de zonas de héroe con un fuerte enfoque en la tipografía, hay dos escuelas de pensamiento:
- No te compliques.
- Pruebe con un tipo de letra interesante o incluso experimental.
Ambos son correctos e incluso puedes probarlos juntos.
Cuando usa fuentes muy visuales o interesantes, tienen un significado innato incorporado. Pueden hacer que los usuarios piensen o sientan de cierta manera. También pueden ser confusos si las palabras son demasiado difíciles de leer.
Por lo tanto, existe un término medio distinto que casi todos los héroes exitosos de tipografía solo equilibran. Y es difícil definirlo hasta que lo ves y lo lees. Esperemos que los ejemplos aquí le den una idea de cómo se ve.
5 ejemplos que amamos
MKTLM
Una combinación de un simple san serif y un guión de esquema te hace mirar las palabras en la pantalla aquí. El fondo mínimo lo une todo, al igual que los elementos animados simples.
Función y forma
Function & Form utiliza múltiples capas de texto para crear una impresionante zona de héroe que parece simple pero bastante compleja. Hay elementos de moda en todas partes: el círculo giratorio, un tipo de letra serif, grandes bloques de copia, y todo se combina de una manera que es fácil de leer y comprender, a la vez que se ve genial.
Cerca del Estudio Norte
No hay nada en sí mismo que te haga detenerte en el diseño de Near North Studio, pero cuando juntas todos los elementos, el diseño basado en la tipografía es llamativo. El scroller animado con tres niveles de velocidad de texto es llamativo.
Liferay.Diseño
La combinación de simplicidad y detalles sutiles en el fondo es lo que lleva este diseño basado en tipografía al siguiente nivel. El «Informe anual» tiene un tipo y estilo inesperados, y la simple flecha animada te hace querer más.
ReadyMag
El diseño de Readymag puede ser el más simple en la cara, pero el fondo que cambia de color te hace mirar el diseño. Luego te das cuenta de los huecos y las formas interesantes de la fuente, que también incluye un estilo de contorno. El peso de las palabras realmente te empuja a descubrir qué sigue.
Conclusión
Ahora, encuentre una fuente fabulosa y comience con un encabezado estelar que tenga tipografía. No olvide agregar algunos extras sutiles, como movimiento o color, para crear más enfoque e interés visual.
Y edita, edita y vuelve a editar. Nada es más importante que una copia sólida cuando su único elemento visual son las palabras.
