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, paraayudar a los novatos a tomar el camino indicado. Los estudiantes de diseño podránpasar todo un año sólo para aprender la teoría de diseño. Así que, imagínense cuántomaterial podría escribirse. En todo caso, este documento es básicamente una guía y porello, no pretende convertirlos en diseñadores galardonados.

Para mantener brevedad, he excluido partes de información importante, las cualespodrán encontrar en mis “tips” dentro del “General Swish Help Forum” (foro de ayudaen 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, necesitamostener una base, la cual se centra en las dos primeras partes.

Mis agradecimientos a –Lisa Abke por los logos de algunas empresas reconocidasJohn 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 ParteGENERALEn 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 yen la literatura, nuestro gusto por el diseño está en gran medida condicionado por lacultura a la que pertenecemos, así como por nuestro medio ambiente, crianza yeducación. En esta breve guía nos limitaremos a lo que generalmente es aceptado comobuen uso del diseño, desde un punto de vista cultural Occidental. La elección de estaperspectiva 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 debenestar siempre presentes, de lo contrario no existiría Diseño propiamente dicho. Y lalínea? se preguntarán ustedes. La línea está dentro de las formas, que a su vez estándefinidas, delineadas o compuestas por líneas. Ya que estos tres elementos sonfundamentales, 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 nosllevaría libros enteros y está más allá del propósito de esta guía, como también escapa ami limitado conocimiento. Por ejemplo, los colores pueden transformarse en puros, fríosy cálidos, dependiendo del tiempo del día y la fuente de luz solar. Esto es importantesobre todo para los Diseñadores de Interiores.

Sutilmente, los colores pueden afectar nuestro estado de ánimo o psique. Se supone queel rojo, por ejemplo, ayuda a abrir el apetito. Por eso es que los manteles de restaurantegeneralmente son rojos o por lo menos, tienen rojo como color predominante. Tambiénsignifica bronca y peligro. El azul nos ayuda a relajarnos, promueve calma y armonía.El amarillo es rejuvenecedor; significa felicidad y promueve actividades que requieranel uso de nuestro poder de razonamiento. Por supuesto, el amarillo se asocia tambiéncon la cobardía. El verde es calmante – para la vista y la psique. Por eso es que laNaturaleza nos da tanto verde en forma de forestación. Lástima que estemos utilizandonuestra 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 opapelerí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 detonalidades.

Los colores principales o primarios están escritos en rojo. Estos son: rojo, amarillo yazul, aunque en el concepto moderno hay cuatro: se suma el verde. Incidentalmente, elnegro y el blanco también son colores, pero generalmente no son considerados comotales por el “layman”.

Se pueden crear vuestra propia rueda con colores adicionales. Por ejemplo, se le puedeagregar 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 ocontrasta con cuál.

Figura A Figura B Figura C

En la rueda, los colores que están opuestos diametricalmente (Fig A) se complementanuno a otro. Estos dos no deben usarse en iguales proporciones, es decir, cada unoocupando un 50% de una área determinada, si no que uno deberá usarse en la mayorparte del área, mientras que el otro se usará mucho menos, sólo para dar el efectogeneral.

Cualquiera de tres o cuatro colores adyacentes entre sí (Fig B) están en armonía. Esto sepuede 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 deesos sets se crea una relación basada en la pureza del color y constituye un diseño bienbalanceado. Sin embargo, no es necesario usar los tres colores. En muchos casos, condos es suficiente. Ya sea que usamos dos, o los tres, uno de estos siempre actuará comocolor dominante, o sea, ocupando la mayor parte del espacio.

Si observamos en la Naturaleza, tenemos excelentes ejemplos de buenas combinacionesde colores. Notamos los colores de las flores en las hojas, que emanan de ramas ytronco, 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 unmaestro en todo lo que creamos: la Naturaleza.

Formas

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

En la derecha tenemos dos páginas deejemplo. La de la izquierda esclínicamente limpia y precisa, pero esaburrida ya que los cuadrados soniguales en tamaño y estánposicionados de la misma forma. En

la página de la derecha, tenemos formas de diferentes tamaños, que están posicionadaspara 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 ungrupo de soldados marchando en línea, la de la derecha es una fiesta llena de diversión.

Hay otras maneras de trabajar con formassobre nuestra página, como se demuestraen las páginas de ejemplo de la izquierda.La primera tiene el fondo dividido en dos,verticalmente, de manera que vemos cincoformas. Cinco? Si, la página misma y elárea cubierta por el texto son formastambién. En la de la derecha, el texto estáformateado delineando formas, untriángulo invertido y un círculo.

Tanto en fotografía como en pintura, nos enseñan a que el horizonte debe estarposicionado aproximadamente a 2/3 por sobre nuestro marco o bastidor. Debemosrecordar, sin embargo, que esta regla no tiene que aplicarse indefectiblemente. Se aplicacuando pintamos o fotografiamos una escena desde abajo, por ejemplo. Tomemos unafoto de una parte de París, tomada desde la cima de la torre Eiffel, y esta regla pierdeaplicación. Dicha regla funciona para nuestras páginas web siempre y cuando ladividamos horizontalmente en dos.

Quieren un rectángulo perfecto? No hay problema. Los lados deben estar en el “GoldenRatio”. El Golden Ratio o Golden Mean es 1:pi, donde pi es 6.18033989 infinito (eldecimal es en realidad infinito). Para este fin, lo tomamos como 1:1.6. La naturaleza loaplica en el diseño de la forma humana y otras especies, antiguas civilizaciones loutilizaban para diseñar pirámides y monumentos que se consideran bellísimos aún en laactualidad, aunque ya no estén intactos, como el Partenón en Atenas; así como fueutilizado por genios como Da Vinci y Miguel Angel en sus pinturas.

Texturas

Las texturas hacen que nuestrodiseño sea más interesante. Comotrabajamos con diseño bi-dimensional, nuestra únicaalternativa es imitar las texturas. Unavez más, la palabra clave esmoderación. De hecho, ni siquiera esnecesario utilizarlas en todas laspáginas. Asimismo, las texturas nonecesariamente representan objetosconocidos, tales como arena, granitoo piel de cabra. Un rectángulo quecontiene líneas, horizontales o verticales, también puede servir como textura. En lapágina de la derecha, las barras del menú en la izquierda y la líneas a la derecha puedentomarse como textura.

2da ParteDISEÑO DEL ESPACIO DETRABAJO (LAYOUT)

Una encuesta llevada a cabo años atrás,reveló que lo primero que miramoscuando abrimos algún material impreso(libros, revistas, diarios, etc.), es elextremo superior derecho de la páginaderecha. Abran un diario ahora, y veránque es verdad.

Cuando pasamos la vista por la página a laizquierda, también nos vamos a focalizaren el extremo superior derecho, a menosque haya algo demasiado llamativo enalguna otra parte. Por eso es que losdiseñadores de layouts siempre colocan loque quieren que la gente lea primero en elextremo superior derecho de la página.

Existen, por supuesto, otros métodos dellamar la atención del lector, por ejemplo,colocando un titular en letra grande,utilizando palabras llamativas yponiéndolas en algún otro lado de la

página. Pero si bien un diario puede ser losuficientemente grande como paracontener varias palabras de un tamaño de244 puntos, por ejemplo, las páginas derevistas o las ventanas de un explorador deinternet, no lo son. En la página de laizquierda, se supone que es obvio lo quequiero que lean primero.

Por otra parte, nuestros ojos generalmentese focalizan en las imágenes o cualquiertipo 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 engrupo), no debemos colocarlas de forma queestén mirando hacia el lado contrario del textode la página. Por qué no? Porque las fotos quese posicionan así nos hacen desviar la vista de lapágina, aún si lo que queremos es leer el textoque se encuentra en la página. Los mensajesconflictivos en nuestro cerebro hacen que estoresulte 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 laderecha. 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. Ambasmujeres 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: lesreducen 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 susnombres impresos. Aquí estamos, por supuesto, asumiendo que se les sacó fotos poralgo positivo, y no esposados o llevándolos presos. Miren la foto de aquí abajo. Sip, esesoy yo, tengo puesto un par de anteojos super cool. Me pueden ver? No se preocupen, levoy a pedir al editor que les mande una lupa ☺

