Saltar la navegación

3.1.5.- Estructura.

Este apartado está relacionado con los apartados Maquetación web y Mapas de navegación que ya has visto.

En el apartado Maquetación web hablábamos de la disposición de los bloques de elementos dentro del espacio de la ventana del navegador y veíamos un ejemplo de una distribución de dichos elementos muy empleada en los diseños de interfaces Web.

Ilustración en la que se pueden ver los diferentes elementos de ordenación en la maquetación web. Sobre un fondo azul que ocupa toda la imagen y que representa la ventana del navegador se encuentran los grandes bloques empleados en la maquetación de una interfaz web: el encabezado en la parte superior con un fondo de color granate, el bloque de navegación a la izquierda ocupando la mayor parte de la altura de la página con un fondo de color verde, el bloque de contenidos paralelo al bloque de navegación con un fondo marrón y, en la parte inferior, el bloque correspondiente al pie con un fondo azul diferente del fondo de la ventana.

En el apartado Mapas de navegación hablábamos de la relación existente entre las páginas a través de sus enlaces.

Ilustración en la que podemos ver gráficamente los cuatro tipos de esquemas de navegación vistos en los contenidos.

En una guía de estilos debe quedar reflejada no sólo la disposición de estos bloques en cada una de las páginas del sitio, sino también el esquema de navegación que va a existir entre las diferentes páginas del sitio.

Es muy común en los sitios Web de gran tamaño que la página de portada o principal tenga un diseño diferente al de las demás, pero, tanto si todas las páginas son iguales como si tenemos grupos diferentes de páginas iguales entre sí, nuestra guía de estilo deberá reflejar todos los diseños posibles indicando en todos los casos:

  • El tamaño en píxeles que ocupará el encabezado y dentro de él lo que ocupará y dónde se ubicará cada uno de sus elementos.
  • El tamaño en píxeles o en porcentaje de la zona de navegación y su ubicación, así como si estará dispuesta horizontal o verticalmente, o si estará dividida en secciones distintas y, en su caso, la ubicación de cada una de ellas.
  • Cómo se dispondrán los enlaces dentro de cada zona de navegación y su tamaño.
  • El tamaño, el lugar y el formato de la zona de posicionamiento dentro de la página.
  • El tamaño de la zona del contenido y su ubicación. Dónde se colocará el título y lo que ocupará dentro de la zona de contenido.
  • Si hay cuadros de contenidos secundarios, cuál va a ser su tamaño y posición y cuál será su funcionamiento. Si estarán siempre visibles o se mostrarán al pasar el ratón por alguna zona concreta.
  • El tamaño y la distribución de los elementos del pie.
  • También se deberán reflejar los huecos que se quieran dejar a propósito.
  • Cómo se van a mostrar los submenús de navegación, si los hubiera.

Citas para pensar

Hay que saber no decir lo que no conviene.

Cicerón
Esta cita se ha escogido por su relación con la tendencia de algunas personas profesionales del diseño de inflar las páginas de contenidos, tan juntos, que provoca tal confusión en el usuario que ya no sabe a donde mirar. Estas personas no se han dado cuenta todavía de la importancia de los espacios.

Reflexiona

¿Por qué crees que es importante en el diseño de página web reflejar los huecos?