Material extraído de:

www.desarrolloweb.com
www.fotonostra.com

Estudio de las reglas básicas del diseño digital. No existe una fórmula
que de un diseño infalible pero sí unas reglas básicas.

Podemos definir el diseño de una composición gráfica como la adecuación de

distintos elementos gráficos previamente seleccionados dentro de un espacio
visual, combinándolos de tal forma que todos ellos puedan aportar un significado
a la misma, consiguiendo el conjunto transmitir un mensaje claro al espectador.

El diseño gráfico ha de tener en cuenta los aspectos psicológicos de la percepción

humana y las significaciones culturales que pueden tener ciertos elementos,
eligiendo éstos de forma que cada uno de ellos tenga un porqué en la
composición y buscando un equilibrio lógico entre las sensaciones visuales y la
información ofrecida.

Lo más importante de toda composición es el mensaje que subyace bajo ella. Es

trabajo del diseñador buscar la máxima eficacia comunicativa, transmitiendo ese
mensaje por medio de una composición que impacte visualmente al espectador y
le haga receptivo. Ahora bien, sin una disposición adecuada de las formas,
colores y agrupaciones, sin un equilibrio global en la composición, el mensaje no
llegará de forma adecuada al espectador.

No existe un método mágico que consiga una composición exitosa, pero sí que
existen una reglas básicas de diseño que facilitan la transmisión de un mensaje
por medio de una composición gráfica de forma efectiva.
Estas reglas son aplicables igualmente al diseño de páginas web, aunque sujetas
a las limitaciones que impone este formato y modificadas para adaptarlas a la
interactividad y a las posibilidades multimedia del mismo.

1
Este va a ser el tema de este capítulo, estudiar las reglas básicas de diseño
gráfico efectivo y equilibrado: proporciones, escalas, contrastes, agrupaciones,
reticulados, alineaciones, simetrías, equilibrio entre contenidos y jerarquía visual

Debemos tener en cuenta la definición a utilizar, los elementos gráficos y las

proporciones...

A la hora de comenzar una composición, lo primero que debemos saber es el

tamaño que va a tener ésta.

Si el soporte final de nuestro grafismo va a ser el papel, podremos diseñar para

una gran variedad de tamaños, desde los más pequeños (tarjetas de visita,
pequeños folletos) hasta los más grandes (posters, carteles para vayas
publicitarias), aunque casi siempre diseñaremos en alguno de los formatos DIN.

Medidas papel formato DIN

modelo tamaño relación

DIN A4 210*297 0.0625 m²(x/y=0.707)

DIN A3 420*297 0.125 m² (x/y=1.4142)

DIN A2 420*594 0.25 m² (x/y=0.707)

DIN A1 840*594 0.5 m² (x/y=1.4142)

DIN A0 840*1188 1.0 m² (x/y=0.707)

2
La relación visual entre los distintos formatos DIN es la siguiente:

En el caso de una página web, los tamaños posibles son muy pocos,
generalmente dos (800x600 y 1024x768 píxeles), pero es de suma importancia
decidir para cuál de ellos se va a trabajar, ya que, aunque es posible diseñar una
página para que sea compatible con ambas resoluciones, tan solo en una de ellas
se visualizará tal y como la diseñemos.

El segundo paso será elegir los elementos gráficos y textuales que usaremos en
la composición. Esta elección se debe basar en variables como la persona o
empresa que desea transmitir el mensaje, el propio mensaje, el tipo de
espectadores destinatarios de la composición y las características funcionales y
comunicativas de cada elemento.

Ahora debemos definir qué partes del área de diseño deben estar ocupadas por
elementos y qué partes van a quedar vacíos, sin contenido alguno. Si dejamos
muchos espacios vacíos la composición puede resultar no equilibrada, ya que
será difícil establecer relaciones globales entre los elementos o entre los grupos
de ellos. Pero si el número de componentes es elevado, podemos obtener una
obra sobrecargada, difícil de entender, en la que no se distingue con claridad qué
es cada cosa y cuál es el mensaje que quiere transmitir.

