manual diseño gráfico

7/27/2019 manual diseo grfico

1/132

[email protected] 0416-8653592

1

TEORA Y TECNICA DEL CURSO DEDISEO GRFICO

(Inicie en Vista de Lectura)

Mayor [email protected]

0414-6748006 0416-8653592

Introduccin al diseo grfico

La historia del diseo grfico, desde los orgenes de la

humanidad hasta la aparicin de la web e Internet.

El ser humano ha tenido siempre la necesidad de comunicarsecon sus semejantes, hasta tal punto que podemos afirmar que siel hombre es el ser ms avanzado de la naturaleza, es debido engran parte a la facilidad que ha tenido para hacer partcipe a losdems de sus ideas de una forma u otra.

Las primeras formas comunicativas fueron mediante elementosvisuales. Antes de que desarrollaran capacidades de expresin

mediante el lenguaje hablado, los hombres utilizaron su cuerpopara comunicar a los dems estados de nimo, deseos e

inquietudes a travs de ademanes, expresiones y signos, que conel tiempo adquirieron la condicin de "lenguaje", al convertirseen modelos de comunicacin.

Aunque posteriormente el lenguaje hablado pasara a ser el mediode intercambio de informacin ms directo, el lenguaje visualsigui teniendo un importante peso en las relacionescomunicativas, sobre todo a partir del uso de diversos materialesy soportes como medios del plasmar mensajes visuales, como lodemuestran multitud de dibujos en piedra y pinturas rupestresque han llegado a nuestros das, en las cuales se representanelementos naturales, actividades cotidianas y diferentes signos

artificiales con significado propio.

Pintura rupestre (Cueva de Altamira, Espaa)

La representacin de ideas mediante grafos experiment sumayor avance con la aparicin de los lenguajes escritos, quepermitieron expresar cadenas estructuradas de pensamientosmediante un conjunto de elementos grficos de significado propiodispuestos segn una estructura definida, capaces de transmitirmensajes entendibles por la comunidad.
mailto:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]


2/132


2

Estos lenguajes escritos estaban basados, bien en larepresentacin de elementos tomados de la naturaleza, a los que

se les asignaba una interpretacin particular, bien en un conjuntoartificial de smbolos inventados: los alfabetos. Cada uno deestos signos aislado tena a veces un significado incierto, perounido a otros, permitan representar grficamente el lenguajehablado por cada pueblo o cultura.

Grabado en piedra con jeroglficos (Egipto)

Como soporte fsico se utiliz inicialmente la piedra, pero prontose buscaron otros tipos de materiales que permitieran una mayorfacilidad de uso y una mayor portabilidad, como los papiros o lospergaminos.

Papiro de los muertos

Tambin se empezaron a usar diferentes tipos de pigmentosnaturales para dar un mayor colorido y expresibidad a las obras

escritas y composiciones artsticas, y a disponer los diferenteselementos textuales y grficos de forma armoniosa y equilibrada,ya que se apreci que con ello se ganaba poder comunicativo,claridad y belleza. Esto se puede apreciar en la confeccin de losincunables medievales realizados en los monasterios, en los quese observa de forma clara la importancia de la "FORMA" (diseo)para transmitir un mensaje.
mailto:[email protected]:[email protected]:[email protected]:[email protected]


3/132


3

Incunable medieval

Posteriormente, Johann Gutenberg invent la imprenta, artefactocapaz de reproducir en grandes cantidades y de forma cmodaun original, lo que hizo posible que los documentos impresos y elmensaje que contenan fueran accesibles a un gran nmero depersonas.

Primer libro impreso

Pronto empezaron a aparecer imprentas en las que sereproducan todo tipo de obras, cada vez ms elaboradas. Seempezaron a usar nuevos materiales como soporte, nuevastintas y nuevos tipos de letras, originando la aparicin de unosprofesionales especializados en su manejo, los tipgrafos y loscajitas, tal vez los primeros diseadores grficos como tal, yaque se encargaban de componer y maquetar los diferenteselementos que iban a formar una obra de forma que resultara

lgica, clara, armoniosa y bella.

Otro gran impulsor del desarrollo del diseo grfico fue laRevolucin Industrial. Surgieron las fbricas y la economa demercado, un gran nmero de personas se desplaz a lasciudades a trabajar, aumentaron las tiendas y los comercios yempez la competitividad entre empresas por hacerse con unaparte del mercado. Con ello apareci y se desarroll una nuevatcnica comercial, la publicidad, encargada de hacer llegar a los


4/132


4

consumidores mensajes especficos que les convencieran de queun producto dado era mejor que otros anlogos.

Cartel publicitario

El desarrollo de la publicidad trajo consigo un desarrollo paralelodel diseo grfico y de los soportes de comunicacin. Haba queconvencer al pblico de las ventajas de un producto o marca, ypara ello nada mejor que mensajes concisos, cargados decomponentes psicolgicos, con diseos cada vez ms elaborados,que se hacan llegar al mayor nmero posible de personas. Elcmo se transmita la informacin lleg incluso a superar enimportancia a la misma informacin transmitida.

No se trataba ya de presentar mensajes visuales bellos, sinoefectivos, que vendieran, y para ello no se dudo en realizargrandes inversiones, haciendo posible un gran avance en las

tcnicas de diseo y la aparicin de profesionales dedicadosexclusivamente a desarrollarlas y ponerlas en prctica: losdiseadores grficos.

En el siglo XX, hicieron su aparicin los ordenadores, mquinasen un principio destinadas a un grupo reducido de tcnicos yespecialistas, pero que poco a poco fueron ganando popularidady que con la aparicin del ordenador personal se extendieron atodos los ambientes y grupos sociales.

El ordenador es til porque permite el uso de programasinformticos capaces de realizar multitud de tareas. Pero estos

programas tienen una estructura interna muy compleja, que lamayora de las veces va ms all de los conocimientos queposeen los usuarios de los mismos.

Esto dio lugar a la introduccin de unos elementos intermedios,denominados "Interfases de Usuario", cuya misin era aislar alusuario de las consideraciones tcnicas y procesos internos de losprogramas, permitindoles realizar tareas con ellos por medio deun "lenguaje" intermedio, ms fcil de entender por el usuario.

Interfase de usuario en modo texto

En sus principios, estos programas se manejaban de formatextual, mediante comandos crpticos, que entendan tan soloexpertos en la materia. Pero con el acceso a la informtica de

todo tipo de personas se hizo necesaria una simplificacin en elmanejo de las aplicaciones, surgiendo el concepto de "InterfaseGrfica de Usuario" en toda su extensin, como un medio capazde hacer entendibles y usables estas aplicaciones a travs deelementos visuales comunes, que presentados en la pantalla delordenador permitieran al usuario medio realizar las tareaspropias de cada programa concreto.


5/132


5

Interfase Grfica de Usuario

La labor de disear estas IGU correspondi inicialmente a los

mismos programadores que desarrollaban las aplicaciones, peropronto se vio que su concepto de interfase de usuario no secorresponda con la que necesitaban los usuarios finales.

Haca falta pues profesionales del diseo que se encargaran deconcebir las interfases, pero los diseadores grficos clsicos noestaban acostumbrados a construir obras con capacidades deinteraccin y navegabilidad, por lo que hubieron de reciclarse,aprendiendo conceptos y funcionalidades nuevas.

Con la entrada en escena de Internet y las pginas web se hizoan ms patente el desfase de los diseadores grficos con el

nuevo medio. Haca falta ahora disear y construir interfases deusuario muy especiales, condicionadas a pequeos tamaos defichero y a un medio concreto de presentacin, los navegadoresweb, que imponan serias limitaciones al diseo, que necesitabansistemas de navegacin entre pginas simples y entendibles.

Interfase web

Si a esto sumamos la necesidad de los creadores de interfases

web de conocer a fondo diferentes lenguajes de marcas y deprogramacin (HTML, JavaScript, DHTML), es evidente que eranecesaria la aparicin de un nuevo profesional, el diseador web,hbrido entre el diseador grfico clsico y el programador deaplicaciones para Internet

Diseo grfico

Una aproximacin al diseo grfico en general, con unadescripcin de los elementos que componenhabitualmente un diseo y las caractersticas principalesque podemos encontrar en ellos.

Podemos definir el diseo grfico como el proceso de programar,proyectar, coordinar, seleccionar y organizar una serie deelementos para producir objetos visuales destinados a comunicarmensajes especficos a grupos determinados.


6/132


6

La funcin principal del diseo grfico ser entonces transmitiruna informacin determinada por medio de composiciones

grficas, que se hacen llegar al pblico destinatario a travs dediferentes soportes, como folletos, carteles, trpticos, etc.

El diseo grfico busca transmitir las ideas esenciales delmensaje de forma clara y directa, usando para ello diferenteselementos grficos que den forma al mensaje y lo haganfcilmente entendible por los destinatarios del mismo.

El diseo grfico no significa crear un dibujo, una imagen, unailustracin, una fotografa. Es algo ms que la suma de todosesos elementos, aunque para poder conseguir poder comunicarvisualmente un mensaje de forma efectiva el diseador debe

conocer a fondo los diferentes recursos grficos a su disposiciny tener la imaginacin, la experiencia, el buen gusto y el sentidocomn necesarios para combinarlos de forma adecuada.