Agrupar

He viso al menosuna página web endonde los elementosestabanposicionados cercaunos de otros,creando un “todo”.Los elementos quese encuentren

dispersos o al azar dentro de la página, no solo nos hace quedar como completosnovatos sino que nuestras páginas serán totalmente aburridas. Los elementos debenestar posicionados como se los muestra en la página de la derecha. Por favor tengan encuenta que no hay necesidad de usar TODO el espacio disponible. Ven lo fuerte que esvisualmente la página de la derecha? Les comento que esta es la razón que les damos anuestros clientes en publicidad cuando nos boicotean nuestro trabajo e insisten en que

utilicemos todo el espacio disponible. Por qué debemos pagar tanto por estos espaciosen blanco? Preguntan. Lo que no logran ver es que su aviso publicitario competirá conmuchos items de interés a lo largo de la página u hoja, y utilizar todo el espaciodisponible 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ónse llama “copia”. Como estamos publicando (subiendo páginas a internet), debemosusar 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 enSan Serif. Por eso los diarios, por ejemplo, usan serif. Times New Roman es un ejemplode fuente Serif. Arial es Sans Serif. La serif contiene esos pequeños adornos en losextremos de la letra, mientras que una sans serif, no. Sans significa “sin”; Serif es lalínea que cruza el trazo de una letra en su extremo.

