Introduccin al diseo grfico

La historia del diseo grfico, desde los orgenes de la humanidad hasta la aparicin de la web e Internet. 23/9/03 - El ser humano ha tenido siempre la necesidad de comunicarse con sus semejantes, hasta tal punto que podemos afirmar que si el hombre es el ser ms avanzado de la naturaleza, es debido en gran parte a la facilidad que ha tenido para hacer partcipe a los dems de sus ideas de una forma u otra. Las primeras formas comunicativas fueron mediante elementos visuales. Antes de que desarrollaran capacidades de expresin mediante el lenguaje hablado, los hombres utilizaron su cuerpo para comunicar a los dems estados de nimo, deseos e inquietudes a travs de ademanes, expresiones y signos, que con el tiempo adquirieron la condicin de "lenguaje", al convertirse en modelos de comunicacin. Aunque posteriormente el lenguaje hablado pasara a ser el medio de intercambio de informacin ms directo, el lenguaje visual sigui teniendo un importante peso en las relaciones comunicativas, sobre todo a partir del uso de diversos materiales y soportes como medios del plasmar mensajes visuales, como lo demuestran multitud de dibujos en piedra y pinturas rupestres que han llegado a nuestros das, en las cuales se representan elementos naturales, actividades cotidianas y diferentes signos artificiales con significado propio. Pintura rupestre (Cueva de Altamira, Espaa)

La representacin de ideas mediante grafos experiment su mayor avance con la aparicin de los lenguajes escritos, que permitieron expresar cadenas estructuradas de

pensamientos mediante un conjunto de elementos grficos de significado propio dispuestos segn una estructura definida, capaces de transmitir mensajes entendibles por la comunidad. Estos lenguajes escritos estaban basados, bien en la representacin de elementos tomados de la naturaleza, a los que se les asignaba una interpretacin particular, bien en un conjunto artificial de smbolos inventados: los alfabetos. Cada uno de estos signos aislado tena a veces un significado incierto, pero unido a otros, permitan representar grficamente el lenguaje hablado por cada pueblo o cultura. Grabado en piedra con jeroglficos (Egipto)

Como soporte fsico se utiliz inicialmente la piedra, pero pronto se buscaron otros tipos de materiales que permitieran una mayor facilidad de uso y una mayor portabilidad, como los papiros o los pergaminos. Papiro de los muertos

Tambin se empezaron a usar diferentes tipos de pigmentos naturales para dar un mayor colorido y expresibidad a las obras escritas y composiciones artsticas, y a disponer los diferentes elementos 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 los incunables medievales realizados en los monasterios, en los que se observa de forma clara la importancia de la "FORMA" (diseo) para transmitir un mensaje.

Incunable medieval

Posteriormente, Johann Gutenberg invent la imprenta, artefacto capaz de reproducir en grandes cantidades y de forma cmoda un original, lo que hizo posible que los documentos impresos y el mensaje que contenan fueran accesibles a un gran nmero de personas. Primer libro impreso

Pronto empezaron a aparecer imprentas en las que se reproducan todo tipo de obras, cada vez ms elaboradas. Se empezaron a usar nuevos materiales como soporte, nuevas tintas y nuevos tipos de letras, originando la aparicin de unos profesionales especializados en su manejo, los tipgrafos y los cajitas, tal vez los primeros diseadores grficos como tal, ya que se encargaban de componer y maquetar los diferentes elementos que iban a formar una obra de forma que resultara lgica, clara, armoniosa y bella.

Otro gran impulsor del desarrollo del diseo grfico fue la Revolucin Industrial. Surgieron las fbricas y la economa de mercado, un gran nmero de personas se desplaz a las ciudades a trabajar, aumentaron las tiendas y los comercios y empez la competitividad entre empresas por hacerse con una parte del mercado. Con ello apareci y se desarroll una nueva tcnica comercial, la publicidad, encargada de hacer llegar a los consumidores mensajes especficos que les convencieran de que un producto dado era mejor que otros anlogos. Cartel publicitario

El desarrollo de la publicidad trajo consigo un desarrollo paralelo del diseo grfico y de los soportes de comunicacin. Haba que convencer al pblico de las ventajas de un producto o marca, y para ello nada mejor que mensajes concisos, cargados de componentes psicolgicos, con diseos cada vez ms elaborados, que se hacan llegar al mayor nmero posible de personas. El cmo se transmita la informacin lleg incluso a superar en importancia a la misma informacin transmitida. No se trataba ya de presentar mensajes visuales bellos, sino efectivos, que vendieran, y para ello no se dudo en realizar grandes inversiones, haciendo posible un gran avance en las tcnicas de diseo y la aparicin de profesionales dedicados exclusivamente a desarrollarlas y ponerlas en prctica: los diseadores grficos. En el siglo XX, hicieron su aparicin los ordenadores, mquinas en un principio destinadas a un grupo reducido de tcnicos y especialistas, pero que poco a poco fueron ganando popularidad y que con la aparicin del ordenador personal se extendieron a todos los ambientes y grupos sociales. El ordenador es til porque permite el uso de programas informticos capaces de realizar multitud de tareas. Pero estos programas tienen una estructura interna muy compleja, que la mayora de las veces va ms all de los conocimientos que poseen los usuarios de los mismos. Esto dio lugar a la introduccin de unos elementos intermedios, denominados "Interfaces de Usuario", cuya misin era aislar al usuario de las consideraciones tcnicas y procesos internos de los programas, permitindoles realizar tareas con ellos por medio de un "lenguaje" intermedio, ms fcil de entender por el usuario.

Interfase de usuario en modo texto

En sus principios, estos programas se manejaban de forma textual, mediante comandos crpticos, que entendan tan solo expertos en la materia. Pero con el acceso a la informtica de todo tipo de personas se hizo necesaria una simplificacin en el manejo de las aplicaciones, surgiendo el concepto de "Interface Grfica de Usuario" en toda su extensin, como un medio capaz de hacer entendibles y usables estas aplicaciones a travs de elementos visuales comunes, que presentados en la pantalla del ordenador permitieran al usuario medio realizar las tareas propias de cada programa concreto. Interfase Grfica de Usuario

La labor de disear estas IGU correspondi inicialmente a los mismos programadores que desarrollaban las aplicaciones, pero pronto se vio que su concepto de interface de usuario no se corresponda con la que necesitaban los usuarios finales. Haca falta pues profesionales del diseo que se encargaran de concebir las interfaces, pero los diseadores grficos clsicos no estaban acostumbrados a construir obras con capacidades de interaccin 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 hizo an ms patente el desfase de los diseadores grficos con el nuevo medio. Haca falta ahora disear y construir interfases de usuario muy especiales, condicionadas a pequeos tamaos de fichero y a un medio concreto de presentacin, los navegadores web, que imponan serias limitaciones al diseo, que necesitaban sistemas de navegacin entre pginas simples y entendibles.

Interfase web

Si a esto sumamos la necesidad de los creadores de interfaces web de conocer a fondo diferentes lenguajes de marcas y de programacin (HTML, JavaScript, DHTML), es evidente que era necesaria la aparicin de un nuevo profesional, el diseador web, hbrido entre el diseador grfico clsico y el programador de aplicaciones para Internet. Una aproximacin al diseo grfico en general, con una descripcin de los elementos que componen habitualmente un diseo y las caractersticas principales que podemos encontrar en ellos. 23/9/03 - Podemos definir el diseo grfico como el proceso de programar, proyectar, coordinar, seleccionar y organizar una serie de elementos para producir objetos visuales destinados a comunicar mensajes especficos a grupos determinados. La funcin principal del diseo grfico ser entonces transmitir una informacin determinada por medio de composiciones grficas, que se hacen llegar al pblico destinatario a travs de diferentes soportes, como folletos, carteles, trpticos, etc. El diseo grfico busca transmitir las ideas esenciales del mensaje de forma clara y directa, usando para ello diferentes elementos grficos que den forma al mensaje y lo hagan fcilmente entendible por los destinatarios del mismo. El diseo grfico no significa crear un dibujo, una imagen, una ilustracin, una fotografa. Es algo ms que la suma de todos esos elementos, aunque para poder conseguir poder comunicar visualmente un mensaje de forma efectiva el diseador debe conocer a fondo los diferentes recursos grficos a su disposicin y tener la imaginacin, la experiencia, el buen gusto y el sentido comn necesarios para combinarlos de forma adecuada. El resultado final de un diseo grfico se denomina grafismo, y es una unidad por s misma, aunque est compuesto por multitud de elementos diferentes. Podemos establecer una analoga entre un grafismo y un plato de cocina. Ambos estn compuestos por diferentes elementos individuales que, unidos correctamente y con

sabidura, componen una obra final nica y definida que va ms 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 de transmitir un mensaje especfico. Un diseador grfico no es un creador de formas, sino un creador de comunicaciones, un profesional 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 el mensaje a interpretar, la informacin que se desea hacer llegar al destinatario a travs del grafismo. Esta informacin se debe representar por medio de diferentes elementos grficos, que pueden ser muchos y variados, aunque los ms comunes son:

Elementos grficos simples: puntos y lneas de todo tipo (libres, rectas, quebradas curvas, etc.) Elementos geomtricos, con contorno o sin l: polgonos, crculos, elipses, valos, etc. Tipos: letras de diferentes formas y estructura, utilizadas para presentar mensajes textuales. Grficos varios: logotipos, iconos, etc. Ilustraciones Fotografas Cualquier otro elemento visual apto para comunicar un mensaje.

Un diseo limpio

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

Las agrupaciones: conjuntos de elementos relacionados mediante proximidad, semejanza, continuidad o simetras. La forma: forma de cada elemento grfico aislado y de las agrupaciones de elementos. Los contornos: partes lmites de los elementos, que permiten distinguirlos de los dems y del fondo, pudiendo estar definidos mediante border, cambios de color o cambios de saturacin. La ubicacin: lugar que ocupa cada elemento grfico o agrupacin de ellos en el espacio del grafismo. El tamao: tamao relativo de cada elemento grfico respecto los que le rodean. Escalas. El color: color de cada elemento individual, colores de cada agrupacin de elementos, conjunto total de colores usado en un grafismo, disposicin relativa de los elementos con color y armona entre colores. El contraste: intensidad de visualizacin de cada elemento con relacin a los que le rodean y al grafismo completo. El equilibrio: cada grafismo conlleva un sistema de referencia espacial que consigue un nivel de equilibrio mayor o menor. La simetra : disposicin espacial regular y equilibrada de los elementos que forman la composicin grfica.

Los diferentes elementos de un grafismo son percibidos por el destinatario de acuerdo con la influencia que ejercen cada uno estos conceptos a nivel individual, grupal y total. Pero la unin de todos ellos, la obra grfica, es una entidad comunicativa individual 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 webEl diseo web va ms all del diseo tradicional pues existen muchos limitadores relacionados con el medio donde se presentan las pginas: Internet. Conocemos las caractersticas fundamentales del diseo en la web. 23/9/03 - El diseo grfico de una pgina web es tan solo una parte del diseo de la misma, ya que, adems, hay que considerar un conjunto ms o menos extenso de condicionantes que van a limitar la libre creatividad del diseador. En primer lugar, las pginas web se deben descargar de un servidor web remoto por medio de Internet, por lo que el ancho de banda de las conexiones de los usuarios va a ser un factor clave en la velocidad de visualizacin. La mayora de los usuarios se conectan todava a Internet con un mdem, con velocidades tericas de 56 Kbps, aunque en realizada no superar los 10-15 Kbps 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 se guarde. Esto origina que las pginas que contienen en su diseo muchas imgenes, o pocas pero de gran tamao, tarden mucho tiempo en ser descargadas desde el servidor web y presentadas en la ventana del ordenador del usuario, que no suele ser muy paciente. Estudios realizados demuestran que el tiempo mximo de aguante de una persona que espera la descarga de una pgina suele ser de unos 10 segundos, pasados los cuales prefiere abandonar nuestro sitio web y buscar otro ms rpido. Por lo tanto, el nmero de elementos grficos que podemos introducir en una pgina web queda bastante limitado, teniendo que buscar alternativas mediante el uso imaginativo de fuentes y colores. Otro aspecto a tener en cuenta es que las pginas web son visualizadas en unas aplicaciones especficas, los navegadores web, que imponen grandes limitaciones al diseo de las mismas. La ventana de un navegador es eminentemente rectangular, con unas medidas concretas (dadas por la resolucin empleada por el usuario en su monitor) y con unas capacidades de interpretacin de colores que varan mucho segn el ordenador usado, el sistema operativo, el monitor y la tarjeta grfica. Estos factores imponen fuertes limitaciones al diseador web, que debe buscar siempre que sus pginas puedan ser visualizadas correctamente por el mayor nmero de usuarios.

Diseo de un formulario web

En segundo lugar, los navegadores existentes en el mercado tienen una forma particular de presentar el contenido de las pginas. Internet Explorer interpreta en muchas ocasiones una pgina web de forma muy diferente a Netscape Navigator 4x, y este a su vez lo hace de forma diferente a Netscape Navigator 6x. Para intentar solventar estas diferencias, el diseador web debe trabajar a la vez con varios navegadores, diseando sus pginas de tal forma que la interpretacin de ellas sea similar en todos, lo que 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 capacidad de 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 al usuario con el mismo estilo, aunque su funcionalidad sea muy diferente. A esto hay que sumar que las pginas diseadas deben luego construirse en un lenguaje especfico, el HTML, que por s mismo es muy limitado, lo que hace que el diseador web tenga que estar siempre pensando si la interfase que est diseando grficamente va a poder ser luego construida. Por ltimo, una pgina web suele ocultar, en la mayora de los casos, una serie de procesos complejos que se ejecutan sin que el usuario sea consciente de ellos (ejecucin de cdigos de lenguajes de programacin tanto en cliente como en servidor, acceso a bases de datos en servidores remotos, etc.), procesos que aaden tiempo a la presentacin de las pginas y que muchas veces suelen afectar de forma importante al diseo de estas, ya que el diseador no sabe de antemano qu contenidos concretos van a tener.

Resumiendo: el diseo web va ms all del diseo grfico, al influir en l multitud de factores que limitan las posibilidades del diseo, pero tambin otros que aaden interactividad y funcionalidades a una pgina web que no tiene un cartel, folleto o revista.

Componentes grficos de un ordenadorDescripcin de los principales componentes grficos de un ordenador: La tarjeta de grficos y el monitor. 03/10/03 - Los principales componentes de un ordenador encargados de la interpretacin y presentacin de colores son la tarjeta grfica y el monitor. La tarjeta grfica o de vdeo es el componente hardware encargado de procesar los datos grficos que enva el procesador, interpretarlos y codificarlos en voltajes adecuados que son enviados luego al monitor para su presentacin en pantalla. Tarjeta grfica

Existen diferentes modelos de tarjeta grfica, que van desde las ms simples, incluidas en la placa base, hasta las ms avanzadas, verdaderos mini-ordenadores, con su propio procesador, memoria, bus, etc. Los monitores son los dispositivos encargados de presentar al usuario las interfaces de las aplicaciones que se ejecutan en el ordenador. Todos sabemos cmo es un monitor por fuera, ya que estamos acostumbrados a los monitores de los televisores, algo tan comn en nuestras casas. Interiormente, los monitores varan unos de otros en funcin de su calidad, de la forma de manejar 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, en uno de cuyos extremos se sitan tres caones de electrones, uno por cada color primario, y en el otro una pantalla de cristal, cuya parte externa es la que ve el usuario. Tubo de rayos catdicos de un monitor CRT

