14 semanas maravillosas de sitios web para su inspiración

En el pasado, un “encabezado” en el diseño web se refería a la banda siempre presente en la parte superior de los sitios web que contienen el logotipo, la barra de navegación y tal vez algunos datos de contacto y la barra de búsqueda. Hoy en día, un “encabezado” se refiere más a menudo a todo el espacio sobre el pliegue en la página inicial. A menos que alguien haya encontrado su sitio a través de una publicación de blog distribuida en las redes sociales o una recomendación en otro sitio, hay altas posibilidades de ingresarlo a través de la página inicial. Y lo primero que verán es que los principales bienes raíces, presentado.
También escribí sobre cómo los visitantes responden mejor a la colocación predecible de ciertos elementos en su sitio (como logotipo y CTA). Al diseñar un sitio web para cumplir con sus expectativas y aumentar su comodidad al hacer que la experiencia sea algo más predecible, puede mejorar de manera efectiva las tasas de clics y conversión. Ahora piense en ese espacio de encabezado en la página inicial.

¿Qué es exactamente un “encabezado” hoy en día?
La mayoría de las personas han llegado a confiar en las páginas iniciales para darles una visión general de lo que es una empresa o sitio web, lo que significa que no puede permitirse perder esta oportunidad para cumplir con estas expectativas.
Por supuesto, el diseño de su encabezado de página inicial puede ser exclusivo de su marca, pero los artículos que se encuentran en ella no deberían serlo. Se espera que los visitantes no sean necesarios para averiguar qué les hará un sitio. Esencialmente, su encabezado debe ser una historia de 10 segundos para demostrar a sus visitantes qué valor será el sitio para ellos. Entonces, ¿qué hará con este espacio para cautivar el interés de sus visitantes? Hablemos de algunas de las tendencias en el diseño del encabezado, lo que puede hacer para usar este edificio muy visible y eche un vistazo a algunos ejemplos interesantes de las cabezas a lo largo de la carretera. Nota: No todos los ejemplos enumerados a continuación uso WordPress, pero puedo terminar usando WordPress. 14 Web Designs Header no es como si sus visitantes no sean conscientes de su capacidad de deslizar una página o navegar haciendo clic para obtener más información sobre la marca detrás de un sitio. Pero, ¿por qué debería hacer eso? Hay suficiente espacio en el encabezado para dar un breve mensaje que les diga todo lo que necesitan saber. Y si 50 palabras o menos no son suficientes, la imagen o diseño de fondo comunicará el resto de la historia. Sobre todo, el encabezado del encabezado puede hacer o destruir las primeras impresiones de sus visitantes, por lo que es tan importante completar esta sección.
Si se esfuerza por encontrar una manera de comenzar su sitio web con una explosión, puede encontrar algo de inspiración en los siguientes modelos de encabezado. 1. Imagen del héroe de gran tamaño
Algunos encabezados, como Cleverbird Creative, son enormes. Debido al estilo modular de diseño de diseño para ser receptivo, la mayoría de los diseños ahora se dividen en distintos bloques y secciones. Sucede que este estilo de diseño es adecuado para estas imágenes con héroes de ancho completo que pueblan tantos sitios web. Tome el sitio web creativo de Cleverbird, por ejemplo. Use una imagen singular y sorprendente, superpuesta con un texto simple, para conocer a los visitantes. No es un error para lo que están buscando aquí: belleza simplificada. Además, tener Wonder Woman no duele. Imágenes correderas

Mmm … helado … Creo que ha habido un tiempo, no muy lejos en el pasado, cuando muchos de nosotros estábamos cuestionando la diapositiva como un elemento de diseño viable. Sin embargo, muchos diseñadores han hecho un gran trabajo al usarlo en encabezados. Hay imágenes deslizantes que funcionan automáticamente desde una hermosa imagen de alta resolución y hay aquellos como Pierre que ruegan a los visitantes que asuman para controlar esa experiencia. 3. Sitio web de Transformadores de imagen Paralax Anakin Design Studio. Parallax es una característica del diseño web moderno durante algún tiempo. Aunque se considera “caliente” hace unos años, el uso de efectos de paralaje sigue siendo popular, y el encabezado ha demostrado ser el lugar perfecto para aplicar este tipo de “ilusión” visual en el diseño web. Sin embargo, lo que verá más recientemente es que los diseñadores le dan al desplazamiento de paralax una ventaja del transformador, probablemente para capturar a los visitantes con el resultado inesperado del pergamino. Anakin Design Studio hizo exactamente con su encabezado.
4. Fondos de video

El sitio web de Brave People hace un gran trabajo al incorporar videos. El fondo de video es otra de esas tendencias recientes que funcionan mejor cuando se aplica al encabezado de la página inicial. Él de Brave People hace un gran trabajo al establecer su sitio, mostrando varios clips. 5. Los canales de navegación ocultos son súper modernos, y la navegación es difícil de ver. Aunque se podría argumentar que el menú de hamburguesas pertenece a los sitios web vistos en dispositivos móviles (como se pretendía inicialmente), es algo que decir sobre lo que hace este tipo de navegación para el encabezado. Los canales del sitio web son un buen ejemplo a este respecto. Al eliminar la navegación, su atención inmediata se siente atraída por imágenes interesantes.
6. La mascota de la marca

Como diría Tony, el tigre sobre la sede de las mascotas: “¡Son geniales!” Si el encabezado es el lugar para presentar a los visitantes a su sitio, ¿qué mejor manera de comenzar que presentar los “personajes” que se encontrarán en el camino? Si su sitio usa una mascota de marca, como lo hace el sitio de copos heladas de Kellogg, este es el momento y el lugar para mostrarlos. 7. Tipografía atractiva

