Material extrado de:

www.desarrolloweb.com
www.fotonostra.com



Estudio de las reglas bsicas del diseo digital. No existe una frmula
que de un diseo infalible pero s unas reglas bsicas.

Podemos definir el diseo de una composicin grfica como la adecuacin de
distintos elementos grficos previamente seleccionados dentro de un espacio
visual, combinndolos de tal forma que todos ellos puedan aportar un significado
a la misma, consiguiendo el conjunto transmitir un mensaje claro al espectador.
El diseo grfico ha de tener en cuenta los aspectos psicolgicos de la percepcin
humana y las significaciones culturales que pueden tener ciertos elementos,
eligiendo stos de forma que cada uno de ellos tenga un porqu en la
composicin y buscando un equilibrio lgico entre las sensaciones visuales y la
informacin ofrecida.
Lo ms importante de toda composicin es el mensaje que subyace bajo ella. Es
trabajo del diseador buscar la mxima eficacia comunicativa, transmitiendo ese
mensaje por medio de una composicin que impacte visualmente al espectador y
le haga receptivo. Ahora bien, sin una disposicin adecuada de las formas,
colores y agrupaciones, sin un equilibrio global en la composicin, el mensaje no
llegar de forma adecuada al espectador.

No existe un mtodo mgico que consiga una composicin exitosa, pero s que
existen una reglas bsicas de diseo que facilitan la transmisin de un mensaje
por medio de una composicin grfica de forma efectiva.
Estas reglas son aplicables igualmente al diseo de pginas 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 captulo, estudiar las reglas bsicas de diseo
grfico efectivo y equilibrado: proporciones, escalas, contrastes, agrupaciones,
reticulados, alineaciones, simetras, equilibrio entre contenidos y jerarqua visual

Debemos tener en cuenta la definicin a utilizar, los elementos grficos y las
proporciones...

A la hora de comenzar una composicin, lo primero que debemos saber es el
tamao que va a tener sta.

Si el soporte final de nuestro grafismo va a ser el papel, podremos disear para
una gran variedad de tamaos, desde los ms pequeos (tarjetas de visita,
pequeos folletos) hasta los ms grandes (posters, carteles para vayas
publicitarias), aunque casi siempre disearemos en alguno de los formatos DIN.
Medidas papel formato DIN

modelo tamao relacin
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 relacin visual entre los distintos formatos DIN es la siguiente:



En el caso de una pgina web, los tamaos posibles son muy pocos,
generalmente dos (800x600 y 1024x768 pxeles), pero es de suma importancia
decidir para cul de ellos se va a trabajar, ya que, aunque es posible disear una
pgina para que sea compatible con ambas resoluciones, tan solo en una de ellas
se visualizar tal y como la diseemos.



El segundo paso ser elegir los elementos grficos y textuales que usaremos en
la composicin. Esta eleccin 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 composicin y las caractersticas funcionales y
comunicativas de cada elemento.
Ahora debemos definir qu partes del rea de diseo deben estar ocupadas por
elementos y qu partes van a quedar vacos, sin contenido alguno. Si dejamos
muchos espacios vacos la composicin puede resultar no equilibrada, ya que
ser difcil establecer relaciones globales entre los elementos o entre los grupos
de ellos. Pero si el nmero de componentes es elevado, podemos obtener una
obra sobrecargada, difcil de entender, en la que no se distingue con claridad qu
es cada cosa y cul 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, combinndolos de diferentes formas hasta
que obtengamos un resultado satisfactorio. En este punto es muy importante
tener en cuenta que cada elemento visual tiene una funcin determinada dentro
de la composicin.
La informacin visual que aporta un elemento puede cambiar segn lo hagan las
propiedades del mismo, como su tamao, forma o color, pero sobre todo su
proporcin, el peso visual que tenga en el total de la composicin.
Indudablemente, la forma ms directa de marcar proporciones es mediante el
tamao relativo de los elementos. Los elementos ms grandes, altos o anchos
tienen una carga visual superior a los ms pequeos, cortos o finos, creando
zonas de atraccin ms intensas.