Los electrones generados en los caones por calentamiento son impulsados hasta la parte interna de la pantalla, que se encuentra recubierta por pequeos grupos de fsforo pigmentado en cada uno de los tres colores primarios (rojo, verde y azul). Estos grupos reciben el nombre de tradas, y se corresponden con un punto de la pantalla, denominado pxel, que aparecer de un color u otro segn la intensidad de los electrones que le llegue de cada can. Una caracterstica importante es el paso de punto (dot pitch), distancia diagonal entre dos puntos vecinos del mismo color, que determina el mnimo tamao de un detalle que es capaz de resolver una pantalla. Cuanto menor sea esta distancia, mayor ser la nitidez. Se mide en puntos por pulgada (ppp).

La resolucin mxima distinguible en una pantalla de 800x600 es de 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 de informacin) son representados en pantalla por una o ms tradas, con lo que la adaptacin a las diferentes resoluciones es muy buena. Con objeto de que los electrones lleguen de forma ordenada e impacten justo en el punto adecuado, entre la pantalla y los caones se sita una mscara o rejilla que filtra los electrones y los dirige a sus puntos destino de forma adecuada. La representacin de una imagen en pantalla se realiza mediante barridos de los rayos de electrones, que recorren toda la pantalla de izquierda a derecha y de arriba hacia abajo. La velocidad con la que se realiza esta operacin se denomina frecuencia de refresco vertical o refresco de pantalla, se mide en Hz (hertzios) y debe estar por encima de 60 Hz, preferiblemente 70 u 80. A partir de esta cifra, la imagen en la pantalla es sumamente estable, sin parpadeos apreciables, con lo que la vista sufre mucho menos. La frecuencia de refresco vertical de nuestro monitor podemos averiguarla accediendo a la pantalla de configuracin del monitor, a la que se accede en sistemas Windows mediante las selecciones: Inicio > Panel de control > Pantalla > Configuracin > Opciones avanzadas > Monitor Tambin podemos en esta pantalla cambiar la frecuencia de refresco, pero antes de hacerlo es aconsejable consultar el manual del monitor, ya que una frecuencia incorrecta puede resultar 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 estn formadas por cristal lquido en vez de fsforo pigmentado, y en que los haces de electrones son guiados por polarizacin magntica. Adems, en los monitores LCD trabajan con una trama de pxeles concreta, siendo fijo el tamao de cada uno, por lo que al cambiar a una resolucin inferior pueden quedar franjas de pxeles desactivadas. Sea cual sea el tipo de tarjeta grfica y monitor usado, es fundamental tener instalados y actualizados los drivers propios de estos componentes. Un driver es un conjunto de libreras de software especficas encargadas de configurar y controlar los dispositivos de hardware. Cada componente necesita para funcionar bien los drivers adecuados, que generalmente vienen junto a ste en un disquete o en un CD. Con el avance de las funcionalidades de los sistemas operativos y de los dems componentes de software y hardware de los equipos informticos, se hace necesaria una actualizacin constante de los drivers de los monitores y tarjetas de video. Estas versiones actualizadas suelen ofrecerlas los distintos fabricantes en sus sitios web, por lo que es muy importante visitar estos cada cierto tiempo para bajar las versiones actualizadas de los drivers e instalarlos en nuestro equipo, con objeto de no perder capacidades y de evitar incompatibilidades con los nuevos sistemas operativos. Si tenemos instalada una tarjeta grfica en nuestro ordenador, generalmente los drivers de esta (controlador) son los responsables de manejar de forma adecuada el monitor. Para acceder a la propiedades del controlador, basta seguir la ruta: Inicio > Panel de control > Pantalla > Configuracin > Opciones avanzadas > Monitor > Propiedades > Controlador Desde esta ventana podemos ver el tipo de controlador instalado y si est funcionando bien o tiene algn problema. Tambin actualizarlo, para lo que es necesario tener previamente los nuevos drivers, ya que tendremos que indicar su localizacin en nuestros discos duros. Una consideracin importante: hay que estar seguro que el driver que vamos a instalar se corresponde con el de nuestra tarjeta grfica o monitor, ya que un driver inadecuado puede originar un mal funcionamiento de los componentes grficos.

Resolucin de pantalla

Consideraciones relativas a los distintos tipos de pantalla que pueden tener los visitantes y el espacio disponible para cada caso. 03/10/03 - Las aplicaciones encargadas de presentar las pginas web son los navegadores (browsers), entre los que cabe destacar por su importancia y difusin Internet Explorer, Netscape Navigator y Opera. La interfaz de un navegador, en su modo estndar, presenta al usuario una o ms barras superiores (de mens, de direccin, etc.), una barra inferior (la barra de estado) y un espacio principal, la ventana, en el que son presentadas las pginas web. La forma de esta ventana es siempre rectangular, pero su tamao vara, dependiendo del monitor y de la tarjeta grfica. Podemos hablar de dos tamaos de pantalla diferentes:

Tamao absoluto: es el tamao "real" de la ventana del monitor, medido generalmente en pulgadas. Depende del monitor. Resolucin o tamao relativo : viene determinada por el nmero de pixels que se muestran en la ventana del monitor, siendo el pxel la unidad mnima de informacin que se puede presentar en pantalla, de forma generalmente rectangular. Depende de la tarjeta grfica.

El tamao absoluto se suele expresar en pulgadas de diagonal (1 pulgada = 25,4 mm). El ms comn en la actualidad es de 17 en ordenadores de sobremesa, aunque todava quedan bastantes equipos antiguos con monitores de 15 y existen en el mercado bastantes de 21. El tamao absoluto de los monitores de los equipos porttiles suele ser de 14-15. En cuanto a la resolucin, los valores ms comunes son de 800x600 y de 1024 x768 pixels, aunque quedan todava usuarios que trabajan por debajo, a 640x480, y por encima, a resoluciones de 1152x864 y 1280x960 pixels. El tamao absoluto y la resolucin deben estar en concordancia para una visualizacin correcta, siendo valores aceptables los siguientes:

14" - 15": Resolucin mxima apreciable: 800x600 17": Resolucin mxima apreciable: 800x600 1024x768 21": A partir de 1024 x 768

Las posibles resoluciones de trabajo de un equipo dependen sobre todo de la calidad del monitor y de la tarjeta grfica del ordenador, y se configuran, en sistemas operativos Windows, bien haciendo click con el botn derecho del ratn sobre el escritorio, seleccionando la opcin Propiedades y accediendo a la pestaa Configuracin, bien desde Inicio > Panel de control > Pantalla. La importancia de la resolucin de pantalla sobre la forma de ser visualizadas las pginas web en la ventana del navegador es muy importante. A mayor resolucin se dispone de ms puntos de informacin para presentar los elementos en pantalla, pero estos puntos son ms pequeos, con lo que los elementos de la interfaz (textos, imgenes, objetos de formulario, etc.) se ven ms pequeos. Tamao de pgina y resoluciones

