Fundamentos bsicos de Diseo

2003 K S Wildermann
Traducido al Espaol por Vicky Sarinelli
(Versin del 15-04-03 reemplaza a la anterior)

Este documento intenta proveer informacin muy bsica relacionada al diseo, para
ayudar a los novatos a tomar el camino indicado. Los estudiantes de diseo podrn
pasar todo un ao slo para aprender la teora de diseo. As que, imagnense cunto
material podra escribirse. En todo caso, este documento es bsicamente una gua y por
ello, no pretende convertirlos en diseadores galardonados.
Para mantener brevedad, he excluido partes de informacin importante, las cuales
podrn encontrar en mis tips dentro del General Swish Help Forum (foro de ayuda
en Swish-Tutorials) http://www.swishtutorials.com/forum/index.php?act=ST&f=4&t=8030&s=aceefe888a4b3da9733b115ac6bd3a8b

Nuestro objetivo es el diseo de sitios web. Antes de entrar en este tema, necesitamos
tener una base, la cual se centra en las dos primeras partes.
Mis agradecimientos a
Lisa Abke por los logos de algunas empresas reconocidas
John Clark por fotos de grupos de gente.
Email: wildermann@swish-tutorials.com
Este documento fue especialmente preparado para ud. Prohibida su venta o distribucin.

1ra Parte

GENERAL
En todo lo que creamos, debemos elegir un solo maestro: la Naturaleza.
Leonardo da Vinci (1452-1519)

El diseo es subjetivo
Que un diseador sea bueno o malo, depende de quien lo juzgue. Como en la msica y
en la literatura, nuestro gusto por el diseo est en gran medida condicionado por la
cultura a la que pertenecemos, as como por nuestro medio ambiente, crianza y
educacin. En esta breve gua nos limitaremos a lo que generalmente es aceptado como
buen uso del diseo, desde un punto de vista cultural Occidental. La eleccin de esta
perspectiva se debe simplemente a que la mayora de los lectores, por no decir todos,
pertenecen a esta cultura o bien han sido educados bajo estndares Occidentales.
Colores, formas y texturas
El diseo est compuesto por tres elementos colores, formas y texturas. Los 3 deben
estar siempre presentes, de lo contrario no existira Diseo propiamente dicho. Y la
lnea? se preguntarn ustedes. La lnea est dentro de las formas, que a su vez estn
definidas, delineadas o compuestas por lneas. Ya que estos tres elementos son
fundamentales, veamos ahora cmo se utilizan en diseo.
Colores
El estudio de los colores es una ciencia en s misma. Tratar este tema en detalle nos
llevara libros enteros y est ms all del propsito de esta gua, como tambin escapa a
mi limitado conocimiento. Por ejemplo, los colores pueden transformarse en puros, fros
y clidos, dependiendo del tiempo del da y la fuente de luz solar. Esto es importante
sobre todo para los Diseadores de Interiores.
Sutilmente, los colores pueden afectar nuestro estado de nimo o psique. Se supone que
el rojo, por ejemplo, ayuda a abrir el apetito. Por eso es que los manteles de restaurante
generalmente son rojos o por lo menos, tienen rojo como color predominante. Tambin
significa bronca y peligro. El azul nos ayuda a relajarnos, promueve calma y armona.
El amarillo es rejuvenecedor; significa felicidad y promueve actividades que requieran
el uso de nuestro poder de razonamiento. Por supuesto, el amarillo se asocia tambin
con la cobarda. El verde es calmante para la vista y la psique. Por eso es que la
Naturaleza nos da tanto verde en forma de forestacin. Lstima que estemos utilizando
nuestra forestacin como si no existiera un maana.
Cmo se usan los colores?
Antes que nada, necesitamos una rueda de colores. La podrn obtener en libreras o
papeleras buenas, o negocios que vendan insumos para artistas.

La tpica rueda de colores es similar a la que se muestra arriba. Contiene doce colores,
los cuales varan gradualmente. Cada uno de estos colores puede tener millones de
tonalidades.
Los colores principales o primarios estn escritos en rojo. Estos son: rojo, amarillo y
azul, aunque en el concepto moderno hay cuatro: se suma el verde. Incidentalmente, el
negro y el blanco tambin son colores, pero generalmente no son considerados como
tales por el layman.
Se pueden crear vuestra propia rueda con colores adicionales. Por ejemplo, se le puede
agregar cuatro colores ms, como ser entre el amarillo (Y) y amarillo-verde (YG),
colocndolos en la siguientes proporciones (en porcentaje) 80Y20YG, 60Y40YG,
40Y60YG, 20Y80YG.
A mayor cantidad de tonalidades, ms sencillo ser determinar qu color combina o
contrasta con cul.

Figura A

Figura B

Figura C

En la rueda, los colores que estn opuestos diametricalmente (Fig A) se complementan

uno a otro. Estos dos no deben usarse en iguales proporciones, es decir, cada uno
ocupando un 50% de una rea determinada, si no que uno deber usarse en la mayor
parte del rea, mientras que el otro se usar mucho menos, slo para dar el efecto
general.
Cualquiera de tres o cuatro colores adyacentes entre s (Fig B) estn en armona. Esto se
puede apreciar en la Naturaleza misma, por ejemplo, flores amarillas entre hojas verdes.
Si no sabemos cmo combinar colores, el mejor mtodo es observando la naturaleza.
La Figura C muestra sets de tres colores separados por un 3ro. Si se elige cualquiera de
esos sets se crea una relacin basada en la pureza del color y constituye un diseo bien
balanceado. Sin embargo, no es necesario usar los tres colores. En muchos casos, con
dos es suficiente. Ya sea que usamos dos, o los tres, uno de estos siempre actuar como
color dominante, o sea, ocupando la mayor parte del espacio.
Si observamos en la Naturaleza, tenemos excelentes ejemplos de buenas combinaciones
de colores. Notamos los colores de las flores en las hojas, que emanan de ramas y
tronco, que emana a su vez de la tierra, de agua de mar, playa y formaciones rocosas,
etc.
Como para tener en cuenta, el genio Leonardo Da Vinci nos recomienda elegir slo un
maestro en todo lo que creamos: la Naturaleza.
Formas
El uso de las formas en diferentes tamaos y tipos, puede contribuir a que nuestro
diseo sea interesante. Sin embargo, todo es su justa medida. Una pgina se puede ver
bien slo con dos tipos de formas, cuadrado y rectngulo, por ejemplo; sin embargo,
debemos varias sus tamaos y
posiciones.
En la derecha tenemos dos pginas de
ejemplo. La de la izquierda es
clnicamente limpia y precisa, pero es
aburrida ya que los cuadrados son
iguales en tamao y estn
posicionados de la misma forma. En

la pgina de la derecha, tenemos formas de diferentes tamaos, que estn posicionadas

para dividir el rea ocupada por copia para presentar una apariencia ms balanceada.
Observen cunto ms interesante, viva y clida es esta pgina. Si la de la izquierda es un
grupo de soldados marchando en lnea, la de la derecha es una fiesta llena de diversin.
Hay otras maneras de trabajar con formas
sobre nuestra pgina, como se demuestra
en las pginas de ejemplo de la izquierda.
La primera tiene el fondo dividido en dos,
verticalmente, de manera que vemos cinco
formas. Cinco? Si, la pgina misma y el
rea cubierta por el texto son formas
tambin. En la de la derecha, el texto est
formateado delineando formas, un
tringulo invertido y un crculo.
Tanto en fotografa como en pintura, nos ensean a que el horizonte debe estar
posicionado aproximadamente a 2/3 por sobre nuestro marco o bastidor. Debemos
recordar, sin embargo, que esta regla no tiene que aplicarse indefectiblemente. Se aplica
cuando pintamos o fotografiamos una escena desde abajo, por ejemplo. Tomemos una
foto de una parte de Pars, tomada desde la cima de la torre Eiffel, y esta regla pierde
aplicacin. Dicha regla funciona para nuestras pginas web siempre y cuando la
dividamos horizontalmente en dos.
Quieren un rectngulo perfecto? No hay problema. Los lados deben estar en el Golden
Ratio. El Golden Ratio o Golden Mean es 1:pi, donde pi es 6.18033989 infinito (el
decimal es en realidad infinito). Para este fin, lo tomamos como 1:1.6. La naturaleza lo
aplica en el diseo de la forma humana y otras especies, antiguas civilizaciones lo
utilizaban para disear pirmides y monumentos que se consideran bellsimos an en la
actualidad, aunque ya no estn intactos, como el Partenn en Atenas; as como fue
utilizado por genios como Da Vinci y Miguel Angel en sus pinturas.
Texturas
Las texturas hacen que nuestro
diseo sea ms interesante. Como
trabajamos con diseo bidimensional, nuestra nica
alternativa es imitar las texturas. Una
vez ms, la palabra clave es
moderacin. De hecho, ni siquiera es
necesario utilizarlas en todas las
pginas. Asimismo, las texturas no
necesariamente representan objetos
conocidos, tales como arena, granito
o piel de cabra. Un rectngulo que
contiene lneas, horizontales o verticales, tambin puede servir como textura. En la
pgina de la derecha, las barras del men en la izquierda y la lneas a la derecha pueden
tomarse como textura.

