Una de las primeras cosas que hace al diseñar un sitio es decidir qué aspecto tendrá esa primera porción de píxeles que los usuarios verán. Debe captar su atención y comunicar su mensaje por encima del pliegue o arriesgarse a que esa persona pase a la siguiente pestaña abierta.
Desafortunadamente, muchos de nosotros caemos en patrones predecibles para esta parte del sitio. Usamos los mismos viejos trucos, formas y complementos y conseguimos un resultado que puede parecer genial, pero no es realmente tan emocionante. Hoy veremos brevemente cómo puede hacer que sus imágenes de encabezado sean más interesantes. En el camino, veremos algunos ejemplos en vivo de sitios que han implementado estas técnicas con éxito.
La imagen de encabezado aburrido estándar
Con demasiada frecuencia, cuando comienzo a alzar un proyecto, comienzo con algo como esto:
No me malinterpretes, este es un diseño sólido y la razón por la que es tan popular es que funciona extremadamente bien. Sin embargo, hay un momento para ir por la ruta segura y un tiempo para expandirse creativamente y explorar nuevas ideas.
En particular, la parte con la que me aburro es la imagen del encabezado (estoy usando el término? Encabezado? Para significar la parte superior de la página). Es solo un gran rectángulo estático. Si es dinámico, usualmente es algo tan simple como un control deslizante de imagen jQuery. Una vez más, uno de mis trucos de diseño favoritos, sin embargo, no es exactamente una buena representación de "fuera de la caja". pensando en este punto en el tiempo.
Entonces, ¿cómo podemos salir de la rutina de correr al rectángulo cansado cada vez que necesitamos una imagen grande y audaz en nuestro encabezado? Si realmente pensamos en el problema, algunas soluciones se presentan fácilmente.
Cambiándolo
Aquí hay algunas ideas rápidas sobre cómo agregar algo de variedad a sus imágenes de encabezado. ¿Se te ocurren otras ideas?
Cambiar la forma
Lo primero que viene a la mente es deshacerse del rectángulo. Intente usar un cuadrado, círculo, triángulo o incluso una serie de imágenes. Incluso puede deshacerse del contenedor e intentar colocar un ícono o gráfico en el fondo de su sitio web.
Además, no te limites a las formas estándar. Intenta crear una imagen que use una forma más abstracta y fluida. Dobla alrededor de tu contenido para una verdadera creatividad.
Hazlo más dinámico
Ir más allá del control deslizante de imagen jQuery. Trate de pensar en una nueva forma en que pueda hacer que un usuario interactúe con la imagen. Utilice el clic, el desplazamiento, los movimientos del mouse y más para transformar la imagen de una manera interesante.
Fugarse
Otra forma realmente simple de hacer que la imagen del encabezado sea más interesante es permitir que se rompa el contenido que está dentro de ella o que se interrumpa el contenido que está afuera.
Utilicé esta técnica con una captura de pantalla de la aplicación en un artículo reciente de Design Tricks.
Algo diferente cada vez
Un truco popular que usted ve que Apple usa con frecuencia en su página de inicio es tener una serie de imágenes de encabezado en rotación. Cuando actualiza la página, toma de un conjunto de tres a cuatro opciones diferentes al azar.
Esto no solo hace que su sitio sea más atractivo para los usuarios, sino que también lo ayuda a realizar un seguimiento de lo que funciona mejor y de lo que los usuarios parecen estar más interesados. Mirando sus estadísticas, puede hacer un seguimiento de qué imagen está obteniendo la mayor cantidad de clics y luego crear una nueva estrategia basada en ese conocimiento.
Ejemplos en el salvaje
Ahora que tenemos algunas ideas sobre la mesa para acercarnos a las imágenes de encabezados de una manera más interesante, veamos si podemos encontrar algún ejemplo de diseñadores que sigan estas técnicas.
Compañero de trabajo
Uno de mis ejemplos favoritos que he visto recientemente es en el sitio Co-Work. El control deslizante de la imagen en la parte superior de esta página es, en el fondo, la misma técnica estándar antigua. Sin embargo, el diseñador agregó algunas muescas que le dan una forma irregular.
Observe cuánto más integrada se siente esta imagen con el resto del contenido que su rectángulo típico. Se curva alrededor del logotipo, la navegación y la copia del cuerpo de una manera que le da al sitio una sensación de arte moderno casi abstracto que es perfecta para los espacios de trabajo limpios y bien diseñados que el sitio anuncia.
Esto no requiere una imaginación hiperactiva o incluso mucho trabajo para implementar, es solo el resultado de un poco de esfuerzo extra que le da al sitio un aspecto propio.
Adrian baxter
El desarrollador web Adrian Baxter tiene otro gran ejemplo de una imagen de encabezado única en su sitio.
Aparte de la increíble idea de luchar contra una horda de zombis con solo un teclado Bluetooth de Mac, esta imagen es diferente porque se ha dividido en cuatro paneles separados. Funcionalmente, realmente no hay razón para esto, pero desde una perspectiva de diseño, es un buen toque. Observe cómo refleja la disposición de los enlaces a continuación, un ejemplo clásico de repetición en el diseño.
Sin embargo, la diversión no termina ahí, Adrian lo llevó un paso más allá al agregar un efecto de paralaje que cambia la escena a medida que mueves el mouse por el sitio. A medida que la escena cambia, las imágenes sangran de un cuadro a otro. ¡Es un efecto realmente agradable!
Sony Tablet S
El ejemplo más innovador que pude encontrar fue el sitio para la tableta Sony. Comenzando, el sitio parece bastante simple, la imagen del encabezado muestra una especie de flujo plegado que termina en la tableta. En este punto no estaba realmente impresionado e incluso pensé que el sitio parecía un poco demasiado abarrotado.
A medida que se desplaza hacia abajo (o presiona el botón de abajo), el sitio se vuelve realmente sofisticado muy rápido. La tableta permanece en el centro de la pantalla a medida que se mueve el resto del contenido. Se desconecta del flujo plegado y comienza a girar y voltearse en el espacio 3D.
Cuando llega a una nueva sección de contenido, la tableta se convierte en una pose que se integra con el diseño de esa área.
Se incluye en algunos contenidos, en otras partes, se superponen las superposiciones y se señalan las características, las manos salen y usan la pantalla táctil; el resultado es súper impresionante y lo convierte en una experiencia de navegación impresionante, dinámica e interactiva que solo requiere desplazamiento.
Kyan
Este sitio es muy similar en concepto a la página de Sony Tablet, solo de manera horizontal. La posición inicial del control deslizante de imagen muestra una pantalla de iPhone, tableta y computadora alrededor de varias herramientas de diseño. Me encanta el estilo de ilustración de papel plano.
Cuando presiona el botón de flecha a la derecha, cada uno de los objetos que rodean a los dispositivos en el centro vuela hacia arriba y fuera de la pantalla uno por uno, luego la pantalla cambia y trae los dispositivos a una nueva escena:
Esto es mucho más impresionante, único y atractivo que su control deslizante típico. Cuando ves por primera vez el efecto, no puedes evitar presionar el botón unas cuantas veces más para volver a verlo.
Conclusión
El propósito aquí es ayudar a sacar a tu cerebro de la rutina de insertar la misma imagen de rectángulo grande en la parte superior de tus diseños. Con un poco de pensamiento y esfuerzo, puede lograr fácilmente algo más único y atractivo.
Esto apenas roza la superficie de lo que se está haciendo actualmente con imágenes de encabezado. ¿Has visto otros ejemplos interesantes? Además, ¿se te han ocurrido algunas ideas geniales? Deja un comentario y déjanos saber.