Si diseamos una pgina para una resolucin dada, ocupando toda la ventana del navegador, aquellos usuarios que la visualicen a resoluciones menores no tendrn espacio en pantalla para contener toda la pgina, por lo que se vern obligados a usar las barras de desplazamiento del navegador. Por el contrario, aquellos usuarios que la visualicen a resoluciones mayores tendrn demasiado espacio en pantalla para tan poca pgina, por lo que les quedar bastante espacio vaco, sin contenidos. Para solucionar estas diferencias, lo normal es que se diseen las pginas web para una resolucin base, generalmente la ms usada en la actualidad (800x600), y se construyan internamente mediante tablas o capas de tamaos relativos, con anchuras definidas en %, con lo que se consigue que al ser visualizadas en monitores de ms resolucin se "abran", ocupando todo el espacio de pantalla disponible. Las pegas que tiene este sistema son que no da soporte a los usuarios de con menores resoluciones y que, en el caso de resoluciones mayores, el diseo de la pgina puede verse seriamente afectado al modificar sus elementos las dimensiones originales. Otra posibilidad es maquetar toda la pgina dentro de un contenedor padre (una tabla o capa) y asignar a ste una alineacin centrada, con lo que la pgina quedar en el centro de la pantalla si se usa una resolucin mayor que la de diseo.

Colores en un ordenadorCmo trabajan los ordenadores para codificar un color. El formato RGB. 09/10/03 - El ojo humano puede distinguir aproximadamente entre 7 y 10 millones de colores. Debido a esto la vista es para nosotros el principal sentido que nos une con el exterior, de tal forma que sobre el 80% de la informacin que recibimos del mundo exterior es visual. Pintores y diseadores grficos utilizan esta capacidad humana de apreciar colores para crear obras que profundicen en el alma y que inspiren sentimientos en los seres que las contemplan. Pero qu podemos hacer cuando debemos expresarnos con un nmero limitado de colores?. Los ordenadores trabajan con tres colores bsicos, a partir de los cuales construyen todos los dems, mediante un proceso de mezcla por unidades de pantalla, denominadas pixels. Estos colores son el rojo, el azul y el verde, y el sistema s definido se conoce como sistema RGB (Red, Green, Blue). Cada pxel tiene reservada una posicin en la memoria del ordenador para almacenar la informacin sobre el color que debe presentar. Los bits de profundidad de color marcan cuntos bits de informacin disponemos para almacenar el nmero del color asociado segn la paleta usada. Con esta informacin, la tarjeta grfica del ordenador genera unas seales de voltaje adecuadas para representar el correspondiente color en el monitor. A ms bits por pxel, mayor nmero de variaciones de un color primario podemos tener. Para 256 colores se precisan 8 bits (sistema bsico), para obtener miles de colores necesitamos 16 bits (color de alta densidad) y para obtener millones de colores hacen falta 24 bits (color verdadero). Existe tambin otra profundidad de color, 32 bits, pero con ella no se consiguen ms colores, sino que los que usemos se muestren ms rpido, ya que para el procesador es ms fcil trabajar con registros que sean potencia de 2 (recordemos que trabaja con nmeros binarios).

Cuanto mayor es el nmero de colores, mayor ser la cantidad de memoria necesaria para almacenarlos y mayores los recursos necesarios para procesarlos. Por este motivo,

los ordenadores antiguos disponen de paletas de pocos colores, normalmente 256, al no tener capacidad para manejar ms sin una prdida notable de prestaciones. Para representar un color en el sistema RGB se utilizan dos formas de codificacin diferentes, la decimal y la hexadecimal, correspondindose los diferentes valores con el porcentaje de cada color bsico que tiene un color determinado. Porcentajes de color y cdigos

Por ejemplo, un rojo puro (100% de rojo, 0% de verde y 0% de azul) se expresara como (255,0,0) en decimal, y como #FF0000 en hexadecimal (delante de el cdigo de un color en hexadecimal siempre se sita un smbolo almohadilla). De los 256 colores bsicos, el propio sistema operativo de queda con 40 para su gestin interna, con lo que disponemos de 216 colores. De ellos, 18 se corresponden con la gamas de los colores primarios, correspondientes a 6 tonos de rojo, 6 de azul y 6 de verde: Gamas de colores primarios

Y el resto, los colores secundarios, son combinaciones de estas gamas de colores primarios: Colores secundarios

Si usamos una profundidad de color de 24 bits, correspondiente a millones de colores, disponemos de una amplia gama para trabajar, pero siempre teniendo en cuenta que slo sern compatibles los colores que tengan su equivalente en el sistema de 256 colores, es decir, aquellos en los que cada color primario viene definido por una pareja de valores iguales, debiendo estos ser 00,33,66,99,CC o FF.

Cuando usamos una profundidad de color de 16 bits disponemos de miles de colores, pero el problema es que debido a la divisin de esta gama de colores, los valores obtenidos no se corresponden con los equivalentes en 256 colores ni en millones de colores. Por ejemplo, #663399 es el mismo color a 256 y a millones, pero no es igual que el obtenido con miles de colores. Como el cdigo de un color dado puede ser difcil de recordar, se ha adoptado una lista de colores a los que se le ha puesto un nombre representativo en el idioma ingls (red, yellow, olive, etc.), de tal forma que los modernos navegadores interpretan el mismo y lo traducen internamente por su valor hexadecimal equivalente.

Calibracin del monitorUna composicin grfica puede verse con diferentes tonalidades dependiendo de la configuracin del monitor. Tenemos que calibrar el monitor para que el aspecto de nuestra obra sea el mismo en todos los ordenadores. 09/10/03 - Las composiciones grficas pueden aparecer de manera diferente en los distintos monitores, debido principalmente a la diferencia en los parmetros que definen la calidad y las caractersticas luminosas y cromticas de cada uno de ellos. Esto puede originar, por ejemplo, que al realizar un composicin seamos nosotros mismos los engaados, al no corresponder los colores que vemos en pantalla a los reales que estamos codificando en el grafismo. O que el aspecto visual de una pgina web diseada en un monitor mal configurado no se corresponda con al que luego vern los usuarios, con la consiguiente prdida de control y de calidad que ello supone. Para evitar estos errores se hace preciso utilizar unos valores estndar de los parmetros de configuracin, que hagan posible que el aspecto de una obra grfica sea el mismo en cualquier ordenador configurado segn los mismos valores. Estos valores suelen corresponderse con los que trae un monitor al salir de fbrica, y la recuperacin de los mismos recibe el nombre de calibracin. La calibracin es el proceso de ajuste de la configuracin de la conversin de color del monitor a un nivel estndar, de manera que la imagen se presenta de igual manera en diferentes monitores.

El mtodo ms simple de calibracin pasa por el uso de imgenes cartas de ajuste, similares a las que aparecan en el televisir antes de empezar la emisin. Son imgenes formadas por diferentes lneas de colores, unas finas y otras ms gruesas, que se pueden tomar como referencia para realizar un ajuste totalmente manual, usando para ello los controles que posee el monitor. Es un mtodo poco fiable, ya que los ajustes son totalmente subjetivos.

Otro mtodo de calibracin ms avanzado son las herramientas de gestin del color que facilitan ciertos programas de aplicacin, como Adobe Photoshop, que incluye una herramienta bsica, denominada Adobe Gamma, que puede ser utilizada para eliminar tonalidades de color y estandarizar la presentacin de las imgenes. A esta herramienta se accede a travs de men Ayuda > Gestin del color > Abrir Adobe Gamma, con el que accedemos a una pantalla que nos permite ajustar los valores directamente o por

medio de un asistente. Una vez calibrado el monitor, los valores pueden ser almacenados en un fichero para las sucesivas reconfiguraciones. Calibrador de monitor

