Curso Diseno Web Parte1 PDF

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.
1
expresin 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 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
" 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 representacin de ideas mediante grafos experiment su ma"or 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 seg$n 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. &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)
2
&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
confeccin 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
3
/osteriormente, 0ohann 1utenberg invent la imprenta, artefacto capaz de reproducir en grandes cantidades " de forma
cmoda 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 aparicin de unos
profesionales especializados en su manejo, los tipgrafos " 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
lgica, clara, armoniosa " bella.
)tro gran impulsor del desarrollo del dise-o grfico fue la *evolucin 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
4
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 comunicacin.
4aba que convencer al p$blico de las ventajas de un producto o marca, " para ello nada mejor que mensajes concisos,
cargados de componentes psicolgicos, con dise-os cada vez ms elaborados, que se hacan llegar al ma"or n$mero posible
de personas. El cmo se transmita la informacin lleg incluso a superar en importancia a la misma informacin
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 aparicin de profesionales dedicados
exclusivamente a desarrollarlas " ponerlas en prctica% los dise-adores grficos.
En el siglo 66, hicieron su aparicin 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 aparicin 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 introduccin de unos elementos intermedios, denominados #3nterfaces de 7suario#, cu"a misin 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 teto
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 simplificacin en
el manejo de las aplicaciones, surgiendo el concepto de #3nterface 1rfica de 7suario# en toda su extensin, 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.
5
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 interaccin " 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 presentacin, los navegadores 8eb, que imponan serias limitaciones al dise-o, que
necesitaban sistemas de navegacin 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
programacin ,4'+L, 0ava2cript, 94'+L., es evidente que era necesaria la aparicin 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
6
Diseo grfico
Una aproimacin 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 funcin principal del dise-o grfico ser entonces transmitir una informacin 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 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 dise-ador debe
conocer a fondo los diferentes recursos grficos a su disposicin " tener la imaginacin, 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 % tetos en un grafismo
'oda obra de comunicacin 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 ,comunicacin. con medios visuales ,grafismos.. 5o es el creador del mensaje, sino su int!rprete.
El principal componente de toda composicin grfica es pues el mensaje a interpretar, la informacin que se desea hacer
llegar al destinatario a trav!s del grafismo. Esta informacin se debe representar por medio de diferentes elementos grficos,
7
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 combinacin 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 saturacin.
La ubicaci&n% lugar que ocupa cada elemento grfico o agrupacin 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 agrupacin de elementos, conjunto total de colores
usado en un grafismo, disposicin relativa de los elementos con color " armona entre colores.
El contraste% intensidad de visualizacin de cada elemento con relacin 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 % disposicin espacial regular " 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 " total. /ero la unin 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 educacin " la memoria.
8
Diseo grfico en la web
!l diseo web "a ms all del diseo tradicional pues eisten 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 visualizacin. La ma"ora de los
usuarios se conectan todava a 3nternet con un mdem, con velocidades tericas 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 resolucin empleada por el usuario en su monitor. " con unas capacidades de
interpretacin 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.
9
)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 interpretacin 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 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 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 ,ejecucin de cdigos de lenguajes de programacin tanto en cliente como en servidor,
acceso a bases de datos en servidores remotos, etc.., procesos que a-aden tiempo a la presentacin 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.
10
Componentes grficos de un ordenador
%escripcin de los principales componentes grficos de un ordenador# La tar&eta de grficos y el monitor.
Los principales componentes de un ordenador encargados de la interpretacin " presentacin de colores son la tarjeta
grfica " el monitor.
La tarjeta gr!fica o de vdeo es el componente hard8are encargado de procesar los datos grficos que enva el procesador,
interpretarlos " codificarlos en voltajes adecuados que son enviados luego al monitor para su presentacin en pantalla.
+arjeta gr!fica
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. 'odos sabemos cmo es un monitor por fuera, "a que estamos acostumbrados a los monitores de los televisores,
algo tan com$n en nuestras casas. 3nteriormente, los monitores varan unos de otros en funcin de su calidad, de la forma
de manejar de voltajes " de la tecnologa grfica empleada.
,onitor C*+
Los monitores ms comunes son los &*' o de ra"os catdicos, formados por un tubo en cu"o interior se ha hecho el
vaco, en uno de cu"os extremos se sit$an tres ca-ones de electrones, uno por cada color primario, " en el otro una pantalla
de cristal, cu"a parte externa es la que ve el usuario.
11
+ubo de ra%os cat&dicos de un monitor C*+
Los electrones generados en los ca-ones por calentamiento son impulsados hasta la parte interna de la pantalla, que se
encuentra recubierta por peque-os grupos de fsforo pigmentado en cada uno de los tres colores primarios ,rojo, verde "
azul.. Estos grupos reciben el nombre de tradas, " se corresponden con un punto de la pantalla, denominado pxel, que
aparecer de un color u otro seg$n la intensidad de los electrones que le llegue de cada ca-n.
7na caracterstica importante es el paso de punto ,dot pitch., distancia diagonal entre dos puntos vecinos del mismo color,
que determina el mnimo tama-o de un detalle que es capaz de resolver una pantalla. &uanto menor sea esta distancia,
ma"or ser la nitidez. 2e mide en puntos por pulgada ,ppp..
La resolucin mxima distinguible en una pantalla de C>>x;>> es de DE ppp " en una de =>E@xD;C es de FG ppp. Estos son
valores tericos " en la prctica son algo ma"ores.
Paso de punto % piel
2eg$n 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 mu" buena.
&on objeto de que los electrones lleguen de forma ordenada e impacten justo en el punto adecuado, entre la pantalla " los
ca-ones se sit$a una mscara o rejilla que filtra los electrones " los dirige a sus puntos destino de forma adecuada.
La representacin de una imagen en pantalla se realiza mediante barridos de los ra"os de electrones, que recorren toda la
12
pantalla de izquierda a derecha " 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 4z ,hertzios. " debe estar por encima de ;> 4z,
preferiblemente D> u C>. 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 Hindo8s mediante las selecciones%
3nicio I /anel de control I /antalla I &onfiguracin I )pciones avanzadas I +onitor
'ambi!n podemos en esta pantalla cambiar la frecuencia de refresco, pero antes de hacerlo es aconsejable consultar el
manual del monitor, "a que una frecuencia incorrecta puede resultar bastante perjudicial.
,onitor -C)
)tro tipo de monitores son los L&9 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, " en que los haces de electrones son guiados por polarizacin
magn!tica. Adems, en los monitores L&9 trabajan con una trama de pxeles concreta, siendo fijo el tama-o de cada uno,
por lo que al cambiar a una resolucin inferior pueden quedar franjas de pxeles desactivadas.
2ea cual sea el tipo de tarjeta grfica " monitor usado, es fundamental tener instalados " actualizados los drivers propios de
estos componentes.
7n driver es un conjunto de libreras de soft8are especficas encargadas de configurar " controlar los dispositivos de
hard8are. &ada componente necesita para funcionar bien los drivers adecuados, que generalmente vienen junto a !ste en un
disquete o en un &9.
&on el avance de las funcionalidades de los sistemas operativos " de los dems componentes de soft8are " hard8are de los
equipos informticos, se hace necesaria una actualizacin constante de los drivers de los monitores " tarjetas de video.
Estas versiones actualizadas suelen ofrecerlas los distintos fabricantes en sus sitios 8eb, por lo que es mu" 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 " de evitar incompatibilidades con los nuevos sistemas operativos.
2i tenemos instalada una tarjeta grfica en nuestro ordenador, generalmente los drivers de esta ,controlador. son los
responsables de manejar de forma adecuada el monitor. /ara acceder a la propiedades del controlador, basta seguir la ruta%
3nicio I /anel de control I /antalla I &onfiguracin I )pciones avanzadas I +onitor I /ropiedades I &ontrolador
9esde esta ventana podemos ver el tipo de controlador instalado " si est funcionando bien o tiene alg$n
problema. 'ambi!n actualizarlo, para lo que es necesario tener previamente los nuevos drivers, "a que tendremos que indicar
su localizacin en nuestros discos duros.
7na consideracin importante% ha" que estar seguro que el driver que vamos a instalar se corresponde con el de nuestra
tarjeta grfica o monitor, "a que un driver inadecuado puede originar un mal funcionamiento de los componentes grficos.
13
Resolucin de pantalla
$onsideraciones relati"as a los distintos tipos de pantalla que pueden tener los "isitantes y el espacio
disponible para cada caso.
Las aplicaciones encargadas de presentar las pginas 8eb son los navegadores ,bro8sers., entre los que cabe destacar por su
importancia " difusin 3nternet Explorer, 5etscape 5avigator " )pera.
La interfaz de un navegador, en su modo estndar, presenta al usuario una o ms barras superiores ,de men$s, de direccin,
etc.., una barra inferior ,la barra de estado. " un espacio principal, la ventana, en el que son presentadas las pginas 8eb.
La forma de esta ventana es siempre rectangular, pero su tama-o vara, dependiendo del monitor " de la tarjeta grfica.
/odemos hablar de dos tama-os de pantalla diferentes%
+amao absoluto% es el tama-o #real# de la ventana del monitor, medido generalmente en pulgadas. 9epende del
monitor.
*esoluci&n o tamao relativo % viene determinada por el n$mero 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. 9epende de la tarjeta grfica.
El tama-o absoluto se suele expresar en pulgadas de diagonal ,= pulgada J E:,@ mm.. El ms com$n en la actualidad es de
=DKK en ordenadores de sobremesa, aunque todava quedan bastantes equipos antiguos con monitores de =:KK " existen en el
mercado bastantes de E=KK. El tama-o absoluto de los monitores de los equipos porttiles suele ser de =@?=:KK.
En cuanto a la resolucin, los valores ms comunes son de C>>x;>> " de =>E@ xD;C pixels, aunque quedan todava usuarios
que trabajan por debajo, a ;@>x@C>, " por encima, a resoluciones de ==:ExC;@ " =EC>xF;> pixels.
El tama-o absoluto " la resolucin deben estar en concordancia para una visualizacin correcta, siendo valores aceptables
los siguientes%
=@# ? =:#% *esolucin mxima apreciable% C>>x;>>
=D#% *esolucin mxima apreciable% C>>x;>> =>E@xD;C
E=#% A partir de =>E@ x D;C
Las posibles resoluciones de trabajo de un equipo dependen sobre todo de la calidad del monitor " de la tarjeta grfica del
ordenador, " se configuran, en sistemas operativos Hindo8s, bien haciendo clicL con el botn derecho del ratn sobre el
escritorio, seleccionando la opcin /ropiedades " accediendo a la pesta-a &onfiguracin, bien desde 3nicio I /anel de
control I /antalla.
La importancia de la resolucin de pantalla sobre la forma de ser visualizadas las pginas 8eb en la ventana del navegador es
mu" importante. A ma"or resolucin se dispone de ms puntos de informacin para presentar los elementos en pantalla,
pero estos puntos son ms peque-os, con lo que los elementos de la interfaz ,textos, imgenes, objetos de formulario, etc..
se ven ms peque-os.
+amao de p!gina % resoluciones
14
2i dise-amos 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. /or el contrario, aquellos usuarios que la visualicen a resoluciones
ma"ores tendrn demasiado espacio en pantalla para tan poca pgina, por lo que les quedar bastante espacio vaco, sin
contenidos.
/ara solucionar estas diferencias, lo normal es que se dise-en las pginas 8eb para una resolucin base, generalmente la ms
usada en la actualidad ,C>>x;>>., " se constru"an internamente mediante tablas o capas de tama-os relativos, con anchuras
definidas en M, 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 " que, en el caso de
resoluciones ma"ores, el dise-o de la pgina puede verse seriamente afectado al modificar sus elementos las dimensiones
originales.
)tra posibilidad es maquetar toda la pgina dentro de un contenedor padre ,una tabla o capa. " asignar a !ste una alineacin
centrada, con lo que la pgina quedar en el centro de la pantalla si se usa una resolucin ma"or que la de dise-o.
Colores en un ordenador
$mo traba&an los ordenadores para codificar un color. !l formato '().
El ojo humano puede distinguir aproximadamente entre D " => millones de colores. 9ebido a esto la vista es para nosotros
el principal sentido que nos une con el exterior, de tal forma que sobre el C>M de la informacin que recibimos del mundo
exterior es visual.
/intores " dise-adores grficos utilizan esta capacidad humana de apreciar colores para crear obras que profundicen en el
alma " que inspiren sentimientos en los seres que las contemplan. /ero Nqu! podemos hacer cuando debemos expresarnos
con un n$mero limitado de coloresO.
Los ordenadores trabajan con tres colores bsicos, a partir de los cuales constru"en todos los dems, mediante un proceso
de mezcla por unidades de pantalla, denominadas pixels. Estos colores son el rojo, el azul " el verde, " el sistema s definido
se conoce como sistema *1P ,*ed, 1reen, Plue..
&ada 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 n$mero del
color asociado seg$n la paleta usada. &on esta informacin, la tarjeta grfica del ordenador genera unas se-ales de voltaje
adecuadas para representar el correspondiente color en el monitor.
A ms bits por pxel, ma"or n$mero de variaciones de un color primario podemos tener. /ara E:; colores se precisan C bits
,sistema bsico., para obtener miles de colores necesitamos =; bits ,color de alta densidad. " para obtener millones de
colores hacen falta E@ bits ,color verdadero.. Existe tambi!n otra profundidad de color, GE bits, pero con ella no se
consiguen ms colores, sino que los que usemos se muestren ms rpido, "a que para el procesador es ms fcil trabajar con
registros que sean potencia de E ,recordemos que trabaja con n$meros binarios..
15
&uanto ma"or es el n$mero de colores, ma"or ser la cantidad de memoria necesaria para almacenarlos " ma"ores los
recursos necesarios para procesarlos. /or este motivo, los ordenadores antiguos disponen de paletas de pocos colores,
normalmente E:;, al no tener capacidad para manejar ms sin una p!rdida notable de prestaciones.
/ara representar un color en el sistema *1P se utilizan dos formas de codificacin diferentes, la decimal " la hexadecimal,
correspondi!ndose los diferentes valores con el porcentaje de cada color bsico que tiene un color determinado.
Porcentajes de color % c&digos
/or ejemplo, un rojo puro ,=>>M de rojo, >M de verde " >M de azul. se expresara como ,E::,>,>. en decimal, " como
Q((>>>> en hexadecimal ,delante de el cdigo de un color en hexadecimal siempre se sit$a un smbolo almohadilla..
9e los E:; colores bsicos, el propio sistema operativo de queda con @> para su gestin interna, con lo que disponemos de
E=; colores. 9e ellos, =C se corresponden con la gamas de los colores primarios, correspondientes a ; tonos de rojo, ; de
azul " ; de verde%
Gamas de colores primarios
R el resto, los colores secundarios, son combinaciones de estas gamas de colores primarios%
Colores secundarios
2i usamos una profundidad de color de E@ bits, correspondiente a millones de colores, disponemos de una amplia gama para
16
trabajar, pero siempre teniendo en cuenta que slo sern compatibles los colores que tengan su equivalente en el sistema de
E:; colores, es decir, aquellos en los que cada color primario viene definido por una pareja de valores iguales, debiendo estos
ser >>,GG,;;,FF,&& o ((.
&uando usamos una profundidad de color de =; 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 E:; colores ni en
millones de colores. /or ejemplo, Q;;GGFF es el mismo color a E:; " a millones, pero no es igual que el obtenido con miles
de colores.
&omo 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 ingl!s ,red, "ello8, olive, etc.., de tal forma que los modernos navegadores
interpretan el mismo " lo traducen internamente por su valor hexadecimal equivalente.
Calibracin del monitor
Una composicin grfica puede "erse con diferentes tonalidades dependiendo de la configuracin del
monitor. *enemos que calibrar el monitor para que el aspecto de nuestra obra sea el mismo en todos los
ordenadores.
Las composiciones grficas pueden aparecer de manera diferente en los distintos monitores, debido principalmente a la
diferencia en los parmetros que definen la calidad " las caractersticas luminosas " cromticas de cada uno de ellos.
Esto puede originar, por ejemplo, que al realizar un composicin seamos nosotros mismos los enga-ados, al no
corresponder los colores que vemos en pantalla a los reales que estamos codificando en el grafismo. ) que el aspecto visual
de una pgina 8eb dise-ada en un monitor mal configurado no se corresponda con al que luego vern los usuarios, con la
consiguiente p!rdida de control " de calidad que ello supone.
/ara 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 seg$n los mismos valores. Estos valores
suelen corresponderse con los que trae un monitor al salir de fbrica, " la recuperacin de los mismos recibe el nombre de
calibraci&n.
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.
17
El m!todo ms simple de calibracin pasa por el uso de imgenes Acartas de ajusteB, similares a las que aparecan en el
televisir antes de empezar la emisin. 2on imgenes formadas por diferentes lneas de colores, unas finas " 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 m!todo poco fiable, "a que los ajustes son totalmente subjetivos.
)tro m!todo de calibracin ms avanzado son las herramientas de gestin del color que facilitan ciertos programas de
aplicacin, como Adobe /hotoshop, que inclu"e una herramienta bsica, denominada Adobe 1amma, que puede ser
utilizada para eliminar tonalidades de color " estandarizar la presentacin de las imgenes. A esta herramienta se accede a
trav!s de men$ A"uda I 1estin del color I Abrir Adobe 1amma, con el que accedemos a una pantalla que nos permite
ajustar los valores directamente o por medio de un asistente. 7na vez calibrado el monitor, los valores pueden ser
almacenados en un fichero para las sucesivas reconfiguraciones.
18
Calibrador de monitor
/ero sin duda la mejor forma de calibrar un monitor es utilizar hard8are especfico para ello. El funcionamiento vara seg$n
el dispositivo usado 7nos se conectan directamente al monitor para recogida de datos binarios, permitiendo un ajuste
individual directo de cada uno de los ca-ones. )tros 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 " proporcionando los
valores idneos de configuracin.
2ea cual sea el m!todo elegido, para una correcta configuracin del monitor deberemos ajustar una serie de parmetros,
entre los que se inclu"en los siguientes%
.rillo
'ambi!n llamado luminosidad, define la relacin no lineal entre la tensin de entrada " la luminancia de salida, es intrnseco
de la fsica del entorno de los ca-ones de electrones " no depende de la iluminacin ambiente.
9e 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 ,&*'. generan aproximadamente de C> a =>> cdSm T ,candela por metro cuadrado.. En el caso
de monitores L&9, no se admiten valores inferiores a =:> cdSm T.
En cuanto al tipo de ordenador, en un /& el brillo no se corrige internamente, por lo que si una imagen se ve bien en el /&
donde se crea, se ver igualmente bien en todos. En los +ac, por el contrario, existe una correccin adaptada al de las
primeras impresoras lser para +ac, por lo que una imagen creada en un +ac se ve algo ms oscura en un /&.
El brillo tpico de un monitor de /& es de E,G: ,US? >,=.. La de un sistema +ac es de =,C. /ara 3nternet se pueden crear las
imgenes ajustando la gamma a un valor intermedio ponderado entre /& " +ac.
Ajustes del brillo
2i el valor del brillo en un monitor es bajo, los colores luminosos se oscurecern, pareciendo grises. /or 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 " el ms oscuro de una imagen. &uanto
ma"or sea el valor de contraste, mejor ser la legibilidad.
2i tenemos una fotografa con lo un punto blanco " otro negro " estos mismos en un monitor, generalmente el contraste en
un monitor ,=D>%=. es superior al que se da en una fotografa ,=>>%=., pero si el ambiente est mu" iluminado, el punto negro
deja de ser negro " la relacin de contraste puede bajar bastante ,hasta :>%=.. Esta situacin se agrava cuando ha" reflejos en
la pantalla que, adems, producen fatiga al usuario.
19
Ajustes del contraste
/ara una correcta calibracin 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 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
2e debern ajustar los diferentes parmetros que definen las cualidades de los colores, como tono, saturacin, 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.
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
informacin visual que aporta una composicin.
&ada una de ellas posee un conjunto de caractersticas propias que las modifican " condicionan, entre las que destacan%
20
$orma% definida por disposicin geom!trica. La forma de una zona o contorno va a permitirnos reconocerlas como
representaciones de objetos reales o imaginarios.
)irecci&n% pro"eccin plana o espacial de una forma, continuacin imaginaria de la misma a$n despu!s de su finalizacin
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.
+etura% 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 trav!s de variaciones diminutas en la superficie del material, " se consigue en una composicin grfica
mediante la repeticin de luces " sombras o de motivos iguales o similares.
21
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 dimensin slo existe en el espacio real tridimensional,
pero se puede simular en una composicin grfica plana mediante t!cnicas de perspectiva, sombreado o superposicin.
'ambi!n, mediante el uso de fotografas, que introducen espacios tridimensionales en la composicin.
,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.
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 informacin visual, " est caracterizado por su forma ,generalmente circular, pero tambi!n
22
puede ser rectangular, como ocurre en los monitores, triangular o una mancha sin forma definida., por su tama-o, por su
color " por la ubicacin que tenga dentro de la composicin grfica.
Las principales caractersticas del punto son%
'iene un gran poder de atraccin visual, creando tensin sin direccin.
&uando se sit$an prximos dos puntos pueden producir sensaciones de tensin o de direccin, creando en la
mente del espectador una lnea recta imaginaria que los une.
2i se sit$an diferentes puntos en prolongacin sugieren una direccin, un camino, ms acentuada cuanto ms
prximos 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 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 lnea
La lnea es el elemento bsico de todo grafismo y uno de los ms usados. 'epresenta la forma de
epresin 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 expresin ms sencilla " pura, pero tambi!n la ms dinmica " variada.
Est formada por la unin de varios puntos en sucesin, pudi!ndose asimilar a la tra"ectoria seguida por un punto en
movimiento, por lo que tiene mucha energa " dinamismo. 2u presencia crea tensin " afecta al resto de elementos cercanos
a ella.
Las principales propiedades de la lnea son%
&ontiene gran expresividad grfica " mucha energa.
23
&asi siempre expresa dinamismo, movimiento " direccin.
&rea tensin en el espacio grfico en que se encuentra.
&rea separacin de espacios en el grafismo.
La repeticin de lneas prximas genera planos " texturas.
En una composicin define direccionamiento, que estar ms acentuado cuantas ms lneas paralelas ha"a. Esta cualidad se
puede usar para dirigir la atencin en una direccin 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 separacin de planos, permitiendo al
dise-ador usarla como elemento delimitador de niveles " 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. " su color. Estas propiedades se vern afectadas tambi!n por el n$mero de
lneas que ha"a en la composicin, su proximidad " la orientacin relativa entre ellas.
La lnea es considerada como tal mientras la relacin anchoSlargo no sobrepase una proporcin determinada. 7na lnea ms
ancha que la mitad de su largo pierde la expresin dinmica del trazo " adquiere la esttica de una superficie cuandrangular.
La unin sucesiva de lneas conforma un trazo. Los trazos dan volumen a los objetos que dibujamos " permiten representar
simblicamente objetos en la composicin, eliminando de ellos toda informacin superflua " dejando slo lo esencial.
La lnea pueden tener los bordes lisos o dentados, con extremos rectos, redondeados o en punta. 2u cuerpo puede ser slido
o texturado, " su direccin 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%
24
-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 elevacin, 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 tensin, 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.
25
-nea curva
Es la lnea ms libre " la ms dinmica de todas, pudiendo sugerir desde un movimiento perfectamente definido hasta un
movimiento catico, 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 automviles.
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 posicin 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 cncavas 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..
26
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 solucin 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 unin 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.
27
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 tensin entre este espacio " 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 " 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.
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 unin entre ellas ,esquinas a F>V..
28
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 modificacin de sus lados es el rectngulo, de propiedades anlogas al cuadrado, aunque
sugiere menos perfeccin " 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 slido. 3nvita a mirar su centro " pasear la mirada en espiral en
torno a ese punto.
Los rectngulos horizontales aportan solidez, estabilidad, dan la sensacin 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.
29
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, " 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, ubicacin, escala, etc.
La pro"eccin 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.
30
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
lgicamente 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 separacin, 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
navegacin, 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 composicin con formas curvas que
aporten libertad " dinamismo.
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,
31
considerada perfecta por nuestros antepasados. 2u direccionalidad es la curva, asociada al movimiento, al encuadramiento, a
la repeticin " al calor.
La forma circular produce un movimiento de rotacin evidente, posee un gran valor simblico, especialmente su centro, "
tiene connotaciones psicolgicas como proteccin, 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"eccin 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 interpretacin 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 composicin " 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 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 4'+L ocupando espacios vacos alrededor de la forma circular.
32
(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 sucesin.
Contornos mi!tos
!lementos de diseo# contornos mitos, 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 orientacin, de su tama-o, de
espesor del trazo lmite, de su color " de su ubicacin.
4a" 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.
33
Los contornos mixtos son mu" usados en las pginas 8eb, a las que aportan variedad en el dise-o " 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 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 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, "a que hace falta para ello acceder al fichero (LA fuente del grfico
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.
34
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, composicin ordenada en la que
predominan las formas rectangulares. 5o obstante, bien usados pueden dar un toque natural o humano a la pgina.
7na 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 P!zier, porciones de circunferencias o lneas rectas. )tra solucin es
introducir fotografas o ilustraciones que los contengan.
El diseo e"uilibrado# Introduccin
!studio de las reglas bsicas del diseo grfico. -o eiste una frmula que de un diseo infalible pero s
unas reglas bsicas.
/odemos definir el dise-o 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.
35
El dise-o grfico ha de tener en cuenta los aspectos psicolgicos de la percepcin humana " las significaciones culturales
que pueden tener ciertos elementos, eligiendo !stos de forma que cada uno de ellos tenga un porqu! en la composicin "
buscando un equilibrio lgico entre las sensaciones visuales " la informacin ofrecida.
Lo ms importante de toda composicin es el mensaje que sub"ace bajo ella. Es trabajo del dise-ador buscar la mxima
eficacia comunicativa, transmitiendo ese mensaje por medio de una composicin que impacte visualmente al espectador " le
haga receptivo.
Ahora bien, sin una disposicin adecuada de las formas, colores " agrupaciones, sin un equilibrio global en la composicin,
el mensaje no llegar de forma adecuada al espectador.
5o existe un m!todo mgico que consiga una composicin exitosa, pero s que existen una reglas bsicas de dise-o que
facilitan la transmisin de un mensaje por medio de una composicin grfica de forma efectiva.
Estas reglas son aplicables igualmente al dise-o de pginas 8eb, aunque sujetas a las limitaciones que impone este formato "
modificadas para adaptarlas a la interactividad " a las posibilidades multimedia del mismo.
36
Este va a ser el tema de este captulo de nuestro curso, estudiar las reglas bsicas de dise-o grfico efectivo " equilibrado%
proporciones, escalas, contrastes, agrupaciones, reticulados, alineaciones, simetras, equilibrio entre contenidos " jerarqua
visual.
El diseo e"uilibrado# Las proporciones
%ebemos tener en cuenta la definicin a utili,ar, los elementos grficos y las proporciones...
A la hora de comenzar una composicin, lo primero que debemos saber es el tama-o que va a tener !sta.
2i el soporte final de nuestro grafismo va a ser el papel, podremos dise-ar para una gran variedad de tama-os, desde los ms
peque-os ,tarjetas de visita, peque-os folletos. hasta los ms grandes ,posters, carteles para va"as publicitarias., aunque casi
siempre dise-aremos en alguno de los formatos 935.
,edidas papel formato )I0
mod
elo
tama
o
relacin
D,* -. /%01/23 0.0$/4 m5#67y80.303'
37
D,* -9 ./01/23 0.%/4 m5 #67y8%..%./'
D,* -/ ./0142. 0./4 m5 #67y80.303'
D,* -% :.0142. 0.4 m5 #67y8%..%./'
D,* -0 :.01%%:: %.0 m5 #67y80.303'
La relacin visual entre los distintos formatos 935 es la siguiente%
En el caso de una pgina 8eb, los tama-os posibles son mu" pocos, generalmente dos ,C>>x;>> " =>E@xD;C pxeles., pero es
de suma importancia decidir para cul de ellos se va a trabajar, "a que, aunque es posible dise-ar una pgina para que sea
compatible con ambas resoluciones, tan solo en una de ellas se visualizar tal " como la dise-emos.
El segundo paso ser elegir los elementos grficos " 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
38
destinatarios de la composicin " las caractersticas funcionales " comunicativas de cada elemento.
Ahora debemos definir qu! partes del rea de dise-o deben estar ocupadas por elementos " qu! partes van a quedar vacos,
sin contenido alguno. 2i dejamos muchos espacios vacos la composicin puede resultar descordinada, "a que ser difcil
establecer relaciones globales entre los elementos o entre los grupos de ellos. /ero si el n$mero de componentes es elevado,
podemos obtener una obra sobrecargada, difcil de entender, en la que no se distingue con claridad qu! es cada cosa " 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 mu" 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 seg$n lo hagan las propiedades del mismo, como su tama-o,
forma o color, pero sobre todo su proporcin, el peso visual que tenga en el total de la composicin.
3ndudablemente, la forma ms directa de marcar proporciones es mediante el tama-o relativo de los elementos. Los
elementos ms grandes, altos o anchos tienen una carga visual superior a los ms peque-os, cortos o finos, creando zonas de
atraccin ms intensas.
'ambi!n podemos delimitar proporciones en un grafismo mediante el color, con el que podemos definir distintas reas
tonales $tiles para distribuir de forma adecuada toda la informacin grfica. En este sentido, los colores puros " saturados
tienen un ma"or peso visual que los secundarios neutros, " estos ma"or que los terciarios poco saturados.
39
)tra t!cnica para definir proporciones es el uso de agrupaciones de elementos " la correcta distribucin de estas en el
escenario, lo que nos va a permitir estructurar de una forma u otra la composicin.
Proporci&n por agrupaciones
Este sistema suele dar buenos resultados, siempre que no abusemos de !l creando un excesivo n$mero de bloques
significativos, "a que entonces se restaran importancia unos a otros " se perdera la proporcionalidad buscada.
+s reglas prcticas referentes a la proporcin son%
Las formas regulares tienen menor peso que las irregulares.
Las formas alargadas " angulares alargan el campo de visin, creando zonas dominantes.
40
41

Curso Diseno Web Parte1 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso Diseno Web Parte1 PDF

Cargado por

Copyright:

Formatos disponibles

Tu mejor ayuda para aprender a hacer webs

También podría gustarte