Diseño de Paginas Web

Diseño de la estructura de una página web de 0 a 100

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (44 votos, promedio: 2,41 de 5)
Cargando...

Mega guía paso a paso sobre cómo estructurar y organizar una página web. Te enseñamos a hacer estructuras escalables y fáciles de mantener en el tiempo.

Cuando los sitios son pequeños, la falta de una estructura ordenada posiblemente pueda pasar desapercibida o los inconvenientes originados sean menores. Pero a medida que el sitio crece, la aparición de nuevos archivos, contenidos, secciones, formularios, etc., irán haciendo cada vez más compleja la funcionalidad del sitio.

Por ello, desde Prismalia nos aconsejan siempre prestar especial atención a elementos tan fundamentales del diseño web como lo son el menú de navegación principal y el menú del pie de página. Estos dos elementos serán clave en la organización del contenido de tu web y en la estrategia de interlinking interno.

Sin embargo, es posible hacer una planificación de la estructura del sitio web desde los inicios, de forma que el crecimiento del mismo se haga de forma ordenada y sin generar dificultades, tanto a los usuarios como al webmaster.

Para hacernos una idea del concepto de estructura web, 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 distintas.

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 el mismo sitio, aunque según la categoría puedan estar hablando de diferentes temas.

Ventajas de diseñar la estructura de una web

Al igual que en otras disciplinas, el diseño web ha ido evolucionando hasta llegar a ciertos criterios estándares. En el caso de la estructura de las páginas web tenemos bastante información para definir una guía clara.

  • Desde el punto de vista del usuario, tiene la ventaja de hacer predecibles 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 tiene una guía de trabajo muy clara.

Estructura general del diseño de una web

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.

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 una cabecera, 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.

Si te interesa, puedes ver la guía para maquetar una estructura web básica.

Cabecera

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.

Cabecera estructura web

Aún cuando el sitio tenga grandes diferencias en estructura y contenido entre sus páginas, si mantiene una unidad visual en su encabezado, los usuarios percibirán la sensación de unidad que la web requiere.

La cabecera es una franja horizontal que ocupa todo el ancho de la página en la parte superior de la misma.

Ahora vamos a explicar las partes que forman la cabecera.

Logotipo

A la izquierda del encabezado suele ubicarse el logotipo del sitio, que ocupa un área importante dentro del mismo.

Cabecera: logotipo

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.

Zonas de navegación

Desde el final del logotipo, ocupando el centro y la zona derecha de la cabecera, frecuentemente se sitúan una serie de zonas de navegación.

En la zona superior, se encuentran algunos enlaces generales de la página, como acceso a usuarios registrados, registros de usuarios nuevos, acceso a perfiles, 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.

zona de navegación superior

La zona inferior del encabezado se emplea para ubicar el menú de navegación principal, uno de los elementos más importantes a la hora de ayudar a los usuarios a encontrar las páginas componentes del sitio web.

zona de navegación inferior

Dependiendo de la complejidad del sitio, puede encontrarse solo uno de estos sistemas de navegación o los dos.

Buscador

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.

Columnas laterales

El cuerpo principal de una página web, en el diseño moderno se encuentra dividido. Una de estas divisiones, consiste una o dos columnas laterales.

estructura web columnas laterales

Este tipo de columnas, se emplean 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 si se coloca a derecha o izquierda del contenido, 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 zonas de navegación en este tipo de columnas, por lo que resulta uno de los mejores lugares para colocar menús secundarios al menú principal de la cabecera.

A continuación, vemos algunos ejemplos de columnas laterales:

Columnas de exploración

Área de contenido principal

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.

estructura web: contenido principal

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 colocar el título principal 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.
  • 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.

estructura web: pie de página

Diseño de la estructura de las plantillas de un sitio web

Un sitio web no es una unidad real, sino que se trata de una serie de páginas independientes. El concepto de unidad de un sitio está dado por la unidad conseguida a través del diseño. Esta unidad implica necesariamente que el diseño tenga coherencia visual.