Pero sin duda la mejor forma de calibrar un monitor es utilizar hardware especfico para ello. El funcionamiento vara segn el dispositivo usado Unos se conectan directamente al monitor para recogida de datos binarios, permitiendo un ajuste individual directo de cada uno de los caones. Otros se basan en situar frente a la pantalla del monitor diferentes medidores (calormetros, colormetros, etc.) para recoger datos, suministrando una lectura de los valores actuales y proporcionando los valores idneos de configuracin. Sea cual sea el mtodo elegido, para una correcta configuracin del monitor deberemos ajustar una serie de parmetros, entre los que se incluyen los siguientes: Brillo Tambin llamado luminosidad, define la relacin no lineal entre la tensin de entrada y la luminancia de salida, es intrnseco de la fsica del entorno de los caones de electrones y no depende de la iluminacin ambiente. De otra forma, el brillo es la intensidad de luz emitida sobre un rea especifica, por lo que los cambios de brillo pueden oscurecer o aclarar todo el contenido de la pantalla. Los monitores tradicionales (CRT) generan aproximadamente de 80 a 100 cd/m (candela por metro cuadrado). En el caso de monitores LCD, no se admiten valores inferiores a 150 cd/m . En cuanto al tipo de ordenador, en un PC el brillo no se corrige internamente, por lo que si una imagen se ve bien en el PC donde se crea, se ver igualmente bien en todos. En los Mac, por el contrario, existe una correccin adaptada al de las primeras impresoras lser para Mac, por lo que una imagen creada en un Mac se ve algo ms oscura en un PC. El brillo tpico de un monitor de PC es de 2,35 (+/- 0,1). La de un sistema Mac es de 1,8. Para Internet se pueden crear las imgenes ajustando la gamma a un valor intermedio ponderado entre PC y Mac.

Ajustes del brillo

Si el valor del brillo en un monitor es bajo, los colores luminosos se oscurecern, pareciendo grises. Por el contrario, si el brillo es elevado, sern los colores oscuros los que pierdan profundidad, virndose a grises. Contraste El contraste es la relacin existente entre la intensidad luminosa del punto ms claro y el ms oscuro de una imagen. Cuanto mayor sea el valor de contraste, mejor ser la legibilidad. Si tenemos una fotografa con lo un punto blanco y otro negro y estos mismos en un monitor, generalmente el contraste en un monitor (170:1) es superior al que se da en una fotografa (100:1), pero si el ambiente est muy iluminado, el punto negro deja de ser negro y la relacin de contraste puede bajar bastante (hasta 50:1). Esta situacin se agrava cuando hay reflejos en la pantalla que, adems, producen fatiga al usuario. Ajustes del contraste

Para una correcta calibracin de contraste hay que buscar valores de 100:1, es decir, que el punto blanco tenga 100 veces ms luminosidad que el punto negro (valor cercano a 2,2). Color El color en un monitor es producido por la suma de diferentes intensidades de los colores bsicos (rojo, verde y azul), mediante un proceso denominado adicin de colores. La calibracin del color consiste en el proceso de ajustar el color de un dispositivo a un estndar establecido para conseguir que los colores de una composicin grfica se aprecien igual en todos los monitores calibrados.

Ajustes de la tonalidad

Se debern ajustar los diferentes parmetros que definen las cualidades de los colores, como tono, saturacin, gamma, balance de colores primarios, etc. Resumiendo: Es muy importante que a la hora de disear nuestras pginas web y sus elementos grficos tengamos nuestro monitor bien configurado, ya que en caso contrario los resultados que obtengamos no sern reales, producindose diferencias apreciables entre lo que ven los usuarios en sus ordenadores y el trabajo que hemos desarrollado, con la consiguiente prdida de control y de calidad que ello conlleva.

Formas bsicas en diseo grficoEl lenguaje visual a travs de grafismos puede descomponerse en entidades bsicas, cada una de las cuales tiene por s misma un significado propio, pero que unidas de diferentes formas pueden constituir elementos comunicativos distintos. 21/10/03 - Estamos acostumbrados a comunicarnos con nuestros semejantes mediante el lenguaje hablado, verbal, formado por una serie de elementos bsicos (letras, palabras, frases, etc.) que, combinados, forman entidades comunicativas complejas. De igual modo, el lenguaje visual a travs de grafismos puede descomponerse en entidades bsicas, cada una de las cuales tiene por s misma un significado propio, pero que unidas de diferentes formas pueden constituir elementos comunicativos distintos. Estas entidades grficas constituyen la sustancia bsica de lo que vemos. Por lo tanto, son muy importantes y todo diseador debe conocerlas y manejarlas perfectamente. Las formas bsicas del diseo grfico son pocas: el punto, la lnea y el contorno. Pero son la materia prima de toda la informacin visual que aporta una composicin. Cada una de ellas posee un conjunto de caractersticas propias que las modifican y condicionan, entre las que destacan: Forma: definida por disposicin geomtrica. La forma de una zona 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 su finalizacin fsica. Puede ser horizontal, vertical o inclinada en diferentes grados.

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

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

Escala: tamao relativo de una zona respecto a las dems y al total de la obra. Los diferentes tamaos de las diferentes zonas modifican y definen las propiedades de cada una de ellas.

Dimensin: capacidad tridimensional de un elemento o zona. La dimensin slo existe en el espacio real tridimensional, pero se puede simular en una composicin grfica plana mediante tcnicas de perspectiva, sombreado o superposicin. Tambin, mediante el uso de fotografas, que introducen espacios tridimensionales en la composicin.

Movimiento: propiedad muy importante, que aporta connotaciones de dinamismo y fuerza. En las obras grficas puras no existe movimiento real, pero s se encuentra implcito en ciertos elementos y se puede conseguir con ciertas tcnicas que engaan al ojo humano (diseo cintico, pintura cintica) o representando elementos que s lo tienen en el mundo real.

En las pginas web podemos introducir animaciones grficas que aportan sensaciones de movimiento mucho mayores, como animaciones Flash, gifs animados, capas dinmicas, elementos de vdeo, etc.

El puntoEl punto es la unidad mnima de informacin visual, y est caracterizado por su forma, tamao, color y ubicacin. 21/10/03 - El punto es la unidad mnima de informacin visual, y est caracterizado por su forma (generalmente circular, pero tambin puede ser rectangular, como ocurre en los monitores, triangular o una mancha sin forma definida), por su tamao, por su color y por la ubicacin que tenga dentro de la composicin grfica.

Las principales caractersticas del punto son:

Tiene un gran poder de atraccin visual, creando tensin sin direccin. Cuando se sitan prximos dos puntos pueden producir sensaciones de tensin o de direccin, creando en la mente del espectador una lnea recta imaginaria que los une. Si se sitan diferentes puntos en prolongacin sugieren una direccin, un camino, ms acentuada cuanto ms prximos estn los puntos entre s.

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

Los puntos aislados son poco usados en el diseo web. Sin embargo, las sucesiones de puntos prximos son un buen elemento para dirigir la atencin del visitante, para guiar su mirada a una zona concreta, para establecer relaciones entre elementos o para separar zonas de la pgina.

La lneaLa lnea es el elemento bsico de todo grafismo y uno de los ms usados. Representa la forma de expresin ms sencilla y pura, pero tambin la ms dinmica y variada. 21/10/03 - La lnea es el elemento bsico de todo grafismo y uno de los ms usados, teniendo tanta importancia en un grafismo como la letra en 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 en movimiento, por lo que tiene mucha energa y dinamismo. Su presencia crea tensin y afecta al resto de elementos cercanos a ella. 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 ms acentuado cuantas ms lneas paralelas haya. Esta cualidad se puede usar para dirigir la atencin en una direccin concreta, haciendo que el espectador observe el lugar adecuado.

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

Las propiedades de una lnea vendrn definidas por su grosor, su longitud, su orientacin (direccin) respecto a la pgina, su ubicacin (posicin), su forma (recta o curva) y su color. Estas propiedades se vern afectadas tambin por el nmero de lneas que haya en la composicin, su proximidad y la orientacin relativa entre ellas. La lnea es considerada como tal mientras la relacin ancho/largo no sobrepase una proporcin determinada. Una lnea ms ancha que la mitad de su largo pierde la expresin dinmica del trazo y adquiere la esttica de una superficie cuandrangular. La unin sucesiva de lneas conforma un trazo. Los trazos dan volumen a los objetos que dibujamos y permiten representar simblicamente objetos en la composicin, eliminando de ellos toda informacin superflua y dejando slo lo esencial.

La lnea pueden tener los bordes lisos o dentados, con extremos rectos, redondeados o en punta. Su cuerpo puede ser slido o texturado, y su direccin puede ser curva o recta. Y cada una de estas caractersticas matizar la forma en que es interpretada una 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 frecuente en la naturaleza, donde predominan las lneas curvas (el universo en su totalidad es curvo), pero muy abundante en el entorno humano, que necesita de ellas para dar estabilidad a sus creaciones.

La lnea recta horizontal expresa equilibrio, calma, equilibrio estable. No hay estabilidad sin una lnea recta horizontal de referencia, una lnea de horizonte, ya que nos movemos en un plano horizontal. Las lneas rectas horizontales son muy usadas en las pginas web, tanto que el lenguaje HTML proporciona una etiqueta especfica para introducirlas, HR. Se utilizan sobre todo como elemento delimitador de bloques de contenido en pginas de poco contenido grfico, siendo conveniente no presentarlas con efecto tridimensional, sino como una simple lnea plana (atributo noshade). La lnea recta vertical sugiere elevacin, movimiento ascendente, actividad. Tambin expresa equilibrio, pero inestable, como si estuviera a punto de caer. Esto se puede corregir haciendo trabajar las lneas verticales con otras horizontales de apoyo, que les darn la estabilidad de que carecen.

En una pginas web, las lneas rectas verticales pueden ser usadas para separar columnas textuales o bloques de contenidos, bien como lneas frontales, con un color que destaque lo suficiente sobre el fondo, bien como lneas de fondo, del mismo color 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 la horizontal es la ms estable y reconocible. Lnea curva Es la lnea ms libre y la ms dinmica de todas, pudiendo sugerir desde un movimiento perfectamente definido hasta un movimiento catico, sin reglas.

Est muy asociada al ser humano, que escribe y dibuja casi siempre con lneas curvas. Las curvas ms comnmente usadas en diseo grfico digital son las curvas Bzier. Este tipo de curvas fue desarrollado por Pierre Bzier por encargo de la empresa Renault, que buscaba una familia de curvas representables matemticamente (son curvas de tercer grado) que permitieran representar las curvaturas suaves que deseaban dar a sus automviles.

Una curva Bzier queda totalmente definida por cuatro puntos caractersticos, los puntos inicial y final de la curva y dos puntos de control (manejadores) que definen su forma. Para modificar su forma, basta cambiar de posicin uno de sus puntos de control. Son curvas de manejo poco complejo y muy elegantes, con un desarrollo muy suave, capaces de adaptarse a casi cualquier forma imaginable, por lo que son muy usadas para disear logotipos e iconos y para copiar cualquier figura. Tambin son enormemente verstiles, pudiendo adoptar desde curvaturas muy suaves (casi lneas rectas) a curvaturas muy fuerte (curvas complejas), pasando por todos los valores intermedios. Pueden, incluso, cambiar de cncavas a convexas alrededor de un punto.

En el diseo web, el uso de lneas curvas aisladas est muy limitado. Es ms comn encontrarlas como partes integrantes de formas ms complejas, siendo tiles, por ejemplo, para suavizar la 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 lneas curvas en una pgina web es el efecto de escalado producido al no ser capaz el sistema grfico de los ordenadores de representar con exactitud formas curvas por medio de pxeles. Es el tpico efecto de "dientes de sierra" que aparece en todos los objetos con partes curvas, efecto que aumenta con el tamao del objeto.

Una solucin a este problema visual es incluir las lneas curvas como imgenes en formato web (GIF, JPG, PNG, etc.) y aplicarles el proceso de rastrillado o antialias,

disponible en casi todas las aplicaciones grficas, por medio del cual se crean uno o ms pxeles 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 de diferentes lneas. Es tal vez la forma grfica ms humana, la que mejor 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. 13/11/03 - Podemos definir el contorno como el objeto grfico creado cuando el trazo de una lnea se une en un mismo punto. Es decir, cuando una lnea continua empieza y acaba en un mismo punto.

Todo contorno delimita dos zonas, una acotada (el contorno y su interior) y otra infinita (el fondo), crendose un sub-mundo grfico particular en cada forma definida por cada contorno. La lnea base de un contorno define la complejidad de ste y sus propiedades. Cuando una lnea se cierra sobre s misma, el contorno creado determina un espacio interno, crendose una tensin entre este espacio y sus lmites, otorgando a la lnea creadora un gran poder de atraccin visual.

Las cualidades grficas de un contorno estarn definidas por las lneas 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 los orgnicos.

El cuadradoElementos de diseo: el cuadrado. 13/11/03 - El cuadrado es la figura geomtrica formada por cuatro lneas rectas de igual longitud, denominadas lados, que forman ngulos perfectamente 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 es el rectngulo, de propiedades anlogas al cuadrado, aunque sugiere menos perfeccin y estabilidad.

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

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

Los rectngulos verticales, por el contrario, da sensacin de menos solidez, es menos estable, parece que puede volcarse en cualquier momento. En ellos, la mirada del espectador no puede de un lado a otro, pero puede moverse verticalmente, dando sensacin de elevacin, y es apto para representar aquellos objetos que en la realidad tienen una forma ascendente.

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

pgina web posee una forma claramente rectangular, definida por la ventana del navegador. Adems, los elementos web (tablas, capas, animaciones Flash, applets de Java, etc.) son de forma rectangular. Esto hace que los rectngulos sean especialmente adecuados para su uso en las pginas web, proporcionando equilibrio y estabilidad 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 aspecto artificial de una pgina demasiado cuadriculada:

Cada rectngulo debe estar alineado con los dems objetos de la pgina que le rodean. El tamao del rectngulo debe ser mayor que el contenido del mismo, lo suficiente como para que ste se presente libre, con espaciados convenientes por los cuatro lados. No usar en las tablas bordes por defecto, es decir, grises y con efectos de relieve. Si se usan para separar lgicamente 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. De todas formas, es preferible utilizar otros mtodos para obtener la separacin, como filas de dos colores alternativos (pijamas). Si de desea situar en la pgina varios rectngulos de funcionalidad anloga (caso de elementos de un men de navegacin, por ejemplo), es preferible posicionarlos en series horizontales, ya que se percibirn ms como una lnea que como un conjunto rectangular.

La dureza visual de los rectngulos se puede suavizar aadindoles otros elementos que los modifiquen en parte. Un ejemplo de esto son las tablas o botones con esquinas redondeadas, que rompen la monotona de la forma rectangular.

Otra forma de compensar la rigidez de las formas rectangulares es combinarlas en la composicin con formas curvas que aporten libertad y dinamismo..

La circunferenciaElementos de diseo: la circunferencia. 12/12/03 - La circunferencia es un contorno contnuamente curvado, cuyos puntos estn todos a la misma distancia de un punto central, llamado centro del crculo. La distancia constante de cualquier punto 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. Su direccionalidad es la curva, asociada al movimiento, al encuadramiento, a la repeticin y al calor.

La forma circular produce un movimiento de rotacin evidente, posee un gran valor simblico, especialmente su centro, y tiene connotaciones psicolgicas como proteccin, inestabilidad, totalidad, movimiento contnuo o infinitud. Es tpico representar tambin los espacios cerrados, hermticos, con circunferencias o crculos. 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 perfecto sea una cualidad propia de la circunferencia. La proyeccin tridimensional de la circunferencia es la esfera, el cuerpo geomtrico ms perfecto, el que contiene un mayor volumen en un menor espacio, el que define la forma tanto de los tomos como de los cuerpos celestes. La circunferencia y el crculo son tal vez los elementos geomtricos ms perfectos y estables, aunque cargados de una gran carga dinmica. Las formas circulares son muy difciles de representar en una pgina web, ya que todos los elementos que nos facilita el lenguaje HTML son rectangulares, aunque aparenten no serlo. Adems, las formas curvas se visualizan muy mal en los monitores, debido a la interpretacin grfica mediante pixels, que origina efectos de escalado indeseables. Otro inconveniente de usar crculos en el diseo web deriva precisamente de ser la forma que contiene ms rea en el menor permetro, ya que la mayora de las veces al diseador le interesa precisamente lo contrario, reducir al mnimo el rea y maximizar al mximo el permetro.

Tal vez la nica forma de incluir una forma circular completa en una pgina sea incluyndola en una imagen. Pero cualquier imagen es de por s rectangular como objeto HTML, lo que nos obligar a desperdiciar todo el espacio comprendido entre el contorno circular y los bordes de la imagen, apareciendo espacios sin contenido no deseables en la mayora de los casos.

Este efecto negativo se puede paliar incluyendo dentro de la imagen la forma circular y los dems objetos que le rodean en la composicin y que se encuentran dentro de los lmites del rectngulo que define la imagen, pero entonces esos elementos sern estticos, fijos, sin posibilidad de ser modificados si no es cambiando todo el contenido de la imagen. Una mejor solucin es incluir la imagen que contiene el contorno circular (o curvo en general) como fondo de la pgina o de un elemento contenedor de la misma (tabla, celda de tabla, prrafo, capa, etc.), lo que nos permitir presentar otros objetos HTML ocupando espacios vacos alrededor de la forma circular.

Formas ms sutiles y efectivas de incluir curvas en una pgina pueden ser recortando imgenes en forma de valo o crculo, e incluso simulando caminos curvos mediante elementos textuales o grficos dispuestos en sucesin.

Contornos mixtosElementos de diseo: contornos mixtos, que son los que estn compuestos por varios tipos de contornos. 12/12/03 - Mediante combinaciones de los elementos bsicos y contornos anteriores se pueden construir todas las formas imaginables, cada una de las cuales tendr unas propiedades dependientes de las partes que la forman, de su orientacin, de su tamao, de espesor del trazo lmite, de su color y de su ubicacin.

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

Los contornos mixtos son muy usados en las pginas web, a las que aportan variedad en el diseo y definicin de espacios de informacin, rompiendo la monotona visual de las formas rectangulares puras. El nico inconveniente es que las lneas curvas se deben implementar mediante imgenes, generalmente en formato GIF, que se pueden incluir como secciones curvas en las celdas extremas 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 (Macromedia Flash), que aportan gran definicin a las zonas curvas, sin producirse efectos de escalado, al ser tratadas como grficos vectoriales. El inconveniente es entonces la actualizacin de los contenidos textuales, ya que hace falta para ello acceder al fichero FLA fuente del grfico Elementos de diseo: contornos orgnicos, que estn formados por curvas libres. 12/12/03 - Los contornos orgnicos son aquellos formados por curvas libres.

Son los contornos ms abundantes en la naturaleza, y sugieren fluidez, desarrollo, humanidad, inspirando sensaciones favorables en el espectador.

Los contornos orgnicos son utilizados abundantemente en pintura y dibujo artstico, ya que son la base para representar figuras 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 naturaleza propia de una pgina, composicin ordenada en la que predominan las formas rectangulares. No obstante, bien usados pueden dar un toque natural o humano a la pgina.

Una posible solucin, si deseamos introducir en una pgina contornos 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 existe una frmula que de un diseo infalible pero s unas reglas bsicas. 09/1/04 - 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.

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 jerarqua visual.

El diseo equilibrado. Las proporcionesebemos tener en cuenta la definicin a utilizar, los elementos grficos y las proporciones... 09/1/04 - 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 DIN A4 DIN A3 DIN A2 DIN A1 DIN A0

tamao 210*297 420*297 420*594 840*594

relacin 0.0625 m(x/y=0.707) 0.125 m (x/y=1.4142) 0.25 m (x/y=0.707) 0.5 m (x/y=1.4142)

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 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 descordinada, 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. 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

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.

El diseo equilibrado. La escalaSe entiende por escala la relacin entre las proporciones de los elementos visuales de una composicin. 09/1/04 - 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. 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 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 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 diseo equilibrado. El contrasteEl contraste permite resaltar el peso visual, lo podemos conseguir por medio de diversos medios: tonos, colores, contornos y escala. 09/1/04 - 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 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.

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 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.

El diseo equilibrado. Las agrupacionesComo los elementos web deben agruparse para obtener un resultado coherente. 09/3/04 - 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.

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.

El diseo equilibrado. El reticuladoCmo armonizar los bloques de contenido que formarn la composicin del diseo. 09/3/04 - 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 obre 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. 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. 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

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.

El diseo equilibrado. Las alineacionesNecesarias para conseguir una composicin ordenada y lgica, as como para relacionar elementos. 09/3/04 - Una vez definido el reticulado que vamos a usar en nuestra composicin,

deberemos situar en la misma los elementos grficos y textuales. En este punto aparece el concepto de alineacin, como la colocacin de elementos grficos y textuales segn una lnea dada, que generalmente ser horizontal o vertical. Generalmente habr varias lneas guas de alineacin en una composicin. Alinear los elementos es una operacin imprescindible para conseguir una composicin ordenada y lgica, pues con ello se crean unidades visuales definidas y relaciones entre elementos. Si la alineacin es importante a la hora de situar elementos grficos, lo es an ms si se trata de contenidos textuales. Efectivamente, los textos perfectamente alineados son ms fciles de leer, no cansan la vista y producen un efecto de equilibrio que invita a la lectura. Por el contrario, un texto sin alineacin resulta confuso, difcil de leer, desmotivando al espectador. Todo lo hablado se acenta si el soporte es una pgina web, ya que la forma del monitor y de la ventana del navegador impulsa el uso de contornos rectangulares, que nicamente se consiguen con alineaciones prefectas. Adems, muchas veces debemos disear las pginas con un importante nmero de elementos, por lo que si la disposicin de los mismos no es perfectamente regular resulta muy difcil crear una composicin aceptable. La alineaciones horizontales son imprescindibles para conseguir un diseo en niveles estables, ya que las lneas horizontales aportan equilibrio. Como podemos tener bloques lgicos de diferente altura, estas alineaciones se definirn desde los bordes superiores de los bloques. Alineaciones horizontales en EresMas

En cuanto a las verticales, la alineacin ms comn es la izquierda, ya que es la normal en los libros y dems soportes textuales, 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 de alineacin, sobre todo si todos los valores de la columna tienen el mismo ancho. Si no es as, es preferible optar por la alineacin izquierda. 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 adaptarse a un reticulado que defina una lnea vertical a la derecha del mismo, como ocurre en muchos mens de navegacin situados a la izquierda de la pgina. Tambin son tiles en las columnas de las tablas que contengan datos que deban seguir una ordenacin lgica a derechas, como es el caso de datos de moneda. Adecuando la alineacin al tipo de datos de cada campo

Existe otro tipo de alineacin para textos, el justificado, en el que todas las lneas de texto tienen el mismo ancho, por lo que quedan alineadas tanto a la derecha como a la izquierda, lo que se consigue aumentando o disminuyendo el espaciado normal de las

letras. Este tipo de alineacin es muy usado en los libros y peridicos, pero en las pginas web hay que aplicarlo con precaucin, destinndolo tan solo a bloques textuales de poco ancho (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, al producir pginas demasiado cuadriculadas y artificiosas. Por ello, es bueno introducir algunos elementos que, sin romper el reticulado y las alineaciones bsicas, introduzcan un poco de variedad visual, de frescura en el diseo. Buscar el equilibrio entre alineaciones y elementos que las rompan es una de las tareas principales del diseador de pginas web.

El diseo equilibrado. Las simetrasOtro condicionante para que el diseo de la web tenga una organizacin natural. 23/3/04 - Si observamos la Naturaleza, gran arquitecta y diseadora donde las haya, podremos observar muy pronto que uno de los elementos que ms utiliza para crear sus organismos es la simetra, manifestndose sta en casi todos los seres que existen a lo largo y ancho de nuestro planeta.

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

Si partimos de esta base, debemos aceptar que la bsqueda de una simetra estructural, grfica y textual debe ser una de las metas primeras de todo diseador web, ya que confiere a las composiciones una organizacin natural a la que el espectador est acostumbrado. Por definicin, una forma o imagen es simtrica cuando un eje central la puede dividir en dos parte iguales y opuestas entre s. Este concepto, aplicado a una composicin grfica puede aplicarse tanto a los propios elementos individuales de la misma como a su totalidad. En este caso, obtener una simetra exacta puede resultar difcil (incluso inconveniente), pero s que podemos buscar una simetra de bloques y espaciados en nuestra rejilla.

El diseo simtrico sugiere estabilidad, equilibrio, resultando esttico, ordenado,

atractivo y agradable de contemplar. Por el contrario, el asimtrico muestra irregularidad, desigualdad en las formas y desequilibrio. Hay que tener en cuenta que la simetra usada no debe de ser del todo exacta, ya que la simetra perfecta no es natural, es demasiado "perfecta", valga la redundancia, haciendo aparecer las composiciones artificiales y premeditadas. Pequeas variaciones en la distribucin simtrica dan ese toque de ruptura que hace su contemplacin ms amena y natural. En el caso de una pgina web, la concepcin simtrica de la misma comienza con el reticulado elegido, ya que va a ser el que defina la distribucin bsica de elementos en ella. Hay que tender entonces a disear un reticulado lo ms simtrico posible.

Una forma aceptada de romper el esquema simtrico de una pgina es crear bloques descompensados visualmente hacia un lado, alternndolos en la pgina de forma inversa, es decir, el primero descompensado a la derecha, el segundo a la izquierda, etc. Otra tcnica es el uso de un nico men lateral de navegacin, que descompensa el peso visual hacia la zona en la que se encuentra. Si bien en la disposicin de bloques en el reticulado podemos ser algo permisivos, en los contenidos de nuestras pginas la simetra debe ser una norma casi inflexible, sobre todo en la construccin de ciertos elementos. Es misin fundamental de todo diseador ser capaz de construir contenidos simtricos sin que parezcan rgidos, artificiales. Ejemplos claro de esta regla son la creacin de formularios y de fichas. Se construyen generalmente apoyndose en una tabla maquetadora, por lo que deberemos buscar la simetra en esta tabla, aunque luego, debido a las diferentes longitudes y naturaleza de los campos, el resultado final "parezca" no serlo. Distribucin simtrica en una ficha

En lo que respecta a los textos, si nuestra pgina es eminentemente textual, y en textos de una sola lnea, como sta que tenis delante, el contenido ser simtrico por propia construccin. Pero si deseamos distribuir el contenido en varias columnas, deberemos prestar especial atencin a que stas sean equilibradas, evitando el remarcado fuerte de porciones de texto o de una o ms columnas mediante colores de fondo, textos en negrita, etc. Columnas textuales y simetra

La regla general es buscar siempre la armona, an cuando introduzcamos pequeos elementos diferenciadores. Otro aspecto fundamental es mantener simetras en el tratamiento de los aires en nuestra pgina. Entendemos por "aire" el espacio libre que queda entre elementos y entre stos y los lmites de la pgina. Es lo que en cualquier documento llamamos "mrgenes", pero extendido a todos los elementos y contenidos. Si nuestra pgina tiene un espacio libre entre su margen izquierdo y el primer contenido por ese lado, el mismo aire debe quedar entre el margen derecho y el contenido por ese lado. Igualmente, los espacios libres entre los elementos internos de la pgina deben ser simtricos e iguales, buscando con ello el equilibrio en la composicin. Este concepto es aplicable a todos y cada uno de los elementos de nuestras pginas. As, si tenemos una lista de contenidos, podemos crear unos espacios entre cada 5-7 elementos, que evitarn la sensacin de opresin producida cuando las listas tienen muchos elementos. Entonces, este espacio separador deberemos 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 entre los diferentes elementos que lo formen sea simtrico, creando un total claro y armonioso.

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

El diseo equilibrado. El equilibrio entre contenidosLa organizacin espacial, primordial para atraer al usuario. 23/3/04 - En toda composicin debe existir un adecuado equilibrio entre los diferentes elementos que la forman si queremos atraer la atencin del espectador y mantenerla hasta que haya asimilado el mensaje que queremos transmitirle. Para ello es imprescindible mantener en nuestra obra grfica una correcta organizacin espacial de contenidos grficos y textuales, as como unas cantidades adecuadas de cada uno de ellos. Los componentes grficos aportan a la composicin sensaciones visuales por medio de formas, colores y contrastes, mientras que los textos suministran informacin, mensajes, aunque esto no quiere decir que estas funcionalidades sean excluyentes, ya que los grficos pueden aportar informacin y los textos formas y colores (de hecho, la Tipografa es una herramienta de diseo excelente). Las composiciones formadas por muchos elementos grficos y poco o ningn contenido textual pueden crear rechazo en aquellos espectadores que buscan el contenido sustancial en la obra, la informacin prctica que ofrece. Este contenido textual es especialmente importante en las pginas web, ya que los usuarios acuden a un sitio buscando siempre algn tipo de informacin, abandonndolo rpidamente si no encuentra algn estmulo informativo que le motive.

En el lado contrario, las composiciones en las que se introduce un contenido eminentemente textual, con poco o ningn contenido grfico, suelen ser rechazadas por el espectador, que encuentra tremendamente aburrida y tediosa una obra que aparece a la vista como una mancha de color indiferenciado, que exige adems un elevado nivel de concentracin y mucho tiempo para resultar til. Necesitamos pues introducir sensaciones visuales grficas que motiven al espectador a investigar el contenido textual.

En el caso de las pginas web, los tipos de contenidos a ofrecer aumentan considerablemente respecto a los de una composicin sobre papel ya que podemos incluir en ellas no slo grficos y textos, sino tambin sonidos, animaciones, vdeo, applets de Java, etc. Esto hace necesaria una planificacin correcta de los elementos a incluir en una pgina, con objeto de despertar la atencin del usuario, s, pero ofrecindole siempre informacin relevante y nunca sobrecargndola de elementos superfluos. Adems, debido a las limitaciones propias de los equipos informticos, del lenguaje HTML, de los navegadores web y de las conexiones a Internet, el equilibrio entre contenidos debe contemplar tambin que el resultado final se pueda visualizar correctamente. De nada sirve una pgina con grficos estupendos y animaciones espectaculares si el usuario debe esperar un minuto para poder verlas. Es ms, nunca esperar ese minuto. Es por tanto preferible organizar las pginas web de forma equilibrada, ofreciendo en cada una de ellas las dosis adecuadas de elementos visuales e informativos. Como

norma general, siempre debe haber ms componentes textuales que grficos en una pgina.

Es mejor siempre tener dos pginas ligeras y equilibradas a una recargada de elementos incapaces de retener la atencin del usuario en lo verdaderamente importante: el mensaje que deseamos transmitirle.

El diseo equilibrado.