Fundamentos básicos de Diseño

 2003 K S Wildermann

Traducido al Español por Vicky Sarinelli

(Versión del 15-04-03 – reemplaza a la anterior)
Este documento intenta proveer información muy básica relacionada al diseño, para
ayudar a los novatos a tomar el camino indicado. Los estudiantes de diseño podrán
pasar todo un año sólo para aprender la teoría de diseño. Así que, imagínense cuánto
material podría escribirse. En todo caso, este documento es básicamente una guía y por
ello, no pretende convertirlos en diseñadores galardonados.

Para mantener brevedad, he excluido partes de información importante, las cuales

podrán encontrar en mis “tips” dentro del “General Swish Help Forum” (foro de ayuda
en Swish-Tutorials) http://www.swish-
tutorials.com/forum/index.php?act=ST&f=4&t=8030&s=aceefe888a4b3da9733b115ac6bd3a8b

Nuestro objetivo es el diseño 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 distribución.
1ra Parte
GENERAL
En todo lo que creamos, debemos elegir un solo maestro: la Naturaleza.
Leonardo da Vinci (1452-1519)

El diseño es subjetivo

Que un diseñador sea bueno o malo, depende de quien lo juzgue. Como en la música y
en la literatura, nuestro gusto por el diseño está en gran medida condicionado por la
cultura a la que pertenecemos, así como por nuestro medio ambiente, crianza y
educación. En esta breve guía nos limitaremos a lo que generalmente es aceptado como
buen uso del diseño, desde un punto de vista cultural Occidental. La elección de esta
perspectiva se debe simplemente a que la mayoría de los lectores, por no decir todos,
pertenecen a esta cultura o bien han sido educados bajo estándares Occidentales.

Colores, formas y texturas

El diseño está compuesto por tres elementos – colores, formas y texturas. Los 3 deben
estar siempre presentes, de lo contrario no existiría Diseño propiamente dicho. Y la
línea? se preguntarán ustedes. La línea está dentro de las formas, que a su vez están
definidas, delineadas o compuestas por líneas. Ya que estos tres elementos son
fundamentales, veamos ahora cómo se utilizan en diseño.

Colores

El estudio de los colores es una ciencia en sí misma. Tratar este tema en detalle nos
llevaría libros enteros y está más allá del propósito de esta guía, como también escapa a
mi limitado conocimiento. Por ejemplo, los colores pueden transformarse en puros, fríos
y cálidos, dependiendo del tiempo del día y la fuente de luz solar. Esto es importante
sobre todo para los Diseñadores 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. También
significa bronca y peligro. El azul nos ayuda a relajarnos, promueve calma y armonía.
El amarillo es rejuvenecedor; significa felicidad y promueve actividades que requieran
el uso de nuestro poder de razonamiento. Por supuesto, el amarillo se asocia también
con la cobardía. El verde es calmante – para la vista y la psique. Por eso es que la
Naturaleza nos da tanto verde en forma de forestación. Lástima que estemos utilizando
nuestra forestación como si no existiera un mañana.

Cómo se usan los colores?

Antes que nada, necesitamos una “rueda de colores”. La podrán obtener en librerías o
papelerías buenas, o negocios que vendan insumos para artistas.
La típica rueda de colores es similar a la que se muestra arriba. Contiene doce colores,
los cuales varían gradualmente. Cada uno de estos colores puede tener millones de
tonalidades.

Los colores principales o primarios están 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 también 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 más, como ser entre el amarillo (Y) y amarillo-verde (YG),
colocándolos en la siguientes proporciones (en porcentaje) – 80Y20YG, 60Y40YG,
40Y60YG, 20Y80YG.

A mayor cantidad de tonalidades, más sencillo será determinar qué color combina o
contrasta con cuál.
 Figura A Figura B Figura C

En la rueda, los colores que están 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, sólo para dar el efecto
general.

Cualquiera de tres o cuatro colores adyacentes entre sí (Fig B) están en armonía. Esto se
puede apreciar en la Naturaleza misma, por ejemplo, flores amarillas entre hojas verdes.
Si no sabemos cómo combinar colores, el mejor método 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 relación basada en la pureza del color y constituye un diseño 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 sólo un
maestro en todo lo que creamos: la Naturaleza.

Formas

El uso de las formas en diferentes tamaños y tipos, puede contribuir a que nuestro
diseño sea interesante. Sin embargo, todo es su justa medida. Una página se puede ver
bien sólo con dos tipos de formas, cuadrado y rectángulo, por ejemplo; sin embargo,
debemos varias sus tamaños y
posiciones.

