CONTENIDOS : UNIDAD 1

EJE TEMTICO: HISTORIA, DISEO Y FORMAS BSICAS

Un enfoque introductorio sobre el desarrollo del diseo y la comunicacin desde las pinturas rupestres hasta la llegada de Internet. Los elementos grficos esenciales para una puesta en pgina o pantalla.
Objetivos Especficos: Conocer la historia y evolucin del Diseo Grfico hasta nuestro presente con la llegada de Internet. Reconocer los elementos grficos que constituyen la base de toda composicin grfica. Conceptos: Diseo Grfico Diseo Web Formas Bsicas

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Curso prctico de diseo web

Un manual que trata el diseo orientado a la web, con una interesante introduccin al diseo en general y el desarrollo del diseo en la web en particular.

Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Luciano Moreno

Consultor, diseador y desarrollador web en ParaRede !". Especialista en usabillidad y diseo centrado en el usuario. #$% cap&tulos'

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

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

&omo soporte fsico se utiliz inicialmente la piedra, pero pronto se buscaron otros tipos de materiales que permitieran una ma"or facilidad de uso " una ma"or portabilidad, como los papiros o los pergaminos. Papiro de los muertos

'ambi!n se empezaron a usar diferentes tipos de pigmentos naturales para dar un ma"or colorido " expresibidad a las obras escritas " composiciones artsticas, " a disponer los diferentes elementos textuales " grficos de forma armoniosa " equilibrada, "a que se apreci que con ello se ganaba poder comunicativo, claridad " belleza. Esto se puede apreciar en la confecci n de los incunables medievales realizados en los monasterios, en los que se observa de forma clara la importancia de la #()*+A# ,dise-o. para transmitir un mensaje.

Incunable medieval

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com expresi n mediante el lenguaje hablado, los hombres utilizaron su cuerpo para comunicar a los dems estados de nimo, deseos e inquietudes a trav!s de ademanes, expresiones " signos, que con el tiempo adquirieron la condici n de #lenguaje#, al convertirse en modelos de comunicaci n. Aunque posteriormente el lenguaje hablado pasara a ser el medio de intercambio de informaci n ms directo, el lenguaje visual sigui teniendo un importante peso en las relaciones comunicativas, sobre todo a partir del uso de diversos materiales " soportes como medios del plasmar mensajes visuales, como lo demuestran multitud de dibujos en piedra " pinturas rupestres que han llegado a nuestros das, en las cuales se representan elementos naturales, actividades cotidianas " diferentes signos artificiales con significado propio. Pintura rupestre (Cueva de Altamira, Espaa)

La representaci n de ideas mediante grafos experiment su ma"or avance con la aparici n de los lenguajes escritos, que permitieron expresar cadenas estructuradas de pensamientos mediante un conjunto de elementos grficos de significado propio dispuestos seg$n una estructura definida, capaces de transmitir mensajes entendibles por la comunidad. Estos lenguajes escritos estaban basados, bien en la representaci n de elementos tomados de la naturaleza, a los que se les asignaba una interpretaci n particular, bien en un conjunto artificial de smbolos inventados% los alfabetos. &ada 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)

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

/osteriormente, 0ohann 1utenberg invent la imprenta, artefacto capaz de reproducir en grandes cantidades " de forma c moda un original, lo que hizo posible que los documentos impresos " el mensaje que contenan fueran accesibles a un gran n$mero de personas. Primer libro impreso

/ronto empezaron a aparecer imprentas en las que se reproducan todo tipo de obras, cada vez ms elaboradas. 2e empezaron a usar nuevos materiales como soporte, nuevas tintas " nuevos tipos de letras, originando la aparici n de unos profesionales especializados en su manejo, los tip grafos " los cajitas, tal vez los primeros dise-adores grficos como tal, "a que se encargaban de componer " maquetar los diferentes elementos que iban a formar una obra de forma que resultara l gica, clara, armoniosa " bella. )tro gran impulsor del desarrollo del dise-o grfico fue la *evoluci n 3ndustrial. 2urgieron las fbricas " la economa de mercado, un gran n$mero de personas se desplaz a las ciudades a trabajar, aumentaron las tiendas " los comercios " empez la competitividad entre empresas por hacerse con una parte del mercado. &on ello apareci " se desarroll una nueva t!cnica comercial, la publicidad, encargada de hacer llegar a los consumidores mensajes especficos que les

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com convencieran de que un producto dado era mejor que otros anlogos. Cartel publicitario

