Estructura de una página web: Estructura del diseño

¿Qué es un sitio web? Un sitio web es una serie de páginas individuales, que pueden o no tener alguna conexión temática. Sin embargo,
tendemos a pensar en los sitios web como si se tratara de una unidad. Esto está sustentado en base a dos grandes criterios, que son los
enlaces que permiten la formación de cierta cohesión, y la unidad visual, que en definitiva es lo que brinda al usuario la sensación de
unidad del sitio.

Al igual que en otras disciplinas, el diseño web ha ido evolucionando hasta llegar a ciertos criterios estándares. Desde el punto de vista del
usuario, tiene la ventaja hacer predecibles a los sitios, permitiendo un rápido acceso a todo sin necesidad de realizar búsquedas por toda la
página. Desde el punto de vista de los diseñadores, salvo pequeños cambios que pueden realizarse, por regla general esta importante parte
del diseño ya se encuentra prácticamente resuelta.

Estructura del diseño web

La gran mayoría de las páginas web tienen divisiones o secciones similares. Lo usual es que, en la parte superior de la página se encuentre
un encabezado, seguido de un cuerpo principal que suele estar flanqueado por una columna lateral (tanto a la izquierda como a la derecha)
o dos columnas laterales, seguidas al final de la página por un pie de página. La imagen siguiente es un esquema típico de una página web.
Se debe tener en cuenta que este esquema sufre variaciones, aunque normalmente son pequeñas.

Encabezado

Cuerpo principal

Pie de página

El encabezado

De todas las partes de la estructura del diseño web, el encabezado es la que mayor tendencia tiene a repetirse entre páginas de un mismo
sitio. Aun cuando el sitio tenga grandes diferencias en estructura y contenido entre sus páginas, si mantiene una unidad en su encabezado
los usuarios percibirán la sensación de unidad que el sitio requiere.

Encabezado
 Encabezado

El encabezado es una faja horizontal que ocupa todo el ancho de la página en la parte superior de la misma. A la izquierda del encabezado
suele ubicarse el logotipo del sitio, que ocupa un área importante dentro del mismo, aunque suelen haber diferencias importantes de un
sitio a otro.

Desde el final del logotipo, ocupando el centro y la zona derecha del encabezado, frecuentemente se sitúan una serie de franjas de
diferentes grosores. En la faja superior, se encuentran algunos enlaces generales de la página, como acceso a usuarios registrados, registros
de usuarios nuevos, acceso a perfiles, salidas, etc., así como ayudas y buscadores internos. La zona más ancha generalmente se encuentra
ocupada por el título de la página, nombre de empresa, slogan, etc.

La zona inferior del encabezado se emplea para ubicar los links o menú de navegación y las etiquetas de navegación, uno de los elementos
más importantes a la hora de ayudar a los usuarios a encontrar las páginas componentes del sitio web. Dependiendo de la complejidad del
sitio, puede encontrarse solo uno de estos sistemas de navegación o los dos; por ejemplo, cuando el sitio está dividido en secciones, uno de
ellos está destinado a estas divisiones, mientras que el otro sirve para navegar dentro de cada sección, aunque pueden emplearse otros
métodos de clasificación de los contenidos y por consiguiente, otros métodos de organizar la navegación interna.

Menu de navegacion

Buscador interno

Otra forma de colaborar con la exploración del sitio por parte de los usuarios es la instalación de un buscador interno. También es aquí
donde los usuarios buscan este tipo de elementos, ya que convencionalmente es aquí donde la mayoría de los diseñadores los ubican,
aunque en algunos casos, puede encontrarse en la parte superior de alguna de las columnas laterales. En la imagen anterior mostramos un
ejemplo de la aplicación de un buscador interno en el encabezado.

Columnas de exploración

El cuerpo principal de una página web, en el diseño moderno se le encuentra dividido. Una de estas divisiones, consiste una o dos
columnas de exploración. Este tipo de columnas, se le emplea para ubicar algunos elementos importantes de la página, como enlaces
externos, navegación interna, publicidad, informaciones adicionales y contenidos secundarios.

Cuando se emplea una única columna, es indistinto para los usuarios, de acuerdo a estudios sobre el comportamiento de usuarios de sitios
web, ya que su ubicación no plantea dificultad alguna. En el caso de que el diseño requiera el empleo de dos columnas, pueden ubicarse
una a cada lado del cuerpo principal de la página o ambas a uno de los lados, siendo también indiferente en este caso si se ubican a la
derecha o a la izquierda del contenido principal.

Los usuarios, dado el uso continuo de estos elementos para esta función, suelen buscar la información de contacto en este tipo de
columnas, por lo que resulta uno de los mejores lugares para ubicar los datos de contacto. A continuación, vemos algunos ejemplos de
columnas de exploración:
 Columna de
exploración

Área de contenido

Esta zona del diseño de la página, es la que menos reglas tiene respecto de su diseño, ya que el hecho de que en ella se encuentren los
contenidos principales de la página, el diseño depende en gran medida de los mismos, sobre todo en lo que respecta al tipo de contenidos,
la cantidad, la disposición que se desea emplear, etc. Sin embargo, hay que considerar algunas reglas importantes y que, salvo muy raras
ocasiones, deben ser seguidas al pie de la letra.

En la parte superior de esta área se debe emplazar el título, ya que este título tiene las palabras clave que los usuarios luego emplearán en
sus búsquedas y será de gran importancia para que los buscadores indexen la página en forma correcta. Además, los usuarios buscarán en
este punto el título de lo que se expone, siendo de extrema importancia que el mismo sepa a qué contenidos está accediendo.

Pie de página

Finalmente, debajo de todas las secciones, se coloca una faja horizontal en cuyo interior se colocan algunos elementos importantes, como
el autor, copyright, acceso a diversas políticas del sitio y asuntos legales, datos de contacto, enlaces a sitios relacionados, enlaces internos,
etc.

Ejemplos de estructuras de páginas web.