En la derecha tenemos dos páginas de

ejemplo. La de la izquierda es
clínicamente limpia y precisa, pero es
aburrida ya que los cuadrados son
iguales en tamaño y están
posicionados de la misma forma. En
la página de la derecha, tenemos formas de diferentes tamaños, que están posicionadas
para dividir el área ocupada por copia para presentar una apariencia más balanceada.
Observen cuánto más interesante, viva y cálida es esta página. Si la de la izquierda es un
grupo de soldados marchando en línea, la de la derecha es una fiesta llena de diversión.

Hay otras maneras de trabajar con formas

sobre nuestra página, como se demuestra
en las páginas de ejemplo de la izquierda.
La primera tiene el fondo dividido en dos,
verticalmente, de manera que vemos cinco
formas. Cinco? Si, la página misma y el
área cubierta por el texto son formas
también. En la de la derecha, el texto está
formateado delineando formas, un
triángulo invertido y un círculo.

Tanto en fotografía como en pintura, nos enseñan 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 París, tomada desde la cima de la torre Eiffel, y esta regla pierde
aplicación. Dicha regla funciona para nuestras páginas web siempre y cuando la
dividamos horizontalmente en dos.

Quieren un rectángulo 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 diseño de la forma humana y otras especies, antiguas civilizaciones lo
utilizaban para diseñar pirámides y monumentos que se consideran bellísimos aún en la
actualidad, aunque ya no estén intactos, como el Partenón en Atenas; así como fue
utilizado por genios como Da Vinci y Miguel Angel en sus pinturas.

Texturas

Las texturas hacen que nuestro

diseño sea más interesante. Como
trabajamos con diseño bi-
dimensional, nuestra única
alternativa es imitar las texturas. Una
vez más, la palabra clave es
moderación. De hecho, ni siquiera es
necesario utilizarlas en todas las
páginas. Asimismo, las texturas no
necesariamente representan objetos
conocidos, tales como arena, granito
o piel de cabra. Un rectángulo que
contiene líneas, horizontales o verticales, también puede servir como textura. En la
página de la derecha, las barras del menú en la izquierda y la líneas a la derecha pueden
tomarse como textura.
2da Parte
DISEÑO DEL ESPACIO DE
TRABAJO (LAYOUT)

Una encuesta llevada a cabo años atrás,

reveló que lo primero que miramos
cuando abrimos algún material impreso
(libros, revistas, diarios, etc.), es el
extremo superior derecho de la página
derecha. Abran un diario ahora, y verán
que es verdad.

Cuando pasamos la vista por la página a la

izquierda, también 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
diseñadores de layouts siempre colocan lo
que quieren que la gente lea primero en el
extremo superior derecho de la página.

Existen, por supuesto, otros métodos de

llamar la atención del lector, por ejemplo,
colocando un titular en letra grande,
utilizando palabras llamativas y
poniéndolas en algún otro lado de la
página. Pero si bien un diario puede ser lo
suficientemente grande como para
contener varias palabras de un tamaño de
244 puntos, por ejemplo, las páginas de
revistas o las ventanas de un explorador de
internet, no lo son. En la página de la
izquierda, se supone que es obvio lo que
quiero que lean primero.

Por otra parte, nuestros ojos generalmente

se focalizan en las imágenes o cualquier
tipo de gráficos en una página,
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
estén mirando hacia el lado contrario del texto
de la página. Por qué no? Porque las fotos que
se posicionan así nos hacen desviar la vista de la
página, aún si lo que queremos es leer el texto
que se encuentra en la página. Los mensajes
conflictivos en nuestro cerebro hacen que esto
resulte una experiencia incómoda, aunque puede
ser muy sutil. Observen la página de ejemplo de arriba. De acuerdo a cómo está
posicionada esa foto, la tendencia será que nuestra vista se desvía de la página – hacia la
derecha. La foto tendría que estar puesta a la izquierda de la página.

En el ejemplo de la izquierda se ve un buen posicionamiento de fotografías. Ambas

mujeres miran HACIA la página, con lo cual nuestra atención se mantiene en ella.