El desarrollo de la publicidad trajo consigo un desarrollo paralelo del dise-o grfico " de los soportes de comunicaci n. 4aba que convencer al p$blico de las ventajas de un producto o marca, " para ello nada mejor que mensajes concisos, cargados de componentes psicol gicos, con dise-os cada vez ms elaborados, que se hacan llegar al ma"or n$mero posible de personas. El c mo se transmita la informaci n lleg incluso a superar en importancia a la misma informaci n transmitida. 5o se trataba "a de presentar mensajes visuales bellos, sino efectivos, que vendieran, " para ello no se dudo en realizar grandes inversiones, haciendo posible un gran avance en las t!cnicas de dise-o " la aparici n de profesionales dedicados exclusivamente a desarrollarlas " ponerlas en prctica% los dise-adores grficos. En el siglo 66, hicieron su aparici n los ordenadores, mquinas en un principio destinadas a un grupo reducido de t!cnicos " especialistas, pero que poco a poco fueron ganando popularidad " que con la aparici n del ordenador personal se extendieron a todos los ambientes " grupos sociales. El ordenador es $til porque permite el uso de programas informticos capaces de realizar multitud de tareas. /ero estos programas tienen una estructura interna mu" compleja, que la ma"ora de las veces va ms all de los conocimientos que poseen los usuarios de los mismos. Esto dio lugar a la introducci n de unos elementos intermedios, denominados #3nterfaces de 7suario#, cu"a misi n era aislar al usuario de las consideraciones t!cnicas " procesos internos de los programas, permiti!ndoles realizar tareas con ellos por medio de un #lenguaje# intermedio, ms fcil de entender por el usuario. Interfase de usuario en modo te to

En sus principios, estos programas se manejaban de forma textual, mediante comandos crpticos, que entendan tan solo expertos en la materia. /ero con el acceso a la informtica de todo tipo de personas se hizo necesaria una simplificaci n en el manejo de las aplicaciones, surgiendo el concepto de #3nterface 1rfica de 7suario# en toda su extensi n, como un medio capaz de hacer entendibles " usables estas aplicaciones a trav!s de elementos visuales comunes, que presentados en la pantalla del ordenador permitieran al usuario medio realizar las tareas propias de cada programa concreto.

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Interfase Gr!fica de "suario

La labor de dise-ar estas 317 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. 4aca falta pues profesionales del dise-o que se encargaran de concebir las interfaces, pero los dise-adores grficos clsicos no estaban acostumbrados a construir obras con capacidades de interacci n " navegabilidad, por lo que hubieron de reciclarse, aprendiendo conceptos " funcionalidades nuevas. &on la entrada en escena de 3nternet " las pginas 8eb se hizo a$n ms patente el desfase de los dise-adores grficos con el nuevo medio. 4aca falta ahora dise-ar " construir interfases de usuario mu" especiales, condicionadas a peque-os tama-os de fichero " a un medio concreto de presentaci n, los navegadores 8eb, que imponan serias limitaciones al dise-o, que necesitaban sistemas de navegaci n entre pginas simples " entendibles. Interfase #eb

2i a esto sumamos la necesidad de los creadores de interfaces 8eb de conocer a fondo diferentes lenguajes de marcas " de programaci n ,4'+L, 0ava2cript, 94'+L., es evidente que era necesaria la aparici n de un nuevo profesional, el dise-ador 8eb, hbrido entre el dise-ador grfico clsico " el programador de aplicaciones para 3nternet.
Artculo por

Luciano Moreno

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Diseo grfico
Una apro imacin 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. /odemos definir el dise-o grfico como el proceso de programar, pro"ectar, coordinar, seleccionar " organizar una serie de elementos para producir objetos visuales destinados a comunicar mensajes especficos a grupos determinados. La funci n principal del dise-o grfico ser entonces transmitir una informaci n determinada por medio de composiciones grficas, que se hacen llegar al p$blico destinatario a trav!s de diferentes soportes, como folletos, carteles, trpticos, etc. El dise-o grfico busca transmitir las ideas esenciales del mensaje de forma clara " directa, usando para ello diferentes elementos grficos que den forma al mensaje " lo hagan fcilmente entendible por los destinatarios del mismo. El dise-o grfico no significa crear un dibujo, una imagen, una ilustraci n, 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 dise-ador debe conocer a fondo los diferentes recursos grficos a su disposici n " tener la imaginaci n, la experiencia, el buen gusto " el sentido com$n necesarios para combinarlos de forma adecuada. El resultado final de un dise-o grfico se denomina grafismo, " es una unidad por s misma, aunque est! compuesto por multitud de elementos diferentes. /odemos establecer una analoga entre un grafismo " un plato de cocina. Ambos estn compuestos por diferentes elementos individuales que, unidos correctamente " con sabidura, componen una obra final $nica " definida que va ms all de la suma de las partes que la forman. $ormas, colores % te tos en un grafismo