Es poco práctico y una gran pérdida de tiempo establecer diseños diferentes para páginas o secciones de un mismo sitio.

Esto se logra empleando plantillas de diseño, o sea, la repetición de un mismo diseño con variación casi en forma exclusiva en los contenidos.

Sin embargo, existe la posibilidad de que algunas secciones o páginas del sitio requieran un tratamiento especial, por lo que seguramente el diseñador necesitará realizar más de una plantilla, que generalmente son variaciones de una misma plantilla original.

Dónde empezar el diseño de la plantilla

Todo diseñador novato tiene la tendencia natural de iniciar el diseño de un sitio construyendo la página inicial.

Sin embargo, la página inicial es una página con características especiales, por lo que si lo que se desea es establecer una unidad visual del sitio, lo correcto sería comenzar por las páginas cuyo diseño se repetirá. Esto quiere decir, que lo mejor es comenzar diseñando las páginas interiores.

Luego, el método debería continuar con las variaciones que algunas de las páginas interiores requieren, para finalizar en el diseño de la página inicial.

Las páginas interiores deben ser diseñadas teniendo en cuenta cuáles son sus funciones:

  1. Páginas puramente de contenido: en un blog son los posts, en una tienda los productos, en una web corporativa las distintas páginas con información.
  2. Páginas cluster o de navegación: son páginas con listas de enlaces a otras páginas. El ejemplo típico son las categorías en los blogs o las tiendas online.
  3. Páginas secundarias: son páginas especiales que sirven de apoyo a páginas más pilar de la web. Como ejemplos pueden ser página de contacto, legales, de suscripción a un newsletter, etc.
  4. Página home: la página principal del sitio. Como hemos dicho, esta página puede tener una estructura diferente siempre que mantenga el diseño visual del resto del sitio web.

En casos de sitios muy complejos, puede ser necesario establecer plantillas secundarias para diferentes niveles de estructura.

Algunas páginas web, por razones de marketing necesitan establecer entradas alternativas al sitio, lo que se llaman landing pages.

Por ejemplo, la página web de una cadena de supermercados, durante el período que dura una oferta especial, necesita que sus visitantes ingresen por otra página de inicio, que contiene los detalles de la oferta. Esta landing page que funciona como entrada alternativa, necesita tener una clara vinculación visual con el resto del sitio, y además debe orientar al visitante para que acceda a la página principal del sitio.

La página de inicio

La estructura de la página de inicio, si bien tiene características especiales que hay que tener en cuenta, una vez que los pasos anteriores ya han sido resueltos, resultará sensiblemente más sencilla de realizar que si se hubiera comenzado el diseño por ella.

La página de inicio tiene cuatro elementos por los que está compuesta. Cada uno de estos elementos es importante, aunque la importancia y la relación que tienen entre ellos es variable de un tipo de sitio a otro.

Los elementos son los siguientes:

  1. Principio de identidad
  2. Navegación
  3. Enfoque del contenido
  4. Herramientas

El diseño de una página de inicio debe siempre contemplar estos cuatro elementos constitutivos, aunque la importancia que debe darse a cada uno de ellos está relacionada con lo que el visitante querrá encontrar en el sitio cuando ingrese.

Un ejemplo notable es la diferencia que existe entre las páginas de inicio de los buscadores Google y Yahoo!. Mientras que la página de inicio del buscador de Google se centra casi exclusivamente a la navegación, la página de inicio de Yahoo destaca otros elementos, como noticias destacadas (contenido) y otros servicios (herramientas).

Otras páginas se deben centrar más en la imagen corporativa (principio de identidad), aunque en el caso de que no se trate de marcas plenamente identificables por tener una gran presencia, debe agregarse además breves comentarios explicativos que orienten al usuario en lo que encontrarán en el sitio.

Si no se posee una marca reconocible a simple vista por cualquier usuario, la simple presencia de un logotipo, por bien diseñado que esté, no será suficiente para que el usuario sepa que es lo que encontrará en el resto del sitio.