Otro error frecuente en diseñadores novatos ocurre con fotos de grupos de personas: les
reducen el tamaño en tal escala que no podemos diferenciar quién es quién. 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 llevándolos 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 página 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 página, no solo nos hace quedar como completos
novatos sino que nuestras páginas serán totalmente aburridas. Los elementos deben
estar posicionados como se los muestra en la página 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 página de la derecha? Les comento que esta es la razón 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 interés a lo largo de la página u hoja, y utilizar todo el espacio
disponible sólo causará que se pierda entre ellos.

Cómo trabajar con copia

En el ámbito de la publicidad, todo aquello que se escribe para publicación o grabación

se llama “copia”. Como estamos publicando (subiendo páginas a internet), debemos
usar este término para referirnos al texto.

Hablando en términos generales, una copia en fuente Serif es más fácil 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 pequeños adornos en los
extremos de la letra, mientras que una sans serif, no. Sans significa “sin”; Serif es la
línea que cruza el trazo de una letra en su extremo.

Primero la función, después la forma

Cuál era la primer palabra?
Primero la función, después la forma
Ahora puedes ver mucho mejor

Por supuesto que esto no quiere decir que nunca debemos usar sans serif. Si están
seguros de que vuestra copia en sans serif es bien legible, entonces háganlo.

Qué mas debemos saber para que nuestros lectores lean con placer nuestro trabajo?

No tenemos que usar más de dos tipos de fuentes diferentes. Demasiadas fuentes es
como ver un cuarto lleno de mujeres hermosas o, si eres mujer, de hombres guapísimos.
Te volverías loco. Nuevamente, utilizar muchos tipos de fuentes solo denotará que
somos diseñadores novatos o que no tenemos idea de cómo trabajar con fuentes. Lo cual
no va a gustarle mucho a nuestros clientes.

Lo mismo se aplica para la aplicación del color. Mantengan su copia con la menor
cantidad de colores posible. Muchos colores harán que nuestra página parezca un
parque de diversiones – lindo de ver por unos minutos, pero cansa la vista rápidamente.
Dos colores son suficientes en la mayoría de los casos, ya que podemos incluir
variedades de tonos de un mismo color. El rojo, por ejemplo, se puede aplicar en 100%
en títulos y un 50% en copetes y subtítulos.

Las fuentes en cursiva podrán ser vistosas, pero si se utilizan para una copia extensa, la
lectura se puede tornar cansadora. Lo mismo sucede con itálicas Deben usarse
solamente para copias cortas y quizás para leyendas de fotografías, o diagramas. Ningún
texto extenso debe aparecer en mayúsculas en su totalidad, ya que también resulta
cansador de leer.
Otro error común es Copia Reversa (texto claro en fondo oscuro). Muchos profesionales
la rechazan, es más difícil de leer que la copia normal. Si queremos revertir nuestra
copia, debemos asegurarnos de que:

1) utilizar Sans Serif (Serif puede aceptarse sólo si nuestra copia es tiene un tamaño
de fuente grande, por ejemplo 24 puntos para una página web)
2) El tamaño de la fuente sea más 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 atención.

Una buena idea es hojear revistas reconocidas como National Geographic, Life, Readers
Digest, Time, etc., y ver cómo debemos colocar nuestros contenidos en una página. Por
supuesto que algunas de las técnicas que van a ver no son posibles en una página web,
pero les va a dar una idea de lo que es un buen diseño de espacio de trabajo o layout.
Parte III
DISEÑO WEB

He visitado páginas personales en las cuales esperaba mucho tiempo antes que
apareciera la primer página completa. Había marquesinas, luces intermitentes, applets
de java que hacían de todo, cupidos y flechas volando hacia corazones que se movían,
fotos del creador de la página, y de todo su árbol genealógico, desde el Homo erectus
hasta, el hundimiento del Mayflower, pasando por infinitos puntos en la historia. De
hecho hasta el fondo en mosaico tardaba años en bajar.

También visité páginas comerciales donde la colección completa de Encyclopaedia

Británica o el manuscrito de “Lo que el Viento se Llevó” aparecía en la 1er página.
Realmente frustrante, sobre todo cuando un sistema de navegación 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 página de un site define el éxito o el fracaso de todo nuestro

trabajo.

Si quieren que sus visitantes permanezcan en la página y la visiten completa, asegúrense

de que la primer página atraiga su atención y les provoque curiosidad. Como en
literatura, la regla del CCDT (corto, conciso y dulce, tonto) también se aplica aquí. Por
supuesto, no hace falta aclarar que todas las páginas deberán ser interesantes, o por lo
menos, que el contenido sea interesante para quienes lo lean.

Recuerden, lo que para ustedes es un diseño espectacular, para otros puede que no lo
sea. No quiero decir con esto que sean unos inútiles, si no que quizás uno está tan
inmerso en su trabajo, que a veces se puede llegar a pasar por alto ítems importantes.
Hasta los mejores diseñadores lo hacen, no se preocupen. Consulten con algún amigo en
quien confíen para darles una opinión honesta sobre sus páginas, y que se las puedan
criticar. No le pregunten a sus novios, novias, madre, padre, hermanos, etc. Si tu diseño
no sirve, quizás no tengan el valor de decirlo.

Así que quieren diseñar páginas web

En mi opinión, los programadores deben saber algo de arte y diseño para poder crear
web sites razonablemente atractivas, mientras que los diseñadores deberían saber algo
del lenguaje de programación apropiado. Esta gente no necesariamente debe ser experto
en los lenguajes (sería mejor si lo fueran). Pero saber aunque más no sea un poco sobre
estos códigos o cómo trabajan, sería suficiente. Esto sirve para que puedan discernir
entre qué incorporar en sus páginas y qué sirve para sus propósitos. A su vez, tanto el
programador como el diseñador debe tener conocimiento acerca de la manifestación
visual. Y ESO???? Ah, interesante pregunta. En unos párrafos abordaremos el tema.
Web site personal

Muchos de nosotros empezamos con nuestra página personal o lo que algunos llaman
“home page” (yo evito usar ese término porque en realidad es la primer página de
nuestro sitio). Sin embargo, no debemos entretenernos mucho con las páginas
personales aquí, ya que casi todas las premisas sobre diseño web comercial se aplican
también en estas.

Obviamente, puede haber 2 clases de web sites personales. Una es como vidriera para
compartir información personal con quienquiera que sea que le importe. La otra es
promocionar nuestros servicios.

Si se trata de compartir información solamente, el estilo tiene que ser formal. – porque
no queremos que nuestros clientes pienses que somos frívolos, verdad? – y debemos
poner todo nuestras habilidades en juego. Después de todo, nuestros clientes van a
juzgar nuestras habilidades por lo que ven en nuestra página.

Web sites comerciales

A menos que diseñemos una página para una compañía del negocio del espectáculo,
debemos reflejar un diseño serio, con un tono de negocios. Sin embargo, no hay que
exagerar, al punto de que las páginas sean aburridas, de sólo copia (texto) e imágenes.
Con el nacimiento de dHTML, animación Flash y demás, aplicando un uso de colores,
texturas y formas de manera inteligente, y con un buen diseño de espacio de trabajo
(layout), podremos lograr páginas que contengan copia interesante y de fácil lectura.

Cómo comenzar

El diseño web es similar a la construcción de una casa o el bosquejo del diseño de una
máquina. Necesitamos antes que nada, un plan de contenido y apariencia. Qué clase y
qué cantidad de copia quiero incluir? Qué imágenes (diagramas y fotos) voy a utilizar y
cuántas hay? Qué imágenes ilustran o acompañan qué parte de la copia? Necesito tablas,
efectos de sonido, música, animación? Debemos de tomar esta etapa sistemáticamente,
para que la etapa de ensamble nos resulte más sencilla.

Una vez que tenemos decidido todo esto, procederemos a hacer un borrador aproximado
de las páginas. Necesitaremos un block de dibujo y lápices de colores. En el mundo de
la publicidad, estos borradores se
llaman “bosquejos”, y nos darán una
idea de cómo se va a ver el
contenido de nuestra página web
propuesta.

Desplieguen los bosquejos en el

piso, estúdienlos cuidadosamente, y
sean sus propios jueces de lo que
necesitan añadir, quitar,
reposicionar o sustituir.
Cuando estén conformes, pasarán a la etapa de procesamiento. Aquí es donde se crean
los gráficos necesarios, se trabaja con las imágenes, fotografias y se comprime su
tamaño, se elige el audio apropiado y se lo edita, y donde se producen las animaciones.

Finalmente, comenzamos a crear nuestras páginas web. Se darán cuenta de que serán
necesarios algunos cambios, pero es probable que sean pequeños. Su trabajo será mucho
más fácil 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
pérdida de tiempo, y si estamos en esto para ganarnos la vida, perderemos la
oportunidad de obtener más ganancias de que hubiéramos podido generar si obviamos
este paso sin sentido.

El Look – Mantener una identidad

Las grandes empresas generalmente prestan mucha atención a la imagen que presentan
al público. 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 cuáles otros no.

