comparte el articulo 

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

Actualizado el 26/02/2010 < > 9 Cometarios

Resumen: La estructura del diseño de una página web tiene una serie de reglas que se encuentran estandarizadas gracias al uso continuo. Los usuarios conocen estas reglas y esperan encontrar cada cosa en su sitio.

¿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.

Para hacernos una idea de estos conceptos, imaginemos una colección de libros de una editorial. Estas colecciones suelen estar formadas por libros con dimensiones y encuadernación idénticas, para que se tenga la sensación visual de que se trata de una unidad, por más que se trate de una serie de libros independientes, de autores y temáticas disímiles. Lo mismo sucede con los sitios web. Los grandes portales suelen emplear cierta unidad visual para dar a entender al usuario que se encuentra en un sitio determinado.

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

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.

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.

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. Esta imagen debe tener un enlace a la página principal del sitio, ya que es uno de los estándares más respetados por los diseñadores y una de las formas que tienen los usuarios de volver al inicio.

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 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.

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. A continuación, mostramos un ejemplo de la aplicación de un buscador interno en el encabezado.

Buscador 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:

Columnas 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 entre etiquetas <h1>, 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.

En caso de que los contenidos sean muchos y haya que hacer desplazamientos importantes hacia abajo, es de mucha utilidad colocar al final del área algún tipo de salto al inicio, para evitar que el usuario deba realizar grandes desplazamientos. En el caso de que se empleen varias páginas para albergar contenidos relacionados, tanto al inicio de la página como al final de la misma es de gran utilidad colocar un navegador de páginas (del tipo Página anterior 1 – 2 – 3 … Página siguiente) para que la navegabilidad entre ellas sea sencilla.

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.

Publicado el 26/02/2010, última actualización 26/02/2010.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: Diseño de Páginas Web

Añadir Comentario (Subir al texto)

9 Cometarios

  1. Introducción a la maquetación de páginas web

    [...] que se colocan los elementos que la componen, de forma que tenga una estructura visual determinada. La estructura de una página web, tiene una serie de reglas que están basadas en dos aspectos importantes: la tendencia de los [...]

    Miércoles, 7 de abril 2010

  2. Buscador para páginas web: Google Site Search

    [...] hacer un lugar donde lo instalaremos en el HTML. Generalmente los buscadores se colocan debajo del encabezado o en el encabezado mismo, aunque también es posible encontrarlos en las columnas [...]

    Miércoles, 12 de mayo 2010

  3. Víctor

    Mil gracias por los conocimientos que generosamente brindan. A medida que avanzo con la lectura me doy cuenta que fue redactada por verdaderos profesionales. Sigan así, por favor.
    Un saludo calurosamente cordial desde Lima, Perú.

    Martes, 14 de septiembre 2010

  4. Verónica Milán

    Me alegro de que te sea útil Víctor ;)

    Saludos y a seguir aprendiendo!

    Viernes, 17 de septiembre 2010

  5. Fabiola

    Gracias por publicar este contenido, es muy útil.
    Te quería preguntar si hay alguna manera de que podemos hacer una cabecera, pie y menús laterales iguales para todas las páginas de nuestro sitio, para que cuando tengamos que actualizar estos apartados sólo tener que modificar una hoja y no 20, 30 o las páginas que tengamos.

    Imagino que se tratará de alguna plantilla, pero en css solo puedo dar el formato, y no sé como hacerlo.
    Tengo la plantilla de como quiero que sea mi página en html, y me gustaría aplicarla al resto de las páginas.

    Gracias de antemano

    Martes, 1 de marzo 2011

  6. Verónica Milán

    Hola Fabiola,

    Claro que se puede hacer, como dices con plantillas. Por ejemplo con PHP puedes crear un archivo que se llame menu.php y hace una llamada a ese archivo en todas las páginas donde quieras que aparezca tu menú (la llamada se hace con un include).

    Si sabes algo de programación, puedes crear un sitio dinámico que funcione con un par de plantillas html y cargue el contenido según el usuario lo “reclame”.

    Saludos.

    Miércoles, 2 de marzo 2011

  7. Fabiola

    Mil gracias, me pongo ahora mismo con ello. Que alegría me has dado, jiji.

    Jueves, 10 de marzo 2011

  8. elizabeth

    porfavor alguien me puede especificar cual es la diferencia de una arquitectura a una estructura de una paguina web

    Martes, 2 de abril 2013

  9. yesith

    su información es muy útil, para las personas como yo que apenas nos iniciamos en esto de los sitios web

    Lunes, 16 de septiembre 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras