Encabezados de blog: 20 excelentes ejemplos y mejores prácticas
Es probable que el encabezado sea lo primero que un nuevo visitante ve en un blog, por lo que es la primera impresión, pero ¿por qué un encabezado de blog es mucho más importante, o al menos diferente, que el encabezado de un sitio web básico?
Los encabezados de blog necesitan más funcionalidad. Otros diseños web pueden diferir en cuanto a su uso y, por lo tanto, lo que se incluye en el encabezado del sitio web y cómo se presenta puede variar mucho.
Sin embargo, con un blog específicamente, existen mejores prácticas que pueden ayudar al lector a navegar por el blog y participar mejor.
Eso es exactamente lo que hará este artículo. Lo ayudaremos a definir lo que debería ser parte de un encabezado de blog y cómo implementarlo finalmente , y luego veremos veinte asombrosos ejemplos que hacen precisamente eso.
Para determinar cómo debe diseñarse un encabezado de blog y qué poner en él, debemos hacer algunas preguntas sobre el blog:
- ¿Qué estado de ánimo debe establecerse para atraer al público objetivo correcto?
- ¿Cómo puede la primera impresión a través del encabezado comunicar de qué se trata el blog?
- ¿Cómo puede el encabezado del blog dar la primera impresión, "Soy diferente de los demás".
- ¿Qué contenido debe ser inmediatamente perceptible para crear una mejor acción? (haciendo clic en enlaces, suscribirse, etc.)
Vamos a cavar un poco más profundo ...
¿Qué estado de ánimo debe establecerse para atraer al público objetivo correcto?
Cuando un visitante entra por primera vez en cualquier tipo de sitio web, lo primero que determinan es la "personalidad" del blog, y si es o no adecuado para ellos.
Esto es esencial para el diseño de blogs , porque los blogs requieren que la audiencia objetivo correcta sea exitosa .
Por ejemplo: con contenido en la industria creativa, un diseño de blog debe tener un encabezado creativo para impresionar e inspirar a los recién llegados. Un blog más técnico o de negocios querrá un encabezado sencillo y de alta calidad que sea estéticamente atractivo, pero a la vez bastante sutil.
¿Cómo puede la primera impresión a través del encabezado comunicar de qué se trata el blog?
Tenemos una parte de esto cubierta al desarrollar el estado de ánimo general que debería crear el encabezado, pero un encabezado puede hacer más que eso para aclararle al nuevo lector de qué trata este blog.
La primera impresión descubre la personalidad del blog, pero ¿de qué se trata exactamente? Uno podría incluir un eslogan con un logotipo que lo dice, o incluir un pequeño párrafo / frase que le diga al lector qué es este blog y para quién es.
¿Cómo puede el encabezado del blog dar la primera impresión, "Soy diferente de los demás"?
Otra forma de decir esto es: "¿Cómo se recordará este blog? "
Si se combina con cualquier otro blog en Internet, ese no es un buen tema para blogs. Esta es la razón por la cual el encabezado es un lugar principal para el logotipo, lema y cualquier otra marca.
El aspecto general y el contenido presentado a primera vista es lo que quedará, si se presenta lo suficientemente bien.
¿Qué contenido debe ser inmediatamente perceptible para crear una mejor acción? (haciendo clic en enlaces, suscribirse, etc.)
El encabezado debe ser en general simple en términos de contenido, pero algunas formas de contenido pueden estar presentes para ayudar en su llamada a la acción. Después de que un nuevo lector juzga la impresión inicial del blog y decide quedarse, comenzará a buscar fragmentos de contenido y dónde navegar.
Cuando las categorías están presentes de inmediato, el espectador las examinará y encontrará áreas que le interesan. Cuando hay un campo de búsqueda presente o una fuente RSS, es posible que no se suscriban o hagan una búsqueda de inmediato, por supuesto, pero han hecho una nota subconsciente de su ubicación y dónde encontrarla en el futuro.
Las opciones varían mucho más allá de esto, pero básicamente cualquier contenido colocado en el encabezado es la primera impresión para el contenido , por lo que debe ser el más importante y diseñado bien.
Echemos un vistazo a algunos excelentes encabezados de blog y luego analicemos sus beneficios.
1. Tutorial9
Tutorial9 presenta casi todos los beneficios mencionados anteriormente. El logo y el eslogan muestran instantáneamente de qué se trata el blog y cómo puede ayudar al lector.
Las principales piezas de navegación se encuentran en pestañas grandes y notables con iconos incluidos para dibujar en el ojo. Esto lleva instantáneamente al usuario al contenido y lo promueve a profundizar en el blog.
El diseño de fondo es creativo, e incluso tiene un tema de creación artística: para qué sirven los tutoriales. Además, hay contenido esencial a la derecha que incluye el feed RSS, el formulario de búsqueda, las páginas del blog y más.
2. Diseño de hogar Buscar
Este encabezado utiliza un gran uso de la jerarquía visual para transmitir el punto. El título del blog es suficiente para decirle al lector de qué se trata, y promueve quedarse y ver con más detalle de qué se trata.
Luego, el ojo se dirige al primer conjunto de navegación, donde se señala claramente la página sobre, así como la página de contacto. Las imágenes de la derecha establecen el estado de ánimo y proporcionan inspiración para los interesados en el tema de este blog.
Finalmente, las imágenes a la derecha llevan al ojo hacia abajo a una frase más descriptiva para el blog.
3. blog de diseño de blog
Las características más notables de este encabezado son el logotipo y el eslogan. El público objetivo específico de este blog lo hace más único, y al afirmar de qué se trata el blog a primera vista, un nuevo lector lo ve y está convencido de que es diferente de los demás.
Un poco más lejos, y en texto más pequeño, está la cantidad de lectores y el enlace al canal RSS, así como la navegación principal para profundizar en el contenido del blog o en el contenido mismo.
4. Kevin John Gomez
El atractivo y la foto dibujados a mano hacen que el tema de este blog parezca personal y coincide con el nombre del sitio web: el propio webmaster. Este es un blog personal de una persona creativa, y el encabezado lo comunica perfectamente.
La navegación completa está en el encabezado, ya que es navegación limitada y puede tener más énfasis en ella.
5. Gráficos de Naldz
Este encabezado proporciona un gran logotipo y un uso efectivo del contenido en el encabezado. La parte más grande del encabezado es el logotipo, o nombre del blog, y eso lo hace fácil de recordar.
El ojo se dirige a la navegación, donde el lector puede profundizar en el blog en ese momento, o al menos hacerse una idea de lo que trata el blog. La navegación y las categorías son una excelente manera de contarles a los nuevos lectores de qué trata el blog, si están bien definidos.
Un gráfico a la derecha ayuda a establecer el estado de ánimo del blog, y también dirige la atención a la cantidad de suscriptores y al enlace RSS. Con un blog que tiene un conteo moderado a alto, es una buena idea mostrar ese conteo en el encabezado, ya que, de alguna manera, valida el contenido del blog y le da credibilidad.
También hay contenido adicional en la parte superior, en un lugar tradicional para este tipo de contenido, por lo que se puede encontrar fácilmente.
6. Pro Blog Design
Los dos elementos verdes contrastantes en este encabezado hacen más de lo que uno puede pensar. La mayoría ve el logotipo con el color verde de la primera izquierda, donde leen el título del blog y el título. Este es otro gran titular que les dice a los nuevos lectores cómo este blog puede ayudarlos.
Luego, las pestañas grandes sobredimensionadas se enfocan con 1) su tamaño obvio y 2) ese otro estallido de color verde. La otra pestaña verde le dice al lector que este no es solo un blog que puede ayudarlo a brindarle un mejor diseño de blog, sino que también ofrece servicios de diseño de blog. Por encima de eso, iconos de redes sociales de los que el lector puede tomar nota para una acción posterior.
7. Octwelve
Este encabezado creativo ilustrado establece el estado de ánimo para el blog con bastante rapidez. La ilustración es del webmaster y le da al blog un enfoque personal. Comenzamos a tener una idea sobre el contenido del blog, incluso antes de presentarlo.
Este diseño pone una pequeña frase introductoria justo en el encabezado, definiendo exactamente qué es este blog. La navegación principal está justo debajo del logotipo, por lo que se nota casi de inmediato. También hay otros detalles dentro del encabezado que son divertidos y llevan al espectador a mirar el encabezado por más tiempo.
8. Mark Forrester
Este encabezado divertido, peculiar y creativo establece un estado de ánimo, y es lo suficientemente único como para realmente llamar su atención.
El espectador a primera vista está examinando de inmediato el encabezado y sus detalles finos, y la historia que presenta. En eso, viene el logo y el eslogan, donde la vista descubre de qué se trata el blog.
Cuando terminen de disfrutar el encabezado, pueden ver la navegación arriba y los marcadores sociales a la derecha. El encabezado también lleva muy bien en el contenido, lo que lleva al visitante a desplazarse hacia abajo y ver más.
9. Cult-Foo
Este es solo un hermoso encabezado que llama la atención de muchos lectores diariamente. El ambiente se establece como un tema creativo e inspirador, y atrae a la audiencia justa. El logotipo en este encabezado es la "fuente" del resto del encabezado, un recuadro que lleva al resto del diseño.
La barra de búsqueda está justo debajo para facilitar el acceso, y las dos áreas de contenido se definen a la derecha.
Sin embargo, la navegación es realmente genial con este encabezado. Tiene más una sensación de nube de etiquetas, con las categorías más grandes siendo el texto más grande. De esta forma, una vez que un nuevo lector ve la nube de etiquetas, primero ve los elementos más grandes.
A cambio, establecen una conexión con estas palabras y el contenido de los blogs. Ahora, el contenido presentado en el blog tiene la mayor parte de lo que ahora es más memorable sobre su contenido. Asegúrese de revisar la versión en vivo de este sitio: el área de la nube de etiquetas del encabezado se movió realmente con el desplazamiento del usuario, con un borde decorativo pero discreto.
10. Vectips
Este encabezado es bastante minimalista, lo que pone más énfasis en los bits de contenido que contiene. El logo es decorativo y se destaca en un color contrastante, por lo que es memorable.
Le sigue una línea de etiqueta que comparte de qué se trata el blog, y luego navegación simple que lo define más. La navegación es genial porque tiene íconos individuales para atraer la atención de cada uno mientras el lector los hojea.
La ilustración divertida a la derecha establece el estado de ánimo y guía la vista hacia la parte superior de navegación.
11. Mensaje a tiempo parcial
A diferencia de Vectips, este encabezado tiene muchas cosas en marcha. El logotipo en la parte superior izquierda incluye un eslogan y luego dirige la vista a la navegación. Sin embargo, antes de hacer clic en la navegación, el encabezado continúa con la forma en que el sitio web puede ayudar a sus nuevos visitantes y, a continuación, con más navegación. A través de esta jerarquía, el lector acaba de obtener una gran visión general de cómo navegar a través del sitio web.
La ilustración de la derecha lleva al espectador a tomar nota de la fuente RSS, y luego el ojo se dirige más a la derecha para promocionar la página de fans de la compañía en Facebook.
12. TutCandy
La característica más importante del encabezado de TutCandy es su imaginería creativa, colorida y detallada. Con eso, establece el estado de ánimo y crea credibilidad para un blog como este. El nombre está entrelazado dentro de la ilustración colorida, y puede considerarse el logotipo.
A la derecha hay un eslogan que explica qué es el blog y cómo es diferente: "Solo los Tutoriales de diseño más sabrosos". A pesar de que se trata principalmente de un juego de palabras simple y divertido, hay algunas palabras clave que afectan al lector. causa juicio positivo. "Solo": es único, original, único en su tipo.
Responde la pregunta "¿En qué se diferencia este blog de los demás?". "Más sabroso": el eslogan podría haber sido "Tutoriales de diseño sabroso". No solo eso suena un poco extraño, pero no implica ninguna preferencia sobre otros tutoriales de diseño u otros blogs tutoriales.
Arriba, también hay navegación relacionada con el blog y una barra de búsqueda a la derecha. Directamente debajo, el contenido está definido y organizado, lo que lleva al lector a profundizar en el blog.
13. Yoast
Este blog proporciona un excelente contenido en el encabezado. El wireframe único permite que el encabezado contenga gráficos y contenido suficiente para establecer una conexión con un nuevo lector. El personaje y la ilustración detrás de él es una de las primeras cosas que notará un nuevo visitante, y hacen una buena llamada al hacer que el personaje apunte al contenido del encabezado de la izquierda.
Después de que el ojo se dirige al contenido del encabezado, ven el logotipo y las formas de suscribirse o conectarse con el blog. Luego se lee como un fragmento normal de contenido "sobre la página", excepto que aparece en la página principal, lo que significa que no solo los lectores que están lo suficientemente interesados en ir a la página de acercamiento hacen esa conexión personal, sino que todos los lectores nuevos lo hacen. El contenido explica de qué trata el blog y luego muestra contenido popular y destacado.
Debajo de la ilustración de la derecha, se presenta nuevamente el feed RSS, pero esta vez con un gráfico más reconocible. Observe cómo se muestra esta segunda pantalla de feed a la derecha, después de que el lector haya terminado de leer algunos títulos de contenido, un poco de información y después de que ya hayan establecido una conexión con el blog.
14. Ese tipo independiente
El personaje en este encabezado, como todos los demás encabezados con caracteres, proporciona un toque personal y actúa como una excelente introducción al blog. Es lo primero que notará un nuevo lector, y su alta calidad, así como las características de diseño que lo rodean, hacen una declaración sobre el estilo de este diseñador y qué esperar de él.
A la izquierda está el logotipo, que además lleva al ojo del eslogan que explica el contenido presentado en el blog. El ojo es llevado una vez más a un contenido que comparte la personalidad del blog.
15. Ozon3
El tema de este encabezado es único y, en ese sentido, crea un diseño web memorable: una primera impresión verdaderamente genial. Después de apreciar la ilustración, el ojo se dirige al logotipo para la memorización de la marca, y luego conduce directamente a la navegación principal, y luego al contenido.
Los que ven por primera vez pueden ver que este blog se centra en un portafolio de diseño web y lo descubren después de ver realmente el trabajo del diseñador en el encabezado.
A pesar de su simplicidad, este encabezado es muy efectivo en términos de jerarquía visual y establece una gran declaración para los espectadores.
16. nDesign Studio
Este encabezado colorido es la atracción principal de este diseño web, y el logo le dice al visitante que es un estudio de diseño.
El sorprendente encabezado valida las habilidades del diseñador y su marca. La navegación, las fuentes y la barra de búsqueda están muy entrelazadas con el encabezado, lo que los convierte en uno de los primeros elementos perceptibles.
La navegación principal está en forma de pestañas, y primero se reconoce como parte del encabezado. Sin embargo, debido a que se trata de pestañas, parece estar conectado también con el contenido, lo que lleva al visitante a mirar el importante contenido del blog.
17. Web Designer Wall
Este es otro gran blog de Nick La de nDesign Studio, y vemos una técnica similar: un gran fondo / cabecera increíble, que valida los talentos y la experiencia del diseñador. El logotipo es más grande aquí, proporcionando un eslogan que conecta el nombre del blog con su propósito.
El resto del contenido en el encabezado es la navegación inicial, contacto / RSS y la barra de búsqueda. Todos están decorados de manera similar al encabezado, conectándolos.
Sin embargo, estos elementos también tienen características similares al contenido (más fondo plano, textura similar al papel) por lo que también se sienten como si también fueran parte del contenido. Esta sección del encabezado conecta el encabezado introductorio con el área de contenido.
18. Ma.tt
Parece que hay una regla de diseño web definitiva para no hacer encabezados de más de 200-250 píxeles. Esta es una gran regla a seguir por muchas razones diferentes, pero este encabezado muestra cómo romper esa regla de manera efectiva.
Al no mostrar ningún contenido al principio, Matt está utilizando su diseño para causar la mayor impresión en el visor por primera vez. Sus elegantes detalles y formas creativas crean una primera impresión memorable.
El logo es grande, y como el sitio web es un nombre, asume la posición de un blog personal. El feed RSS también se encuentra en la parte superior izquierda, y le dice al espectador que, de hecho, es un blog desde el principio. Finalmente, la navegación es lo último visto, y esto provoca que el visitante continúe a través del blog.
19. Pixel Resort
El estilo de ilustración detallado de este encabezado lo hace divertido, pero limpio y profesional. Incluso se anima cuando la escena transcurre de día y de noche, y le recuerda al visitante que debe seguir mirando el encabezado, que muestra el logotipo (marca) y la navegación. Este método puede promover fácilmente más actividad en el blog.
Debajo de la navegación que se pone en primer plano, hay una navegación secundaria con una flecha "conectándola" al resto del encabezado. Ayuda a definir categorías y ayuda al lector a encontrar el contenido que más le interesa.
20. Webdesigner Depot
Ahh, sí, el blog que estás viendo en este momento. Ya sea que visite por primera vez o haya estado leyendo Webdesigner Depot por mucho tiempo, el encabezado definitivamente llama su atención.
Lo bueno de este encabezado es que no es solo un encabezado con un atractivo creativo, sino que los elementos dentro de él indican que se trata de un encabezado con un atractivo creativo centrado en las computadoras o en la web. Las ilustraciones de la computadora portátil, el "www." Y otras piezas de tecnología atraen a la audiencia objetivo más específicamente.
El encabezado realmente no tiene mucho que ofrecer en términos de contenido, a excepción de un enlace flotante a la página de inicio. Sin embargo, debido a que es tan complejo, cualquier característica adicional puede abrumar el diseño y hacerlo demasiado desordenado.
Sin embargo, este encabezado es perfecto: establece el ambiente, inspira al espectador, y es lo suficientemente corto como para llevar al espectador al resto del contenido.
Terminando
Esperemos que al mirar estos veinte ejemplos podamos ayudar a muchos a definir mejor las preguntas que se presentan al principio de este artículo, y ayudar a cada diseñador web a prestar más atención a los encabezados de los blogs.
El contenido para incluir en un encabezado puede variar mucho de un blog a otro y es importante tener en cuenta los objetivos del blog, el tema y lo que un visitante nuevo estaría buscando al visitar el blog.
Escrito exclusivamente para WDD por Kayla Knight .
Siéntase libre de compartir sus propios consejos para el diseño de encabezados, así como cualquier ejemplo adicional.