El resultado final de un diseo grfico se denomina grafismo, y esuna unidad por s misma, aunque est compuesto por multitudde elementos diferentes. Podemos establecer una analoga entreun grafismo y un plato de cocina. Ambos estn compuestos pordiferentes elementos individuales que, unidos correctamente ycon sabidura, componen una obra final nica y definida que vams all de la suma de las partes que la forman.

Formas, colores y textos en un grafismo

Toda obra de comunicacin visual nace de la necesidad detransmitir un mensaje especfico. Un diseador grfico no es uncreador de formas, sino un creador de comunicaciones, unprofesional que mediante un mtodo especfico

(diseo) construye mensajes (comunicacin) con medios visuales

(grafismos). No es el creador del mensaje, sino su intrprete.

El principal componente de toda composicin grfica es pues elmensaje a interpretar, la informacin que se desea hacer llegaral destinatario a travs del grafismo. Esta informacin se deberepresentar por medio de diferentes elementos grficos, quepueden ser muchos y variados, aunque los ms comunes son:

Elementos grficos simples: puntos y lneas de todo tipo(libres, rectas, quebradas curvas, etc.)


7/132


7

Elementos geomtricos, con contorno o sin l: polgonos,crculos, elipses, valos, etc.

Tipos: letras de diferentes formas y estructura, utilizadaspara presentar mensajes textuales.Grficos varios: logotipos, iconos, etc.IlustracionesFotografasCualquier otro elemento visual apto para comunicar unmensaje.

Un diseo limpio

Estos elementos bsicos se combinan unos con otros en ungrafismo, y de esta combinacin surge un resultado final en elque tienen mucha importancia una serie de conceptos propios deldiseo grfico, entre los que destacan:

Las agrupaciones: conjuntos de elementos relacionadosmediante proximidad, semejanza, continuidad o simetras.La forma: forma de cada elemento grfico aislado y delas agrupaciones de elementos.

Los contornos: partes lmites de los elementos, quepermiten distinguirlos de los dems y del fondo, pudiendo

estar definidos mediante border, cambios de color ocambios de saturacin.La ubicacin: lugar que ocupa cada elemento grfico oagrupacin de ellos en el espacio del grafismo.El tamao: tamao relativo de cada elemento grficorespecto los que le rodean. Escalas.El color: color de cada elemento individual, colores decada agrupacin de elementos, conjunto total de coloresusado en un grafismo, disposicin relativa de loselementos con color y armona entre colores.El contraste: intensidad de visualizacin de cadaelemento con relacin a los que le rodean y al grafismo

completo.El equilibrio: cada grafismo conlleva un sistema dereferencia espacial que consigue un nivel de equilibriomayor o menor.La simetra : disposicin espacial regular y equilibrada delos elementos que forman la composicin grfica.

Los diferentes elementos de un grafismo son percibidos por eldestinatario de acuerdo con la influencia que ejercen cada unoestos conceptos a nivel individual, grupal y total. Pero la unin detodos ellos, la obra grfica, es una entidad comunicativaindividual y completa, cargada de complejos elementos humanos

asociados con el lenguaje, la experiencia, la edad, el aprendizaje,la educacin y la memoria.

Diseo grfico en la web

El diseo web va ms all del diseo tradicional puesexisten muchos limitadores relacionados con el mediodonde se presentan las pginas: Internet. Conocemos lascaractersticas fundamentales del diseo en la web.


8/132


8

El diseo grfico de una pgina web es tan solo una parte deldiseo de la misma, ya que, adems, hay que considerar un

conjunto ms o menos extenso de condicionantes que van alimitar la libre creatividad del diseador.

En primer lugar, las pginas web se deben descargar de unservidor web remoto por medio de Internet, por lo que el anchode banda de las conexiones de los usuarios va a ser un factorclave en la velocidad de visualizacin. La mayora de los usuariosse conectan todava a Internet con un mdem, con velocidadestericas de 56 Kbps, aunque en realizada no superar los 10-15Kbps en el mejor de los casos.

Los elementos grficos, ya tengan formato de mapa de bits o

vectorial, suelen traducirse en ficheros de bastante peso,dependiendo del tamao de la imagen y del formato en que seguarde. Esto origina que las pginas que contienen en su diseomuchas imgenes, o pocas pero de gran tamao, tarden muchotiempo en ser descargadas desde el servidor web y presentadasen la ventana del ordenador del usuario, que no suele ser muypaciente.

Estudios realizados demuestran que el tiempo mximo deaguante de una persona que espera la descarga de una pginasuele ser de unos 10 segundos, pasados los cuales prefiereabandonar nuestro sitio web y buscar otro ms rpido. Por lo

tanto, el nmero de elementos grficos que podemos introduciren una pgina web queda bastante limitado, teniendo que buscaralternativas mediante el uso imaginativo de fuentes y colores.

Otro aspecto a tener en cuenta es que las pginas web sonvisualizadas en unas aplicaciones especficas, los navegadoresweb, que imponen grandes limitaciones al diseo de las mismas.La ventana de un navegador es eminentemente rectangular, conunas medidas concretas (dadas por la resolucin empleada por elusuario en su monitor) y con unas capacidades de interpretacin

de colores que varan mucho segn el ordenador usado, elsistema operativo, el monitor y la tarjeta grfica.

Estos factores imponen fuertes limitaciones al diseador web,que debe buscar siempre que sus pginas puedan servisualizadas correctamente por el mayor nmero de usuarios.

Diseo de un formulario web

En segundo lugar, los navegadores existentes en el mercadotienen una forma particular de presentar el contenido de laspginas. Internet Explorer interpreta en muchas ocasiones unapgina web de forma muy diferente a Netscape Navigator 4x, yeste a su vez lo hace de forma diferente a Netscape Navigator6x.

Para intentar solventar estas diferencias, el diseador web debetrabajar a la vez con varios navegadores, diseando sus pginas


9/132


9

de tal forma que la interpretacin de ellas sea similar en todos, loque impone nuevas limitaciones al diseo.

Por otra parte, una pgina web no es un diseo grfico esttico,sino que contiene diferentes elementos que tienen la capacidadde interaccionar con el usuario, como mens de navegacin,enlaces, formularios, etc. Adems, una pgina aislada no existe,sino que forma parte de un conjunto de pginas inter-relacionadas entre s (el sitio web), que deben presentarse alusuario con el mismo estilo, aunque su funcionalidad sea muydiferente.

A esto hay que sumar que las pginas diseadas deben luegoconstruirse en un lenguaje especfico, el HTML, que por s mismo

es muy limitado, lo que hace que el diseador web tenga queestar siempre pensando si la interfase que est diseandogrficamente va a poder ser luego construida.

Por ltimo, una pgina web suele ocultar, en la mayora de loscasos, una serie de procesos complejos que se ejecutan sin queel usuario sea consciente de ellos (ejecucin de cdigos delenguajes de programacin tanto en cliente como en servidor,acceso a bases de datos en servidores remotos, etc.), procesosque aaden tiempo a la presentacin de las pginas y quemuchas veces suelen afectar de forma importante al diseo deestas, ya que el diseador no sabe de antemano qu contenidos

concretos van a tener.

Resumiendo: el diseo web va ms all del diseo grfico, alinfluir en l multitud de factores que limitan las posibilidades deldiseo, pero tambin otros que aaden interactividad yfuncionalidades a una pgina web que no tiene un cartel, folleto orevista

Componentes grficos de un ordenador

Descripcin de los principales componentes grficos de un

ordenador: La tarjeta de grficos y el monitor.

Los principales componentes de un ordenador encargados de lainterpretacin y presentacin de colores son la tarjeta grfica y elmonitor.

La tarjeta grfica o de vdeo es el componente hardwareencargado de procesar los datos grficos que enva elprocesador, interpretarlos y codificarlos en voltajes adecuadosque son enviados luego al monitor para su presentacin enpantalla.

Tarjeta grfica

Existen diferentes modelos de tarjeta grfica, que van desde lasms simples, incluidas en la placa base, hasta las msavanzadas, verdaderos mini-ordenadores, con su propioprocesador, memoria, bus, etc.

Los monitores son los dispositivos encargados de presentar alusuario las interfaces de las aplicaciones que se ejecutan en elordenador. Todos sabemos cmo es un monitor por fuera, ya queestamos acostumbrados a los monitores de los televisores, algotan comn en nuestras casas. Interiormente, los monitores


10/132


10

varan unos de otros en funcin de su calidad, de la forma demanejar de voltajes y de la tecnologa grfica empleada.

Monitor CRT

Los monitores ms comunes son los CRT o de rayos catdicos,formados por un tubo en cuyo interior se ha hecho el vaco, enuno de cuyos extremos se sitan tres caones de electrones, unopor cada color primario, y en el otro una pantalla de cristal, cuyaparte externa es la que ve el usuario.

Tubo de rayos catdicos de un monitor CRT

Los electrones generados en los caones por calentamiento sonimpulsados hasta la parte interna de la pantalla, que seencuentra recubierta por pequeos grupos de fsforo pigmentadoen cada uno de los tres colores primarios (rojo, verde y azul).Estos grupos reciben el nombre de tradas, y se correspondencon un punto de la pantalla, denominado pxel, que aparecer de

un color u otro segn la intensidad de los electrones que le lleguede cada can.

Una caracterstica importante es el paso de punto (dot pitch),distancia diagonal entre dos puntos vecinos del mismo color, quedetermina el mnimo tamao de un detalle que es capaz deresolver una pantalla. Cuanto menor sea esta distancia, mayorser la nitidez. Se mide en puntos por pulgada (ppp).


11/132


11

La resolucin mxima distinguible en una pantalla de 800x600 esde 72 ppp y en una de 1024x768 es de 93 ppp. Estos son valores

tericos y en la prctica son algo mayores.

Paso de punto y pixel

Segn la resolucin empleada, los pxeles (unidad mnima deinformacin) son representados en pantalla por una o mstradas, con lo que la adaptacin a las diferentes resoluciones esmuy buena.

Con objeto de que los electrones lleguen de forma ordenada eimpacten justo en el punto adecuado, entre la pantalla y loscaones se sita una mscara o rejilla que filtra los electrones ylos dirige a sus puntos destino de forma adecuada.

La representacin de una imagen en pantalla se realiza mediantebarridos de los rayos de electrones, que recorren toda la pantallade izquierda a derecha y de arriba hacia abajo. La velocidad conla que se realiza esta operacin se denomina frecuencia derefresco vertical o refresco de pantalla, se mide en Hz (hertzios)y debe estar por encima de 60 Hz, preferiblemente 70 u 80. Apartir de esta cifra, la imagen en la pantalla es sumamenteestable, sin parpadeos apreciables, con lo que la vista sufremucho menos.

La frecuencia de refresco vertical de nuestro monitor podemosaveriguarla accediendo a la pantalla de configuracin del monitor,

a la que se accede en sistemas Windows mediante lasselecciones:

Inicio > Panel de control > Pantalla > Configuracin > Opcionesavanzadas > Monitor

Tambin podemos en esta pantalla cambiar la frecuencia derefresco, pero antes de hacerlo es aconsejable consultar elmanual del monitor, ya que una frecuencia incorrecta puederesultar bastante perjudicial.

Monitor LCD

Otro tipo de monitores son los LCD o de cristal lquido, que se

diferencian de los anteriores en que en ellos las tradas estnformadas por cristal lquido en vez de fsforo pigmentado, y enque los haces de electrones son guiados por polarizacinmagntica. Adems, en los monitores LCD trabajan con unatrama de pxeles concreta, siendo fijo el tamao de cada uno, porlo que al cambiar a una resolucin inferior pueden quedar franjasde pxeles desactivadas.


12/132


12

Sea cual sea el tipo de tarjeta grfica y monitor usado, esfundamental tener instalados y actualizados los drivers propios

de estos componentes.

Un driver es un conjunto de libreras de software especficasencargadas de configurar y controlar los dispositivos dehardware. Cada componente necesita para funcionar bien losdrivers adecuados, que generalmente vienen junto a ste en undisquete o en un CD.

Con el avance de las funcionalidades de los sistemas operativos yde los dems componentes de software y hardware de losequipos informticos, se hace necesaria una actualizacinconstante de los drivers de los monitores y tarjetas de video.

Estas versiones actualizadas suelen ofrecerlas los distintosfabricantes en sus sitios web, por lo que es muy importantevisitar estos cada cierto tiempo para bajar las versionesactualizadas de los drivers e instalarlos en nuestro equipo, conobjeto de no perder capacidades y de evitar incompatibilidadescon los nuevos sistemas operativos.

Si tenemos instalada una tarjeta grfica en nuestro ordenador,generalmente los drivers de esta (controlador) son losresponsables de manejar de forma adecuada el monitor. Paraacceder a la propiedades del controlador, basta seguir la ruta:

Inicio > Panel de control > Pantalla > Configuracin > Opcionesavanzadas > Monitor > Propiedades > Controlador

Desde esta ventana podemos ver el tipo de controladorinstalado y si est funcionando bien o tiene algnproblema. Tambin actualizarlo, para lo que es necesario tenerpreviamente los nuevos drivers, ya que tendremos que indicar sulocalizacin en nuestros discos duros.

Una consideracin importante: hay que estar seguro que el driverque vamos a instalar se corresponde con el de nuestra tarjeta

grfica o monitor, ya que un driver inadecuado puede originar unmal funcionamiento de los componentes grficos

Formas bsicas en diseo grfico

El lenguaje visual a travs de grafismos puededescomponerse en entidades bsicas, cada una de lascuales tiene por s misma un significado propio, pero queunidas de diferentes formas pueden constituir elementoscomunicativos distintos.

Estamos acostumbrados a comunicarnos con nuestrossemejantes mediante el lenguaje hablado, verbal, formado poruna serie de elementos bsicos (letras, palabras, frases, etc.)que, combinados, forman entidades comunicativas complejas.

De igual modo, el lenguaje visual a travs de grafismos puededescomponerse en entidades bsicas, cada una de las cualestiene por s misma un significado propio, pero que unidas dediferentes formas pueden constituir elementos comunicativosdistintos.

Estas entidades grficas constituyen la sustancia bsica de lo que

vemos. Por lo tanto, son muy importantes y todo diseador debeconocerlas y manejarlas perfectamente.

Las formas bsicas del diseo grfico son pocas: el punto, lalnea y el contorno. Pero son la materia prima de toda lainformacin visual que aporta una composicin.

Cada una de ellas posee un conjunto de caractersticas propiasque las modifican y condicionan, entre las que destacan:


13/132


13

Forma: definida por disposicin geomtrica. La forma de unazona o contorno va a permitirnos reconocerlas como

representaciones de objetos reales o imaginarios.

Direccin: proyeccin plana o espacial de una forma,continuacin imaginaria de la misma an despus de sufinalizacin fsica. Puede ser horizontal, vertical o inclinada endiferentes grados.

Color: tal vez las ms importante y evidente, puede imprimir unfuerte carcter y dinamismo a los elementos a los que se aplica.Toda forma o zona tendr en general dos colores diferentes, elde su contorno y el de su parte interna, pudiendo aplicarse tantocolores puros como degradados de colores.

Textura: modificacin o variacin de la superficie de losmateriales, sirve para expresar visualmente las sensacionesobtenidas mediante el sentido del tacto o para representar unmaterial dado. La textura est relacionada con la composicin deuna sustancia a travs de variaciones diminutas en la superficiedel material, y se consigue en una composicin grfica mediantela repeticin de luces y sombras o de motivos iguales o similares.

Escala: tamao relativo de una zona respecto a las dems y altotal de la obra. Los diferentes tamaos de las diferentes zonasmodifican y definen las propiedades de cada una de ellas.


14/132


14

Dimensin: capacidad tridimensional de un elemento o zona. Ladimensin slo existe en el espacio real tridimensional, pero sepuede simular en una composicin grfica plana mediantetcnicas de perspectiva, sombreado o superposicin. Tambin,mediante el uso de fotografas, que introducen espaciostridimensionales en la composicin.

Movimiento: propiedad muy importante, que aportaconnotaciones de dinamismo y fuerza. En las obras grficaspuras no existe movimiento real, pero s se encuentra implcitoen ciertos elementos y se puede conseguir con ciertas tcnicasque engaan al ojo humano (diseo cintico, pintura cintica) orepresentando elementos que s lo tienen en el mundo real.

En las pginas web podemos introducir animaciones grficas queaportan sensaciones de movimiento mucho mayores, comoanimaciones Flash, gifs animados, capas dinmicas, elementosde vdeo, etc

El punto

El punto es la unidad mnima de informacin visual, y estcaracterizado por su forma, tamao, color y ubicacin.

El punto es la unidad mnima de informacin visual, y estcaracterizado por su forma (generalmente circular, pero tambinpuede ser rectangular, como ocurre en los monitores, triangularo una mancha sin forma definida), por su tamao, por su color ypor la ubicacin que tenga dentro de la composicin grfica.


15/132


15

Las principales caractersticas del punto son:

Tiene un gran poder de atraccin visual, creando tensin

sin direccin.Cuando se sitan prximos dos puntos pueden producirsensaciones de tensin o de direccin, creando en lamente del espectador una lnea recta imaginaria que losune.Si se sitan diferentes puntos en prolongacin sugierenuna direccin, un camino, ms acentuada cuanto msprximos estn los puntos entre s.

Cuando se agrupan varios puntos pueden definir formas,contornos, tonos o colores (pensemos en la pinturaimpresionista).

Los puntos aislados son poco usados en el diseo web. Sinembargo, las sucesiones de puntos prximos son un buen

elemento para dirigir la atencin del visitante, para guiar sumirada a una zona concreta, para establecer relaciones entreelementos o para separar zonas de la pgina

La lneaLa lnea es el elemento bsico de todo grafismo y uno delos ms usados. Representa la forma de expresin mssencilla y pura, pero tambin la ms dinmica y variada.

La lnea es el elemento bsico de todo grafismo y uno de los msusados, teniendo tanta importancia en un grafismo como la letraen un texto. Representa la forma de expresin ms sencilla y

pura, pero tambin la ms dinmica y variada.