Primero la función, después la formaCuál era la primer palabra?Primero la función, después la formaAhora puedes ver mucho mejor

Por supuesto que esto no quiere decir que nunca debemos usar sans serif. Si estánseguros 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 escomo 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á quesomos diseñadores novatos o que no tenemos idea de cómo trabajar con fuentes. Lo cualno va a gustarle mucho a nuestros clientes.

Lo mismo se aplica para la aplicación del color. Mantengan su copia con la menorcantidad de colores posible. Muchos colores harán que nuestra página parezca unparque 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 incluirvariedades 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, lalectura se puede tornar cansadora. Lo mismo sucede con itálicas Deben usarsesolamente para copias cortas y quizás para leyendas de fotografías, o diagramas. Ningúntexto extenso debe aparecer en mayúsculas en su totalidad, ya que también resultacansador de leer.

Otro error común es Copia Reversa (texto claro en fondo oscuro). Muchos profesionalesla rechazan, es más difícil de leer que la copia normal. Si queremos revertir nuestracopia, debemos asegurarnos de que:

1) utilizar Sans Serif (Serif puede aceptarse sólo si nuestra copia es tiene un tamañode 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 extensa4) Nuestro fondo resalta bien la copia.

Probablemente el peor de los errores en layout es colocarle un fondo de imagen/foto condetalles que, junto con las letras se pelean por nuestra atención.

Una buena idea es hojear revistas reconocidas como National Geographic, Life, ReadersDigest, Time, etc., y ver cómo debemos colocar nuestros contenidos en una página. Porsupuesto 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 queapareciera la primer página completa. Había marquesinas, luces intermitentes, appletsde 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 erectushasta, el hundimiento del Mayflower, pasando por infinitos puntos en la historia. Dehecho hasta el fondo en mosaico tardaba años en bajar.

También visité páginas comerciales donde la colección completa de EncyclopaediaBritá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 yoadivine e intente.

Qué hice? Simplemente un clic en aquella “X” en el extremo superior derecho de miexplorador.

Moraleja: La primer página de un site define el éxito o el fracaso de todo nuestrotrabajo.

Si quieren que sus visitantes permanezcan en la página y la visiten completa, asegúrensede que la primer página atraiga su atención y les provoque curiosidad. Como enliteratura, la regla del CCDT (corto, conciso y dulce, tonto) también se aplica aquí. Porsupuesto, no hace falta aclarar que todas las páginas deberán ser interesantes, o por lomenos, que el contenido sea interesante para quienes lo lean.

Recuerden, lo que para ustedes es un diseño espectacular, para otros puede que no losea. No quiero decir con esto que sean unos inútiles, si no que quizás uno está taninmerso 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 enquien confíen para darles una opinión honesta sobre sus páginas, y que se las puedancriticar. No le pregunten a sus novios, novias, madre, padre, hermanos, etc. Si tu diseñono 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 crearweb sites razonablemente atractivas, mientras que los diseñadores deberían saber algodel lenguaje de programación apropiado. Esta gente no necesariamente debe ser expertoen los lenguajes (sería mejor si lo fueran). Pero saber aunque más no sea un poco sobreestos códigos o cómo trabajan, sería suficiente. Esto sirve para que puedan discernirentre qué incorporar en sus páginas y qué sirve para sus propósitos. A su vez, tanto elprogramador como el diseñador debe tener conocimiento acerca de la manifestaciónvisual. 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 denuestro sitio). Sin embargo, no debemos entretenernos mucho con las páginaspersonales aquí, ya que casi todas las premisas sobre diseño web comercial se aplicantambién en estas.

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

Si se trata de compartir información solamente, el estilo tiene que ser formal. – porqueno queremos que nuestros clientes pienses que somos frívolos, verdad? – y debemosponer todo nuestras habilidades en juego. Después de todo, nuestros clientes van ajuzgar 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 queexagerar, 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 unamáquina. Necesitamos antes que nada, un plan de contenido y apariencia. Qué clase yqué cantidad de copia quiero incluir? Qué imágenes (diagramas y fotos) voy a utilizar ycuá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 aproximadode las páginas. Necesitaremos un block de dibujo y lápices de colores. En el mundo de

