Hacer un rediseño siempre es algo complicado y al final nunca se puede agradar a todas las personas al mismo tiempo, pero de todo el trabajo que conlleva, siempre encuentro que el header o encabezado es una de las tareas más complicada, ahora mismo me encuentro lidiando con ello.
Estamos pensando en un rediseño de varias áreas de Foros del Web por eso he estado viendo diferentes tipos de encabezados, acá mismo hemos publicado algunos ejemplos que me han servido a tomar unas ideas, pero en todo lo que he visto también me he encontrado con cada idea… y no precísamente buena.
¿El tamaño importa?
Yo creo que sí, y mucho, un encabezado es una parte importante de un sitio web, pero no la más importante por eso hay que tener cuidado con cuánto espacio del sitio en general le dedicamos.
Es cierto que hay gente muy talentosa y puede crear encabezados muy creativos, y no estoy en contra de ello, pero sí en que hay un límite, ¿han visto el blog de Matt Mullenweg? el sitio pesa unos 2MB y debido a como desarrollaron el tema de WordPress, solo el header ocupa 1MB distribuido en tres archivos.
Pero dejemos de lado el peso, si examinamos el sitio, solo el encabezado tiene 675px de alto, a una resolución de 1280×800 nos ocupa todo el espacio del navegador sin dejarnos ver el contenido y aportando apenas unos cinco enlaces, sí, está bien diseñado pero parece que fue hecho para una revista o un espectacular.
¿Les gusta a ustedes ese tipo de encabezados? A mi me parece que pierden el sentido de que en ese espacio debe haber información útil y no un espacio dedicado a mostrar lo buenos que son con Photoshop.
Ahora comparemos esos 675 contra los apenas 28px de alto que tiene el header de Facebook, es apenas una barra superior pero muy bien utilizada, contiene enlaces importantes para el uso del sitio, claro que por el tipo de blog de Matt la utilidad del header difiere bastante pero podemos ver claramente los extremos en diseño.
¿Qué les gusta ver en un encabezado? Con el crecimiento del mercado de las netbooks un header bien diseñado con una altura de talvez unos 125px promedio podría ser ideal para que los usuarios no tengan que hacer tanto scroll en la pantalla para llegar a las opciones o navegación que solo se encuentra en esa área.
Comenten por favor qué opinan de estos dos casos de encabezados extremistas 😉 y si tienen alguna experiencia en ello o conozcan algún sitio con un header que les parezca excelente, no duden en compartirlo.
Es cierto que hay encabezados muy buenos, pero no hay que olividar que lo que busca el usuario es la informacion. Pudieramos compararlo con aquellos sitios en flash que son impresionantes pero tardan mucho en abrir. Muchas veces el usuario se va del sitio sin llegar a ver el contenido.
Hay veces que como diseñador uno quiere crear algo impresionante, pero tenemos que entender que en internet la informacion es lo mas importante y muchas veces tenemos que hacer de lado el diseño en beneficio de la usabilidad.
De verdad se nota mal el encabezado muy grande. Saludos
Yo también creo que hay que usar un punto medio, 125-150px no están nada mal, el header debe ser llamativo e informativo, pero sin agoviar al usuario, en la web que he linkeado puse 200px, algo menos ya que el menú va dentro del propio header, la barra de Facebook tiene demasiada información en muy poco espacio, es demasiado simple y esto hay gente a la que no le agrada, por el contrario ma.tt desperdica una de las zonas más importantes de la web y cualquier despistado que llegué con una resolución de 800×600 se quedará cojerá y cerrará el navegador no encontrando útil la web, ya que solo ve un dibujo.
Ni grande ni pequeño, mediano :p saludos
yo creo que los encabezado de un sitio web deberían cumplir los objetivos del sito en cuanto a presentación del mismo y navegabilidad del usuario.
Mostrando adecuadamente todos los Links / Menus de la forma mas AGRADABLE posible al diseño general del sitio, sin recaer en el PESO extremo de imágenes / animaciones ni en algo tan minimalista que solo se muestre lo estrictamente necesario, sin retoques o adornos visuales.
en resumen un encabezado / header debiera ser un equilibrio entre presentación y accesibilidad mostrando y fortaleciendo la presentación, personalidad del sito pues el encabezado casi siempre es lo que primero ve el usuario.
Me parece que es un poco rudo hablar de mal o bien o menos o más. El header cumple una función de seducción en algunos sitios mientras que en otros es más funcional… en algunos podemos ver headers que cumplen ambas funciones. Simplemente depende de qué es lo que necesitamos que haga por nosotros. La atracción de facebook es su funcionalidad, ergo su header es funcional. El blog de ma.tt tiene contenidos. Hay que agarrar al usuario para que se interese. El header es una herramienta. Ahora, sobre el peso… depende del target. ma.tt se mueve a través de personas que probablemente tienen una conexión más rápida de lo normal, por lo que el peso importa un poco menos que para un sitio masivo como facebook. Igual considero que 1 mega es mucho, pero la desición parte por su función.
Como ejemplo pongo http://sudala.cl/ quienes (acabo de darme cuenta) cambiaron el tamaño de su header. En la primera etapa funcionaba perfectamente un header más grande, ya que la función era incentivar al usuario, no tenían tanta información que entregar, pero si expectativas. Ahora, tienen más información y esto require mejores herramientas de navegación, además que 1 item específico de los contenidos (los expositores YA confirmados) es mucho más relevante ya que es a lo que irán los asistentes… antes eran sólo probables expositores.
Eso
@Matias, a mi no me parece malo el encabezado de sudala.cl porque lo utilizan para mostrar información importante, a diferencia del de matt que más parece una demostración de habilidades con el photoshop.
Y ese es el punto, el header debe cumplir una función muy importante como mencionó arriba Elkin.
Header pequeño = Altamente social, orientado al contenido, gran cantidad de contenido.
Header mediano = web personal, web de alguna empresa, orientado a la persona/empresa.
Header Grande = web personal, orientado al diseño, web de corta duración, poco contenido.
Se que no todo es cierto, pero el punto es que, debemos saber a que se orienta nuestra web, y que pretende, para poder decidir un header correcto.
@Matías Halles no podría estar más de acuerdo con vos.
El diseño de un header se debe ajustar a las necesidades a cubrir del sitio. Precisamente @Oscar: El objetivo del header de matt es demostrar sus habilidades en photoshop, y es por eso que cumple las necesidades del prospecto. Puede parecer osado o como común, pero no por eso siginifica que no da en el clavo.
Un header esta ajustado a la funcionalidad y usabilidad del sitio, es por eso que el header del facebook jamas sería como el de matt, y si el de matt fuera como el de facebook realmente quedaría mal.
@Lum: En cuanto a lo de 800 x 600, creo que hoy en dia el estandar del diseño web en general ya salto esa barrera, es cierto que muchos aún pueden estar utilizando esa resolución, pero a esta altura, visitando cualquier sitio ya deben tener bien en claro que tienen que usar las barritas de scroll, ó se compran un monitor nuevo.
@Lucas, Lo de photoshop era solo un decir, porque el header realmento no lo hizo matt, ni creo que sepa mucho de photoshop :S contrató a un diseñador
@Gabriel interesante punto de vista respecto a los tamaños de headers.
@todos, la comparación matt/facebook como dije en el artículo es solo para ver los extremos no para compararse entre ellos
[…] Decisiones difíciles al rediseñar un encabezado […]
Yo creo que @Gabriel tiene la punta. Sumando, creo que lo ideal para un header es que conjugue contenido y demostración de diseño gráfico al mismo tiempo.
Por ejemplo:
En este momento estoy diseñando un sitio inmobiliario de unos duplex. El header consta del nombre arriba, un pequeño menú abajo y de una fotografía (profesional y photoshopeada, que impacta) del frente de las casas por debajo de los dos primeros elementos. Pero además, ese encabezado es la galería fotográfica del sitio: uno va pasando las fotos de las secciones de la casa, mientras que el nombre y el menú permanecen por sobre éstas.
Tiene 400 px de alto, pero se aprovechan además para incorporar un elemento fundamental de ese sitio. Espero haberme explicado bien.
@Lucas, no creo que haya aún que olvidarse de los de 800×600, siguen siendo al menos un 15%, y eso no es poco. También hay que ver a target nos dirigimos, si sabemos que en nuestro target un porcentaje muy chico o nulo de usuarios tiene esa resolución…
Se puede conseguir un equilibrio entre diseño y usabilidad, tampoco hay que olvidar que la primera impresión es la que cuenta, osea no sobrecargar una página con un header que demore medio siglo en cargar ya que aun hay conexiones lentas y el consumo de ancho de banda tiene su costo. No es lo mismo una cabecera de un sitio de una red social que uno de un portal de turismo, yo prefiero usar estándares manteniendo la armonía del contenido sin por ello sacrificar el diseño. osea practicidad y estética