La forma en que estos se aplican está explicada en un documento que generalmente se

llama “guía de manifestación visual”. (Casualmente, en una empresa para la que trabajé
muchos años, en el top ten de las 500 mejores empresas de la revista “Fortune”, la guía
tenía casi 400 páginas). Estas guías dan especificaciones sobre los milímetros entre el
logo de la compañía y los márgenes, tipos de fuente en sus memos, los colores exactos a
utilizar, etc.

Estas entidades comerciales, generalmente tienen un Departamento de Relaciones

Públicas que les maneja el aspecto no visual en cuanto a publicidad, y quizás solo una
persona o un pequeño sector es responsable de la proyección deseada de su imagen
visual. Regla número uno, cuando diseñamos un web site comercial, debemos asegurar
que el logo de la empresa se utiliza de acuerdo a lo especificado en sus guías.

Regla número dos: en todas las páginas 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 fácilmente . Esto también ayudará a
causar una experiencia visual agradable para nuestros visitantes. Naturalmente, ninguno
de estos elementos debe ser exagerado. Por ejemplo, en resolución de 1024 x 768, el
tamaño de un logo que se repite en todas las páginas no debe ser mayor a 4,000 pixeles
cuadrados. Aquí debemos tener en cuenta también que una imagen que mide 60x60 px,
por ejemplo, aparecerá mucho más grande sobre resolución 800x600 que en 1024x768.

Qué es un elemento de reconocimiento? Es un gráfico que

puede ser representativo o de estilo y sirve para recordarnos de
que estamos leyendo o mirando un material (en una página o
publicidad gráfica) proveniente de una misma compañía 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 sólo una línea o la forma irregular de un objeto representativo en particular. La
ilustración aquí a la izquierda es un dibujo de estilo.

Elección de tipo de sitio

Queremos una página totalmente en Flash o en HTML? Si recién empezamos, es

recomendable HTML. Además de que los buscadores las captan más fácil (dadas las
palabras claves adecuadas*, por supuesto), este tipo de sitio presenta también menos
dificultad para revisiones necesarias. Un sitio en HTML que incorpore animaciones en
FLASH también puede resultar muy atractivo; todo depende de nuestro diseño 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. Están 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 más de un software además de

Swish. Por ejemplo, más que un Photoshop para edición de imágenes. Hasta el día de la
fecha, Photoshop hace gráficos raster, y necesitamos algún editor que cree vectores.
Personalmente prefiero Adobe Illustrator, el cual uso para crear la mayoría de mis
gráficos o para modificar letras, exportarlas en formato swf para insertarlas en mi
archivo swi. Estas imágenes siguen siendo editables en nuestra película.

Además de los editores de imágenes, 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 más
y más experiencia, vamos a precisar otro software, como los que se usan para animación
3D, sonidos streaming, y conversión de algún formato a otro.

Ya que tocamos este tema, tengan en cuenta que ciertos editores HTML tienen la mala
costumbre de remover códigos que no reconocen, aún cuando son correctos. Es una
buena idea aprender a codificar páginas web a mano y eventualmente deshacerse del
editor html. Para más información, pueden consultar guías online XML y SGML. Son
extensiones de html.

Navegación

Obviamente, el propósito 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 página que
contiene más información 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 páginas 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 también la vean.

A propósito, hay una pequeña aplicación que sirve para buscar links rotos dentro de un
site. Es buena idea correr este programa de vez en cuando. Realicen una búsqueda en
Google, por ejemplo, y bajen alguna aplicación de este estilo.

Animación

La animación nos ayuda a que la página se vea interesante, pero en mucha cantidad
resulta tediosa para nuestros visitantes. Por eso es necesario limitar la animación para no
distraer a la gente de los contenidos en la página que realmente importan, o incluso
hasta para no enojarlos. Por supuesto, si nuestra animación constituye el único
elemento, entonces esta guía es irrelevante.

Tamaño en bytes

Aparentemente, hay gente que todavía insiste en que ninguna página debe pesar más de
45kb. Estoy casi seguro de que dicha regla se puso en vigencia en la época del dial-up
de 14.4. Con conexiones más rápidas, e incluso banda ancha tan popularizado, no está
mal que el tamaño sea de más o menos 100 kb. Se debe tener en cuenta, sin embargo,
que nuestra primer página deberá ser lo más pequeña posible (en cuanto a bytes), sin
comprometer la calidad.