'oda obra de comunicaci n visual nace de la necesidad de transmitir un mensaje especfico. 7n dise-ador grfico no es un creador de formas, sino un creador de comunicaciones, un profesional que mediante un m!todo especfico ,dise-o. constru"e mensajes ,comunicaci n. con medios visuales ,grafismos.. 5o es el creador del mensaje, sino su int!rprete. El principal componente de toda composici n grfica es pues el mensaje a interpretar, la informaci n que se desea hacer llegar al destinatario a trav!s del grafismo. Esta informaci n se debe representar por medio de diferentes elementos grficos,

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com que pueden ser muchos " variados, aunque los ms comunes son% Elementos grficos simples% puntos " lneas de todo tipo ,libres, rectas, quebradas curvas, etc.. Elementos geom!tricos, con contorno o sin !l% polgonos, crculos, elipses, valos, etc. 'ipos% letras de diferentes formas " estructura, utilizadas para presentar mensajes textuales. 1rficos varios% logotipos, iconos, etc. 3lustraciones (otografas &ualquier otro elemento visual apto para comunicar un mensaje. "n diseo limpio

Estos elementos bsicos se combinan unos con otros en un grafismo, " de esta combinaci n surge un resultado final en el que tienen mucha importancia una serie de conceptos propios del dise-o 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 " de las agrupaciones de elementos. Los contornos% partes lmites de los elementos, que permiten distinguirlos de los dems " del fondo, pudiendo estar definidos mediante border, cambios de color o cambios de saturaci n. La ubicaci&n% lugar que ocupa cada elemento grfico o agrupaci n de ellos en el espacio del grafismo. El tamao% tama-o relativo de cada elemento grfico respecto los que le rodean. Escalas. El color' color de cada elemento individual, colores de cada agrupaci n de elementos, conjunto total de colores usado en un grafismo, disposici n relativa de los elementos con color " armona entre colores. El contraste% intensidad de visualizaci n de cada elemento con relaci n a los que le rodean " al grafismo completo. El e(uilibrio% cada grafismo conlleva un sistema de referencia espacial que consigue un nivel de equilibrio ma"or o menor. La simetra % disposici n espacial regular " equilibrada de los elementos que forman la composici n 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 " total. /ero la uni n de todos ellos, la obra grfica, es una entidad comunicativa individual " completa, cargada de complejos elementos humanos asociados con el lenguaje, la experiencia, la edad, el aprendizaje, la educaci n " la memoria.
Artculo por

Luciano Moreno

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Diseo grfico en la web

!l diseo web "a ms all del diseo tradicional pues e isten muchos limitadores relacionados con el medio donde se presentan las pginas# Internet. $onocemos las caractersticas fundamentales del diseo en la web. El dise-o grfico de una pgina 8eb es tan solo una parte del dise-o de la misma, "a que, adems, ha" que considerar un conjunto ms o menos extenso de condicionantes que van a limitar la libre creatividad del dise-ador. En primer lugar, las pginas 8eb se deben descargar de un servidor 8eb remoto por medio de 3nternet, por lo que el ancho de banda de las conexiones de los usuarios va a ser un factor clave en la velocidad de visualizaci n. La ma"ora de los usuarios se conectan todava a 3nternet con un m dem, con velocidades te ricas de :; <bps, aunque en realizada no superar los =>?=: <bps en el mejor de los casos. Los elementos grficos, "a tengan formato de mapa de bits o vectorial, suelen traducirse en ficheros de bastante peso, dependiendo del tama-o de la imagen " del formato en que se guarde. Esto origina que las pginas que contienen en su dise-o muchas imgenes, o pocas pero de gran tama-o, tarden mucho tiempo en ser descargadas desde el servidor 8eb " presentadas en la ventana del ordenador del usuario, que no suele ser mu" paciente. Estudios realizados demuestran que el tiempo mximo de aguante de una persona que espera la descarga de una pgina suele ser de unos => segundos, pasados los cuales prefiere abandonar nuestro sitio 8eb " buscar otro ms rpido. /or lo tanto, el n$mero de elementos grficos que podemos introducir en una pgina 8eb queda bastante limitado, teniendo que buscar alternativas mediante el uso imaginativo de fuentes " colores. )tro aspecto a tener en cuenta es que las pginas 8eb son visualizadas en unas aplicaciones especficas, los navegadores 8eb, que imponen grandes limitaciones al dise-o de las mismas. La ventana de un navegador es eminentemente rectangular, con unas medidas concretas ,dadas por la resoluci n empleada por el usuario en su monitor. " con unas capacidades de interpretaci n de colores que varan mucho seg$n el ordenador usado, el sistema operativo, el monitor " la tarjeta grfica. Estos factores imponen fuertes limitaciones al dise-ador 8eb, que debe buscar siempre que sus pginas puedan ser visualizadas correctamente por el ma"or n$mero de usuarios.

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com )iseo de un formulario #eb

