Tema 7. Esqueleto de la web (ejemplos)

Las paginas web tiene una estructura diferente dependiendo de las características que éstas tengan ya que pueden ser paginas “sencillas” en su diseño como thepiratebay.sx o una pagina mas compleja como lo es urbanears.com

estructura-web

La primera infografía que presento, es de una pagina que es sobre relaciones de pareja pero dentro de ella, han hecho la infografía de como se encuentra estructurado el diseño de la misma (no tengo idea de porqué) como si se tratase de una pagina de diseño web. En la imagen nos muestra (si se ve pequeña solo denle clic) un header principal que contiene datos de un menú para hacer login, tiene un menú lateral, del lado contrario el contenido de dicho menú y por ultimo el pie de página.

Generalmente cada uno de estos elementos tiene otro tipo de piezas que llevan a un submenú y/o contenido propio al tema de la pagina, por ejemplo, el menú lateral es el que suele organizar todo el contenido de la página mientras que el header se utiliza para el nombre de la pagina, registrarse/ingresar y tener contacto via e-mail con el administrador de la página.

Para la segunda infografía, encontré un ejemplo que tiene una estructura diferente  y me parece mas simple pues es una estructura base para casi cualquier pagina web, con la diferencia que menciona el espacio negativo en la pagina.

estructura

En éste caso, el menú para navegar la página se encuentra en la parte superior como parte de un header ya que está casi a la misma altura que el logotipo de la página, sigue con dos cuadros de contenido que generalmente en uno se coloca el contenido general y en el pequeño cosas como noticias mas destacadas o una galería de fotos que complementa la información.

Continua con el pie de página o footer, que es donde generalmente se ponen botones para contacto por redes sociales como twitter, facebook, pinterest, etc.

En cuanto a lo del espacio negativo, este se refiere a que toda la información se encuentra dentro de un contenedor, que a su vez está dentro de la ventana del navegador y que por lo tanto es necesario “rellenar” ese espacio, esto es porque son espacios para respirar y por tanto dar equilibrio al diseño de la página.

Fuentes consultadas

Gonzalo Suez, Diseñador

http://magazine.joomla.org/es/ediciones-anteriores/julio-2013/item/1398-estructura-y-composicion-de-un-sitio-web

Página de relaciones de pareja (insisto que no sé porqué lo encontré ahí si la página no es de diseño)

http://www.seduquere.com/espanol/web/estructuradelaweb.asp

This entry was posted in Ejemplos and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s