Tambin 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 informacin grfica. 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 tcnica para definir proporciones es el uso de agrupaciones de elementos y
la correcta distribucin de estas en el escenario, lo que nos va a permitir
estructurar de una forma u otra la composicin.
Proporcin por agrupaciones


4


Este sistema suele dar buenos resultados, siempre que no abusemos de l
creando un excesivo nmero de bloques significativos, ya que entonces se
restaran importancia unos a otros y se perdera la proporcionalidad buscada.


Ms reglas prcticas referentes a la proporcin son:
Las formas regulares tienen menor peso que las irregulares.


Las formas alargadas y angulares alargan el campo de visin, creando
zonas dominantes.



Sean cuales sean lo elementos usados en una composicin 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 relacin entre las proporciones de los elementos
visuales de una composicin.

Se entiende por escala la relacin entre las proporciones de los elementos
visuales de una composicin.

Todos los elementos tienen la capacidad de modificarse y definirse unos a otros
segn las relaciones que se definan entre las propiedades anlogas de ellos. Por
lo tanto, el concepto de escala no se refiere slo a la relacin entre tamaos de
dos o ms elementos, sino tambin a la relacin entre colores, formas, etc.
5

Un elemento es grande o pequeo segn el tamao de los elementos que le
acompaan en el escenario. El color de una forma es brillante o apagado segn 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 acompaan en la
composicin.

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



En una composicin grfica la escala usada es igualmente importante, tanto para
distribuir el espacio de diseo de forma acertada como para dar equilibrio de
proporciones a los elementos, usndose a veces diferentes mtodos de
distribucin de eficacia probada, como la regla Aurea o el mtodo 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 mtodo de proporciones creado por el arquitecto francs Le
Corbusier utiliza como unidad modular de escala el tamao del hombre,
estableciendo con ella las alturas correctas de los objetos que usamos y de los
elementos de una construccin arquitectnica.



En el caso del diseo web, el tamao del rea de trabajo es fijo, pero si que
deberemos establecer una escala de trabajo adecuada para dimensionar los
elementos de nuestra pgina.

Escala proporcionada entre logotipo, opciones de men y contenido




As, el logotipo debe tener un tamao relativo adecuado a la pgina, los sistemas
de navegacin (mens) 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 pgina, etc.



Un error muy comn 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 actan como enlaces, pero nunca tanto que destaquen en
exceso, sobre todo si van acompaados 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 ms
elementos o zonas de una composicin mediante la oposicin o diferencia
apreciable entre ellas, permitindonos atraer la atencin de espectador hacia
ellos.



El contraste puede conseguirse a travs 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 ms oscuro,
destacando el ms claro sobre l con ms intensidad cuanto mayor sea la
diferencia tonal.



Conforme se disminuye la tonalidad del elemento ms oscuro el contraste va
perdiendo intensidad, siendo necesario redimensionarlo si queremos mantener el
mismo contraste.



Este tipo de contraste el tal vez el ms intenso, y es muy usado en
composiciones grficas.

Contraste de colores

Dos elementos con colores complementarios se refuerzan entre s, al igual que un
color clido y otro fro.
9



El contraste creado entre dos colores ser mayor cuanto ms alejados estn en el
crculo cromtico. Los colores opuestos contrastan mucho, mientras que los
anlogos apenas lo hacen, perdiendo importancia visual ambos.



Este efecto se puede usar para dar mayor dimensin o sensacin de proximidad a
un elemento en una composicin, situndolo 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 ms 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 clido sobre un fondo fro 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 atencin del usuario a ciertos
elementos de una composicin o pgina 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
atraccin visual demasiado potente. Adems, crean mucha tensin 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, consiguindose el contraste por negacin de la percepcin
aprendida.



Este sistema de contraste no es muy usado en las pginas web, donde se busca
siempre la escala adecuada, pero s es frecuente en fotografa y pintura,
consiguiendo atraer la atencin del espectador de forma muy efectiva.


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

Las composiciones grficas no escapan a esta tendencia, por lo que una correcta
agrupacin de sus elementos les otorga un carcter lgico, racional, que aumenta
su valor comunicativo.
La agrupacin de nuestros elementos grficos y textuales puede basarse en
diferentes criterios:
Proximidad: Tendemos a agrupar aquellos objetos que estn prximos,
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.
Simetra: Tendemos a agrupar los elementos para que aparezcan
ordenados formando figuras conocidas.