La tipografía fuerte realmente puede hacer que su contenido brille. Se puede hacer mucho para que la impresión de su sitio se elevara. Dicho esto, a veces no se trata de elegir la fuente cursiva más elegante para lanzar frente a la gente. Si mira el ejemplo de Slack anterior, verá que todo se refiere al tamaño de la fuente. No hay nada especial en la tipografía que han elegido, pero es muy limpio y claro. Esto junto con el tamaño del mensaje principal es lo que lo hace tan atractivo. Contenido primero
La página inicial de Glamour está en primer lugar, entre otros. Para los sitios web que se centran principalmente en entregar un contenido establecido a los visitantes (piense en cualquier sitio o blog de noticias importante), una estrategia de contenido será la más lógica. Realmente no tiene sentido cortar las palabras aquí. Las personas han venido a su sitio para leer su contenido, no deben ser bloqueadas por lecturas adicionales en la página de inicio para que pueda acceder directamente como lo hace Glamour. 9. Productos primero

Mientras tanto, Apple Accent es su último producto. En la misma línea, los sitios comerciales electrónicos no deben perturbar para usar el encabezado para escribir un título cautivador o para proporcionar un video explicativo sobre la empresa. Los visitantes saben por qué vinieron al sitio, por lo que puede entrar directamente en él. Sin embargo, a diferencia de los proveedores de contenido, los comerciantes minoristas pueden usar este edificio de primer nivel para mostrar sus versiones más vendidas o más recientes para atraer a los visitantes, como lo hace Apple.

10. CTA frontal y centro de todos los campos guía a los visitantes a hacer clic en CTA Daring.

Puede llegar un momento en que su sitio tiene algo realmente especial que mostrar a los visitantes, algo que desea descargar o comprar. Ahora, incluso si esta puede no ser la atracción principal de su sitio, puede usar el encabezado, ya sea temporal o permanentemente para resaltar este impulso especial, como lo hace el blogger de todas las partes. 11. Colores y texturas vibrantes

Ooh … brillante … Una de las cosas más bellas que salen del diseño de material de Google es nuestro deseo de usar colores, capas y degradados más vibrantes. Ya no tienen que aliviarse en los botones de exhortación, se pueden usar para bloques enteros en el sitio, como lo hace con su encabezado colorido y texturizado.

12. Animación
El sitio web de Disney a menudo presenta animaciones de su último proyecto. No hay absolutamente nada de malo en tener un diseño estático para el encabezado del encabezado, especialmente si desea que el énfasis sea atraído por un CTA o un video. Mantenga todo simple para que no haya distracción de atención que impida que los visitantes tomen las acciones que ha propuesto. Pero para los sitios web que desean una forma interesante de compartir su mensaje con los lectores, pruebe la animación. Por ejemplo, Disney usa una pequeña animación para compartir una serie de mensajes en el mismo espacio, lo que evita que se vea lleno o superpoblado de información. 13. Proyectos geométricos

El encabezado reducido de las perspectivas de la API. El diseño web geométrico es muy grande ahora, porque es adecuado para las líneas lógicas y limpias necesarias para el diseño receptivo. Por lo tanto, no es sorprendente que veamos más sitios web, como el de las perspectivas API, que integran elementos geométricos en el diseño del encabezado. Otros, como Stripe y WPMU Dev, usan líneas diagonales para crear un paisaje visual único e inesperado para los visitantes. 14. El experimental de Teamgeek es extraño y divertido.
Finalmente, llegamos a los modelos de encabezado experimental. La clave para estos generalmente no es que el encabezado sea extrañamente extraño e inusual. Estaría demasiado distraído para los visitantes. En cambio, su concentración debe estar en crear un efecto inesperado causado por un simple movimiento a lo largo del encabezado. Tome el diseño de Teamgeek por ejemplo. Puede ver que hay algo “desactivado” con respecto al logotipo y el mensaje en el centro de la página, pero solo cuando se involucra con ellos se da cuenta de que hay un giro incorporado especial. La conclusión, como puede ver, hay diferentes formas en que puede crear un encabezado para un sitio de WordPress. Sin embargo, si observa de cerca los ejemplos anteriores, notará que los diseñadores fueron muy estratégicos en términos del estilo de encabezado que usaron y qué elementos se incluyeron en él. Cuando llegue el momento de crear un encabezado para el próximo proyecto del sitio web, considere si necesita lo siguiente:

logo
Tradicional vs oculto

La sección del encabezado del héroe vs. Acceso directo al contenido

Declaración de eslogan o misión

Información del contacto
Enlaces de redes sociales
Barra de búsqueda
Conmutación multilingüe
Carrito de compras
La mascota de la marca
Stock Photo versus la foto real de la empresa, la gente o el producto
Imagen estática vs.Imágenes deslizantes vs.Antecedentes de video
Video promocional incrustado
Hasta el botón
Formulario de contacto
Hola bar
Puede encontrar otros artículos que pertenecen a esta sección de encabezado superior de su página inicial.De hecho, se trata solo de lo que tiene más significado para su sitio.En otras palabras, ¿qué elementos contarán la historia de su marca, educará e involucrará al público directamente desde la puerta e inspirará suficiente confianza para impulsarla en su sitio? Nota del editor: Esta publicación se ha actualizado para obtener precisión y relevancia.[Publicado originalmente: agosto de 2017 / revisado: agosto de 2021] Para usted: ¿hay algún elemento de diseño que se niegue a poner en el encabezado de un sitio web?
Etiquetas:
diseño
cabezales