En la anterior entrada hablamos sobre la estructura interna de una web a nivel de código y cómo este podía ayudar en el posicionamiento web. En el post de hoy volveremos a hablar de la estructura de una web pero esta vez a nivel visual; qué es lo que el usuario ve al entrar en una web y cuál es la manera optima de distribuirlo.

¿Qué diseño y estructura debe tener una página web?

Actualmente hay una gran cantidad de diseños de lo más variado cuando hablamos de una página web, en el caso de una web sencilla o estándar puede seguir la siguiente estructura que explicaremos a continuación.

esquema estructura web disseny

Podemos dividir la totalidad de una página web en tres apartados:

Header

Estará situado siempre en la parte superior de la página web actuando de encabezado. En HTML podremos encontrar la etiqueta <header> para encuadrar este contenido dentro de ella.

Como norma general y siguiendo el sentido de la lectura, la esquina superior izquierda será la parte en la que el usuario se fije primero. Por eso se utiliza para situar el logo de la empresa o bien el título de la página web que estamos visitando.

En la esquina contraria, la superior derecha, podemos situar un pequeño apartado de contacto el cual contenga los datos más importantes como puede ser el teléfono, dirección e-mail y las diferentes redes sociales si se disponen de ellas.

Justo debajo de estos primeros elementos situaremos el menú con las principales páginas del sitio web. Así mismo, a este menú le denominaremos como menú principal. Un consejo a tener en cuenta es que dejaremos para el final de este menú las páginas de Contacto y Blog, así como situaremos al principio un regreso a la página de Inicio y el apartado de Empresa con toda su información.

Body

En este apartado encontraremos el contenido desarrollado de la página web que estamos visitando. En este caso deberemos no confundirlo con la etiqueta <body> de HTML ya que no cumplen las mismas funciones. Como explicamos en el post anterior, <body> contiene la totalidad del código que es visible en una página web.

En algunos casos podremos situar tanto a derecha como izquierda una barra lateral o Sidebar que contenga un menú secundario o información relacionada con el contenido de la página. Un ejemplo puede ser un e-commerce de venta de ropa, donde encontraremos sidebars con las diferentes tallas, colores o marcas disponibles del apartado que estemos visitando.

Footer

Por último y no menos importante, lo encontraremos situado siempre al final de la página y su función será la de finalizar la página que se está visitando.

Para aprovechar este espacio se puede utilizar para facilitar al usuario la continuación de su navegación dentro de nuestro sitio web situando un pequeño menú con las páginas principales de la web o las más visitadas.

También es muy aconsejable disponer de un resumen de los datos de contacto, como la situación geográfica, redes sociales y un pequeño formulario de contacto con el propósito de facilitar al usuario una manera fácil de ponerse en contacto con nosotros.

En HTML podremos encontrar la etiqueta <footer> para encuadrar todo este contenido dentro de ella.

 

Si quieres seguir descubriendo consejos y trucos para tu página web echa un vistazo en nuestras entradas al blog y para cualquier cosa no dudes en contactar con nosotros!

Leave a comment