3
Empezaremos a situar entonces los elementos en escena, como si fueran actores
de nuestra particular obra de teatro, combinándolos de diferentes formas hasta
que obtengamos un resultado satisfactorio. En este punto es muy importante
tener en cuenta que cada elemento visual tiene una función determinada dentro
de la composición.

La información visual que aporta un elemento puede cambiar según lo hagan las
propiedades del mismo, como su tamaño, forma o color, pero sobre todo su
proporción, el peso visual que tenga en el total de la composición.

Indudablemente, la forma más directa de marcar proporciones es mediante el

tamaño relativo de los elementos. Los elementos más grandes, altos o anchos
tienen una carga visual superior a los más pequeños, cortos o finos, creando
zonas de atracción más intensas.

También podemos delimitar proporciones en un grafismo mediante el color, con

el que podemos definir distintas áreas tonales útiles para distribuir de forma
adecuada toda la información gráfica. En este sentido, los colores puros y
saturados tienen un mayor peso visual que los secundarios neutros, y estos
mayor que los terciarios poco saturados.

Otra técnica para definir proporciones es el uso de agrupaciones de elementos y

la correcta distribución de estas en el escenario, lo que nos va a permitir
estructurar de una forma u otra la composición.

Proporción por agrupaciones

4
Este sistema suele dar buenos resultados, siempre que no abusemos de él
creando un excesivo número de bloques significativos, ya que entonces se
restarían importancia unos a otros y se perdería la proporcionalidad buscada.

Más reglas prácticas referentes a la proporción son:

• Las formas regulares tienen menor peso que las irregulares.

• Las formas alargadas y angulares alargan el campo de visión, creando

zonas dominantes.

Sean cuales sean lo elementos usados en una composición deberemos siempre

buscar unas proporciones adecuadas entre ellos, con objeto de que cada uno
cumpla su papel comunicativo de forma adecuada.

Se entiende por escala la relación entre las proporciones de los elementos

visuales de una composición.

Se entiende por escala la relación entre las proporciones de los elementos

visuales de una composición.

Todos los elementos tienen la capacidad de modificarse y definirse unos a otros

según las relaciones que se definan entre las propiedades análogas de ellos. Por
lo tanto, el concepto de escala no se refiere sólo a la relación entre tamaños de
dos o más elementos, sino también a la relación entre colores, formas, etc.

5
Un elemento es grande o pequeño según el tamaño de los elementos que le
acompañan en el escenario. El color de una forma es brillante o apagado según el
color del fondo sobre el que se encuentra.

Es decir, las propiedades de un elemento visual no son absolutas, sino relativas,

ya que dependen de las del resto de elementos que le acompañan en la
composición.

La proporción relativa entre elementos debe ser equilibrada, lo que implica el uso
de una escala correcta en la composición. Las escalas son utilizadas de esta
forma en planos y mapas, para conseguir representar los objetos reales lo más
correctamente posible, con las proporciones adecuadas entre ellos.

En una composición gráfica la escala usada es igualmente importante, tanto para

distribuir el espacio de diseño de forma acertada como para dar equilibrio de
proporciones a los elementos, usándose a veces diferentes métodos de
distribución de eficacia probada, como la regla Aurea o el método de Corbusier.

La regla Aurea, inventada por Vitruvio, se utiliza para obtener escenarios de

trabajo de proporciones equilibradas, y se basa en contemplar un espacio

6
rectangular dividido en terceras partes, tanto horizontal como verticalmente,
consiguiendo con ello seccionar los espacios en partes iguales.

Por su parte, el método de proporciones creado por el arquitecto francés Le

Corbusier utiliza como unidad modular de escala el tamaño del hombre,
estableciendo con ella las alturas correctas de los objetos que usamos y de los
elementos de una construcción arquitectónica.

En el caso del diseño web, el tamaño del área de trabajo es fijo, pero si que
deberemos establecer una escala de trabajo adecuada para dimensionar los
elementos de nuestra página.

Escala proporcionada entre logotipo, opciones de menú y contenido

Así, el logotipo debe tener un tamaño relativo adecuado a la página, los sistemas
de navegación (menús) deben ser lo suficientemente grandes como para ser

7
vistos y manejados con facilidad, pero no tanto que resten importancia al
contenido informativo de la página, etc.