Menú de navegación principal

Los menús principales, aquellos más visibles, generalmente ubicados cerca de la cabecera de la página, deben estar destinado a mostrar las secciones más apetecibles por los visitantes que ingresan a la página por primera vez.

Esto se debe a que los usuarios habituales de un sitio, generalmente conocen en qué secciones pueden encontrar la información que buscan, mientras que los usuarios que ingresan por primera vez, deben ser rápidamente orientados a las secciones que necesitan.

En este enlace, puedes ver más a fondo como diseñar y crear un buen menú de navegación.

Como estructurar los archivos de una página web

Cuando nos iniciamos en el diseño de páginas web, tendemos a pensar que la estructura de los archivos y directorios en que se encuentra organizada nuestra página, resulta de importancia menor.

Nada más lejos de la realidad, resulta importante para quien administra el sitio, tener una estructura ordenada, ya que a la hora de introducir cambios, agregar nuevos contenidos, etc., la tarea puede resultar mucho más simple, con el consiguiente beneficio en tiempo y costes.

Esto indirectamente beneficia a los usuarios, dado que todo el tiempo que se ahorre en tareas que pueden simplificarse, puede invertirse en contenidos.

Si en algún momento se pretende hacer una reforma en la página, aumentar sus secciones, etc., la tarea se ve enormemente simplificada si los archivos que componen el sitio se encuentran ordenados y su contenido puede ser fácilmente identificable a través del nombre del archivo o del directorio.

También tiene beneficios en el posicionamiento de la página. En este enlace puedes profundizar mas en aspectos relacionados con el SEO.

Semántica de los archivos

La organización semántica de un sitio web tiene como finalidad facilitar la tarea de acceder a los diferentes archivos y directorios que lo componen, de forma tal que cualquier persona, incluyendo al propio creador, no tenga que hacer grandes esfuerzos para localizar cada uno de los componentes del sitio.

Quizá para una pequeña página web con unas pocas páginas, esto pueda parecer excesivo, pero no lo es para un sitio con miles de páginas.

La falta de una planificación y estructuración de los archivos del sitio en sus inicios, puede hacer muy compleja la administración del mismo con el paso del tiempo.

Nombre de las páginas, archivos y directorios

Procura usar nombres de archivo y directorio descriptivos, que sean entendibles a simple vista. Procura evitar símbolos raros o cualquier texto que sea difícil recordar en un futuro qué significa.

De esta forma se facilita la comprensión de los archivos y directorios componentes de una página web.

Estructura eficiente y facilidad de mantenimiento

Algo que su uso se ha visto notablemente incrementado en los últimos años, es la utilización de archivos separados y en tanta cantidad como funciones deban cumplir.

Esto también tiene la finalidad de facilitar su mantenimiento, a lo que se agrega la posibilidad de realizar trabajos por secciones sin que la totalidad de la página se vea afectada.

Por ejemplo, un sitio web compuesto por muchas páginas, puede requerir varios estilos diferentes, lo que aún en los casos cuyas diferencias sean menores, se emplean varios archivos.

Este tipo de divisiones de los archivos, son frecuentes en CSS, aunque también se emplean para javascript, php, etc. Todo esto favorece enormemente la organización de los archivos del sitio y reduce la cantidad de código que debe escribirse.

También resulta muy importante, la colocación de los archivos en directorios que se encuentren en un orden lógico, ya que esto también colabora en la simplificación de los trabajos de mantenimiento y reforma.

Importancia de las URL descriptivas

Otra razón para emplear nombres descriptivos en archivos y directorios, es que todos ellos forman parte de la URL, elemento que tienen muy en cuenta los rastreadores de los buscadores.

Esto agrega la posibilidad de emplear la URL  como lugar donde colocar las palabras clave de nuestros contenidos, lo que facilita la clasificación por parte de los buscadores, y por consiguiente, colabora en el posicionamiento del sitio en ellos.

Imaginemos dos URL’s bien diferentes, una compuesta por el nombre del sitio y una serie de directorios y archivos con nombres complejos, y otra URL  con nombre del sitio, los archivos y directorios con títulos descriptivos:

  • http://www:sitiocomplejo548.com/efs54/jlv.html
  • http://www:sitiosimple.com/categoria/palabras-clave.html

¿Con cuál de las dos crees que los buscadores tendrán menos dificultades para clasificar los contenidos, y por tanto indexarla y colocarla en las SERP’s? Evidentemente, la segunda opción es la más correcta.

Los buscadores pueden emplear la URL  como primer elemento a analizar y es una de las mejores formas de incluir palabras clave.

Estructura HTML básica de las páginas web

Cuando el diseñador toma los contenidos y los introduce en el cuerpo del documento, mediante el empleo de etiquetas HTML o XHTML marca la estructura del contenido y jerarquiza los mismos.

  • Mediante el empleo de las etiquetas h1, h2, h3, etc., podrá establecer títulos y diferentes grados de subtitulado para cada una de las secciones del texto.
  • Mediante el empleo de la etiqueta <p> hará las divisiones necesarias en el texto, y dará énfasis a las partes más importantes del mismo mediante el uso de etiquetas elaboradas para esa finalidad, como <strong> y <em>.

La estructuración semántica del contenido tiene una importancia crucial, tanto en la presentación del contenido como en la optimización para los motores de búsqueda, por lo que debe ser cuidadosamente planificada y elaborada.

Marcado semántico de los contenidos

Las páginas web se encuentran escritas en lenguaje HTML, que tiene una serie de etiquetas que permiten clasificar y ordenar en diferentes niveles y estructuras al contenido. Esto es lo que denominamos el marcado semántico de los contenidos.

La aplicación de etiquetas HTML en los contenidos, mucho más allá de su utilidad desde el punto de vista estético, tiene la finalidad fundamental de permitir ordenar los contenidos.

Así por ejemplo, la posibilidad de aplicar elementos como título1, título2, título3, párrafos, listas, etc.:

See the Pen Estructura básica de una web by LaWebera.es (@lawebera) on CodePen.32567

El orden que se impone a través de las diferentes etiquetas HTML corresponde a una jerarquización de los diferentes contenidos.

Así por ejemplo, la frase contenida en una etiqueta h1 es la más importante de todo el contenido, ya que define al contenido mismo, por ser su título.

Esta jerarquización, además de facilitar la lectura de los contenidos por parte de los usuarios, posibilita a los motores de búsqueda encontrar la información más relevante para clasificar y ordenar la página web, lo que tiene gran importancia para el posicionamiento SEO de la misma.

Consejos finales para el diseño de un buen layout o estructura web

El espacio y el espacio en blanco en el layout

  • Procura que tu web se vea bien en cualquier resolución de pantalla, para ello deberás hacer un diseño responsive.
  • Utiliza todo el espacio disponible, pero se flexible: El uso de un tamaño relativo (fluido) en determinadas secciones del diseño de tu páginas web es una buena práctica. Por ejemplo en la zona principal del contenido, de modo que se expanda y contraiga para adaptarse a la ventana del navegador, mejorando la experiencia del usuario.
  • Usa el color para definir los espacios: si quieres diseñar una página responsive pero que tenga un ancho máximo, ¿por qué no centrar la web en la pantalla del navegador y mejorar así su presentación.

Mira el ejemplo que se propuso en una guía anterior, ¿qué te parece mejor?:

layout centrado


A la vez que centras la página en el navegador, puedes ponerle un color de fondo diferente al sitio, como se ve en el ejemplo.

Esto mejorará la apariencia de tu web con los cambios de resolución que se producen de un usuario a otro.

Las grandes resoluciones (por encima de 1400px, por ejemplo) mostrarán una parte de la ventana de navegación con el color de fondo que hayas elegido, mientras que los navegadores con resoluciones más pequeñas mostrarán menos o ningún color de fondo.