Si nuestra primer página no puede ser pequeña dado que, por ejemplo, decidimos incluir
música, un preloader (precargador) ayudará a mantener el interés de nuestros visitantes.
De hecho, se considera cortés si informamos en el preloader el tamaño 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. Después
de unos minutos, pueden llegar a hacer clic en “atrás”, justo cuando al preloeader le
faltaban 1 o 2 segundos para descargar la página.

Complacer a todo el mundo

Complacer a todo el mundo – es decir, diseñar un site para cualquier tipo de browser –
es una idea genial. Si deciden hacer esto, deberán averiguar las limitaciones e
idiosincrasias de todos los browsers del mundo, y diseñar sets de páginas para ajustarse
a estos. O simplemente, diseñen 1 sólo set que se ajuste a las medidas de todos los
browsers. Si optan por esta última opción, les deseo muchísima suerte – porque, en mi
opinión, es muy probable que terminen diseñando una página bastante aburrida. Como
nota de interés, el 95% de los usuarios de PC de todo el mundo tienen Internet Explorer.
Diseño de logo y slogan

En algún punto de su carrera se les va a pedir que diseñen un logo o inventen un slogan
adecuado. Voy a incluir estos items en la guía porque he visto muchos logos horribles,
fáciles de olvidr y slogans sin sentido ni efectividad.

Logo

Cómo abordar el diseño de un logo

Debemos recordar que un logo es la fiel representación de una entidad. Muchas veces,
cuando se nombra alguna compañía, nos imaginamos en nuestro tercer ojo al logo. Si se
menciona IBM, nos imaginamos el acrónimo en azul con rayas blancas horizontales.
Ferrari, el caballo en dos patas. La lista continúa.

Si decidimos crear un gráfico para el logo que vamos a diseñar, debe estar relacionada,
aunque sea de manera abstracta, con lo que la compañía produce o hace, o su fundador.
Por ejemplo, Ford en el logotipo de Ford. Casi todos nosotros
sabemos quién fue Henry Ford. Otro ejemplo Royal Duch-
Shell Group, el holding Holandés/Británico, 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 petróleo y el resto es historia. Durante la era Victoriana, las conchas de mar
eran muy preciadas en Gran Bretaña y parte de Europa, ya que se usaban para adorno,
alhajeros, botones y cepillos. Hoy en día, el logo es fácilmente reconocido en 200 países
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 vehículo utilitario para las masas. Todo lo
que tenemos es la letra V sobre la W dentro de un círculo. Muy fácil de recordar. Una
manzana mordida es sinónimo 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 tamaño para una tarjeta de
negocios o se lo agrande para montar la fachada de un edificio o sobre el techo.

Para reducir costos de impresión, no

debemos crear el logo en muchos colores.
Un color sólo es ideal. Dos es común, tres
no se recomienda realmente. Cuatro es ,
bueno, si el cliente no se preocupa por los
costos, dejémoslo así.

Ven que estas empresas conocidas tienen

logos simples pero memorables, mientras
que otras empresas que quizás 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 pequeñas 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? También ustedes mismos pueden pensar en algo así para
sus clientes, verdad? O quizás algo más poderoso aún, 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 diseñar y también
escribir, no muchos podemos hacerlo. Podremos también crear diseños que ganen
premios, pero eso tampoco significa que podamos escribir. Por más extraño que suene,
hay quienes hablan inglés como primera lengua y no escriben. Muchos de ellos pueden
hacerlo en forma limitada – sin errores gramaticales o de ortografía – pero se sienten
perdidos en cuando a géneros específicos. Mientras que quizás 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 reputación, son a los que
seguramente se les va a ocurrir un buen slogan. Están entrenados para usar las palabras
exactas para expresar lo correcto, de la forma más compacta posible. Pueden pintar
miles de cuadros con una palabra. Por eso, díganle a un copywriter lo que quieren, y
ofrézcanle buen dinero a cambio, como para que sonría con la mirada. Valdrá la pena,
se los aseguro.

Conclusión – 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 diseñador 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
tecnología de la información), y aprendan algunos de estos temas bien, en lo posible.
Hagan eso, y es seguro que les vaya bien – porque van a tener más 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 publicación, pero todavía no escuchó hablar del
término “separación de colores” y nunca le importó la litografía. 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
publicación esté lista, envuelta y enviada, Uds. Presentan su factura. Un par de semanas
más tarde, el crédito en sus cuentas bancarias les sonríe una vez más.
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 María, 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? ☺