la publicidad, estos borradores sellaman “bosquejos”, y nos darán unaidea de cómo se va a ver elcontenido de nuestra página webpropuesta.

Desplieguen los bosquejos en elpiso, estúdienlos cuidadosamente, ysean sus propios jueces de lo quenecesitan añadir, quitar,reposicionar o sustituir.

Cuando estén conformes, pasarán a la etapa de procesamiento. Aquí es donde se creanlos gráficos necesarios, se trabaja con las imágenes, fotografias y se comprime sutamañ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ánnecesarios algunos cambios, pero es probable que sean pequeños. Su trabajo será muchomás fácil y fluido.

La palabra clave es PLAN. Si no podemos planificar nuestro sitio web, es altamenteprobable que a la larga tengamos que modificar y redistribuir todo, lo cual se traduce enpérdida de tiempo, y si estamos en esto para ganarnos la vida, perderemos laoportunidad de obtener más ganancias de que hubiéramos podido generar si obviamoseste paso sin sentido.

El Look – Mantener una identidad

Las grandes empresas generalmente prestan mucha atención a la imagen que presentanal público. Valoran la identidad corporativa tanto como sus activos fijos, y por logeneral son muy estrictas con respecto a sus logos y colores corporativos que se puedenusar y cuáles otros no.

La forma en que estos se aplican está explicada en un documento que generalmente sellama “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íatenía casi 400 páginas). Estas guías dan especificaciones sobre los milímetros entre ellogo de la compañía y los márgenes, tipos de fuente en sus memos, los colores exactos autilizar, etc.

Estas entidades comerciales, generalmente tienen un Departamento de RelacionesPúblicas que les maneja el aspecto no visual en cuanto a publicidad, y quizás solo unapersona o un pequeño sector es responsable de la proyección deseada de su imagenvisual. Regla número uno, cuando diseñamos un web site comercial, debemos asegurarque 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 osus colores corporativos, o un elemento de reconocimiento (“Mnemonic Device”), paracrear una identidad unificada y que se reconozca fácilmente . Esto también ayudará acausar una experiencia visual agradable para nuestros visitantes. Naturalmente, ningunode estos elementos debe ser exagerado. Por ejemplo, en resolución de 1024 x 768, eltamaño de un logo que se repite en todas las páginas no debe ser mayor a 4,000 pixelescuadrados. 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 quepuede ser representativo o de estilo y sirve para recordarnos deque estamos leyendo o mirando un material (en una página opublicidad 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 puedenser sólo una línea o la forma irregular de un objeto representativo en particular. Lailustració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, esrecomendable HTML. Además de que los buscadores las captan más fácil (dadas laspalabras claves adecuadas*, por supuesto), este tipo de sitio presenta también menosdificultad para revisiones necesarias. Un sitio en HTML que incorpore animaciones enFLASH también puede resultar muy atractivo; todo depende de nuestro diseño ytratamiento.

*Las palabras clave se encuentran en el head del html. Estas palabras son las que lagente tipea en los buscadores, por lo general. Están agrupados por meta tags. He aquí unejemplo:

<meta name=”KEYWORDS” content=”animation flash movies swish tutorials sound editing streamingraster vector graphics”>

Qué se necesita

Si queremos ser profesionales, necesitamos contar con más de un software además deSwish. Por ejemplo, más que un Photoshop para edición de imágenes. Hasta el día de lafecha, 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 misgráficos o para modificar letras, exportarlas en formato swf para insertarlas en miarchivo 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 conotros tipos de software, hay una gran cantidad de ellos en el mercado. Elijan algunodentro de su presupuesto y que sea popular. Recuerden, sí, que lo bueno no es barato, ylo barato no es bueno.

Estas son las herramientas fundamentales. A medida que avancemos y adquiramos másy más experiencia, vamos a precisar otro software, como los que se usan para animación3D, 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 malacostumbre de remover códigos que no reconocen, aún cuando son correctos. Es unabuena idea aprender a codificar páginas web a mano y eventualmente deshacerse deleditor html. Para más información, pueden consultar guías online XML y SGML. Sonextensiones de html.

Navegación

Obviamente, el propósito de un menú es mostrarles a los visitantes el contenido denuestra 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 contienevarios 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 sedeben 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 personaspara que también la vean.

A propósito, hay una pequeña aplicación que sirve para buscar links rotos dentro de unsite. Es buena idea correr este programa de vez en cuando. Realicen una búsqueda enGoogle, 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 cantidadresulta tediosa para nuestros visitantes. Por eso es necesario limitar la animación para nodistraer a la gente de los contenidos en la página que realmente importan, o inclusohasta para no enojarlos. Por supuesto, si nuestra animación constituye el únicoelemento, 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 de45kb. Estoy casi seguro de que dicha regla se puso en vigencia en la época del dial-upde 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), sincomprometer la calidad.

