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?