Imágenes y gráficos en tu estructura web

Alinea las imágenes

Uno de los errores de diseño más comunes en diseñadores novatos es insertar las imágenes en una página de cualquier manera sin pensar en el layout (estructura). Esto visualmente no queda muy bien, puesto que por defecto las imágenes se alinean a la izquierda, resulta mucho más agradable verlas centradas.

Con un simple código de un par de líneas puedes centrar tus imágenes. Este código va en tu hoja de estilos CSS:

img {
   display: block;
   margin: auto;
 }

Proporción de los gráficos y texto en una página

Es fácil dejarse llevar por la gran cantidad de imágenes y animaciones disponibles, pero si te pasas añadiendo imágenes a tu web, puedes hacer que resulte muy difícil de leer o incluso molesto.

Alineación del layout

A continuación tienes los ejemplos más típicos de alineación en los layouts.

Mira estos ejemplos y juzga por ti mismo cuál es el tipo de alineación para la estructura de tu sitio web más adecuado:

tipos de layouts o estructuras web más comunes

Y con estos consejos terminamos esta mega guía de cómo estructurar y organizar una página web. Espero que después de leerla tengas más claro como hacer estructuras web escalables y fáciles de mantener.

35 respuestas

  1. Excelente aporte, muy completo.

    Solo incluiría la parte de los aspectos legales, que aunque no son propiamente dicho partes del diseño, si son partes esenciales de todas las páginas web hoy en día.

    Elementos como términos de uso, política de privacidad, etc.

    1. Hola Ricardo,

      Pues sí, tienes razón, son páginas que sí o sí hay que incluir en cualquier página web. Buena recomendación.

      Saludos!

  2. hola buen dia!!me gusto mucho su tutorial sobre paginas web esta muy bien descrito y especifico!! hay algun enlace para poder descargarlo e imprimirlo ya que sufro al leer desde la computadora… desde ya muchas gracias!!

  3. Esta muy interesante y es gran ayuda puesto que en este ciclo que estoy llevando trata exclusivamente de diseño de pagina web

  4. Tengo una gran duda: Tengo todas las páginas de mi web hechas en base a una plantilla. Si necesito modificar la plantilla ¿tengo que “reconstruir” una a una todas las páginas de la web corrigiendo la modificación? porque eso puede ser muy trabajoso. ¿No existe ninguna herramienta o programa que te actualice todas las páginas basadas en la plantilla cuando se modifica ésta?
    Gracias y saludos. Magnífico vuestro trabajo

  5. Hacía tiempo que no pasaba por aquí, pero veo que no puede ser. Tengo que entrar mucho más amenudo, ya que la información que ofreceis siempre es buenísima.

    Y si….soy de los que comienzo diseñando la home.

  6. margot ,Primero aprende a escribir , luego trata de diseñar , luego ven a criticar.

    Genial explicación, en estos niveles de diseño es donde se comienza a notar la verdadera casta de campeones.

  7. Gracias por publicar este contenido, es muy útil.
    Te quería preguntar si hay alguna manera de que podamos 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.

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

  8. Excelente!!! NO he leído otro manual de diseño como este. Redaccción exacta, términos no conocidos muy bien explicados y sobretodo satisface ampliamente los conceptos y aclara las dudas. Excelente de nuevo y muchas gracias. Toni

  9. Gracias por la información …soy nuevo en el diseño web y tu información me sirve de mucho. A ver si también podrías subir información de en que ocasiones se debe utilizar el clear y float y cuando no.

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

  11. Excelente web y muy útiles los materiales que se exponen tanto para expertos como para novatos.
    Me ha ayudado mucho.

    Gracias

  12. Saludos, muy buena información tanto para los que creemos que tenemos mucha experiencia, como para los que inician en esto del diseño web.

    Gracias.

  13. Hola que tal, me gustaría poner en mi web una sección de comentarios como esta, es para mi tesis. Porfa ayuda, se lo agradeceré muchisisisiismo, plis ayuda.

Deja una respuesta