Si nuestra primer página no puede ser pequeña dado que, por ejemplo, decidimos incluirmú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 queestá por bajar. Lo último que queremos es que el visitante se frustre, o que tenga queadivinar qué tan pesado será lo que está bajando, o si tiene tiempo para esperar. Despuésde unos minutos, pueden llegar a hacer clic en “atrás”, justo cuando al preloeader lefaltaban 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 eidiosincrasias de todos los browsers del mundo, y diseñar sets de páginas para ajustarsea estos. O simplemente, diseñen 1 sólo set que se ajuste a las medidas de todos losbrowsers. Si optan por esta última opción, les deseo muchísima suerte – porque, en miopinión, es muy probable que terminen diseñando una página bastante aburrida. Comonota 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 sloganadecuado. 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 semenciona 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 nosotrossabemos quién fue Henry Ford. Otro ejemplo Royal Duch-Shell Group, el holding Holandés/Británico, el logoes 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 elnegocio del petróleo y el resto es historia. Durante la era Victoriana, las conchas de mareran 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ísesen todo el mundo. El logo de Volkswagen es tan simple como originalmente iba a serloel auto – (volk wagen: el auto de la gente), un vehículo utilitario para las masas. Todo loque tenemos es la letra V sobre la W dentro de un círculo. Muy fácil de recordar. Unamanzana 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 1o dos veces de haberlo visto.

El logo debe verse bien, ya sea que se lo reduzca en tamaño para una tarjeta denegocios o se lo agrande para montar la fachada de un edificio o sobre el techo.

Para reducir costos de impresión, nodebemos crear el logo en muchos colores.Un color sólo es ideal. Dos es común, tresno se recomienda realmente. Cuatro es ,bueno, si el cliente no se preocupa por loscostos, dejémoslo así.

Ven que estas empresas conocidas tienenlogos simples pero memorables, mientrasque otras empresas que quizás no duranmucho tienen logos complejos, llenoscolores? Eso lo dice todo.

Slogan

Si el cliente es una empresa grande, es probable que el slogan no lo tengan que hacerustedes ya que existen agencias de publicidad que se encargan de eso. Sí se los puedenpedir 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 ologotipo de una empresa. Incluso puede aparecer sola. El “Just Do It” de Nike es unejemplo. Una frase simple, no? También ustedes mismos pueden pensar en algo así parasus clientes, verdad? O quizás algo más poderoso aún, qué les parece? Hhhhmmm, yoque ustedes lo pienso muy pero muy bien.

Mientras que no debemos subestimarnos, al mismo tiempo debemos considerar nuestraslimitaciones. Aunque existe gente en nuestro rubro que puede diseñar y tambiénescribir, no muchos podemos hacerlo. Podremos también crear diseños que ganenpremios, 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 puedenhacerlo en forma limitada – sin errores gramaticales o de ortografía – pero se sientenperdidos en cuando a géneros específicos. Mientras que quizás alumnos de preparatoriao egresados de secundario, nos sorprenden con trabajos excepcionales, guiones de radioo 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 queseguramente se les va a ocurrir un buen slogan. Están entrenados para usar las palabrasexactas para expresar lo correcto, de la forma más compacta posible. Pueden pintarmiles de cuadros con una palabra. Por eso, díganle a un copywriter lo que quieren, yofré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 fundamentalespara el éxito

Un aspirante a diseñador o desarrollador web profesional debe agregarse valor. Leantodo lo que puedan de muchos temas (por lo menos todo lo que se relaciona a IT otecnologí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 losclientes. Recuerden, esto no significa necesariamente que van a tener que hacerlo todoustedes. Tomen el siguiente ejemplo.

Un cliente quiere que le impriman una publicación, pero todavía no escuchó hablar deltérmino “separación de colores” y nunca le importó la litografía. A ustedes sí. Va a estarimpresionado, 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 lapublicación esté lista, envuelta y enviada, Uds. Presentan su factura. Un par de semanasmá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 prefierenlidiar con la menor cantidad de gente posible; esto significa que el dinero, la guita, lamosca, 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 enlas idas y vueltas al banco. Cuando eso pase (no “si” pasa – “Cuando pase”, ok?), meinvitan con un café, vale? ☺