2da Parte

DISEO DEL ESPACIO DE

TRABAJO (LAYOUT)
Una encuesta llevada a cabo aos atrs,
revel que lo primero que miramos
cuando abrimos algn material impreso
(libros, revistas, diarios, etc.), es el
extremo superior derecho de la pgina
derecha. Abran un diario ahora, y vern
que es verdad.
Cuando pasamos la vista por la pgina a la
izquierda, tambin nos vamos a focalizar
en el extremo superior derecho, a menos
que haya algo demasiado llamativo en
alguna otra parte. Por eso es que los
diseadores de layouts siempre colocan lo
que quieren que la gente lea primero en el
extremo superior derecho de la pgina.
Existen, por supuesto, otros mtodos de
llamar la atencin del lector, por ejemplo,
colocando un titular en letra grande,
utilizando palabras llamativas y
ponindolas en algn otro lado de la
pgina. Pero si bien un diario puede ser lo
suficientemente grande como para
contener varias palabras de un tamao de
244 puntos, por ejemplo, las pginas de
revistas o las ventanas de un explorador de
internet, no lo son. En la pgina de la
izquierda, se supone que es obvio lo que
quiero que lean primero.
Por otra parte, nuestros ojos generalmente
se focalizan en las imgenes o cualquier
tipo de grficos en una pgina,
especialmente si son en colores. Lo que nos lleva a tratar otro punto importante. Si
tenemos fotos de gente (individuos solos o en
grupo), no debemos colocarlas de forma que
estn mirando hacia el lado contrario del texto
de la pgina. Por qu no? Porque las fotos que
se posicionan as nos hacen desviar la vista de la
pgina, an si lo que queremos es leer el texto
que se encuentra en la pgina. Los mensajes
conflictivos en nuestro cerebro hacen que esto
resulte una experiencia incmoda, aunque puede

ser muy sutil. Observen la pgina de ejemplo de arriba. De acuerdo a cmo est
posicionada esa foto, la tendencia ser que nuestra vista se desva de la pgina hacia la
derecha. La foto tendra que estar puesta a la izquierda de la pgina.
En el ejemplo de la izquierda se ve un buen posicionamiento de fotografas. Ambas
mujeres miran HACIA la pgina, con lo cual nuestra atencin se mantiene en ella.
Otro error frecuente en diseadores novatos ocurre con fotos de grupos de personas: les
reducen el tamao en tal escala que no podemos diferenciar quin es quin. Recuerden,
las personas - normales, al menos sienten orgullo cuando se ven a s mismos o a sus
nombres impresos. Aqu estamos, por supuesto, asumiendo que se les sac fotos por
algo positivo, y no esposados o llevndolos presos. Miren la foto de aqu abajo. Sip, ese
soy yo, tengo puesto un par de anteojos super cool. Me pueden ver? No se preocupen, le
voy a pedir al editor que les mande una lupa

Agrupar
He viso al menos
una pgina web en
donde los elementos
estaban
posicionados cerca
unos de otros,
creando un todo.
Los elementos que
se encuentren
dispersos o al azar dentro de la pgina, no solo nos hace quedar como completos
novatos sino que nuestras pginas sern totalmente aburridas. Los elementos deben
estar posicionados como se los muestra en la pgina de la derecha. Por favor tengan en
cuenta que no hay necesidad de usar TODO el espacio disponible. Ven lo fuerte que es
visualmente la pgina de la derecha? Les comento que esta es la razn que les damos a
nuestros clientes en publicidad cuando nos boicotean nuestro trabajo e insisten en que

utilicemos todo el espacio disponible. Por qu debemos pagar tanto por estos espacios
en blanco? Preguntan. Lo que no logran ver es que su aviso publicitario competir con
muchos items de inters a lo largo de la pgina u hoja, y utilizar todo el espacio
disponible slo causar que se pierda entre ellos.
Cmo trabajar con copia
En el mbito de la publicidad, todo aquello que se escribe para publicacin o grabacin
se llama copia. Como estamos publicando (subiendo pginas a internet), debemos
usar este trmino para referirnos al texto.
Hablando en trminos generales, una copia en fuente Serif es ms fcil de leer que en
San Serif. Por eso los diarios, por ejemplo, usan serif. Times New Roman es un ejemplo
de fuente Serif. Arial es Sans Serif. La serif contiene esos pequeos adornos en los
extremos de la letra, mientras que una sans serif, no. Sans significa sin; Serif es la
lnea que cruza el trazo de una letra en su extremo.
Primero la funcin, despus la forma

