comparte el articulo 

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

Actualizado el 08/03/2010 < > 7 Cometarios

Resumen: La coherencia visual que todo sitio web debe tener, hace que el diseño deba estar basado en una plantilla, sobre la cual se harán las variaciones que cada página requiera.

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. En la práctica, además de ser deseable, salvo pequeños detalles en la estructura y algunos pequeños cambios visuales, es poco práctico y una gran pérdida de tiempo establecer diseños diferentes para páginas o secciones de un mismo sitio.

Dentro de los objetivos que debe trazarse un diseñador a la hora de iniciar el diseño de un sitio web, está la identidad institucional, o lo que es igual, lograr que los usuarios identifiquen cada página del sitio como parte de una unidad.

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 comenzar 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, las que para todos los sitios son las mismas:

  1. Navegación local e inserción de la página dentro de la estructura jerárquica del sitio.
  2. Establecer el marco del diseño, introduciendo los contenidos en forma coherente con el resto del sitio.
  3. Establecer el marco gráfico, dándole al sitio una coherencia visual, aunque lo suficientemente flexible como para adaptarse a las necesidades de cada sección o contenido

En casos de sitios muy complejos, puede ser necesario establecer plantillas secundarias para diferentes niveles de estructura. También es conveniente en estos casos, establecer páginas de submenú, que facilitan la navegación interna dando al usuario nuevos puntos de apoyo para la navegación.

Algunas páginas web, por razones de marketing necesitan establecer “entradas alternativas” al sitio. 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 página 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.

En sitios de grandes corporaciones internacionales o negocios con varias sucursales, también es posible que deseen que cada una de las ramas tenga una sección destinada a cada una de sus divisiones. Esto puede realizarse estableciendo secciones o sitios independientes, los que deben, al igual que en los casos anteriores, mantener una unidad visual con el sitio principal, además de la mayor vinculación que sea posible.

La página de inicio

El diseño 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. Y esto está relacionado con que gran parte del trabajo de diseño ya ha sido realizado.

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.

Distribución de los contenidos en la página principal

Algunos sitios, como los destinados a las noticias, necesitan introducir una gran cantidad de contenidos de todo tipo en su página de inicio. Esto necesariamente requiere que haya una distribución ordenada de forma tal que los principales contenidos se encuentren en los lugares más destacados. Siguiendo con el ejemplo de una página de noticias, las noticias principales deberían tener acceso desde un lugar cercano a la esquina superior izquierda.

En cambio, en los sitios en cuya página principal puede introducirse poco o ningún contenido, en los lugares más relevantes debería colocarse elementos que generen un impacto visual en el usuario, de forma que se sienta atraído a buscar contenidos en páginas secundarias.

Uso de menús desplegables

Para la mayoría de los usuarios normales, los menús desplegables suelen ser difíciles de manejar, y en muchos casos ni siquiera descubren que se encuentran allí. Este tipo de menús por lo general implican que el usuario debe posar el puntero en una zona de espacio bastante limitado, lo que puede generar alguna complicación a usuarios inexpertos o personas con algún tipo de problema motriz.

Menos aconsejable aún es el empleo de menús desplegables que usan javascript o similares, ya que los enlaces contenidos en estos menús no son detectados por los motores de búsqueda, que no ejecutan los scripts.

Contenido de los menús

Los menús principales, aquellos más visibles, generalmente ubicados cerca de la cabecera de la página, debe 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.

Páginas de bienvenida

Salvo algunos sitios muy especiales, la mayoría de los sitios no solo necesitan una página de bienvenida (mucho menos con imágenes grandes o animaciones flash que llevan mucho tiempo de carga u obligan al usuario a buscar un botón de salida y hacer click en él), sino que constituye un verdadero problema, ya que se trata de la misma página a la que llegarán los motores de búsqueda, donde no encontrarán contenidos con información clasificable y muy pocos enlaces.

Publicado el 08/03/2010, última actualización 08/03/2010.

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

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

7 Cometarios

  1. Rooxie

    Excelente artículo, ¡Felicitaciones!

    Lunes, 19 de abril 2010

  2. JP

    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.

    Lunes, 7 de junio 2010

  3. ftpcars100

    Gracias por la informacion Muy bueno

    Domingo, 13 de junio 2010

  4. Rubén Portelles

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

    Gracias

    Domingo, 13 de junio 2010

  5. tONI bROOKS

    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

    Miércoles, 17 de noviembre 2010

  6. angel

    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.

    Jueves, 20 de octubre 2011

  7. Cándido

    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

    Viernes, 23 de marzo 2012

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras