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

Ideas para la maquetación o layout

Figuras 1) 2a - 2b) y 3: diferentes alternativas para la distribución de las cajas de texto y gráficos en una publicación típica.


Un ejemplo de aplicación de un layout en columnas asimétricas —como el de esta página— en la página equivalente a esta de la versión catalana de Vigital.

La composición del texto debe tener en cuenta criterios estéticos (visuales) y funcionales. Desde este punto de vista, el texto debe ser lo más legible que se pueda, para facilitar la comprensión.

Un texto bien estructurado y con tipografía correcta ayuda mucho a su comprensión. Debemos separar claramente las secciones y subsecciones; añadir elementos que orienten al lector; enfatizar donde convenga, utilizando cursivas o negrita. Pueden incluirse resúmenes que destaquen las partes más significativas; pies de foto o comentarios de las ilustraciones que aclaren o complementen su significado.

Los estudios sobre legibilidad muestran que ésta depende de dos factores principales: el tipo de letra y la composición del texto, esencialmente la longitud de las líneas y su espaciado. Obviamente, conviene que tengamos en cuenta estos principios para facilitar al máximo la lectura de nuestros textos. Existen unos valores óptimos para la longitud del texto: con independencia del tamaño de éste, lo que facilita la lectura es poder leer tramos de las frases de golpe. Si las líneas son demasiado cortas, la vista debe buscar continuamente el principio de la línea siguiente y resulta cansado; pero si la línea es excesivamente larga, también resulta fatigoso.

La longitud óptima del texto está entre los 60-70 caracteres, unas 12 palabras de este mismo párrafo. Para una hoja A4 típica con los márgenes corrientes de unos 2 o 2,5 cm. y con una única columna de texto, al tamaño estándar de 10 a 12 puntos, el ancho de las líneas resulta ser excesivo. Si el papel es de un formato mayor, como en un periódico, la exageración de estas longitudes de línea sería aún más clara.

Para mejorar la legibilidad del texto podemos hacer algo muy simple: ensanchar los márgenes (figura 1), de manera que la columna se contrae proporcionalmente, hasta tener un ancho más confortable para su lectura. Además, obtenemos un aspecto más limpio, más claro y, en cierta medida, más lujoso, con el abundante espacio blanco que conseguimos.

Como alternativa, podemos distribuir el texto en dos o más columnas simétricas, como se muestra en la figura 2 (para decidir el número de columnas, podemos seguir el mismo criterio de tener un número de caracteres por línea adecuado.) Debemos tener especial cuidado con el tamaño de los caracteres en la columna: cuanto más estrechas sean estas, más pequeños deberán ser los tipos. Si tenemos caracteres muy grandes en una columna muy estrecha, repetiremos el problema de difícil legibilidad, esta vez por el motivo opuesto, y además el aspecto será peor.

Diseñar con columnas asimétricas.

Este es un modelo de página que funciona. Y cuando una cosa funciona, suele utilizarse por todas partes. Muchísimas páginas web, incluidas algunas de las nuestras, se basan en una estructura como la del gráfico adjunto (figura 3). ¿Por qué este modelo, que es tan simple, se ha impuesto tan claramente a otras opciones? Los motivos son múltiples:

Esta forma de distribuir los componentes de la página resulta óptima respecto de diferentes criterios:

  • Legibilidad. Tener la mayor parte del texto colocado dentro de un recuadro, con un ancho de 10-12 palabras, es mucho más fácil de leer que una sola columna de texto de lado a lado, o que múltiples columnas demasiado estrechas.
  • Claridad. Con este modelo, el visitante-lector identifica claramente dónde está y cuáles son las secciones a las que puede acceder (con la cabecera o el gráfico de la parte superior), dónde está el cuerpo del texto, donde se detalla la información (el bloque de la derecha). La pequeña columna de la izquierda sirve, en función de la Web, para albergar diferentes informaciones: las secciones relacionadas, novedades, resúmenes de partes del texto y las ilustraciones, etcétera.
  • Familiaridad. Al ser un modelo muy usado, los lectores saben instantáneamente dónde buscar la información y pistas sobre los contenidos.
  • Simplicidad. Esta opción de diseño es fácil de preparar y crear una plantilla basada en él para aplicarla donde convenga.

Aunque este modelo resulta ideal para las páginas que presentan información, con un volumen de texto más o menos grande, existen otras alternativas que deben considerarse al diseñar una Web. De las opciones existentes, aquellas que podemos plasmar en papel, en nuestro cuaderno de bocetos, no todas podrán ser trasladadas a la página web. Algunas ideas son idóneas para su impresión en papel, otras funcionan mejor en forma de hipertexto. Por ejemplo, para una página de índice puede ser más recomendable un enfoque más visual, basado en pequeñas imágenes y cortos bloques de texto para ampliar la información.

Recordamos que encontramos explicado todo aquello relacionado con la organización de la información y el diseño de páginas en algunos recursos de consulta disponibles en la Web y que adjuntamos en las secciones de enlaces. A destacar la página del Manual of Style de la Yale University discute con detalle y claridad todos los aspectos a tener en cuenta a la hora de diseñar y construir una web.

Por último, un pequeño librito que resulta muy útil para rápidamente buscar una solución de maquetación: el recomendable “Recetario de diseño gráfico” de L.Koren y R.Wippo Meckler (Ed. GG)