Blog

Todo lo que quieres saber sobre páginas web, diseño gráfico, marketing digital, SEO e invitaciones de boda

Inicio > Blog > Estructura de una página web

Estructura de una página web

Cuando definimos el diseño de un sitio web, debemos pensar la estructura de cada página web y la forma de organizar los elementos que la componen. Hay muchas formas diferentes de hacerlo, pero pocas las que realmente funcionan en usabilidad y resultados.

Podemos recurrir a estructuras como Bootstrap o 960 grid para tener un apoyo. Hoy en día hay muchos frameworks en los que basarnos a la hora de diseñar un nuevo proyecto.

¿Cuál es la estructura de una página web?

La estructura de un sitio web se compone básicamente de la siguiente manera:

  • Contenedor: Es todo lo que se encuentra en la regla Body o en alguna división de nuestra estructura. Dentro del contenedor están todos los elementos del sitio; módulos, imágenes, contenidos… Este contenedor puede tener un ancho fijo o adaptativo en el caso de las páginas web responsive.
  • Header: La cabecera de la página web. Normalmente contiene el logotipo que identifica la marca profesional o personal y la navegación o megamenú que nos indica los apartados que encontraremos dentro del sitio. La cabecera puede ser fija, de manera que se ocultaría al hacer scroll por la página web o flotante, manteniéndose siempre en la parte superior de la pantalla mientras navegamos. Esta última opción es actualmente la mas extendida por su usabilidad.
  • Contenido o cuerpo: La parte más importante en la estructura de una página web. Es lo que mantiene interesado al visitante y lo que los bots de Google leen diariamente. En una página web, el contenido es el rey. En una estructura óptima, el contenido esta centralizado y enfocado a la primera vista.
  • Footer: Al pie de página nos encontramos el footer. Generalmente se usaba para incluir la información de copyright y del desarrollador, textos legales y poco más. Hoy en día es un espacio perfecto para añadir una breve descripción de la marca, información de contacto, enlaces de interés, resumen de categorías, textos legales y acceso a las redes sociales. Esto se hace principalmente por mejorar la usabilidad y tener más texto y enlaces internos para Google.
  • Espacio negativo: También llamado espacio en blanco, es tan importante como el espacio positivo. Es todo lo que no contiene ninguna información, pero que nos ayuda en la estructura de la página web ofreciendo espacios de respiración y equilibrando el diseño.

estructura_sitio_web

 

Tipos de estructuras de una página web

  • Estructura web jerárquica: Es la típica estructura de árbol en la que la raíz es la homepage y se divide en las diferentes secciones que tendrá el contenido del sitio. Estas secciones pueden o no subdividirse a su vez en otras subsecciones. De esta manera, el usuario sabrá siempre en qué lugar de la estructura se encuentra a través de las migas.

estructura_jerarquica

  • Estructura web no jerárquica:
    • Estructura lineal: Es la más simple de todas, funcionando igual que un libro, de manera que de una página web podemos pasar a la página siguiente o la anterior. Es útil para dirigir la atención del usuario, pero podemos hacer que se aburra fácilmente si el contenido es largo o poco interesante.

estructura_lineal

    • Estructura lineal con jerarquía: Esta estructura de página web es una mezcla de las dos anteriores. Los temas y subtemas están organizados de forma jerárquica, pero puedes leer el contenido de manera lineal si lo deseas.

estructura_lineal_jerarquia

    • Red: En este tipo de estructura de página web no hay un orden aparentemente establecido. Las páginas apuntan unas a otras de manera libre. La pega es que no se informa al usuario de dónde se encuentra y puede perderse fácilmente.

estructura_red

¿Cómo debo elegir la estructura de mi página web?

Antes de diseñar la estructura de nuestra página web, debemos decidir si queremos orientarla hacia nuestra empresa o hacia el navegante.

Si en el diseño de nuestra web repetimos de manera constante palabras sobre nosotros, nuestra marca, nuestro equipo, nuestra experiencia y mostramos links sobre nosotros, nuestros proveedores o clientes, etc. es que nuestra web está orientada hacia la empresa (WOE).

Si, en cambio, en nuestro sitio web hay llamadas constantes en segunda persona, se enfoca a ofrecer contenidos de valor, resolver dudas, ofrecer guías o contenidos para descargar, aportar enlaces de calidad y, en resumen, priorizar las necesidades del cliente por encima de nuestra marca, es que nuestra web está enfocada hacia en navegante (WON).

Ambas opciones son igual de válidas, siempre que tengamos claro qué nos conviene más y qué queremos conseguir con nuestra página web: visitas, reputación, ventas, impacto…

Conclusión

Ante un nuevo proyecto, siempre comenzaremos elaborado un briefing lo más completo posible y, a partir de ahí, podremos escoger la plataforma CMS más apropiada para nosotros y comenzar a definir la estructura de nuestra página web.

No olvidéis partir siempre de dos preguntas: ¿Qué quiero conseguir con mi página web? ¿Cómo quiero conseguirlo?

Artículos que pueden interesarte:

También podría interesarte

15 Feb
Hoy, 15 de Febrero, se celebra el día mundial contra el cáncer infantil. Una enfermada ya dura de por sí, que duele aún más verla en niños y adolescentes. Por eso son nuestros héroes, porque son los más valientes, los que luchan con una sonrisa ayudados por su familia y
19 Jul
Entre el proceso creativo del diseño gráfico y el proyecto final se encuentra el amplio mundo de la impresión. Como comentábamos en nuestro post sobre los principios básicos del diseño gráfico, es imprescindible conocer el funcionamiento de cada método de impresión para escoger cuál es el que más nos conviene
13 Ago
Hay muchas empresas que innovaron en su momento publicitando su negocio a través de una página web cuando poca gente lo hacía. Con el paso de los años, como pasa con todo en el mundo de la tecnología, esas webs se van quedando obsoletas. Sitios diseñados con tablas y marcos para

Estructura de una página web