Cul era la primer palabra?

Primero la funcin, despus la forma
Ahora puedes ver mucho mejor
Por supuesto que esto no quiere decir que nunca debemos usar sans serif. Si estn
seguros de que vuestra copia en sans serif es bien legible, entonces hganlo.
Qu mas debemos saber para que nuestros lectores lean con placer nuestro trabajo?
No tenemos que usar ms de dos tipos de fuentes diferentes. Demasiadas fuentes es
como ver un cuarto lleno de mujeres hermosas o, si eres mujer, de hombres guapsimos.
Te volveras loco. Nuevamente, utilizar muchos tipos de fuentes solo denotar que
somos diseadores novatos o que no tenemos idea de cmo trabajar con fuentes. Lo cual
no va a gustarle mucho a nuestros clientes.
Lo mismo se aplica para la aplicacin del color. Mantengan su copia con la menor
cantidad de colores posible. Muchos colores harn que nuestra pgina parezca un
parque de diversiones lindo de ver por unos minutos, pero cansa la vista rpidamente.
Dos colores son suficientes en la mayora de los casos, ya que podemos incluir
variedades de tonos de un mismo color. El rojo, por ejemplo, se puede aplicar en 100%
en ttulos y un 50% en copetes y subttulos.
Las fuentes en cursiva podrn ser vistosas, pero si se utilizan para una copia extensa, la
lectura se puede tornar cansadora. Lo mismo sucede con itlicas Deben usarse
solamente para copias cortas y quizs para leyendas de fotografas, o diagramas. Ningn
texto extenso debe aparecer en maysculas en su totalidad, ya que tambin resulta
cansador de leer.

Otro error comn es Copia Reversa (texto claro en fondo oscuro). Muchos profesionales
la rechazan, es ms difcil de leer que la copia normal. Si queremos revertir nuestra
copia, debemos asegurarnos de que:
1) utilizar Sans Serif (Serif puede aceptarse slo si nuestra copia es tiene un tamao
de fuente grande, por ejemplo 24 puntos para una pgina web)
2) El tamao de la fuente sea ms grande que el del cuerpo de la copia normal.
3) La copia no sea extensa
4) Nuestro fondo resalta bien la copia.
Probablemente el peor de los errores en layout es colocarle un fondo de imagen/foto con
detalles que, junto con las letras se pelean por nuestra atencin.
Una buena idea es hojear revistas reconocidas como National Geographic, Life, Readers
Digest, Time, etc., y ver cmo debemos colocar nuestros contenidos en una pgina. Por
supuesto que algunas de las tcnicas que van a ver no son posibles en una pgina web,
pero les va a dar una idea de lo que es un buen diseo de espacio de trabajo o layout.

Parte III

DISEO WEB
He visitado pginas personales en las cuales esperaba mucho tiempo antes que
apareciera la primer pgina completa. Haba marquesinas, luces intermitentes, applets
de java que hacan de todo, cupidos y flechas volando hacia corazones que se movan,
fotos del creador de la pgina, y de todo su rbol genealgico, desde el Homo erectus
hasta, el hundimiento del Mayflower, pasando por infinitos puntos en la historia. De
hecho hasta el fondo en mosaico tardaba aos en bajar.
Tambin visit pginas comerciales donde la coleccin completa de Encyclopaedia
Britnica o el manuscrito de Lo que el Viento se Llev apareca en la 1er pgina.
Realmente frustrante, sobre todo cuando un sistema de navegacin requiere que yo
adivine e intente.
Qu hice? Simplemente un clic en aquella X en el extremo superior derecho de mi
explorador.
Moraleja: La primer pgina de un site define el xito o el fracaso de todo nuestro
trabajo.
Si quieren que sus visitantes permanezcan en la pgina y la visiten completa, asegrense
de que la primer pgina atraiga su atencin y les provoque curiosidad. Como en
literatura, la regla del CCDT (corto, conciso y dulce, tonto) tambin se aplica aqu. Por
supuesto, no hace falta aclarar que todas las pginas debern ser interesantes, o por lo
menos, que el contenido sea interesante para quienes lo lean.
Recuerden, lo que para ustedes es un diseo espectacular, para otros puede que no lo
sea. No quiero decir con esto que sean unos intiles, si no que quizs uno est tan
inmerso en su trabajo, que a veces se puede llegar a pasar por alto tems importantes.
Hasta los mejores diseadores lo hacen, no se preocupen. Consulten con algn amigo en
quien confen para darles una opinin honesta sobre sus pginas, y que se las puedan
criticar. No le pregunten a sus novios, novias, madre, padre, hermanos, etc. Si tu diseo
no sirve, quizs no tengan el valor de decirlo.
As que quieren disear pginas web
En mi opinin, los programadores deben saber algo de arte y diseo para poder crear
web sites razonablemente atractivas, mientras que los diseadores deberan saber algo
del lenguaje de programacin apropiado. Esta gente no necesariamente debe ser experto
en los lenguajes (sera mejor si lo fueran). Pero saber aunque ms no sea un poco sobre
estos cdigos o cmo trabajan, sera suficiente. Esto sirve para que puedan discernir
entre qu incorporar en sus pginas y qu sirve para sus propsitos. A su vez, tanto el
programador como el diseador debe tener conocimiento acerca de la manifestacin
visual. Y ESO???? Ah, interesante pregunta. En unos prrafos abordaremos el tema.

Web site personal

Muchos de nosotros empezamos con nuestra pgina personal o lo que algunos llaman
home page (yo evito usar ese trmino porque en realidad es la primer pgina de
nuestro sitio). Sin embargo, no debemos entretenernos mucho con las pginas
personales aqu, ya que casi todas las premisas sobre diseo web comercial se aplican
tambin en estas.
Obviamente, puede haber 2 clases de web sites personales. Una es como vidriera para
compartir informacin personal con quienquiera que sea que le importe. La otra es
promocionar nuestros servicios.
Si se trata de compartir informacin solamente, el estilo tiene que ser formal. porque
no queremos que nuestros clientes pienses que somos frvolos, verdad? y debemos
poner todo nuestras habilidades en juego. Despus de todo, nuestros clientes van a
juzgar nuestras habilidades por lo que ven en nuestra pgina.
Web sites comerciales
A menos que diseemos una pgina para una compaa del negocio del espectculo,
debemos reflejar un diseo serio, con un tono de negocios. Sin embargo, no hay que
exagerar, al punto de que las pginas sean aburridas, de slo copia (texto) e imgenes.
Con el nacimiento de dHTML, animacin Flash y dems, aplicando un uso de colores,
texturas y formas de manera inteligente, y con un buen diseo de espacio de trabajo
(layout), podremos lograr pginas que contengan copia interesante y de fcil lectura.
Cmo comenzar
El diseo web es similar a la construccin de una casa o el bosquejo del diseo de una
mquina. Necesitamos antes que nada, un plan de contenido y apariencia. Qu clase y
qu cantidad de copia quiero incluir? Qu imgenes (diagramas y fotos) voy a utilizar y
cuntas hay? Qu imgenes ilustran o acompaan qu parte de la copia? Necesito tablas,
efectos de sonido, msica, animacin? Debemos de tomar esta etapa sistemticamente,
para que la etapa de ensamble nos resulte ms sencilla.
Una vez que tenemos decidido todo esto, procederemos a hacer un borrador aproximado
de las pginas. Necesitaremos un block de dibujo y lpices de colores. En el mundo de
la publicidad, estos borradores se
llaman bosquejos, y nos darn una
idea de cmo se va a ver el
contenido de nuestra pgina web
propuesta.
Desplieguen los bosquejos en el
piso, estdienlos cuidadosamente, y
sean sus propios jueces de lo que
necesitan aadir, quitar,
reposicionar o sustituir.

Cuando estn conformes, pasarn a la etapa de procesamiento. Aqu es donde se crean

los grficos necesarios, se trabaja con las imgenes, fotografias y se comprime su
tamao, se elige el audio apropiado y se lo edita, y donde se producen las animaciones.
Finalmente, comenzamos a crear nuestras pginas web. Se darn cuenta de que sern
necesarios algunos cambios, pero es probable que sean pequeos. Su trabajo ser mucho
ms fcil y fluido.
La palabra clave es PLAN. Si no podemos planificar nuestro sitio web, es altamente
probable que a la larga tengamos que modificar y redistribuir todo, lo cual se traduce en
prdida de tiempo, y si estamos en esto para ganarnos la vida, perderemos la
oportunidad de obtener ms ganancias de que hubiramos podido generar si obviamos
este paso sin sentido.
El Look Mantener una identidad
Las grandes empresas generalmente prestan mucha atencin a la imagen que presentan
al pblico. Valoran la identidad corporativa tanto como sus activos fijos, y por lo
general son muy estrictas con respecto a sus logos y colores corporativos que se pueden
usar y cules otros no.
La forma en que estos se aplican est explicada en un documento que generalmente se
llama gua de manifestacin visual. (Casualmente, en una empresa para la que trabaj
muchos aos, en el top ten de las 500 mejores empresas de la revista Fortune, la gua
tena casi 400 pginas). Estas guas dan especificaciones sobre los milmetros entre el
logo de la compaa y los mrgenes, tipos de fuente en sus memos, los colores exactos a
utilizar, etc.
Estas entidades comerciales, generalmente tienen un Departamento de Relaciones
Pblicas que les maneja el aspecto no visual en cuanto a publicidad, y quizs solo una
persona o un pequeo sector es responsable de la proyeccin deseada de su imagen
visual. Regla nmero uno, cuando diseamos un web site comercial, debemos asegurar
que el logo de la empresa se utiliza de acuerdo a lo especificado en sus guas.
Regla nmero dos: en todas las pginas de la web, utilizar el logo de nuestro cliente o
sus colores corporativos, o un elemento de reconocimiento (Mnemonic Device), para
crear una identidad unificada y que se reconozca fcilmente . Esto tambin ayudar a
causar una experiencia visual agradable para nuestros visitantes. Naturalmente, ninguno
de estos elementos debe ser exagerado. Por ejemplo, en resolucin de 1024 x 768, el
tamao de un logo que se repite en todas las pginas no debe ser mayor a 4,000 pixeles
cuadrados. Aqu debemos tener en cuenta tambin que una imagen que mide 60x60 px,
por ejemplo, aparecer mucho ms grande sobre resolucin 800x600 que en 1024x768.
Qu es un elemento de reconocimiento? Es un grfico que
puede ser representativo o de estilo y sirve para recordarnos de
que estamos leyendo o mirando un material (en una pgina o
publicidad grfica) proveniente de una misma compaa o serie.
En caso de que no sepan lo que es una imagen representativa o

de estilo, las primeras son realistas, estas ltimas son dibujos simplificados que pueden
ser slo una lnea o la forma irregular de un objeto representativo en particular. La
ilustracin aqu a la izquierda es un dibujo de estilo.
Eleccin de tipo de sitio
Queremos una pgina totalmente en Flash o en HTML? Si recin empezamos, es
recomendable HTML. Adems de que los buscadores las captan ms fcil (dadas las
palabras claves adecuadas*, por supuesto), este tipo de sitio presenta tambin menos
dificultad para revisiones necesarias. Un sitio en HTML que incorpore animaciones en
FLASH tambin puede resultar muy atractivo; todo depende de nuestro diseo y
tratamiento.
*Las palabras clave se encuentran en el head del html. Estas palabras son las que la
gente tipea en los buscadores, por lo general. Estn agrupados por meta tags. He aqu un
ejemplo:
<meta name=KEYWORDS content=animation flash movies swish tutorials sound editing streaming
raster vector graphics>

Qu se necesita
Si queremos ser profesionales, necesitamos contar con ms de un software adems de
Swish. Por ejemplo, ms que un Photoshop para edicin de imgenes. Hasta el da de la
fecha, Photoshop hace grficos raster, y necesitamos algn editor que cree vectores.
Personalmente prefiero Adobe Illustrator, el cual uso para crear la mayora de mis
grficos o para modificar letras, exportarlas en formato swf para insertarlas en mi
archivo swi. Estas imgenes siguen siendo editables en nuestra pelcula.
Adems de los editores de imgenes, necesitaremos un editor de sonido. Como con
otros tipos de software, hay una gran cantidad de ellos en el mercado. Elijan alguno
dentro de su presupuesto y que sea popular. Recuerden, s, que lo bueno no es barato, y
lo barato no es bueno.
Estas son las herramientas fundamentales. A medida que avancemos y adquiramos ms
y ms experiencia, vamos a precisar otro software, como los que se usan para animacin
3D, sonidos streaming, y conversin de algn formato a otro.
Ya que tocamos este tema, tengan en cuenta que ciertos editores HTML tienen la mala
costumbre de remover cdigos que no reconocen, an cuando son correctos. Es una
buena idea aprender a codificar pginas web a mano y eventualmente deshacerse del
editor html. Para ms informacin, pueden consultar guas online XML y SGML. Son
extensiones de html.
Navegacin
Obviamente, el propsito de un men es mostrarles a los visitantes el contenido de
nuestra web. El hacer clic en un item de menu los lleva directo a una pgina que

contiene ms informacin sobre ese item o para mostrar un sub-menu que contiene
varios temas bajo ese grupo particular. Naturalmente, nuestros links deben ser correctos
(de lo contrario, llevamos a la gente a las pginas equivocadas), y los sub-menues se
deben agrupar de forma coherente.
As que, antes de anunciar al mundo que nuestra web existe, es bueno probarla primero.
Una vez que estemos satisfechos y que todo est bien, llamamos a una o dos personas
para que tambin la vean.
A propsito, hay una pequea aplicacin que sirve para buscar links rotos dentro de un
site. Es buena idea correr este programa de vez en cuando. Realicen una bsqueda en
Google, por ejemplo, y bajen alguna aplicacin de este estilo.
Animacin
La animacin nos ayuda a que la pgina se vea interesante, pero en mucha cantidad
resulta tediosa para nuestros visitantes. Por eso es necesario limitar la animacin para no
distraer a la gente de los contenidos en la pgina que realmente importan, o incluso
hasta para no enojarlos. Por supuesto, si nuestra animacin constituye el nico
elemento, entonces esta gua es irrelevante.
Tamao en bytes
Aparentemente, hay gente que todava insiste en que ninguna pgina debe pesar ms de
45kb. Estoy casi seguro de que dicha regla se puso en vigencia en la poca del dial-up
de 14.4. Con conexiones ms rpidas, e incluso banda ancha tan popularizado, no est
mal que el tamao sea de ms o menos 100 kb. Se debe tener en cuenta, sin embargo,
que nuestra primer pgina deber ser lo ms pequea posible (en cuanto a bytes), sin
comprometer la calidad.
Si nuestra primer pgina no puede ser pequea dado que, por ejemplo, decidimos incluir
msica, un preloader (precargador) ayudar a mantener el inters de nuestros visitantes.
De hecho, se considera corts si informamos en el preloader el tamao del archivo que
est por bajar. Lo ltimo que queremos es que el visitante se frustre, o que tenga que
adivinar qu tan pesado ser lo que est bajando, o si tiene tiempo para esperar. Despus
de unos minutos, pueden llegar a hacer clic en atrs, justo cuando al preloeader le
faltaban 1 o 2 segundos para descargar la pgina.
Complacer a todo el mundo
Complacer a todo el mundo es decir, disear un site para cualquier tipo de browser
es una idea genial. Si deciden hacer esto, debern averiguar las limitaciones e
idiosincrasias de todos los browsers del mundo, y disear sets de pginas para ajustarse
a estos. O simplemente, diseen 1 slo set que se ajuste a las medidas de todos los
browsers. Si optan por esta ltima opcin, les deseo muchsima suerte porque, en mi
opinin, es muy probable que terminen diseando una pgina bastante aburrida. Como
nota de inters, el 95% de los usuarios de PC de todo el mundo tienen Internet Explorer.

Diseo de logo y slogan

En algn punto de su carrera se les va a pedir que diseen un logo o inventen un slogan
adecuado. Voy a incluir estos items en la gua porque he visto muchos logos horribles,
fciles de olvidr y slogans sin sentido ni efectividad.
Logo
Cmo abordar el diseo de un logo
Debemos recordar que un logo es la fiel representacin de una entidad. Muchas veces,
cuando se nombra alguna compaa, nos imaginamos en nuestro tercer ojo al logo. Si se
menciona IBM, nos imaginamos el acrnimo en azul con rayas blancas horizontales.
Ferrari, el caballo en dos patas. La lista contina.
Si decidimos crear un grfico para el logo que vamos a disear, debe estar relacionada,
aunque sea de manera abstracta, con lo que la compaa produce o hace, o su fundador.
Por ejemplo, Ford en el logotipo de
Ford. Casi todos nosotros
sabemos quin fue Henry Ford.
Otro ejemplo Royal DuchShell Group, el holding
Holands/Britnico, el logo
es representativo. El shell est ah porque uno de sus fundadores, Mr. Marcus Samuel,
comenz su negocio importando y vendiendo conchas de mar. Con el tiempo entr en el
negocio del petrleo y el resto es historia. Durante la era Victoriana, las conchas de mar
eran muy preciadas en Gran Bretaa y parte de Europa, ya que se usaban para adorno,
alhajeros, botones y cepillos. Hoy en da, el logo es fcilmente reconocido en 200 pases
en todo el mundo. El logo de Volkswagen es tan simple como originalmente iba a serlo
el auto (volk wagen: el auto de la gente), un vehculo utilitario para las masas. Todo lo
que tenemos es la letra V sobre la W dentro de un crculo. Muy fcil de recordar. Una
manzana mordida es sinnimo de la Macintosh de Steve Job.
El logo debe ser simple pero nico, para que quede en nuestra memoria luego de 1
o dos veces de haberlo visto.
El logo debe verse bien, ya sea que se lo reduzca en tamao para una tarjeta de
negocios o se lo agrande para montar la fachada de un edificio o sobre el techo.
Para reducir costos de impresin, no
debemos crear el logo en muchos colores.
Un color slo es ideal. Dos es comn, tres
no se recomienda realmente. Cuatro es ,
bueno, si el cliente no se preocupa por los
costos, dejmoslo as.
Ven que estas empresas conocidas tienen
logos simples pero memorables, mientras
que otras empresas que quizs no duran
mucho tienen logos complejos, llenos
colores? Eso lo dice todo.

Slogan
Si el cliente es una empresa grande, es probable que el slogan no lo tengan que hacer
ustedes ya que existen agencias de publicidad que se encargan de eso. S se los pueden
pedir si trabajan para empresas pequeas o medianas. Qu es un slogan?
Un slogan es una frase corta que generalmente se coloca a un costado o abajo del logo o
logotipo de una empresa. Incluso puede aparecer sola. El Just Do It de Nike es un
ejemplo. Una frase simple, no? Tambin ustedes mismos pueden pensar en algo as para
sus clientes, verdad? O quizs algo ms poderoso an, qu les parece? Hhhhmmm, yo
que ustedes lo pienso muy pero muy bien.
Mientras que no debemos subestimarnos, al mismo tiempo debemos considerar nuestras
limitaciones. Aunque existe gente en nuestro rubro que puede disear y tambin
escribir, no muchos podemos hacerlo. Podremos tambin crear diseos que ganen
premios, pero eso tampoco significa que podamos escribir. Por ms extrao que suene,
hay quienes hablan ingls como primera lengua y no escriben. Muchos de ellos pueden
hacerlo en forma limitada sin errores gramaticales o de ortografa pero se sienten
perdidos en cuando a gneros especficos. Mientras que quizs alumnos de preparatoria
o egresados de secundario, nos sorprenden con trabajos excepcionales, guiones de radio
o cine y hasta bestsellers!
Inventar un slogan viene con la escritura de la copia de publicidad. Escritores de copia
(copywriters) en agencias de publicidad de buena reputacin, son a los que
seguramente se les va a ocurrir un buen slogan. Estn entrenados para usar las palabras
exactas para expresar lo correcto, de la forma ms compacta posible. Pueden pintar
miles de cuadros con una palabra. Por eso, dganle a un copywriter lo que quieren, y
ofrzcanle buen dinero a cambio, como para que sonra con la mirada. Valdr la pena,
se los aseguro.
Conclusin Aumentar su valor agregado
Saber mucho de una sola cosa y no tanto de otra es una de las claves fundamentales
para el xito
Un aspirante a diseador o desarrollador web profesional debe agregarse valor. Lean
todo lo que puedan de muchos temas (por lo menos todo lo que se relaciona a IT o
tecnologa de la informacin), y aprendan algunos de estos temas bien, en lo posible.
Hagan eso, y es seguro que les vaya bien porque van a tener ms para ofrecerles a los
clientes. Recuerden, esto no significa necesariamente que van a tener que hacerlo todo
ustedes. Tomen el siguiente ejemplo.
Un cliente quiere que le impriman una publicacin, pero todava no escuch hablar del
trmino separacin de colores y nunca le import la litografa. A ustedes s. Va a estar
impresionado, y los va a contratar para que hagan el trabajo que necesita. Uds.
Solamente van a ir y venir de la imprenta y el que separe los colores. Cuando la
publicacin est lista, envuelta y enviada, Uds. Presentan su factura. Un par de semanas
ms tarde, el crdito en sus cuentas bancarias les sonre una vez ms.

Otra cosa que hay que tener en cuenta es que nuestros clientes por lo general prefieren
lidiar con la menor cantidad de gente posible; esto significa que el dinero, la guita, la
mosca, que va para Mara, Juana, Susana, Ricardo, Enrique, queda para Uds. solos.
Buena Suerte! Ojal que les toquen muchos trabajos, para que luego puedan reirse en
las idas y vueltas al banco. Cuando eso pase (no si pasa Cuando pase, ok?), me
invitan con un caf, vale?