El encabezado del sitio web, también conocido como la sección por encima del pliegue, es sin duda la parte más importante de un sitio web. Principalmente porque es la primera parte del sitio web que los visitantes ven cuando llegan al sitio web.
Cuando se trata de sitios web, la primera impresión importa mucho. Y la sección de la cabecera juega un papel importante en ella. De hecho, según un estudio, la mayoría de los visitantes de un sitio web sólo permanecen unos 15 segundos en él antes de abandonarlo.
El diseño de la cabecera de su sitio web desempeñará un papel fundamental a la hora de convencer a un visitante de que se quede más de 15 segundos.
Con un diseño de cabecera adecuado, puede influir en los visitantes para que sigan navegando por el sitio web. También puede diseñar un encabezado de una manera que persuade a los visitantes a tomar acción también.
Para ayudarle a encontrar la inspiración y aprender algunos trucos sobre el diseño de cabecera eficaz, hemos handpicked algunos de los mejores ejemplos de diseño de cabecera del sitio web para su inspiración. Estos diseños seguramente le ayudarán a hacer que sus propios encabezados se destaquen entre la multitud.
2 millones de activos digitales, con descargas ilimitadas
Obtenga descargas ilimitadas de más de 2 millones de recursos de diseño, temas, plantillas, fotos, gráficos y más. Envato Elements comienza en $16 por mes, y es la mejor suscripción creativa que hemos visto.
Explora los Activos Digitales
5 Consejos para un Diseño de Encabezado de Sitio Web Efectivo
Antes de llegar a los ejemplos, conozcamos los elementos clave que hacen que un encabezado de sitio web sea más efectivo.
Utilizar la fuente adecuada
El título o encabezado ocupa el centro del diseño del encabezado de un sitio web. Es lo que ayuda a los visitantes a entender de qué trata un sitio web. Esto significa que el título tiene que ser grande, en negrita y claramente visible.
Con la fuente adecuada, puede diseñar el título de cabecera perfecto que atraiga la atención. Si bien el uso de un tipo de letra sans-serif en negrita es la opción preferida para los encabezados, un tipo de letra serif es más apropiado para algunas marcas también. Sobre todo, asegúrese de que el título, los subtítulos y el texto sean claramente visibles sobre el fondo.
Añadir una ilustración
Los fondos de imágenes y vídeos siguen siendo bastante populares. Pero, la última tendencia en el diseño de la cabecera del sitio web es el uso de ilustraciones.
Una gran cosa sobre el uso de ilustraciones en los diseños de cabecera es que le permite añadir un poco de personalidad al diseño de su sitio web. Usted puede hacer una ilustración a mano que se adapte a su negocio y la marca. Y luego, utilizar el mismo estilo de ilustraciones en todo el diseño del sitio web para crear una experiencia de usuario que fluya sin problemas.
Crear una llamada a la acción (CTA)
Por supuesto, la llamada a la acción es el segundo elemento más importante (el primero es el título) del diseño del encabezado. Con una CTA, puede persuadir a los visitantes para que pasen a la acción y se suscriban a un servicio, busquen artículos, se suscriban a un boletín de noticias, compren un producto, y mucho más.
Pero, debe tener cuidado con la colocación de la CTA. Una buena estrategia a utilizar es hacer pruebas A/B de sus diseños de cabecera para encontrar la combinación de colores perfecta y el lugar adecuado para colocar el CTA.
Elija un estilo de menú a juego
Los enlaces de navegación también son importantes, pero no necesariamente tienen que formar parte de su diseño de cabecera. Puede diseñar una cabecera con un sistema de navegación oculto que sólo aparezca visible al desplazarse hacia abajo. O incluso ocultar la navegación en un menú hamburguesa.
Dependerá de los objetivos que quieras conseguir con tu web. Una navegación claramente visible ayudará a los visitantes a ver otras páginas de su sitio web más rápidamente. Si quiere evitar que los visitantes se distraigan y animarles a leer más sobre un producto, considere la posibilidad de ocultar la navegación.
Sea creativo pero siga las normas
A menudo se anima a los diseñadores a ser creativos cuando diseñan sitios web. Pero, siempre hay que utilizar también las directrices de diseño estándar.
Por ejemplo, hay que utilizar medidas al añadir logotipos, botones e iconos. Y también seguir las directrices básicas de diseño web para encontrar las ubicaciones adecuadas para cada elemento. Esto ayuda a crear consistencia en todo el diseño del sitio web.
Echa un vistazo a las cabeceras de sitios web de ejemplo que aparecen a continuación para ver cómo se hace.
PenzGidroMash
Aunque no lo creas, este es un sitio web para una empresa de fabricación de equipos industriales en Rusia. Y tiene uno de los encabezados de sitios web más creativos que hemos visto.
Aunque la mayoría de los sitios web corporativos suelen optar por diseños de sitios web clásicos y de la vieja escuela, el enfoque de diseño moderno de esta empresa es refrescante.
Todo, desde el título, la elección de la fuente, los colores y, sobre todo, el uso de imágenes para crear un diseño en 3D, hace que esta cabecera del sitio web sea realmente una lección de diseño web eficaz.
Creative Dreams Design
Este diseño de cabecera del sitio web es un gran ejemplo de los diseños que dicen «más con menos». El aspecto ultraminimalista con una simple ilustración animada ayuda a este sitio web a cumplir un objetivo importante: mostrar la creatividad. Y eso es exactamente lo que un sitio web de una agencia de diseño creativo debe perseguir.
La sencilla llamada a la acción, la adorable ilustración, las animaciones y los colores sobre el limpio fondo blanco dan a esta cabecera la atención que merece.
Digital Horizon
El sitio web de la empresa de inversiones, Digital Horizon ofrece una gran lección de diseño de fondo de cabecera. Destina una gran parte de su espacio de cabecera a su fondo animado, que encaja perfectamente con el nombre y el concepto de la empresa. Además, destaca muy bien el titular y la llamada a la acción.
El uso de imágenes y fondos animados sigue siendo relevante. Sólo hay que encontrar la manera correcta de casar el diseño de la cabecera con la marca de la empresa.
Okb Interactive Studio
Un diseño de cabecera audaz necesita una fuente de título grande y audaz. Este estudio de diseño de experiencias ha encontrado la combinación perfecta de la fuente del título y el tamaño de la fuente para crear un diseño de cabecera verdaderamente memorable.
No se trata sólo del tamaño del título o de la elección de la fuente. Sino también la forma en que el texto revela partes del fondo y oculta el menú, los enlaces e incluso el nombre de la empresa para dar a la cabecera su tan necesario espacio es lo que hace que este diseño sea notable.
IdeaBuddy
Cuando se trata de diseñar cabeceras para páginas de aterrizaje de SaaS, a veces es más fácil simplemente mostrar lo que la aplicación es capaz de hacer que decirlo. La aplicación de validación de ideas, IdeaBuddy utilizó ese enfoque sencillo para diseñar una cabecera más eficaz.
Además de su uso creativo de ilustraciones en la cabecera y en todo el sitio web, también utiliza capturas de pantalla de la aplicación para mostrar lo que ofrece el servicio.
Juntos por los animales
Cuando se diseñan sitios web y cabeceras, incorporar la psicología del diseño es importante. Especialmente cuando se trata de sitios web sin fines de lucro y de caridad, tales estrategias juegan un papel crucial en la evocación de las emociones.
El sitio web para este sitio web de caridad animal utiliza la psicología del diseño bien mediante la adición de una sola imagen que toca los corazones y las almas de los visitantes.
Stuart
El uso de deslizadores es otro concepto popular utilizado en los diseños de cabecera del sitio web. Sin embargo, las viejas formas de utilizar sliders de imágenes están desapareciendo poco a poco de los diseños modernos de we. Este sitio web de servicios de entrega llevó el antiguo concepto de slider a un nuevo nivel.
Utiliza una combinación perfecta de imágenes de alta calidad con fondos transparentes, colores pastel y encabezados animados para crear un diseño de cabecera muy entretenido con un slider de contenido.
Handwrytten
Handwrytten es un servicio muy singular que ofrece entregar tus escritos en forma de notas manuscritas. Diseñar una cabecera para un servicio así es sin duda un reto. Y parece que han creado el diseño perfecto para mostrar la empresa de forma atractiva.
Con un ejemplo real de una nota escrita a mano rodeada de ilustraciones animadas de forma creativa, la cabecera capta perfectamente el propósito y el objetivo de este servicio y de la empresa.
Wild Side Design
Esta cabecera de sitio web es otro gran ejemplo de uso de ilustraciones para contar una historia. En este caso, la cabecera utiliza un dibujo hecho a mano que visualiza el mensaje de este negocio. Que está proporcionando el diseño de marca para las empresas para llevarlos de las empresas ordinarias a la grandeza.
Es una lección de cómo una ilustración única puede añadir tanta personalidad a un encabezado del sitio web.
Stef Ivanov
El sitio web de la cartera del diseñador independiente Stef Ivanov tiene uno de los diseños de cabecera más singulares que lo hace destacar. No es sólo el increíble dibujo de su foto o las abejas zumbando alrededor de su cabeza. Sino sobre todo por cómo utiliza todos los elementos, fuentes, colores y espacio en blanco juntos para crear una experiencia memorable.
Pragmatic Brains
Es difícil resumir toda una empresa o mostrar todos los servicios de una agencia en el limitado espacio disponible en la zona de la cabecera. De alguna manera, la web de Pragmatic Brains ha conseguido incluir todos sus servicios de consultoría en la cabecera. Sin saturar el diseño.
A primera vista, parece una cabecera de sitio web normal con un montón de ilustraciones. Pero, la magia ocurre cuando se pasa el ratón por encima de esos diseños de tarjetas. Revelan detalles sobre cada servicio que ofrece la agencia. Un diseño de cabecera bastante inteligente y eficaz.
AirPods Pro
No podemos ignorar los brillantes diseños de las páginas web de los productos de Apple, especialmente a la hora de crear una lista de diseños de cabecera creativos. A lo largo de los años, Apple ha dominado el arte de captar la atención de los usuarios con sus diseños de páginas web increíblemente simplistas.
El diseño de la cabecera de la página web del producto AirPods Pro también presenta un diseño radical. Es sencillo y permite a los usuarios entender rápidamente de qué trata el sitio web.
Pixelwithin
Este diseño de cabecera del sitio web encaja perfectamente con el mensaje de marca de su agencia de diseño web. Utiliza una cabecera muy simplificada sin muchos colores, imágenes o texto para mostrar el poder de los diseños minimalistas y «sin complicaciones».
Sheetal Ice Cream
El sitio web de esta empresa india de helados tiene un aspecto tan sabroso como sus propios productos. La sección de la cabecera del sitio web consigue atraer eficazmente a los visitantes con un diseño limpio con un fondo colorido que destaca una sola imagen de helado. Nadie podría resistirse a desplazarse hacia abajo en este sitio web, incluso si eres intolerante a la lactosa.
Courses Australia
Uno de los diseños de cabecera más eficaces de nuestra lista pertenece a un sitio web australiano que funciona como un directorio de búsqueda de cursos en línea proporcionados por las universidades australianas.
Su diseño simple que pone el sistema de búsqueda en el centro del escenario actúa como una llamada a la acción eficaz. Seguido por el índice que permite a los usuarios explorar cursos en diferentes temas, industria y niveles de calificación.
Estos son sólo algunos de los muchos diseños de cabecera sorprendentes que hemos visto. Sigue explorando la web para encontrar más diseños increíbles. Además, echa un vistazo a nuestras plantillas de wireframing de sitios web y plantillas de sitios web de Sketch para obtener más inspiración.