Tendencia en diseño Web: Inspiración para una Cabecera Creativa

Como pudisteis leer, hace unas semanas estuvimos comentando algunas de las tendencias en diseño web para este 2016, pero dijimos que la lista se iría ampliando. Pues bien, hoy vamos a añadir una tendencia más a la lista. En este caso, una que ya viene de los años anteriores pero que parece que se queda dando lugar a distintas maneras de llevarla a cabo y por lo tanto a un abanico de posibilidades: las imágenes de cabecera.

La cabecera, como no podía ser de otra manera y su propio nombre indica, es una de las partes más importantes de la web. Es donde el visitante centrara por primera vez su mirada, uno de los focos mas primeros de atención y por lo que es un buen lugar en el que poder hacer nuestra primera «Call To Action«, pero también un lugar en el que exprimir nuestra creatividad dándole forma.

Hay diversos elementos que podemos usar para la cabecera, desde un fondo plano a videos pasando por patrones o imágenes, todo dependerá del efecto que queramos imprimir y por supuesto del estilo de la web. Además, este puede ocupar toda la pantalla, que se sitúe en la parte superior, que sea un degradado o que permanezca en blanco… Hay muchas opciones y hoy veremos algunos consejos para que elijas para tu web la que mejor se adapte a ti! Vamos a ello! 🙂

Color sólido o haz un gradiente

Es quizá la opción más usada y no es de extrañar. Si nuestra web va a tener un alto contenido de fotografías o imágenes, podemos querer buscar en la cabecera un diseño neutro que no la sobrecargue en demasía. Además si en nuestra cabecera vamos a querer que prime el texto, puede resultar más fácil la introducción de este sobre este tipo de fondos.

Si un fondo plano os resulta demasiado aburrido siempre tenéis la opción de introducir un pequeño gradiente (como podéis ver en nuestro Paulie, o en nuestro calendario de Febrero), que de una nota de color y de creatividad a vuestro fondo, sin dejar de ser un fondo plano.

cabecera-degradado-wordpress-theme

Diseñada por Silo Creativo

Ver Web

¿Colores? totalmente libertad, puedes usar una combinación de colores para el gradiente, que puedes introducir como imagen, en el selector de WordPress (si lo tuviera) o en CSS o elegir el color que mejor combine con tu proyecto. Totalmente libertad!

Hablemos de patrones

Ya sé que todos habéis seguido el tutorial para diseñar patrones y los sabéis hacer a la perfección y si no, habéis descargado alguno de los recursos de patrones que hemos compartido aquí, por lo que partimos que ya tenéis escogido vuestro patrón favorito.

Y como sabéis hay de muchos tipos. Podemos hacerlos sólidos y coloridos de manera que sean el eje del que parte el diseño de la web, o también más sutiles, que hasta cueste trabajo apreciarlos. Podemos usar una textura que de algo de relieve pero que sea casi imperceptible, por ejemplo.

Hay diversas opciones: crearlos con líneas o pequeñas figuras, en un color similar (una tonalidad más o menos) que el fondo sobre el que se dibujan, de manera que den sensación de profundidad, pero sin robar protagonismo al resto de la web. Hay que tener claro, que si lo hemos diseñado para el fondo, es para que se mantengan ahí, no deben tener mas importancia y compartir con otros elementos del diseño.

web-dessert-wordpress-theme

Diseñada por Silo Creativo

Ver Web

Si por el contrario, lo que buscas con tu patrón es llamar la atención y que sea el centro principal de tu diseño es el momento de olvidar lo que acabas de leer y de dar color y formas a tu patrón.

Recuerda que aunque lo «oversize» está de moda, no debes pasarte: quieres que sea un elemento de creatividad y color, no que tu visitante salga espantado porque es lo único que ha visto.
De todas maneras con los patrones no todo es o blanco o negro, hay muchos puntos intermedios de combinaciones entre las que seguro que encuentras el patrón que mejor se adapta a tus funcionalidades.

¿Foto o video?

La inclusión de un video en la cabecera fue tendencia en 2015 (y centrémonos en la palabra fue). Aunque el año acaba de empezar, y es pronto para afirmarlo, no estamos seguros de que esta tendencia continúe. Nos pasa un poco lo mismo que con los slider; no hay porque decir no, solo hay que buscar un buen uso de los mismos. Si tu video hace que la carga de tu web sea más lenta, deberías pensártelo (no olvides tener en cuenta el UX), sin embargo, si el video es el eje fundamental de tu web del que parte todo lo demás, adelante con ello.

web-video-header

Diseñada por Silo Creativo

Ver Web

Sigue siendo tendencia el uso de imágenes en las cabeceras, de manera que estas ocupen todo el lugar disponible. Claramente con la imagen adecuada conseguimos introducir al visitante a nuestro universo. Si puedes haz que esta sea tuya, es tu web y necesitas darle un toque personal, pero si no consideras que sea necesario, aquí tienes algunos bancos imágenes para que puedas usar alguna:

4 Bancos de Imágenes Gratuitos y Algunas Ideas sobre Licencias

5 Bancos más donde Descargar Imágenes Gratis para tu Web

Otros 5 Bancos de Imágenes Gratuitos y de Gran Resolución

10 Bancos de Imágenes Gratuitas de Alta Resolución

imagen-cabecera-web

Diseñada por Silo Creativo

Ver Web

Ilustraciones o porque no, animaciones

Ya lo adelantábamos, las animaciones son tendencia y como no, su lugar predilecto puede ser la cabecera. Es el momento de introducir una ilustración fija, o poder convertirla en una animación (como nosotros hicimos en nuestra felicitación navideña).

felicitacion-navidad-silocreativo

Diseñada por Silo Creativo

Ver Web

Si no tienes una imagen propia y no te convence usar una de un banco de imágenes, sabes que con una ilustración vas a tener una imagen única y original que te diferencie de la competencia. Es un buen punto sobre el que invertir y crearte una imagen. También, con ellas podemos hacer que los elementos no sean tan pesados como puede ser una imagen. Además si ya a partir de la ilustración consigues una animación… estoy segura que llamaras la atención de todos tus visitantes!

¿Fondo…? ¿Por qué si?

Sin embargo si siempre has sido de los que han ido contra corriente, este será tu apartado dentro del articulo. No es obligatorio tener un fondo en la cabecera. Si lo que quieres es crear contraste y llamar la atención, puedes conseguirlo con las tipografías por ejemplo.

Además ya lo hemos dicho en muchas ocasiones, el blanco es un color, por lo que es totalmente factible usarlo como fondo, de esta manera puede potenciar otros aspecto del diseño.
No necesitamos un fondo de color para mostrar lo que queremos y en esta ocasión como en otras tantas gracias a las tipografías podemos conseguir una cabecera original y creativa.

tipografias-cabecera-web

Ver Web

Y ahora… ¿qué?

Ya dispones de todas las opciones a la hora de diseñar una gran cabecera par tu proyecto. Ahora solo tienes que determinar cuál es la que mejor se adapta al tuyo y hacer la elección pensando en el UX y por lo tanto en el visitante. No todas las opciones son válidas para todas las web y ahora te toca a ti determinar en qué lugar se enmarca tu proyecto.

Good luck!! 🙂

Comentarios (3)

  1. Gran artículo, creo que todo depende del producto o servicio que vendas y a quién va destinado. Conoce a tu cliente y construye la web en relación a sus gustos y preferencias.

  2. ¡Muy buen artículo Verónica! Es verdad que aunque cada vez se prefiera más el formato vídeo, el hecho de utilizarlo en las cabeceras aumenta el tiempo de carga y empeora la experiencia de usuario.

    También es cierto que en cuanto a las cabeceras, las ilustraciones están sustituyendo a las imágenes.

    ¡Gracias por el contenido! Un saludo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *