Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Consejos básicos para el montaje de una web

Aquí recogemos algunas ideas generales para considerar antes, durante y después del diseño de una web, y nos fijamos en la anatomía de una página, esta vez desde el punto de vista del diseño. Al final de la página os proporcionamos algunos recursos adicionales para aprender más. Este no es material original: hemos recogido las propuestas e ideas de diferentes fuentes, durante varios años. Todas estas ideas deberían tenerse muy en cuenta: son sobre todo sentido común.

Ideas generales para preparar una web.

Muchos expertos en teoría de usabilidad o diseño centrado en el usuario comparan los requisitos del diseño de una web a la arquitectura de un edificio público. Aquello que nos parecería inexcusable en éste, tampoco es admisible en una página.

La web debe tener unos objetivos claros, tanto si son educativos, comerciales, publicitarios... y el usuario ha de saber qué encontrará (en general) desde el principio.

La navegación a través de la web ha de ser fácil, intuitiva, y consistente. El navegante debe saber dónde se encuentra en cada momento.

La interfaz ha de ser lo más uniforme posible a través de la web: un mismo sistema de colores, uso de tipografía, colocación de los elementos de navegación... Se han de proporcionar, al mismo tiempo, pistas para informar del lugar específico en que nos encontramos, con una cierta variedad dentro de la homogeneidad del conjunto.

Actualizar  la información y eliminar partes caducas. La información más actual o las secciones nuevas se han de poder localizar rápidamente.

Los nuevos efectos, aún no soportados por todos los navegadores y sistemas, aquellos que necesiten plugins, y otros trucos no han de constituir el núcleo del sitio web, en especial si se trata de elementos no estándar dentro del HTML.

Conviene utilizar el color con moderación, de forma consistente y razonable. Hay que tener especial cuidado de que el texto sea fácilmente legible con los colores elegidos.

El texto ha de ser conciso, bien estructurado y fácil de leer. La lectura en pantalla no es tan agradable como en el papel. (puede ser una buena idea proporcionar también una versión más extensa o especialmente preparada para imprimir.)

Manejar la tipografía con atención; no mezclar muchos tipos de letra y tamaños en cada página. La información esencial ha de estar presente en forma de texto editable, no en forma de gráficos.

Tener en cuenta el tamaño y formato de las imágenes. Utilizarlas de forma pertinente, no como simple ornamentación.

Las imágenes de fondo pueden ser vistosas e interesantes, y dar un toque distintivo, pero debe evitarse dificultar la lectura del texto, o interferir con el resto del diseño.

Diseñar las páginas pensando en todos los usuarios, no sólo aquellos que tienen los mejores monitores, ordenadores y programas. Debe evaluarse el diseño a diferentes resoluciones y verificar su validez.

Utilizar las animaciones con prudencia; pueden ser francamente molestas y vulgares, y sólo deberían emplearse por un motivo justificado.

Los marcos o frames son una fuente de problemas para el mantenimiento e indexación de una web y confunden a muchos navegantes. Es preferible evitarlos y utilizar barras de navegación laterales y/o arriba y abajo de la página.

Evitar los tópicos y ciertas indicaciones habituales en los primeros años de la www, como "en construcción" "necesitas esta configuración... para ver esta página"; imaginemos un programa de televisión que en lugar de emitirse mostrara "en construcción", o "necesitas un televisor marca Tal y Cual, con tal sistema de sonido..." Ridículo, ¿no? Tampoco es necesario exhibir contadores -en especial si dan valores muy bajos-, condecoraciones y demás parafernalia.

Tipos de páginas en una web.

Aquí consideramos algunas de las alternativas principales para el diseño de las páginas web y los sitios, para los diferentes niveles de estructura de que los dotemos.

Típicamente, una web tiene una página de inicio, índice, portada o homepage; de ésta dependen una serie de páginas de sección que permiten a su vez acceder a las diferentes páginas de contenido: artículos, páginas de catálogo, listas, fichas de productos, formularios... Esta estructura esencial puede complicarse más o menos, por ejemplo, introduciendo diferentes subsecciones y profundizando así la estructura. En general no es buena idea crear un esquema de navegación muy ramificado, porque confunde a muchos visitantes; para webs muy extensas es preferible una portada sin demasiado detalle porque también puede despistar; es preferible enlazar con las principales secciones y desde éstas, ir detallando la estructura.

Los criterios para diseñar las páginas correspondientes a cada nivel son distintos, respecto de la organización del espacio, el uso del color e imagen y la elección de la tipografía. En general, podemos considerar que a cada uno de los tres niveles (portada / secciones / artículos) las restricciones que podemos aplicar son las que detallamos en el gráfico siguiente:

 

Naturalmente, debe haber una cierta consistencia en el estilo gráfico y tipográfico de los tres niveles: no ha de parecer que, más que niveles distintos, sean webs distintas. Debemos plantearnos si optamos por un estilo gráfico basado en:

  • fotografías,
  • imágenes realistas,
  • imágenes simples en color o blanco y negro,
  • imágenes estilo cómic o caricatura,

iconos simples (símbolos, signos y señales),  o una combinación aceptable de más de una de estas opciones: pero cuidado con las mezclas indigestas. Por ejemplo, en una web de diseño sobrio, funcionan bien imágenes icónicas simples, pero desentonan mucho las imágenes caricaturescas.

Portada de Vigital-catalàLa página de portada.

La página de portada es un elemento decisivo de la web. Dado que es habitualmente el punto de entrada en nuestro sitio, la imagen que proyecta debe ser la deseada: el visitante debe adivinar qué se ofrece -o al menos sentir curiosidad por saberlo y navegar más adentro para verlo por sí mismo. Por tanto, conviene dedicar mucho más esfuerzo, proporcionalmente, a esta página, para hacerla atractiva, funcional y única.

Desde la página índice debemos proporcionar acceso a las páginas de secciones principales de nuestra web, aunque no es buena idea llenar el espacio con descripciones detalladas de éstas. Si queremos un índice general que incluya todas las páginas y secciones, puede ser más funcional añadir un enlace a una página diferente con un mapa de la web o sitemap. El estilo saturado de información de muchos portales de acceso a Internet no es recomendable para muchos proyectos; el exceso de opciones puede resultar desconcertante para muchos visitantes. Muchas webs que anteriormente tenían este aspecto superpoblado han optado por un cambio en la portada y hacerla más simple. Los portales más recientes, como Inicia (http://www.inicia.es) han reducido la carga informativa en la portada.

Se pueden anunciar de algún modo las novedades en la web, bien con un pequeño mensaje, bien con un enlace a una página donde se explica en detalle. Existen servicios como Freefind.com que crean automáticamente una página con las novedades, de modo que siempre está actualizada.

En la página inicial es más fácil recurrir al lenguaje visual que al escrito. Los textos deben ser concisos y claros, indicando qué encontraremos en la web o suscitando la curiosidad e interés del visitante. Probablemente, es en la página de inicio donde más podemos usar la imaginación y creatividad. No es necesaria una estructura previsible: podemos, casi debemos sorprender y entretener. Es un buen lugar para utilizar algo llamativo, como una película de Flash o efectos de mouseover. Lo mejor para encontrar inspiración es una vuelta por la web y ver qué hace otra gente. Algunos libros son particularmente útiles para el diseño de las páginas, por ejemplo muy manejable y inspirador Recetario de diseño gráfico de L. Koren y R. Wippo Meckler (ed. G. Gili.)

Las páginas de secciones y subsecciones.

una página de secciónLa web debe estar constituida por secciones lógicas y bien estructuradas. Una página de sección dará acceso a los artículos relacionados; al añadir nuevos artículos bastará modificar la página de sección añadiendo un enlace. Para identificar las secciones -y distinguir unas de otras- se puede utilizar un color distintivo para cada una, combinado con un icono o imagen exclusiva. En muchas webs se utiliza una barra de navegación en la que se indica en qué sección estamos con un color diferente, o modificaciones semejantes, por ejemplo, oscureciendo o difuminando el resto de la barra de navegación.

Para decidir el diseño de las páginas de sección, no debemos perder de vista la facilidad con que podamos actualizarlas, añadiendo accesos a las nuevas páginas de contenido que incluyamos más adelante. Finalmente, en la mayoría de casos deben evitarse los marcos o frames. Este sistema navegación no ofrece ventajas significativas respecto de una barra de navegación dentro de la misma página y presenta una lista larga de inconvenientes (y resulta más difícil preparar todo.) Excepto para casos especiales, por ejemplo, un catálogo de imágenes de productos, no es una opción aconsejable.


Las páginas de contenidos o artículos.

Realmente, éstas son las páginas de la Web. El resto no es más que un añadido para llegar aquí de la forma más fácil... pero son piezas clave, dada la forma en que se navega. Para un libro, la portada y el índice no tienen tanta importancia. Pero, por analogía, un buen diseño de portada puede ayudar mucho a mejorar las ventas de una publicación.

El principal criterio de las páginas de contenido es la claridad expositiva. El texto debe ser fácilmente legible, con una correcta distribución y ancho de las líneas adecuado. Las ilustraciones deben ser funcionales y el uso del color, en correspondencia, debe ser más sobrio que en la portada.

La distribución del texto en columnas, tan común en los medios impresos, presenta un problema en las páginas web. Ya que la unidad que se muestra en pantalla no es una hoja, sino una pantalla de tamaño variable, el texto en dos columnas o tres, en las páginas web no se distribuye de la forma previsible, de arriba abajo y de izquierda a derecha. Las columnas son, de hecho, independientes entre sí y el texto no fluye automáticamente. Así, no hay forma de crear un texto continuo realmente funcional para leer en pantalla. Por este motivo, una solución muy utilizada es optar por columnas asimétricas. La columna pequeña contiene enlaces, información adicional, pequeñas ilustraciones... y la columna más ancha tiene el cuerpo del texto y las imágenes mayores.

Para ir avanzando en la lectura de los artículos no debería ser necesario volver a las páginas del nivel superior. Para ello conviene proporcionar una o varias barras de navegación que lleven a las principales secciones, y botones para avanzar y retroceder, o moverse rápidamente por la página. Si ésta tiene una cierta longitud, es una buena idea colocar un botón para subir sin necesidad de desplazarse por la página con el ratón o los cursores (el estándar es una flecha que apunta hacia arriba.)

Para aprender más...

Existen abundantes recursos para aprender más sobre el diseño para la web. Echad un vistazo a los enlaces recomendados en la última sección, y en especial, cualquiera de los siguientes:

La Guía de estilo Web de la Universidad de Yale, es la versión online de un es la versión online de un exitoso libro de texto. Imprescindible.

La Guía de estilo para la Web de Sun, un conjunto de páginas en las que se detalla todo tipo de ideas para crear webs bien estructuradas y funcionales.

The Zen of Web Sites, otra web con muy interesantes consejos.

La Guía de estilo de la Librería del Congreso de los EEUU.