Estructura de una pgina web: Estructura del diseo

Qu es un sitio web? Un sitio web es una serie de pginas individuales, que pueden o no tener alguna conexin temtica. 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
formacin de cierta cohesin, y la unidad visual, que en definitiva es lo que brinda al usuario la sensacin de unidad del sitio.
Al igual que en otras disciplinas, el diseo web ha ido evolucionando hasta llegar a ciertos criterios estndares. Desde el punto de vista del usuario,
tiene la ventaja hacer predecibles a los sitios, permitiendo un rpido acceso a todo sin necesidad de realizar bsquedas por toda la pgina. Desde el
punto de vista de los diseadores, salvo pequeos cambios que pueden realizarse, por regla general esta importante parte del diseo ya se encuentra
prcticamente resuelta.
Estructura del diseo web
La gran mayora de las pginas web tienen divisiones o secciones similares. Lo usual es que, en la parte superior de la pgina 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 pgina por un pie de pgina. La imagen siguiente es un esquema tpico de una pgina web. Se debe tener en
cuenta que este esquema sufre variaciones, aunque normalmente son pequeas.

Encabezad
o

Cuerpo

Pie de

El encabezado
De todas las partes de la estructura del diseo web, el encabezado es la que mayor tendencia tiene a repetirse entre pginas de un mismo sitio. Aun
cuando el sitio tenga grandes diferencias en estructura y contenido entre sus pginas, si mantiene una unidad en su encabezado los usuarios percibirn
la sensacin de unidad que el sitio requiere.

Encabeza

Encabeza

El encabezado es una faja horizontal que ocupa todo el ancho de la pgina 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 sitan una serie de franjas de diferentes grosores.
En la faja superior, se encuentran algunos enlaces generales de la pgina, como acceso a usuarios registrados, registros de usuarios nuevos, acceso a
perfiles, salidas, etc., as como ayudas y buscadores internos. La zona ms ancha generalmente se encuentra ocupada por el ttulo de la pgina,
nombre de empresa, slogan, etc.

La zona inferior del encabezado se emplea para ubicar los links o men de navegacin y las etiquetas de navegacin, uno de los elementos ms
importantes a la hora de ayudar a los usuarios a encontrar las pginas componentes del sitio web. Dependiendo de la complejidad del sitio, puede
encontrarse solo uno de estos sistemas de navegacin 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 seccin, aunque pueden emplearse otros mtodos de clasificacin de los
contenidos y por consiguiente, otros mtodos de organizar la navegacin interna.

Menu de
Buscador

Otra forma de colaborar con la exploracin del sitio por parte de los usuarios es la instalacin de un buscador interno. Tambin es aqu donde los
usuarios buscan este tipo de elementos, ya que convencionalmente es aqu donde la mayora de los diseadores 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 aplicacin de un
buscador interno en el encabezado.
Columnas de exploracin
El cuerpo principal de una pgina web, en el diseo moderno se le encuentra dividido. Una de estas divisiones, consiste una o dos columnas de
exploracin. Este tipo de columnas, se le emplea para ubicar algunos elementos importantes de la pgina, como enlaces externos, navegacin 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 ubicacin no plantea dificultad alguna. En el caso de que el diseo requiera el empleo de dos columnas, pueden ubicarse una a cada lado del
cuerpo principal de la pgina o ambas a uno de los lados, siendo tambin 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 funcin, suelen buscar la informacin de contacto en este tipo de columnas, por lo
que resulta uno de los mejores lugares para ubicar los datos de contacto. A continuacin, vemos algunos ejemplos de columnas de exploracin:

Columna
de
rea de contenido
Esta zona del diseo de la pgina, es la que menos reglas tiene respecto de su diseo, ya que el hecho de que en ella se encuentren los contenidos
principales de la pgina, el diseo depende en gran medida de los mismos, sobre todo en lo que respecta al tipo de contenidos, la cantidad, la
disposicin 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 ttulo, ya que este ttulo tiene las palabras clave que los usuarios luego emplearn en sus
bsquedas y ser de gran importancia para que los buscadores indexen la pgina en forma correcta. Adems, los usuarios buscarn en este punto el
ttulo de lo que se expone, siendo de extrema importancia que el mismo sepa a qu contenidos est accediendo.
Pie de pgina
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 polticas del sitio y asuntos legales, datos de contacto, enlaces a sitios relacionados, enlaces internos, etc.
Ejemplos de estructuras de pginas web.