En segundo lugar, los navegadores existentes en el mercado tienen una forma particular de presentar el contenido de las pginas. 3nternet Explorer interpreta en muchas ocasiones una pgina 8eb de forma mu" diferente a 5etscape 5avigator @x, " este a su vez lo hace de forma diferente a 5etscape 5avigator ;x. /ara intentar solventar estas diferencias, el dise-ador 8eb debe trabajar a la vez con varios navegadores, dise-ando sus pginas de tal forma que la interpretaci n de ellas sea similar en todos, lo que impone nuevas limitaciones al dise-o. /or otra parte, una pgina 8eb no es un dise-o grfico esttico, sino que contiene diferentes elementos que tienen la capacidad de interaccionar con el usuario, como men$s de navegaci n, enlaces, formularios, etc. Adems, una pgina aislada no existe, sino que forma parte de un conjunto de pginas inter?relacionadas entre s ,el sitio 8eb., que deben presentarse al usuario con el mismo AestiloB, aunque su funcionalidad sea mu" diferente. A esto ha" que sumar que las pginas dise-adas deben luego construirse en un lenguaje especfico, el 4'+L, que por s mismo es mu" limitado, lo que hace que el dise-ador 8eb tenga que estar siempre pensando si la interfase que est dise-ando grficamente va a poder ser luego construida. /or $ltimo, una pgina 8eb suele ocultar, en la ma"ora de los casos, una serie de procesos complejos que se ejecutan sin que el usuario sea consciente de ellos ,ejecuci n de c digos de lenguajes de programaci n tanto en cliente como en servidor, acceso a bases de datos en servidores remotos, etc.., procesos que a-aden tiempo a la presentaci n de las pginas " que muchas veces suelen afectar de forma importante al dise-o de estas, "a que el dise-ador no sabe de antemano qu! contenidos concretos van a tener. *esumiendo% el dise-o 8eb va ms all del dise-o grfico, al influir en !l multitud de factores que limitan las posibilidades del dise-o, pero tambi!n otros que a-aden interactividad " funcionalidades a una pgina 8eb que no tiene un cartel, folleto o revista.
Artculo por

Luciano Moreno

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

10

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Ajustes del contraste

/ara una correcta calibraci n de contraste ha" que buscar valores de =>>%=, es decir, que el punto blanco tenga =>> veces ms luminosidad que el punto negro ,valor cercano a E,E.. Color El color en un monitor es producido por la suma de diferentes intensidades de los colores bsicos ,rojo, verde " azul., mediante un proceso denominado adici n de colores. La calibraci n del color consiste en el proceso de ajustar el color de un dispositivo a un estndar establecido para conseguir que los colores de una composici n grfica se aprecien igual en todos los monitores calibrados. Ajustes de la tonalidad

2e debern ajustar los diferentes parmetros que definen las cualidades de los colores, como tono, saturaci n, gamma, balance de colores primarios, etc. *esumiendo% Es mu" importante que a la hora de dise-ar nuestras pginas 8eb " sus elementos grficos tengamos nuestro monitor bien configurado, "a que en caso contrario los resultados que obtengamos no sern reales, produci!ndose diferencias apreciables entre lo que ven los usuarios en sus ordenadores " el trabajo que hemos desarrollado, con la consiguiente p!rdida de control " de calidad que ello conlleva.
Artculo por

Luciano Moreno

Formas bsicas en diseo grfico

!l lengua&e "isual a tra"+s 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 comunicati"os distintos. 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. 9e igual modo, el lenguaje visual a trav!s 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 constitu"en la sustancia bsica de lo que vemos. /or lo tanto, son mu" importantes " todo dise-ador debe conocerlas " manejarlas perfectamente. Las formas bsicas del dise-o grfico son pocas% el punto, la lnea " el contorno. /ero son la materia prima de toda la informaci n visual que aporta una composici n. &ada una de ellas posee un conjunto de caractersticas propias que las modifican " condicionan, entre las que destacan%

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