En el caso concreto de las pginas web, las agrupaciones son muy tiles y del
todo necesarias, sobre todo en lo que respecta a elementos similares o de
funcionalidad anloga, como componentes de mens de navegacin, iconos,
datos relacionados, botoneras, etc.
12



Las agrupaciones tambin son muy tiles en casos de formularios o fichas de
muchos campos, siendo muy conveniente dividir estos en grupos de informacin
anloga, separando luego cada grupo de los dems mediante franjas horizontales
o verticales en blanco.




Con ello, el formulario no slo gana en belleza visual, sino que adems resulta
ms claro, lgico y fcil de completar por el usuario.



Cmo armonizar los bloques de contenido que formarn la composicin
del diseo.

Una composicin grfica debe ser equilibrada no slo en contenidos, sino tambin
visualmente, hasta tal punto que podemos decir que el orden en la disposicin
espacial de los elementos de la misma es uno de los factores ms importantes
para su xito.
El espectador que contempla una obra grfica (folleto, cartel trptico o pgina
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 elevacin de la vista, marcando prioridades o
niveles en la composicin.
Puesto que las composiciones grficas (y dentro de ellas, las pginas web) se
representan en soportes planos, es fcil deducir que este sistema de referencia
es tambin el ms adecuado para la distribucin de sus elementos. Si a esto
sumamos el carcter eminentemente rectangular de la mayora de los soportes,
obtenemos por extensin el sistema de organizacin idneo para nuestras
composiciones: el reticulado.
Un reticulado o rejilla es un sistema de referencia formado por diferentes lneas
horizontales y verticales que marcan la ubicacin de elementos y zonas en una
composicin grfica, lneas que no tienen porqu tener una representacin real
(no tienen porqu formar parte del grafismo), pero s mental. Son las guas
imaginarias sobre las que vamos a ir colocando los elementos, la espina dorsal de
un composicin grfica.


Mediante el reticulado, el diseador va situando con armona los bloques de
contenido que formarn la composicin: zonas principales y secundarias, ttulos y
subttulos, bloques de texto, fotografas, ilustraciones, grficos, sistemas de
navegacin, botones, iconos, etc, dando con ello un estilo propio visualmente
lgico a la misma.
Una composicin grfica no es un sistema estndar, nico, sino que los mismos
elementos se pueden organizar segn diferentes esquemas lgicos. Pero siempre
debern estar dispuestos segn una retcula que les aporte equilibrio y
estabilidad visual. Es tarea del diseador buscar el conjunto ubicacin-reticulado
que mejor se adapte a su obra.
14
La ubicacin de elementos en una composicin segn un reticulado determinado
no precisa la introduccin de los elementos finales de la misma. Es decir, se
puede perfectamente disear la organizacin de un grafismo tan slo con
rectngulos de colores. Ms an, con rectngulos de un solo color. Lo que
importa no es el aspecto visual final, sino la organizacin lgica y regular de los
elementos.
En el caso concreto de una pgina web, el diseador puede perfectamente
distribuir en pantalla una serie de rectngulos que representen las zonas que va
a tener la pgina. Si la distribucin sigue un reticulado acorde y las zonas estn
ubicadas con lgica, la pgina que resulte de ello tiene un 50% de posibilidades
de resultar correcta.

Reticulado de Terra




Esta estructura lgica creada con el reticulado debe mantenerse luego en todas
las pginas que forman el sitio web, proporcionando con ello consistencia y
homogeneidad al mismo.
Si definimos una separacin entre el cabecero de un formulario y el inicio de los
elementos del mismo de 15 pxeles, todos los formularios, fichas, textos, etc, que
tengan un cabecero, deben mantener el mismo espacio separador. Si definimos
unos mrgenes vacos entre la pgina que diseamos y los bordes de la ventana
del navegador de 30 pxeles, todas las pginas del sitio deben mantener
constantes esos mrgenes.

Reticulado en un formulario maquetado con tabla
15




Una ventaja adicional de disear un reticulado correcto ser la comodidad a la
hora de maquetar despus la pgina con tablas, ya que estructura natural de
stas es reticular.
16