Est formada por la unin de varios puntos en sucesin,pudindose asimilar a la trayectoria seguida por un punto enmovimiento, por lo que tiene mucha energa y dinamismo. Supresencia crea tensin y afecta al resto de elementos cercanos aella.

Las principales propiedades de la lnea son:

Contiene gran expresividad grfica y mucha energa.Casi siempre expresa dinamismo, movimiento y direccin.Crea tensin en el espacio grfico en que se encuentra.Crea separacin de espacios en el grafismo.La repeticin de lneas prximas genera planos y texturas.

En una composicin define direccionamiento, que estar msacentuado cuantas ms lneas paralelas haya. Esta cualidad sepuede usar para dirigir la atencin en una direccin concreta,haciendo que el espectador observe el lugar adecuado.


16/132


16

Una lnea divide o circunda un rea, se encuentra en el borde deuna forma. Expresa separacin de planos, permitiendo aldiseador usarla como elemento delimitador de niveles y reasen la composicin.

Las propiedades de una lnea vendrn definidas por su grosor, sulongitud, su orientacin (direccin) respecto a la pgina, suubicacin (posicin), su forma (recta o curva) y su color. Estaspropiedades se vern afectadas tambin por el nmero de lneasque haya en la composicin, su proximidad y la orientacinrelativa entre ellas.

La lnea es considerada como tal mientras la relacin ancho/largono sobrepase una proporcin determinada. Una lnea ms ancha

que la mitad de su largo pierde la expresin dinmica del trazo yadquiere la esttica de una superficie cuandrangular.

La unin sucesiva de lneas conforma un trazo. Los trazos danvolumen a los objetos que dibujamos y permiten representarsimblicamente objetos en la composicin, eliminando de ellostoda informacin superflua y dejando slo lo esencial.

La lnea pueden tener los bordes lisos o dentados, con extremosrectos, redondeados o en punta. Su cuerpo puede ser slido otexturado, y su direccin puede ser curva o recta. Y cada una deestas caractersticas matizar la forma en que es interpretadauna lnea por el espectador.

Podemos considerar diferentes tipos de lneas, cada uno de los

cuales tiene sus propias cualidades:

Lnea recta

Define el camino ms corto entre dos puntos. Es poco frecuenteen la naturaleza, donde predominan las lneas curvas (el universoen su totalidad es curvo), pero muy abundante en el entornohumano, que necesita de ellas para dar estabilidad a suscreaciones.


17/132


17

La lnea recta horizontal expresa equilibrio, calma, equilibrioestable. No hay estabilidad sin una lnea recta horizontal dereferencia, una lnea de horizonte, ya que nos movemos en unplano horizontal.

Las lneas rectas horizontales son muy usadas en las pginasweb, tanto que el lenguaje HTML proporciona una etiquetaespecfica para introducirlas, HR. Se utilizan sobre todo comoelemento delimitador de bloques de contenido en pginas depoco contenido grfico, siendo conveniente no presentarlas conefecto tridimensional, sino como una simple lnea plana (atributonoshade).

La lnea recta vertical sugiere elevacin, movimiento ascendente,actividad. Tambin expresa equilibrio, pero inestable, como siestuviera a punto de caer. Esto se puede corregir haciendotrabajar las lneas verticales con otras horizontales de apoyo, queles darn la estabilidad de que carecen.

En una pginas web, las lneas rectas verticales pueden serusadas para separar columnas textuales o bloques de contenidos,bien como lneas frontales, con un color que destaque losuficiente sobre el fondo, bien como lneas de fondo, del mismocolor que ste, separando zonas de un color diferente.

La lnea recta inclinada, por el contrario, expresa tensin,inestabilidad, desequilibrio. Parecen que estn a punto de caerse.Dentro de las lneas inclinadas, la que forma 45 con lahorizontal es la ms estable y reconocible.

Lnea curva


18/132


18

Es la lnea ms libre y la ms dinmica de todas, pudiendosugerir desde un movimiento perfectamente definido hasta un

movimiento catico, sin reglas.

Est muy asociada al ser humano, que escribe y dibuja casisiempre con lneas curvas.

Las curvas ms comnmente usadas en diseo grfico digital sonlas curvas Bzier. Este tipo de curvas fue desarrollado por PierreBzier por encargo de la empresa Renault, que buscaba unafamilia de curvas representables matemticamente (son curvasde tercer grado) que permitieran representar las curvaturassuaves que deseaban dar a sus automviles.

Una curva Bzier queda totalmente definida por cuatro puntoscaractersticos, los puntos inicial y final de la curva y dos puntosde control (manejadores) que definen su forma. Para modificarsu forma, basta cambiar de posicin uno de sus puntos decontrol.

Son curvas de manejo poco complejo y muy elegantes, con undesarrollo muy suave, capaces de adaptarse a casi cualquierforma imaginable, por lo que son muy usadas para disearlogotipos e iconos y para copiar cualquier figura.

Tambin son enormemente verstiles, pudiendo adoptar desdecurvaturas muy suaves (casi lneas rectas) a curvaturas muyfuerte (curvas complejas), pasando por todos los valoresintermedios. Pueden, incluso, cambiar de cncavas a convexasalrededor de un punto.


19/132


19

En el diseo web, el uso de lneas curvas aisladas est muylimitado. Es ms comn encontrarlas como partes integrantes de

formas ms complejas, siendo tiles, por ejemplo, para suavizarla dureza de una forma rectangular en uno o ms de sus lados(como los botones).

Un factor a tener en cuenta siempre que se trabaje con lneascurvas en una pgina web es el efecto de escalado producido alno ser capaz el sistema grfico de los ordenadores derepresentar con exactitud formas curvas por medio de pxeles. Esel tpico efecto de "dientes de sierra" que aparece en todos losobjetos con partes curvas, efecto que aumenta con el tamao delobjeto.

Una solucin a este problema visual es incluir las lneas curvascomo imgenes en formato web (GIF, JPG, PNG, etc.) y aplicarlesel proceso de rastrillado o antialias, disponible en casi todas las

aplicaciones grficas, por medio del cual se crean uno o mspxeles entre los bordes de la lnea y el fondo, de un color

intermedio entre ellos.

Trazo

Un trazo es el elemento lineal formado por la unin sucesiva dediferentes lneas. Es tal vez la forma grfica ms humana, la quemejor representa nuestra forma natural de dibujar.

Un trazo heredar las propiedades de las lneas que lo crean,existiendo trazos rectos, curvos o mixtos

El contornoEl contorno es el objeto grfico creado cuando el trazo de

una lnea se une en un mismo punto.

Podemos definir el contorno como el objeto grfico creadocuando el trazo de una lnea se une en un mismo punto. Es decir,cuando una lnea continua empieza y acaba en un mismo punto.


20/132


20

Todo contorno delimita dos zonas, una acotada (el contorno y suinterior) y otra infinita (el fondo), crendose un sub-mundogrfico particular en cada forma definida por cada contorno.

La lnea base de un contorno define la complejidad de ste y suspropiedades. Cuando una lnea se cierra sobre s misma, elcontorno creado determina un espacio interno, crendose unatensin entre este espacio y sus lmites, otorgando a la lneacreadora un gran poder de atraccin visual.

Las cualidades grficas de un contorno estarn definidas por laslneas que lo crean y las propiedades de stas.

Los principales contornos son el cuadrado, la circunferencia y el

tringulo, a los que podemos aadir los contornos mixtos y losorgnicos

El cuadradoElementos de diseo: el cuadrado.

El cuadrado es la figura geomtrica formada por cuatro lneasrectas de igual longitud, denominadas lados, que forman ngulosperfectamente rectos en los puntos de unin entre ellas(esquinas a 90).

El cuadrado es una figura muy estable y de carcter permanente,asociada a conceptos como estabilidad, permanencia,honestidad, rectitud, limpieza, esmero y equilibrio.

La figura derivada del cuadrado por modificacin de sus lados esel rectngulo, de propiedades anlogas al cuadrado, aunquesugiere menos perfeccin y estabilidad.


21/132


21

El cuadrado expresa direccionalidad horizontal y vertical,referencia primaria con respecto al equilibrio y el bienestar. Esmenos sugerente y ms neutro que los rectngulos, pero msslido. Invita a mirar su centro y pasear la mirada en espiral en

torno a ese punto.

Los rectngulos horizontales aportan solidez, estabilidad, dan lasensacin de ser difciles de volcar. Cuando son de gran tamaopermiten que la mirada el espectador se pasee de un lado a otro,en sentido horizontal.

Los rectngulos verticales, por el contrario, da sensacin demenos solidez, es menos estable, parece que puede volcarse encualquier momento. En ellos, la mirada del espectador no puedede un lado a otro, pero puede moverse verticalmente, dando

sensacin de elevacin, y es apto para representar aquellosobjetos que en la realidad tienen una forma ascendente.

Los cuadrados y rectngulos vern modificadas sus cualidadesvisuales segn su forma, tamao, color del contorno y reainterna, ubicacin, escala, etc.La proyeccin tridimensional del cuadrado es el hexaedro o cubo,cuerpo geomtrico muy asociado a las obras propias del serhumano, como los edificios.Los rectngulos son las formas ms naturales para un ordenador,ya que el monitor y las ventanas de los sistemas operativos