20

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com $orma% definida por disposici n geom!trica. La forma de una zona o contorno va a permitirnos reconocerlas como representaciones de objetos reales o imaginarios.

)irecci&n% pro"ecci n plana o espacial de una forma, continuaci n imaginaria de la misma a$n despu!s de su finalizaci n fsica. /uede ser horizontal, vertical o inclinada en diferentes grados.

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

+e tura% modificaci n o variaci n 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 composici n de una sustancia a trav!s de variaciones diminutas en la superficie del material, " se consigue en una composici n grfica mediante la repetici n de luces " sombras o de motivos iguales o similares.

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

21

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Escala% tama-o relativo de una zona respecto a las dems " al total de la obra. Los diferentes tama-os de las diferentes zonas modifican " definen las propiedades de cada una de ellas.

)imensi&n% capacidad tridimensional de un elemento o zona. La dimensi n s lo existe en el espacio real tridimensional, pero se puede simular en una composici n grfica plana mediante t!cnicas de perspectiva, sombreado o superposici n. 'ambi!n, mediante el uso de fotografas, que introducen espacios tridimensionales en la composici n.

,ovimiento% propiedad mu" importante, que aporta connotaciones de dinamismo " fuerza. En las obras grficas puras no existe movimiento real, pero s se encuentra implcito en ciertos elementos " se puede conseguir con ciertas t!cnicas que enga-an al ojo humano ,dise-o cin!tico, pintura cin!tica. o representando elementos que s lo tienen en el mundo real.

En las pginas 8eb podemos introducir animaciones grficas que aportan sensaciones de movimiento mucho ma"ores, como animaciones (lash, gifs animados, capas dinmicas, elementos de vdeo, etc.
Artculo por

Luciano Moreno

El punto
!l punto es la unidad mnima de informacin "isual, y est caracteri,ado por su forma, tamao, color y ubicacin. El punto es la unidad mnima de informaci n visual, " est caracterizado por su forma ,generalmente circular, pero tambi!n

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

22

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com puede ser rectangular, como ocurre en los monitores, triangular o una mancha sin forma definida., por su tama-o, por su color " por la ubicaci n que tenga dentro de la composici n grfica.

Las principales caractersticas del punto son% 'iene un gran poder de atracci n visual, creando tensi n sin direcci n. &uando se sit$an pr ximos dos puntos pueden producir sensaciones de tensi n o de direcci n, creando en la mente del espectador una lnea recta imaginaria que los une. 2i se sit$an diferentes puntos en prolongaci n sugieren una direcci n, un camino, ms acentuada cuanto ms pr ximos est!n los puntos entre s.

&uando se agrupan varios puntos pueden definir formas, contornos, tonos o colores ,pensemos en la pintura impresionista..

Los puntos aislados son poco usados en el dise-o 8eb. 2in embargo, las sucesiones de puntos pr ximos son un buen elemento para dirigir la atenci n del visitante, para guiar su mirada a una zona concreta, para establecer relaciones entre elementos o para separar zonas de la pgina.
Artculo por

Luciano Moreno

La l nea
La lnea es el elemento bsico de todo grafismo y uno de los ms usados. 'epresenta la forma de e presin ms sencilla y pura, pero tambi+n la ms dinmica y "ariada. La lnea es el elemento bsico de todo grafismo " uno de los ms usados, teniendo tanta importancia en un grafismo como la letra en un texto. *epresenta la forma de expresi n ms sencilla " pura, pero tambi!n la ms dinmica " variada. Est formada por la uni n de varios puntos en sucesi n, pudi!ndose asimilar a la tra"ectoria seguida por un punto en movimiento, por lo que tiene mucha energa " dinamismo. 2u presencia crea tensi n " afecta al resto de elementos cercanos a ella. Las principales propiedades de la lnea son% &ontiene gran expresividad grfica " mucha energa.

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

23

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com &asi siempre expresa dinamismo, movimiento " direcci n. &rea tensi n en el espacio grfico en que se encuentra. &rea separaci n de espacios en el grafismo. La repetici n de lneas pr ximas genera planos " texturas.

En una composici n define direccionamiento, que estar ms acentuado cuantas ms lneas paralelas ha"a. Esta cualidad se puede usar para dirigir la atenci n en una direcci n concreta, haciendo que el espectador observe el lugar adecuado.

7na lnea divide o circunda un rea, se encuentra en el borde de una forma. Expresa separaci n de planos, permitiendo al dise-ador usarla como elemento delimitador de niveles " reas en la composici n.