Un error muy común es ente sentido es el de los iconos, que deben ser
suficientemente grandes como para que no pierden sus rasgos diferenciadores ni
su zona activa si actúan como enlaces, pero nunca tanto que destaquen en
exceso, sobre todo si van acompañados de un texto explicativo.

El contraste permite resaltar el peso visual, lo podemos conseguir por medio de

diversos medios: tonos, colores, contornos y escala.

El contraste es el efecto que permite resaltar el peso visual de uno o más

elementos o zonas de una composición mediante la oposición o diferencia
apreciable entre ellas, permitiéndonos atraer la atención de espectador hacia
ellos.

El contraste puede conseguirse a través de diferentes oposiciones entre

elementos:

Contraste de tonos

8
Se obtiene contraste entre elementos que poseen tonos (claridad-oscuridad)
opuestos. En este caso, el mayor peso lo tendrá el elemento más oscuro,
destacando el más claro sobre él con más intensidad cuanto mayor sea la
diferencia tonal.

Conforme se disminuye la tonalidad del elemento más oscuro el contraste va

perdiendo intensidad, siendo necesario redimensionarlo si queremos mantener el
mismo contraste.

Este tipo de contraste el tal vez el más intenso, y es muy usado en

composiciones gráficas.

Contraste de colores

Dos elementos con colores complementarios se refuerzan entre sí, al igual que un
color cálido y otro frío.

9
El contraste creado entre dos colores será mayor cuanto más alejados estén en el
círculo cromático. Los colores opuestos contrastan mucho, mientras que los
análogos apenas lo hacen, perdiendo importancia visual ambos.

Este efecto se puede usar para dar mayor dimensión o sensación de proximidad a
un elemento en una composición, situándolo sobre un color que contraste con él.

Este tipo de contraste es especialmente indicado para los contenidos textuales,

en los que debe primar la facilidad de lectura. Lo ideal será el texto negro sobre
fondo blanco, ya que es el que más contraste crea (contraste de tono). Pero en
ciertos elementos, en los que este juego de colores no sea posible, habrá que
buscar siempre un texto cálido sobre un fondo frío o viceversa.

Contraste de contornos

10
Los contornos irregulares destacan de forma importante sobre los regulares o
reconocibles.

Este tipo de contrastes es adecuado para dirigir la atención del usuario a ciertos
elementos de una composición o página web, como botones importantes,
banners publicitarios, etc. No obstante, hay que ser comedidos en su uso, sobre
todo si se combinan con otros tipos de contraste, ya que pueden ser un foco de
atracción visual demasiado potente. Además, crean mucha tensión en el espacio
que les rodea.

Contraste de escala

Es el producido por el uso de elementos a diferentes escalas de las normales o de

proporciones irreales, consiguiéndose el contraste por negación de la percepción
aprendida.

Este sistema de contraste no es muy usado en las páginas web, donde se busca
siempre la escala adecuada, pero sí es frecuente en fotografía y pintura,
consiguiendo atraer la atención del espectador de forma muy efectiva.

11
El ser humano, tanto pos su carácter racional como por herencia cultural, tiende
a organizar los elementos que percibe en torno a conjuntos significativos
organizados. Esta inclinación a agrupar elementos relacionados en un factor que
influye de forma notoria en la percepción que tenemos de nuestro entorno, de lo
que vemos alrededor nuestro.

Las composiciones gráficas no escapan a esta tendencia, por lo que una correcta
agrupación de sus elementos les otorga un carácter lógico, racional, que aumenta
su valor comunicativo.

La agrupación de nuestros elementos gráficos y textuales puede basarse en

diferentes criterios:

• Proximidad: Tendemos a agrupar aquellos objetos que están próximos,

cercanos entre sí.
• Semejanza: Tendemos a agrupar los elementos iguales o parecidos.
• Continuidad: Nuestra mente tiende a agrupar aquellos elementos que
tienen una continuidad significativa.
• Simetría: Tendemos a agrupar los elementos para que aparezcan
ordenados formando figuras conocidas.

En el caso concreto de las páginas web, las agrupaciones son muy útiles y del
todo necesarias, sobre todo en lo que respecta a elementos similares o de
funcionalidad análoga, como componentes de menús de navegación, iconos,
datos relacionados, botoneras, etc.

12
Las agrupaciones también son muy útiles en casos de formularios o fichas de
muchos campos, siendo muy conveniente dividir estos en grupos de información
análoga, separando luego cada grupo de los demás mediante franjas horizontales
o verticales en blanco.

Con ello, el formulario no sólo gana en belleza visual, sino que además resulta
más claro, lógico y fácil de completar por el usuario.

Cómo armonizar los bloques de contenido que formarán la composición

del diseño.

Una composición gráfica debe ser equilibrada no sólo en contenidos, sino también
visualmente, hasta tal punto que podemos decir que el orden en la disposición
espacial de los elementos de la misma es uno de los factores más importantes
para su éxito.

El espectador que contempla una obra gráfica (folleto, cartel tríptico o página
web) busca subconscientemente en ella un orden y una estabilidad que le
permitan pasear la vista por la misma de forma organizada y limpia.

13
El sistema plano de referencia habitual en los seres humanos es el formado por
un eje horizontal y otro vertical, es decir, por dos rectas que se cortan en un
ángulo de 90º. En este sistema, el eje horizontal aporta equilibrio y estabilidad,
mientras que el vertical facilita la elevación de la vista, marcando prioridades o
niveles en la composición.

Puesto que las composiciones gráficas (y dentro de ellas, las páginas web) se
representan en soportes planos, es fácil deducir que este sistema de referencia
es también el más adecuado para la distribución de sus elementos. Si a esto
sumamos el carácter eminentemente rectangular de la mayoría de los soportes,
obtenemos por extensión el sistema de organización idóneo para nuestras
composiciones: el reticulado.

Un reticulado o rejilla es un sistema de referencia formado por diferentes líneas

horizontales y verticales que marcan la ubicación de elementos y zonas en una
composición gráfica, líneas que no tienen porqué tener una representación real
(no tienen porqué formar parte del grafismo), pero sí mental. Son las guías
imaginarias sobre las que vamos a ir colocando los elementos, la espina dorsal de
un composición gráfica.

Mediante el reticulado, el diseñador va situando con armonía los bloques de

contenido que formarán la composición: zonas principales y secundarias, títulos y
subtítulos, bloques de texto, fotografías, ilustraciones, gráficos, sistemas de
navegación, botones, iconos, etc, dando con ello un estilo propio visualmente
lógico a la misma.

Una composición gráfica no es un sistema estándar, único, sino que los mismos
elementos se pueden organizar según diferentes esquemas lógicos. Pero siempre
deberán estar dispuestos según una retícula que les aporte equilibrio y
estabilidad visual. Es tarea del diseñador buscar el conjunto ubicación-reticulado
que mejor se adapte a su obra.

14
La ubicación de elementos en una composición según un reticulado determinado
no precisa la introducción de los elementos finales de la misma. Es decir, se
puede perfectamente diseñar la organización de un grafismo tan sólo con
rectángulos de colores. Más aún, con rectángulos de un solo color. Lo que
importa no es el aspecto visual final, sino la organización lógica y regular de los
elementos.

En el caso concreto de una página web, el diseñador puede perfectamente

distribuir en pantalla una serie de rectángulos que representen las zonas que va
a tener la página. Si la distribución sigue un reticulado acorde y las zonas están
ubicadas con lógica, la página que resulte de ello tiene un 50% de posibilidades
de resultar correcta.

Reticulado de Terra

Esta estructura lógica creada con el reticulado debe mantenerse luego en todas
las páginas que forman el sitio web, proporcionando con ello consistencia y
homogeneidad al mismo.

Si definimos una separación entre el cabecero de un formulario y el inicio de los

elementos del mismo de 15 píxeles, todos los formularios, fichas, textos, etc, que
tengan un cabecero, deben mantener el mismo espacio separador. Si definimos
unos márgenes vacíos entre la página que diseñamos y los bordes de la ventana
del navegador de 30 píxeles, todas las páginas del sitio deben mantener
constantes esos márgenes.

Reticulado en un formulario maquetado con tabla

15
Una ventaja adicional de diseñar un reticulado correcto será la comodidad a la
hora de maquetar después la página con tablas, ya que estructura natural de
éstas es reticular.

16