22/132


22

grficos son todas rectngulos horizontales. Una pgina webposee una forma claramente rectangular, definida por la ventana

del navegador. Adems, los elementos web (tablas, capas,animaciones Flash, applets de Java, etc.) son de formarectangular.

Esto hace que los rectngulos sean especialmente adecuadospara su uso en las pginas web, proporcionando equilibrio yestabilidad a las mismas.

Sin embargo, es conveniente seguir una serie de pautas a la hora

de usar rectngulos, con vistas a evitar la monotona y el aspectoartificial de una pgina demasiado cuadriculada:

Cada rectngulo debe estar alineado con los demsobjetos de la pgina que le rodean.El tamao del rectngulo debe ser mayor que el contenidodel mismo, lo suficiente como para que ste se presentelibre, con espaciados convenientes por los cuatro lados.No usar en las tablas bordes por defecto, es decir, grises ycon efectos de relieve. Si se usan para separarlgicamente registros, es mejor asignarles un borde fino(sobre 1 pxel) de un color que contraste suficientemente

con el borde, pero que no resulte llamativo en exceso. Detodas formas, es preferible utilizar otros mtodos paraobtener la separacin, como filas de dos coloresalternativos (pijamas).Si de desea situar en la pgina varios rectngulos defuncionalidad anloga (caso de elementos de un men denavegacin, por ejemplo), es preferible posicionarlos enseries horizontales, ya que se percibirn ms como unalnea que como un conjunto rectangular.

La dureza visual de los rectngulos se puede suavizar

aadindoles otros elementos que los modifiquen en parte. Unejemplo de esto son las tablas o botones con esquinasredondeadas, que rompen la monotona de la forma rectangular.


23/132


23

Otra forma de compensar la rigidez de las formas rectangulareses combinarlas en la composicin con formas curvas que aportenlibertad y dinamismo.

La circunferencia

Elementos de diseo: la circunferencia.

La circunferencia es un contorno contnuamente curvado, cuyospuntos estn todos a la misma distancia de un punto central,llamado centro del crculo. La distancia constante de cualquierpunto de la circunferencia se denomina radio.

La circunferencia representa el rea que contiene en su interior,

denominada crculo, la forma ms enigmtica de todas,considerada perfecta por nuestros antepasados. Sudireccionalidad es la curva, asociada al movimiento, alencuadramiento, a la repeticin y al calor.

La forma circular produce un movimiento de rotacin evidente,posee un gran valor simblico, especialmente su centro, y tieneconnotaciones psicolgicas como proteccin, inestabilidad,totalidad, movimiento contnuo o infinitud. Es tpico representartambin los espacios cerrados, hermticos, con circunferencias ocrculos.

Contornos derivados de la circunferencia son el valo y el ovoide,con cualidades parecidas a las de sta, pero que expresan an

ms inestabilidad y dinamismo, aunque el movimiento perfectosea una cualidad propia de la circunferencia.

La proyeccin tridimensional de la circunferencia es la esfera, elcuerpo geomtrico ms perfecto, el que contiene un mayorvolumen en un menor espacio, el que define la forma tanto delos tomos como de los cuerpos celestes.

La circunferencia y el crculo son tal vez los elementosgeomtricos ms perfectos y estables, aunque cargados de una


24/132


24

gran carga dinmica.

Las formas circulares son muy difciles de representar en unapgina web, ya que todos los elementos que nos facilita ellenguaje HTML son rectangulares, aunque aparenten no serlo.Adems, las formas curvas se visualizan muy mal en losmonitores, debido a la interpretacin grfica mediante pixels, queorigina efectos de escalado indeseables.

Otro inconveniente de usar crculos en el diseo web derivaprecisamente de ser la forma que contiene ms rea en el menorpermetro, ya que la mayora de las veces al diseador leinteresa precisamente lo contrario, reducir al mnimo el rea ymaximizar al mximo el permetro.

Tal vez la nica forma de incluir una forma circular completa en

una pgina sea incluyndola en una imagen. Pero cualquierimagen es de por s rectangular como objeto HTML, lo que nosobligar a desperdiciar todo el espacio comprendido entre elcontorno circular y los bordes de la imagen, apareciendo espaciossin contenido no deseables en la mayora de los casos.

Este efecto negativo se puede paliar incluyendo dentro de laimagen la forma circular y los dems objetos que le rodean en lacomposicin y que se encuentran dentro de los lmites delrectngulo que define la imagen, pero entonces esos elementos

sern estticos, fijos, sin posibilidad de ser modificados si no escambiando todo el contenido de la imagen.

Una mejor solucin es incluir la imagen que contiene el contornocircular (o curvo en general) como fondo de la pgina o de unelemento contenedor de la misma (tabla, celda de tabla, prrafo,capa, etc.), lo que nos permitir presentar otros objetos HTMLocupando espacios vacos alrededor de la forma circular.

Formas ms sutiles y efectivas de incluir curvas en una pginapueden ser recortando imgenes en forma de valo o crculo, eincluso simulando caminos curvos mediante elementos textualeso grficos dispuestos en sucesin.

Contornos mixtos


25/132


25

Elementos de diseo: contornos mixtos, que son los queestn compuestos por varios tipos de contornos.

Mediante combinaciones de los elementos bsicos y contornosanteriores se pueden construir todas las formas imaginables,cada una de las cuales tendr unas propiedades dependientes delas partes que la forman, de su orientacin, de su tamao, deespesor del trazo lmite, de su color y de su ubicacin.

Hay que tener en cuenta, en cualquier caso, que el predominiode la referencia horizontal-vertical da una sensacin de equilibrio,mientras que el dominio de la direccin diagonal aportainestabilidad.

Los contornos mixtos son muy usados en las pginas web, a lasque aportan variedad en el diseo y definicin de espacios deinformacin, rompiendo la monotona visual de las formasrectangulares puras.

El nico inconveniente es que las lneas curvas se debenimplementar mediante imgenes, generalmente en formato GIF,

que se pueden incluir como secciones curvas en las celdasextremas de una tabla o como imgenes completas en una capa,sobre la que se sita otra capa con el texto.

Tambin es posible incluirlas como ficheros SWF (MacromediaFlash), que aportan gran definicin a las zonas curvas, sinproducirse efectos de escalado, al ser tratadas como grficosvectoriales. El inconveniente es entonces la actualizacin de loscontenidos textuales, ya que hace falta para ello acceder alfichero FLA fuente del grfico.

Contornos orgnicos

Elementos de diseo: contornos orgnicos, que estnformados por curvas libres.

Los contornos orgnicos son aquellos formados por curvas libres.


26/132


26

Son los contornos ms abundantes en la naturaleza, y sugieren

fluidez, desarrollo, humanidad, inspirando sensaciones favorablesen el espectador.

Los contornos orgnicos son utilizados abundantemente enpintura y dibujo artstico, ya que son la base para representarfiguras humanas, bodegones, paisajes, etc.

Sin embargo, son muy difciles de incluir en una pgina web,tanto por aspectos tcnicos (deben incrustarse como imgenes)como por su aspecto visual, que puede chocar con la naturalezapropia de una pgina, composicin ordenada en la quepredominan las formas rectangulares. No obstante, bien usadospueden dar un toque natural o humano a la pgina.

Una posible solucin, si deseamos introducir en una pginacontornos orgnicos, es adaptarlos lo ms posible a un contorno

mixto, transformando las curvas libres en curvas Bzier,porciones de circunferencias o lneas rectas. Otra solucin es

introducir fotografas o ilustraciones que los contengan.

El diseo equilibrado. IntroduccinEstudio de las reglas bsicas del diseo grfico. No existeuna frmula que de un diseo infalible pero s unas reglasbsicas.

Podemos definir el diseo de una composicin grfica como laadecuacin de distintos elementos grficos previamenteseleccionados dentro de un espacio visual, combinndolos de talforma que todos ellos puedan aportar un significado a la misma,

consiguiendo el conjunto transmitir un mensaje claro alespectador.

El diseo grfico ha de tener en cuenta los aspectos psicolgicosde la percepcin humana y las significaciones culturales quepueden tener ciertos elementos, eligiendo stos de forma quecada uno de ellos tenga un porqu en la composicin y buscandoun equilibrio lgico entre las sensaciones visuales y lainformacin ofrecida.


27/132


27

Lo ms importante de toda composicin es el mensaje quesubyace bajo ella. Es trabajo del diseador buscar la mxima

eficacia comunicativa, transmitiendo ese mensaje por medio deuna composicin que impacte visualmente al espectador y lehaga receptivo.

Ahora bien, sin una disposicin adecuada de las formas, colores yagrupaciones, sin un equilibrio global en la composicin, elmensaje no llegar de forma adecuada al espectador.

No existe un mtodo mgico que consiga una composicinexitosa, pero s que existen una reglas bsicas de diseo quefacilitan la transmisin de un mensaje por medio de unacomposicin grfica de forma efectiva.

Estas reglas son aplicables igualmente al diseo de pginas web,aunque sujetas a las limitaciones que impone este formato ymodificadas para adaptarlas a la interactividad y a lasposibilidades multimedia del mismo.

Este va a ser el tema de este captulo de nuestro curso, estudiar