Las propiedades de una lnea vendrn definidas por su grosor, su longitud, su orientaci n ,direcci n. respecto a la pgina, su ubicaci n ,posici n., su forma ,recta o curva. " su color. Estas propiedades se vern afectadas tambi!n por el n$mero de lneas que ha"a en la composici n, su proximidad " la orientaci n relativa entre ellas. La lnea es considerada como tal mientras la relaci n anchoSlargo no sobrepase una proporci n determinada. 7na lnea ms ancha que la mitad de su largo pierde la expresi n dinmica del trazo " adquiere la esttica de una superficie cuandrangular. La uni n sucesiva de lneas conforma un trazo. Los trazos dan volumen a los objetos que dibujamos " permiten representar simb licamente objetos en la composici n, eliminando de ellos toda informaci n superflua " dejando s lo lo esencial.

La lnea pueden tener los bordes lisos o dentados, con extremos rectos, redondeados o en punta. 2u cuerpo puede ser s lido o texturado, " su direcci n puede ser curva o recta. R cada una de estas caractersticas matizar la forma en que es interpretada una lnea por el espectador. /odemos considerar diferentes tipos de lneas, cada uno de los cuales tiene sus propias cualidades%

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

24

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com -nea recta 9efine 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 mu" abundante en el entorno humano, que necesita de ellas para dar estabilidad a sus creaciones.

La lnea recta horizontal expresa equilibrio, calma, equilibrio estable. 5o ha" estabilidad sin una lnea recta horizontal de referencia, una lnea de horizonte, "a que nos movemos en un plano horizontal. Las lneas rectas horizontales son mu" usadas en las pginas 8eb, tanto que el lenguaje 4'+L proporciona una etiqueta especfica para introducirlas, 4*. 2e 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 elevaci n, movimiento ascendente, actividad. 'ambi!n expresa equilibrio, pero inestable, como si estuviera a punto de caer. Esto se puede corregir haciendo trabajar las lneas verticales con otras horizontales de apo"o, que les darn la estabilidad de que carecen.

En una pginas 8eb, 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 tensi n, inestabilidad, desequilibrio. /arecen que estn a punto de caerse. 9entro de las lneas inclinadas, la que forma @:V con la horizontal es la ms estable " reconocible.

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

25

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com -nea curva Es la lnea ms libre " la ms dinmica de todas, pudiendo sugerir desde un movimiento perfectamente definido hasta un movimiento ca tico, sin reglas.

Est mu" asociada al ser humano, que escribe " dibuja casi siempre con lneas curvas. Las curvas ms com$nmente usadas en dise-o grfico digital son las curvas P!zier. Este tipo de curvas fue desarrollado por /ierre P!zier por encargo de la empresa *enault, que buscaba una familia de curvas representables matemticamente ,son curvas de tercer grado. que permitieran representar las curvaturas suaves que deseaban dar a sus autom viles.

7na curva P!zier queda totalmente definida por cuatro puntos caractersticos, los puntos inicial " final de la curva " dos puntos de control ,manejadores. que definen su forma. /ara modificar su forma, basta cambiar de posici n uno de sus puntos de control. 2on curvas de manejo poco complejo " mu" elegantes, con un desarrollo mu" suave, capaces de adaptarse a casi cualquier forma imaginable, por lo que son mu" usadas para dise-ar logotipos e iconos " para copiar cualquier figura. 'ambi!n son enormemente verstiles, pudiendo adoptar desde curvaturas mu" suaves ,casi lneas rectas. a curvaturas mu" fuerte ,curvas complejas., pasando por todos los valores intermedios. /ueden, incluso, cambiar de c ncavas a convexas alrededor de un punto.

En el dise-o 8eb, el uso de lneas curvas aisladas est mu" limitado. Es ms com$n 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..

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

26

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

7n factor a tener en cuenta siempre que se trabaje con lneas curvas en una pgina 8eb 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 tama-o del objeto.

7na soluci n a este problema visual es incluir las lneas curvas como imgenes en formato 8eb ,13(, 0/1, /51, etc.. " 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 " el fondo, de un color intermedio entre ellos. +ra/o 7n trazo es el elemento lineal formado por la uni n sucesiva de diferentes lneas. Es tal vez la forma grfica ms humana, la que mejor representa nuestra forma natural de dibujar.

7n trazo heredar las propiedades de las lneas que lo crean, existiendo trazos rectos, curvos o mixtos.
Artculo por

Luciano Moreno

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

27

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

El contorno
!l contorno es el ob&eto grfico creado cuando el tra,o de una lnea se une en un mismo punto. /odemos 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 " acaba en un mismo punto.

'odo contorno delimita dos zonas, una acotada ,el contorno " su interior. " 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 " sus propiedades. &uando una lnea se cierra sobre s misma, el contorno creado determina un espacio interno, crendose una tensi n entre este espacio " sus lmites, otorgando a la lnea creadora un gran poder de atracci n visual.

Las cualidades grficas de un contorno estarn definidas por las lneas que lo crean " las propiedades de !stas. Los principales contornos son el cuadrado, la circunferencia " el tringulo, a los que podemos a-adir los contornos mixtos " los orgnicos.
Artculo por

Luciano Moreno

El cuadrado
!lementos de diseo# el cuadrado. El cuadrado es la figura geom!trica formada por cuatro lneas rectas de igual longitud, denominadas lados, que forman ngulos perfectamente rectos en los puntos de uni n entre ellas ,esquinas a F>V..

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

28

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

El cuadrado es una figura mu" estable " de carcter permanente, asociada a conceptos como estabilidad, permanencia, honestidad, rectitud, limpieza, esmero " equilibrio. La figura derivada del cuadrado por modificaci n de sus lados es el rectngulo, de propiedades anlogas al cuadrado, aunque sugiere menos perfecci n " estabilidad.

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

Los rectngulos horizontales aportan solidez, estabilidad, dan la sensaci n de ser difciles de volcar. &uando son de gran tama-o permiten que la mirada el espectador se pasee de un lado a otro, en sentido horizontal.

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

29

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Los rectngulos verticales, por el contrario, da sensaci n 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 sensaci n de elevaci n, " es apto para representar aquellos objetos que en la realidad tienen una forma ascendente.

Los cuadrados " rectngulos vern modificadas sus cualidades visuales seg$n su forma, tama-o, color del contorno " rea interna, ubicaci n, escala, etc. La pro"ecci n tridimensional del cuadrado es el hexaedro o cubo, cuerpo geom!trico mu" asociado a las obras propias del ser humano, como los edificios. Los rectngulos son las formas ms naturales para un ordenador, "a que el monitor " las ventanas de los sistemas operativos grficos son todas rectngulos horizontales. 7na pgina 8eb posee una forma claramente rectangular, definida por la ventana del navegador. Adems, los elementos 8eb ,tablas, capas, animaciones (lash, applets de 0ava, etc.. son de forma rectangular. Esto hace que los rectngulos sean especialmente adecuados para su uso en las pginas 8eb, proporcionando equilibrio " estabilidad a las mismas.

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

30

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 2in embargo, es conveniente seguir una serie de pautas a la hora de usar rectngulos, con vistas a evitar la monotona " el aspecto artificial de una pgina demasiado cuadriculada% &ada rectngulo debe estar alineado con los dems objetos de la pgina que le rodean. El tama-o del rectngulo debe ser ma"or que el contenido del mismo, lo suficiente como para que !ste se presente libre, con espaciados convenientes por los cuatro lados. 5o usar en las tablas bordes por defecto, es decir, grises " con efectos de relieve. 2i se usan para separar l gicamente registros, es mejor asignarles un borde fino ,sobre = pxel. de un color que contraste suficientemente con el borde, pero que no resulte llamativo en exceso. 9e todas formas, es preferible utilizar otros m!todos para obtener la separaci n, como filas de dos colores alternativos ,pijamas.. 2i de desea situar en la pgina varios rectngulos de funcionalidad anloga ,caso de elementos de un men$ de navegaci n, por ejemplo., es preferible posicionarlos en series horizontales, "a que se percibirn ms como una lnea que como un conjunto rectangular.

La dureza visual de los rectngulos se puede suavizar a-adi!ndoles otros elementos que los modifiquen en parte. 7n ejemplo de esto son las tablas o botones con esquinas redondeadas, que rompen la monotona de la forma rectangular.

)tra forma de compensar la rigidez de las formas rectangulares es combinarlas en la composici n con formas curvas que aporten libertad " dinamismo.
Artculo por

Luciano Moreno

La circunferencia
!lementos de diseo# la circunferencia. La circunferencia es un contorno contnuamente curvado, cu"os 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,

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

31

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com considerada perfecta por nuestros antepasados. 2u direccionalidad es la curva, asociada al movimiento, al encuadramiento, a la repetici n " al calor.

La forma circular produce un movimiento de rotaci n evidente, posee un gran valor simb lico, especialmente su centro, " tiene connotaciones psicol gicas como protecci n, inestabilidad, totalidad, movimiento contnuo o infinitud. Es tpico representar tambi!n los espacios cerrados, herm!ticos, con circunferencias o crculos. &ontornos derivados de la circunferencia son el valo " el ovoide, con cualidades parecidas a las de !sta, pero que expresan a$n ms inestabilidad " dinamismo, aunque el movimiento perfecto sea una cualidad propia de la circunferencia. La pro"ecci n tridimensional de la circunferencia es la esfera, el cuerpo geom!trico ms perfecto, el que contiene un ma"or volumen en un menor espacio, el que define la forma tanto de los tomos como de los cuerpos celestes. La circunferencia " el crculo son tal vez los elementos geom!tricos ms perfectos " estables, aunque cargados de una gran carga dinmica. Las formas circulares son mu" difciles de representar en una pgina 8eb, "a que todos los elementos que nos facilita el lenguaje 4'+L son rectangulares, aunque aparenten no serlo. Adems, las formas curvas se visualizan mu" mal en los monitores, debido a la interpretaci n grfica mediante pixels, que origina efectos de escalado indeseables. )tro inconveniente de usar crculos en el dise-o 8eb deriva precisamente de ser la forma que contiene ms rea en el menor permetro, "a que la ma"ora de las veces al dise-ador le interesa precisamente lo contrario, reducir al mnimo el rea " maximizar al mximo el permetro.