las reglas bsicas de diseo grfico efectivo y equilibrado:proporciones, escalas, contrastes, agrupaciones, reticulados,alineaciones, simetras, equilibrio entre contenidos y jerarquavisual.

El diseo equilibrado. Las proporciones

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


28/132


28

A la hora de comenzar una composicin, lo primero que debemossaber 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 losms pequeos (tarjetas de visita, pequeos folletos) hasta losms grandes (posters, carteles para vayas publicitarias), aunquecasi siempre disearemos en alguno de los formatos DIN.

Medidas papel formatoDIN

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)

La relacin visual entre los distintos formatos DIN es la siguiente:

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


29/132


29

El segundo paso ser elegir los elementos grficos y textualesque usaremos en la composicin. Esta eleccin se debe basar envariables como la persona o empresa que desea transmitir elmensaje, el propio mensaje, el tipo de espectadores destinatariosde la composicin y las caractersticas funcionales ycomunicativas de cada elemento.

Ahora debemos definir qu partes del rea de diseo deben estarocupadas por elementos y qu partes van a quedar vacos, sin

contenido alguno. Si dejamos muchos espacios vacos lacomposicin puede resultar descordinada, ya que ser difcilestablecer relaciones globales entre los elementos o entre losgrupos de ellos. Pero si el nmero de componentes es elevado,podemos obtener una obra sobrecargada, difcil de entender, enla que no se distingue con claridad qu es cada cosa y cul es elmensaje que quiere transmitir.

Empezaremos a situar entonces los elementos en escena, comosi fueran actores de nuestra particular obra de teatro,

combinndolos de diferentes formas hasta que obtengamos unresultado satisfactorio. En este punto es muy importante tener

en cuenta que cada elemento visual tiene una funcindeterminada dentro de la composicin.

La informacin visual que aporta un elemento puede cambiarsegn lo hagan las propiedades del mismo, como su tamao,forma o color, pero sobre todo su proporcin, el peso visual quetenga en el total de la composicin.

Indudablemente, la forma ms directa de marcar proporciones esmediante el tamao relativo de los elementos. Los elementosms grandes, altos o anchos tienen una carga visual superior alos ms pequeos, cortos o finos, creando zonas de atraccinms intensas.

Tambin podemos delimitar proporciones en un grafismomediante el color, con el que podemos definir distintas reastonales tiles para distribuir de forma adecuada toda lainformacin grfica. En este sentido, los colores puros ysaturados tienen un mayor peso visual que los secundariosneutros, y estos mayor que los terciarios poco saturados.


30/132


30

Otra tcnica para definir proporciones es el uso de agrupacionesde 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

Este sistema suele dar buenos resultados, siempre que noabusemos de l creando un excesivo nmero de bloquessignificativos, 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 composicindeberemos siempre buscar unas proporciones adecuadas entreellos, con objeto de que cada uno cumpla su papel comunicativode forma adecuada.

El diseo equilibrado. La escala

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


31/132


31

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

Todos los elementos tienen la capacidad de modificarse ydefinirse unos a otros segn las relaciones que se definan entrelas propiedades anlogas de ellos. Por lo tanto, el concepto deescala no se refiere slo a la relacin entre tamaos de dos oms elementos, sino tambin a la relacin entre colores, formas,etc.

Un elemento es grande o pequeo segn el tamao de loselementos que le acompaan en el escenario. El color de unaforma es brillante o apagado segn el color del fondo sobre elque se encuentra.

Es decir, las propiedades de un elemento visual no son absolutas,sino relativas, ya que dependen de las del resto de elementosque le acompaan en la composicin.

La proporcin relativa entre elementos debe ser equilibrada, loque implica el uso de una escala correcta en la composicin. Lasescalas son utilizadas de esta forma en planos y mapas, paraconseguir representar los objetos reales lo ms correctamenteposible, con las proporciones adecuadas entre ellos.

En una composicin grfica la escala usada es igualmenteimportante, tanto para distribuir el espacio de diseo de formaacertada como para dar equilibrio de proporciones a loselementos, usndose a veces diferentes mtodos de distribucinde eficacia probada, como la regla Aurea o el mtodo deCorbusier.

La regla Aurea, inventada por Vitruvio, se utiliza para obtenerescenarios de trabajo de proporciones equilibradas, y se basa encontemplar un espacio rectangular dividido en terceras partes,tanto horizontal como verticalmente, consiguiendo con elloseccionar los espacios en partes iguales.


32/132


32

Por su parte, el mtodo de proporciones creado por el arquitecto

francs Le Corbusier utiliza como unidad modular de escala eltamao del hombre, estableciendo con ella las alturas correctasde los objetos que usamos y de los elementos de unaconstruccin arquitectnica.

En el caso del diseo web, el tamao del rea de trabajo es fijo,pero si que deberemos establecer una escala de trabajoadecuada 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 lapgina, los sistemas de navegacin (mens) deben ser lo

suficientemente grandes como para ser vistos y manejados confacilidad, pero no tanto que resten importancia al contenidoinformativo de la pgina, etc.

Un error muy comn es ente sentido es el de los iconos, quedeben ser suficientemente grandes como para que no pierdensus rasgos diferenciadores ni su zona activa si actan comoenlaces, pero nunca tanto que destaquen en exceso, sobre todosi van acompaados de un texto explicativo.


33/132


33

El diseo equilibrado. El contraste

El contraste permite resaltar el peso visual, lo podemosconseguir por medio de diversos medios: tonos, colores,contornos y escala.

El contraste es el efecto que permite resaltar el peso visual deuno o ms elementos o zonas de una composicin mediante laoposicin o diferencia apreciable entre ellas, permitindonosatraer la atencin de espectador hacia ellos.

El contraste puede conseguirse a travs de diferentes oposicionesentre elementos:

Contraste de tonos

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 lcon ms intensidad cuanto mayor sea la diferencia tonal.

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

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


34/132


34

Contraste de colores

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

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

Este efecto se puede usar para dar mayor dimensin o sensacinde proximidad a un elemento en una composicin, situndolosobre un color que contraste con l.

Este tipo de contraste es especialmente indicado para loscontenidos textuales, en los que debe primar la facilidad delectura. Lo ideal ser el texto negro sobre fondo blanco, ya quees el que ms contraste crea (contraste de tono). Pero en ciertoselementos, en los que este juego de colores no sea posible,habr que buscar siempre un texto clido sobre un fondo fro oviceversa.

Contraste de contornos

Los contornos irregulares destacan de forma importante sobre losregulares o reconocibles.


35/132


35

Este tipo de contrastes es adecuado para dirigir la atencin delusuario 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 secombinan con otros tipos de contraste, ya que pueden ser unfoco de atraccin visual demasiado potente. Adems, creanmucha tensin en el espacio que les rodea.

Contraste de escala

Es el producido por el uso de elementos a diferentes escalas delas normales o de proporciones irreales, consiguindose elcontraste 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 frecuenteen fotografa y pintura, consiguiendo atraer la atencin delespectador de forma muy efectiva.

El diseo equilibrado. Las agrupaciones

Como los elementos web deben agruparse para obtener unresultado coherente.

El ser humano, tanto pos su carcter racional como por herenciacultural, tiende a organizar los elementos que percibe en torno aconjuntos significativos organizados. Esta inclinacin a agrupar


36/132


36

elementos relacionados en un factor que influye de forma notoriaen la percepcin que tenemos de nuestro entorno, de lo quevemos alrededor nuestro.

Las composiciones grficas no escapan a esta tendencia, por loque una correcta agrupacin de sus elementos les otorga uncarcter lgico, racional, que aumenta su valor comunicativo.

La agrupacin de nuestros elementos grficos y textuales puedebasarse en diferentes criterios:

Proximidad: Tendemos a agrupar aquellos objetos queestn prximos, cercanos entre s.Semejanza: Tendemos a agrupar los elementos iguales oparecidos.Continuidad: Nuestra mente tiende a agrupar aquelloselementos que tienen una continuidad significativa.Simetra: Tendemos a agrupar los elementos para queaparezcan ordenados formando figuras conocidas.

En el caso concreto de las pginas web, las agrupaciones sonmuy tiles y del todo necesarias, sobre todo en lo que respecta aelementos similares o de funcionalidad anloga, comocomponentes de mens de navegacin, iconos, datosrelacionados, botoneras, etc.

Las agrupaciones tambin son muy tiles en casos de formularios


37/132


37

o fichas de muchos campos, siendo muy conveniente dividirestos en grupos de informacin anloga, separando luego cadagrupo de los dems mediante franjas horizontales o verticales enblanco.

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

El diseo equilibrado. El reticuladoCmo armonizar los bloques de contenido que formarn lacomposicin del diseo.

Una composicin grfica debe ser equilibrada no slo encontenidos, sino tambin visualmente, hasta tal punto quepodemos decir que el orden en la disposicin espacial de los

elementos de la misma es uno de los factores ms importantespara su xito.

El espectador que contempla una obre grfica (folleto, carteltrptico o pgina web) busca subconscientemente en ella unorden y una estabilidad que le permitan pasear la vista por lamisma de forma organizada y limpia.

El sistema plano de referencia habitual en los seres humanos esel formado por un eje horizontal y otro vertical, es decir, por dosrectas que se cortan en un ngulo de 90. En este sistema, el ejehorizontal aporta equilibrio y estabilidad, mientras que el verticalfacilita la elevacin de la vista, marcando prioridades o niveles enla composicin.

Puesto que las composiciones grficas (y dentro de ellas, laspginas web) se representan en soportes planos, es fcil deducirque este sistema de referencia es tambin el ms adecuado parala distribucin de sus elementos. Si a esto sumamos el carctereminentemente rectangular de la mayora de los soportes,obtenemos por extensin el sistema de organizacin idneo paranuestras composiciones: el reticulado.

Un reticulado o rejilla es un sistema de referencia formado pordiferentes lneas horizontales y verticales que marcan laubicacin 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 lasguas imaginarias sobre las que vamos a ir colocando loselementos, la espina dorsal de un composicin grfica.


38/132


38

Mediante el reticulado, el diseador va situando con armona losbloques de contenido que formarn la composicin: zonasprincipales 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, sinoque los mismos elementos se pueden organizar segn diferentesesquemas lgicos. Pero siempre debern estar dispuestos segnuna retcula que les aporte equilibrio y estabilidad visual. Es tareadel diseador buscar el conjunto ubicacin-reticulado que mejorse adapte a su obra.

La ubicacin de elementos en una composicin segn un

reticulado determinado no precisa la introduccin de loselementos finales de la misma. Es decir, se puede perfectamentedisear la organizacin de un grafismo tan slo con rectngulosde colores. Ms an, con rectngulos de un solo color. Lo queimporta no es el aspecto visual final, sino la organizacin lgica yregular de los elementos.

En el caso concreto de una pgina web, el diseador puedeperfectamente distribuir en pantalla una serie de rectngulos querepresenten las zonas que va a tener la pgina. Si la distribucinsigue un reticulado acorde y las zonas estn ubicadas con lgica,la pgina que resulte de ello tiene un 50% de posibilidades deresultar correcta.

Reticulado de Terra

Esta estructura lgica creada con el reticulado debe mantenerseluego en todas las pginas que forman el sitio web,


39/132


39

proporcionando con ello consistencia y homogeneidad al mismo.

Si definimos una separacin entre el cabecero de un formulario yel inicio de los elementos del mismo de 15 pxeles, todos losformularios, fichas, textos, etc, que tengan un cabecero, debenmantener el mismo espacio separador. Si definimos unosmrgenes vacos entre la pgina que diseamos y los bordes dela ventana del navegador de 30 pxeles, todas las pginas delsitio deben mantener constantes esos mrgenes.

Reticulado en un formulario maquetado con tabla

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

El diseo equilibrado. Las alineaciones

Necesarias para conseguir una composicin ordenada ylgica, as como para relacionar elementos.

Una vez definido el reticulado que vamos a usar en nuestracomposicin, deberemos situar en la misma los elementosgrficos y textuales.

En este punto aparece el concepto de alineacin, como lacolocacin de elementos grficos y textuales segn una lnea

dada, que generalmente ser horizontal o vertical. Generalmentehabr varias lneas guas de alineacin en una composicin.

Alinear los elementos es una operacin imprescindible paraconseguir una composicin ordenada y lgica, pues con ello secrean unidades visuales definidas y relaciones entre elementos.

Si la alineacin es importante a la hora de situar elementosgrficos, lo es an ms si se trata de contenidos textuales.Efectivamente, los textos perfectamente alineados son msfciles de leer, no cansan la vista y producen un efecto deequilibrio que invita a la lectura. Por el contrario, un texto sinalineacin resulta confuso, difcil de leer, desmotivando alespectador.

Todo lo hablado se acenta si el soporte es una pgina web, yaque la forma del monitor y de la ventana del navegador impulsael uso de contornos rectangulares, que nicamente se consiguencon alineaciones prefectas.

Adems, muchas veces debemos disear las pginas con unimportante nmero de elementos, por lo que si la disposicin delos mismos no es perfectamente regular resulta muy difcil crearuna composicin aceptable.

La alineaciones horizontales son imprescindibles para conseguirun diseo en niveles estables, ya que las lneas horizontales

aportan equilibrio. Como podemos tener bloques lgicos dediferente altura, estas alineaciones se definirn desde los bordessuperiores de los bloques.


40/132


40

Alineaciones horizontales en EresMas

En cuanto a las verticales, la alineacin ms comn es laizquierda, ya que es la normal en los libros y dems soportestextuales, estando nuestra vista educada para tratar con ella.

Alineaciones de textos a la izquierda

Las alineaciones centradas son poco comunes, salvo en el caso

de tablas de datos con columnas que admitan bien este tipo dealineacin, sobre todo si todos los valores de la columna tienen elmismo ancho. Si no es as, es preferible optar por la alineacinizquierda.

Elementos centrados en una tabla

En cuanto a las alineaciones a la derecha, son poco frecuentes,ya que crean tensiones visuales en la mayora de los casos. Se

pueden usar en aquellos bloques cuyo contenido deba adaptarsea un reticulado que defina una lnea vertical a la derecha delmismo, como ocurre en muchos mens de navegacin situados ala izquierda de la pgina.

Tambin son tiles en las columnas de las tablas que contengandatos que deban seguir una ordenacin lgica a derechas, comoes el caso de datos de moneda.

Adecuando la alineacin al tipo de datos de cada campo


41/132


41

Existe otro tipo de alineacin para textos, el justificado, en el quetodas las lneas de texto tienen el mismo ancho, por lo quequedan alineadas tanto a la derecha como a la izquierda, lo quese consigue aumentando o disminuyendo el espaciado normal delas letras. Este tipo de alineacin es muy usado en los libros yperidicos, pero en las pginas web hay que aplicarlo conprecaucin, destinndolo tan solo a bloques textuales de pocoancho (textos distribuidos en varias columnas, por ejemplo).

Por ltimo, decir que si bien las alineaciones son imprescindibles,pueden originar monotona visual si se siguen a rajatabla, alproducir pginas demasiado cuadriculadas y artificiosas. Por ello,

es bueno introducir algunos elementos que, sin romper elreticulado y las alineaciones bsicas, introduzcan un poco devariedad visual, de frescura en el diseo. Buscar el equilibrioentre alineaciones y elementos que las rompan es una de lastareas principales del diseador de pginas web.

El diseo equilibrado. Las simetras

Otro condicionante para que el diseo de la web tenga unaorganizacin natural.

Si observamos la Naturaleza, gran arquitecta y diseadora dondelas haya, podremos observar muy pronto que uno de los

elementos que ms utiliza para crear sus organismos es lasimetra, manifestndose sta en casi todos los seres que existena lo largo y ancho de nuestro planeta.

El hombre ha pretendido imitar este diseo simtrico natural entodos y cada uno de sus aspectos creadores, desde los primerosobjetos de artesana hasta los modernos automviles.


42/132


42

Si partimos de esta base, debemos aceptar que la bsqueda deuna simetra estructural, grfica y textual debe ser una de lasmetas primeras de todo diseador web, ya que confiere a lascomposiciones una organizacin natural a la que el espectadorest acostumbrado.

Por definicin, una forma o imagen es simtrica cuando un ejecentral la puede dividir en dos parte iguales y opuestas entre s.Este concepto, aplicado a una composicin grfica puedeaplicarse tanto a los propios elementos individuales de la mismacomo a su totalidad. En este caso, obtener una simetra exactapuede resultar difcil (incluso inconveniente), pero s quepodemos buscar una simetra de bloques y espaciados en nuestrarejilla.

El diseo simtrico sugiere estabilidad, equilibrio, resultandoesttico, ordenado, atractivo y agradable de contemplar. Por elcontrario, el asimtrico muestra irregularidad, desigualdad en las

formas y desequilibrio.

Hay que tener en cuenta que la simetra usada no debe de serdel todo exacta, ya que la simetra perfecta no es natural, esdemasiado "perfecta", valga la redundancia, haciendo aparecerlas composiciones artificiales y premeditadas. Pequeasvariaciones en la distribucin simtrica dan ese toque de rupturaque hace su contemplacin ms amena y natural.

En el caso de una pgina web, la concepcin simtrica de lamisma comienza con el reticulado elegido, ya que va a ser el quedefina la distribucin bsica de elementos en ella. Hay que tender

entonces a disear un reticulado lo ms simtrico posible.


43/132


43

Una forma aceptada de romper el esquema simtrico de unapgina es crear bloques descompensados visualmente hacia unlado, alternndolos en la pgina de forma inversa, es decir, elprimero descompensado a la derecha, el segundo a la izquierda,etc. Otra tcnica es el uso de un nico men lateral denavegacin, que descompensa el peso visual hacia la zona en laque se encuentra.

Si bien en la disposicin de bloques en el reticulado podemos ser

algo permisivos, en los contenidos de nuestras pginas lasimetra debe ser una norma casi inflexible, sobre todo en laconstruccin de ciertos elementos. Es misin fundamental detodo diseador ser capaz de construir contenidos simtricos sinque parezcan rgidos, artificiales.

Ejemplos claro de esta regla son la creacin de formularios y defichas. Se construyen generalmente apoyndose en una tablamaquetadora, por lo que deberemos buscar la simetra en esta

tabla, aunque luego, debido a las diferentes longitudes ynaturaleza de los campos, el resultado final "parezca" no serlo.

Distribucin simtrica en una ficha

En lo que respecta a los textos, si nuestra pgina eseminentemente textual, y en textos de una sola lnea, como staque tenis delante, el contenido ser simtrico por propia

construccin. Pero si deseamos distribuir el contenido en variascolumnas, deberemos prestar especial atencin a que stas seanequilibradas, evitando el remarcado fuerte de porciones de textoo de una o ms columnas mediante colores de fondo, textos ennegrita, etc.

Columnas textuales y simetra

La regla general es buscar siempre la armona, an cuando


44/132


44

introduzcamos pequeos elementos diferenciadores.

Otro aspecto fundamental es mantener simetras en eltratamiento de los aires en nuestra pgina. Entendemos por"aire" el espacio libre que queda entre elementos y entre stos ylos lmites de la pgina. Es lo que en cualquier documentollamamos "mrgenes", pero extendido a todos los elementos ycontenidos.

Si nuestra pgina tiene un espacio libre entre su margenizquierdo y el primer contenido por ese lado, el mismo aire debequedar entre el margen derecho y el contenido por ese lado.Igualmente, los espacios libres entre los elementos internos de lapgina deben ser simtricos e iguales, buscando con ello elequilibrio en la composicin.

Este concepto es aplicable a todos y cada uno de los elementosde nuestras pginas. As, si tenemos una lista de contenidos,podemos crear unos espacios entre cada 5-7 elementos, queevitarn la sensacin de opresin producida cuando las listastienen muchos elementos. Entonces, este espacio separadordeberemos repetirlo constantemente a lo largo de la lista.

De la misma forma, cuando trabajamos con formularios en muy

importante disearlos de tal forma que el aire que quede entrelos diferentes elementos que lo formen sea simtrico, creando untotal claro y armonioso.

Y lo mismo podemos decir de los dems elementos de nuestrapgina: aires simtricos, bien repartidos, equilibrados.

El diseo equilibrado. El equilibrio entrecontenidos

La organizacin espacial, primordial para atraer al usuario.

En toda composicin debe existir un adecuado equilibrio entre losdiferentes elementos que la forman si queremos atraer laatencin del espectador y mantenerla hasta que haya asimiladoel mensaje que queremos transmitirle.

Para ello es imprescindible mantener en nuestra obra grfica unacorrecta organizacin espacial de contenidos grficos y textuales,as como unas cantidades adecuadas de cada uno de ellos.

Los componentes grficos aportan a la composicin sensacionesvisuales por medio de formas, colores y contrastes, mientras quelos textos suministran informacin, mensajes, aunque esto noquiere decir que estas funcionalidades sean excluyentes, ya quelos grficos pueden aportar informacin y los textos formas ycolores (de hecho, la Tipografa es una herramienta de diseo


45/132


45

excelente).

Las composiciones formadas por muchos elementos grficos ypoco o ningn contenido textual pueden crear rechazo enaquellos espectadores que buscan el contenido sustancial en laobra, la informacin prctica que ofrece. Este contenido textuales especialmente importante en las pginas web, ya que losusuarios acuden a un sitio buscando siempre algn tipo deinformacin, abandonndolo rpidamente si no encuentra algnestmulo informativo que le motive.

En el lado contrario, las composiciones en las que se introduce uncontenido eminentemente textual, con poco o ningn contenidogrfico, suelen ser rechazadas por el espectador, que encuentratremendamente aburrida y tediosa una obra que aparece a la

vista como una mancha de color indiferenciado, que exigeadems un elevado nivel de concentracin y mucho tiempo pararesultar til. Necesitamos pues introducir sensaciones visualesgrficas que motiven al espectador a investigar el contenidotextual.

En el caso de las pginas web, los tipos de contenidos a ofreceraumentan considerablemente respecto a los de una composicinsobre papel ya que podemos incluir en ellas no slo grficos ytextos, sino tambin sonidos, animaciones, vdeo, applets deJava, etc. Esto hace necesaria una planificacin correcta de loselementos a incluir en una pgina, con objeto de despertar laatencin del usuario, s, pero ofrecindole siempre informacinrelevante y nunca sobrecargndola de elementos superfluos.

Adems, debido a las limitaciones propias de los equiposinformticos, del lenguaje HTML, de los navegadores web y delas conexiones a Internet, el equilibrio entre contenidos debecontemplar tambin que el resultado final se pueda visualizarcorrectamente.

De nada sirve una pgina con grficos estupendos y animacionesespectaculares si el usuario debe esperar un minuto para poderverlas. Es ms, nunca esperar ese minuto.

Es por tanto preferible organizar las pginas web de formaequilibrada, ofreciendo en cada una de ellas las dosis adecuadasde elementos visuales e informativos. Como norma general,


46/132


46

siempre debe haber ms componentes textuales que grficos enuna pgina.

Es mejor siempre tener dos pginas ligeras y equilibradas a unarecargada de elementos incapaces de retener la atencin delusuario en lo verdaderamente importante: el mensaje quedeseamos transmitirle.

El diseo equilibrado. La jerarqua visual

La organizacin guia al usuario en la contemplacin deuna pgina web.

En toda composicin grfica se debe crear una jerarqua visualadecuada, con objeto de que los elementos ms importantes de

la misma se muestren debidamente acentuados.

Mediante un adecuado diseo se puede establecer un caminovisual que conduzca el ojo del espectador y le vaya mostrando lainformacin contenida en la composicin de forma organizada,lgica y fiable, que dirija su percepcin por la ruta ms idnea.

La persona que contempla una obra grfica aprecia en primerlugar un conjunto completo de formas y colores, con loselementos situados en primer plano contrastando con el fondo dela composicin. Slo tras esta primera observacin global, y si su

curiosidad ha sido despertada, el espectador comenzar aanalizar las partes individuales del todo, comenzando por loelementos grficos puros, y continuando luego con los elementostextuales, ms difciles de interpretar, ya que hay que leerlospalabra a palabra.


47/132


47

En los pases occidentales leemos los documentos de izquierda aderecha y desde la parte superior a la inferior, forma de procederse ha extendido a todas aquellas actividades en las quenecesitamos visualizar algo (cuando observamos a una persona,generalmente empezamos por la parte izquierda de su cabeza).

Esto se puede aprovechar para organizar el contenido de unacomposicin lgicamente, situando en ella los elementos ms

importantes en la zona superior izquierda de la misma, lassiguientes en importancia en el lateral izquierdo, las siguientesen el cuerpo central y las menos relevantes en la parte inferior.

Esta forma de proceder es comn no slo en folletos,documentos o carteles publicitarios creados con un diseoclsico, sino tambin en las pginas web, que siguen estaestructura jerrquica en el 95% de los sitios, que, adems, sonlos que mejor aceptacin tienen por el pblico.

Jerarqua visual por posicionamiento en pgina web


48/132


48

Otro sistema de establecer una jerarqua en los contenidos es eluso de colores. Podemos enfatizar ciertas zonas de lacomposicin usando en ellas colores primarios muy saturados,que atraen de forma irresistible la atencin de los espectadores,teniendo siempre cuidado de que los textos en ellas contenidoscontrasten de forma clara con el fondo, para que pueden serledos con comodidad. En este caso, hay que tener cuidado conno abusar de estos colores "fuertes", destinndolos solamente apequeas zonas especiales, ya que recargan en exceso la vista,sobre todo el amarillo.

Para las zonas de segundo orden podemos usar colores menossaturados, secundarios o terciarios, siendo una buena opcin

aquellos presentes en la naturaleza, ya que son ms naturales ymejor aceptados por los espectadores. Por ltimo, las zonasmenos importantes podemos no colorearlas o hacerlo muysutilmente, para que no atraigan en exceso la mirada.

Esta variacin cromtica no es nica, ya que se puede usarcualquier juego de colores que consiga establecer una jerarquavisual adecuada.

Tambin podemos recurrir a la hora de establecer rangos deimportancia visual a los contrastes. Si situamos cercanas osuperpuestas dos zonas de colores complementarios o quecontrasten mucho, la importancia de ambas en la composicin serefuerza, sobre todo si las zonas de contraste no son muchas.

Jerarqua visual por contrastes de colores (azul, naranja yblanco)

Por el contrario, si las zonas son de colores anlogos,pertenecientes a una misma gama, la importancia de ambos sedisminuye, aunque sean colores vivos, ya que se distinguir unazona de atraccin, pero sus elementos aparecern difuminados,poco relevantes.

En cuanto a los elementos textuales, a los que tambin sonaplicables los mtodos de color y contraste, podemos estableceruna jerarqua en ellos mediante los tamaos relativos de los

mismos. Los ttulos de pgina, los cabeceros o los titulares deuna noticia o apartado pueden ser destacados aumentando sutamao segn su importancia en la composicin o pgina web.Este mtodo es siempre aconsejable, ya que organiza de formalgica el contenido textual y rompe la monotona intrnseca de lostextos.


49/132


49

Jerarqua visual en elementos textuales

Un elemento a evitar siempre en una composicin, salvo que nosconvenga su uso, son los adornos grficos visualm

manual diseño gráfico

Documents