'al vez la $nica forma de incluir una forma circular completa en una pgina sea inclu"!ndola en una imagen. /ero cualquier imagen es de por s rectangular como objeto 4'+L, lo que nos obligar a desperdiciar todo el espacio comprendido entre el contorno circular " los bordes de la imagen, apareciendo espacios sin contenido no deseables en la ma"ora de los casos. Este efecto negativo se puede paliar inclu"endo dentro de la imagen la forma circular " los dems objetos que le rodean en la composici n " 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. 7na mejor soluci n 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 4'+L ocupando espacios vacos alrededor de la forma circular.

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

32

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

(ormas ms sutiles " 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 sucesi n.
Artculo por

Luciano Moreno

Contornos mi!tos
!lementos de diseo# contornos mi tos, que son los que estn compuestos por "arios tipos de contornos. +ediante combinaciones de los elementos bsicos " 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 orientaci n, de su tama-o, de espesor del trazo lmite, de su color " de su ubicaci n.

4a" que tener en cuenta, en cualquier caso, que el predominio de la referencia horizontal?vertical da una sensaci n de equilibrio, mientras que el dominio de la direcci n diagonal aporta inestabilidad.

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

33

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Los contornos mixtos son mu" usados en las pginas 8eb, a las que aportan variedad en el dise-o " definici n de espacios de informaci n, 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 13(, 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 sit$a otra capa con el texto.

'ambi!n es posible incluirlas como ficheros 2H( ,+acromedia (lash., que aportan gran definici n a las zonas curvas, sin producirse efectos de escalado, al ser tratadas como grficos vectoriales. El inconveniente es entonces la actualizaci n de los contenidos textuales, "a que hace falta para ello acceder al fichero (LA fuente del grfico
Artculo por

Luciano Moreno

Contornos orgnicos
!lementos de diseo# contornos orgnicos, que estn formados por cur"as libres. Los contornos orgnicos son aquellos formados por curvas libres.

2on los contornos ms abundantes en la naturaleza, " sugieren fluidez, desarrollo, humanidad, inspirando sensaciones favorables en el espectador.

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

34

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Los contornos orgnicos son utilizados abundantemente en pintura " dibujo artstico, "a que son la base para representar figuras humanas, bodegones, paisajes, etc. 2in embargo, son mu" difciles de incluir en una pgina 8eb, tanto por aspectos t!cnicos ,deben incrustarse como imgenes. como por su aspecto visual, que puede chocar con la naturaleza propia de una pgina, composici n ordenada en la que predominan las formas rectangulares. 5o obstante, bien usados pueden dar un toque natural o humano a la pgina.

7na posible soluci n, si deseamos introducir en una pgina contornos orgnicos, es adaptarlos lo ms posible a un contorno mixto, transformando las curvas libres en curvas P!zier, porciones de circunferencias o lneas rectas. )tra soluci n es introducir fotografas o ilustraciones que los contengan.
Artculo por

Luciano Moreno

El diseo e"uilibrado# Introduccin

!studio de las reglas bsicas del diseo grfico. -o e iste una frmula que de un diseo infalible pero s unas reglas bsicas. /odemos definir el dise-o de una composici n grfica como la adecuaci n 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.

Curso prctico de diseo web Parte I: http://www.desarrolloweb.com/manuales/47/

( )os manuales de DesarrolloWeb.com tienen el copyright de sus autores. *o reproducir sin autorizaci+n.

35