30 jul. 2010

5 programas a tener en cuenta para crear el diseño de una web


En esta primera entrada de la serie "Herramientas para el diseño web", analizaré los principales programas que se usan normalmente a la hora de diseñar una web. 
A primera vista podría servir cualquier herramienta que nos permita crear formas, mover objetos y aplicar colores, pero aunque sea así, las hay creadas específicamente para esta labor, facilitando el trabajo y la productividad del diseñador.
El programa de diseño web debe ser versátil, rápido y claro. A diferencia de un programa de dibujo o retoque fotográfico, en el diseño web la prioridad es que el manejar muchos elementos de distintos tipos sea intuitivo, fácil y sobre la marcha.
A continuación propongo los programas más populares que se utilizan para el diseño web, analizándolos a grandes rasgos y mostrando los pros y contras de cada uno. Están ordenados de más adecuado a menos adecuado.


1.Adobe Fireworks
 Se trata del programa por excelencia para el diseño web. Está creado para tal propósito e incluye herramientas enfocadas únicamente a web que ningún otro programa de tratado vectorial incluye. El manejo y edición de objetos es extremadamente rápido, pudiéndonos olvidar, en muchos casos, del uso de capas o simplificar su uso a agrupar conjuntos, más que a manejar mediante ellas los objetos individuales como haríamos en otros programas (photoshop, illustrator).
Fireworks permite también la edición de imagen básica, pudiendo recortar imágenes, aplicarle filtros u efectos sin tener que irnos a otra aplicación.
Otro punto importante y que demuestra la potencia de Fireworks para el diseño web, es su posibilidad de manejar estados de un mismo objeto. Por ejemplo, si tenemos un botón pues poder indicarle el estado de reposo, activo, visitado... y poder comprobarlo en vivo.
Al igual que Flash, Fireworks dispone de su biblioteca de objetos, y al igual que Flash, podemos crear un símbolo (p.ej: un botón) aplicarlo a distintas partes de nuestro diseño, y si más tarde necesitamos modificar dicho botón, no tendremos que modificar uno a uno cada botón que hemos usado, si no, irnos al símbolo, hacer los cambios, y estos se aplicarán automáticamente a los presentes en el documento.
A la hora de guardar los documentos Fireworks también ofrece suculentas ventajas. El formato de fireworks para trabajar es el PNG, un formato ligero, compatible con cualquier visor de imágenes y encapsulado, es decir, no necesitaremos incrustar imágenes (como en illustrator) manualmente en los documentos. También podremos guardar el documento en jpg, psd e Illustrator (conservando las capas y la total edición), Swf, Gif animado... (Fireworks es una buena herramienta también para la animación de Gifs).
No obstante, Fireworks también tiene puntos negativos. Hasta la versión CS4, ha sido un programa extremadamente inestable. Tanto en las versiones Mac como PC se colgaba cada 2x3, daba errores de guardado y en más de una ocasión te cagarás en la madre de los desarrolladores. Pero todo eso pasó a la historia a partir de la versión CS5, estable, rápida y que de momento no da problemas, o al menos yo no me he enterado.

Resumiendo. Fireworks a día de hoy es de los mejores, por no decir el mejor programa de diseño web. Por lo que he comentado en las líneas anteriores y por todo lo que me he dejado por comentar.

Pros:
·Rapidez en el manejo de objetos.
·Muchas opciones únicas para web
·El formato PNG

Contras:
·Hasta la versión CS4 es inestable
·Interfaz no tan cuidada como otras suites de adobe, aunque en la CS5 se ha igualado un poco más.


2.Adobe Illustrator
 Como su propio nombre indica, Illustrator es un programa enfocado sobre todo a la ilustración. Sus potentes herramientas vectoriales lo avalan, y su versatilidad a la hora de mover grandes cantidades de vectores lo confirman.
No obstante, muchos diseñadores lo usan para la creación web, y no es una mala opción ya que al igual que con Fireworks, el manejo de muchos objetos individuales y diferentes se hace bastante fácil y rápido.
Pero a diferencia de Fireworks, Illustrator no incluye herramientas enfocadas a web y su formato de salida (.ai) es cerrado y más pesado que el PNG. Además, en Illustrator tendremos que asegurarnos siempre que las imágenes están incrustadas en el documento y no enlazadas. De no estar incrustadas, cuando abramos el documento en otra ubicación, dichas imágenes no aparecerán en su interior pidiéndonos que las reparemos. El incrustar las imágenes también hace que el peso del documento aumente considerablemente.
Illustrator por otra parte, es más compatible con photoshop que Fireworks, pudiendo copiar un objeto inteligente desde illustrator y pegarlo en photoshop manteniendo esa "inteligencia" de escalado y propiedades, además de si dispone de transparencias, éste las mantendrá.
Hasta la versión CS4, Illustrator no soportaba texto sin suavizado, por lo que era una gran pega a la hora de visualizar el texto de un diseño web tal como quedaría en un navegador, pero en su versión CS5, ya soporta dicha propiedad, mostrando los textos en formato píxel y haciendo que el diseño de una web sea lo más fiel a la realidad posible.
Un punto interesante de illustrator, es el manejo de páginas o "mesas de trabajo" dentro de un mismo documento. Podremos crear tantas páginas como nos quepan, de distintos tamaños, y tanto  la visualización como la exportación de las mismas es mucho más intuitiva que fireworks.

Resumiendo: Illustrator es el perfecto programa de ilustración vectorial y un buen programa de diseño web. Carece de herramientas específicas para web, pero por otra parte es posible que no las necesitemos si vamos a hacer un diseño no muy complejo.

Pros:
· Manejo de páginas en un mismo documento
· Compatibilidad con photoshop
· Más herramientas de manipulación vectorial

Contras:
· Formato .ai más pesado y cerrado
· Sin herramientas específicas para web
· El incrustado de imágenes


3.Freehand
Fue uno de los primeros programas con los que muchos diseñadores descubrieron el mundo vectorial, y se agarraron a él firmemente gracias a su versatilidad en muchos campos. Tanto se usaba para diseñar una web como ilustración vectorial o maquetación editorial. De esto ya hace unos cuantos años ya que a día de hoy freehand, aun ser un buen programa, se ha quedado algo desfasado con respecto a sus hermanos mayores.
Podríamos compararlo más con illustrator que con fireworks (aún tener los mismos orígenes que este último) ya que Freehand está enfocado al manejo vectorial. Al igual que en Illustrator, también dispone de páginas fáciles de administrar y de modificadores vectoriales (pegar dentro, duplicar elementos, pegar consecutivamente...) bastante potentes, y comparte muchas características de illustrator al ser ambos programas de edición vectorial. Pero carece de muchos otras que illustrator sí tiene y que a día de hoy son imprescindibles.
No obstante, Freehand puede ser un perfecto programa para iniciarse en el mundo vectorial, ya que sus menús, al ser más sencillos, pueden ser el camino para aprender a manejar vectores, curvas beizer y muchas herramientas básicas y comunes que se comportan de la misma forma en todos los programas de este tipo.
Freehand también puede ser una perfecta herramienta para la creación de Mockups (bocetos de un diseño) antes de iniciar el diseño final y más detallado de una web. Aunque no dispone de herramientas específicas enfocadas al mundo web.

Resumiendo: Freehand en su día fue el mejor programa de manejo vectorial, pero a día de hoy exisen mejores opciones. Si eres un iniciado en el mundo vectorial es una buena manera de iniciarse y familiarizarse con el comportamiento de los vectores, pero si ya tienes conocimientos en este tipo de programas puede que se te quede corto para diseños algo complejos.

Pros:
· Manejo de páginas
· Ideal para iniciarse en el mundo vectorial
· Menús más sencillos.

Contras:
· Herramientas muy básicas
· Corto para diseños complejos



4.Adobe Flash 
Flash es una herramienta más enfocada al mundo de la animación e interacción que al diseño web propiamente dicho. Durante el boom de flash se usó a diestro y siniestro para crear webs hiper-interactivas e hiper-animadas en las que la mayoría huían del diseño usable y fácil, decantándose por la espectacularidad. Hoy gracias a dios esa no es la tendencia y muchas empresas y han migrado sus espectaculares y estrambóticas webs hechas en flash a códigos de programación estándares y accesibles.
Hecha esta introducción, flash es a día de hoy, una buena herramienta para complementar el diseño de una web. Incluir banners, pequeñas animaciones, pases de imágenes... aunque todo esto en unos años quedará eclipsado por el HTML5,  hoy flash aún se sigue usando para ello y aún le queda tiempo para ser sustituido.
En todo caso, a flash no lo podemos tratar como a los anteriores programas por su enfoque más multimedia. Pero sí que se puede decir que es un programa enfocado al 80% a la web, y por lo tanto, de algo nos tiene que servir a la hora de crear nuestro diseño.
Flash, por lo tanto, nos servirá para enriquecer con contenido multimedia el diseño de la web que vayamos a diseñar. Además por su facilidad de uso de cara a animaciones y los rápidos resultados es la herramienta ideal. Pero tiene un defecto que puede hacer que te eches atrás a la hora de usarlo. Flash no es compatible con muchos navegadores de dispositivos móviles y por lo tanto es una gran barrera.
Pero esto no es un gran impedimento para crear contenido para nuestra web. Flash es también una gran herramienta de ilustración y nos puede servir para diseñar iconos con estilo propio de flash, coloridos fondos o estilizados botones. Digo estilo de flash por que aún siendo también un programa de tratado vectorial, el uso de su herramienta de dibujo tiene un toque algo distinto y más manual que los anteriores programas comentados. También por que muchas de sus herramientas tienen comportamientos extra que los otros programas no tienen (poder dibujar únicamente dentro de una forma sin salirnos de ella, transparencias, bordes...) y su herramienta de pincel da resultados bastante interesantes.
No obstante, si no nos importan las barreras que suponga flash de cara a la creación, distribución y visualización de una web, es la herramienta más potente para crear páginas con toda la animación, interactividad y contenido multimedia que queramos.

Resumiendo: Flash es una excelente herramienta para añadir contenido multimedia extra a nuestro diseño, y un potente programa para crear una web totalmente interactiva y animada. Pero incompatible con algunos navegadores y siempre dependeremos de que la gente tenga que tener instalado flash en el navegador.

Pros:
· Contenido multimedia e interactivo
· Ilustración vectorial con estilo distinto
· Facilidad de uso para crear animaciones
Contras:
· Incompatible con algunos navegadores
· Necesidad de instalar flash para visualizar la web



5.Adobe Photoshop
Y llegamos al último programa, el famoso Photoshop. 
Photoshop, pese a quien le pese, es el peor programa para diseño web. Se pueden crear diseños completos, no hay duda, pero la poca flexibilidad que tiene a la hora de manejar objetos, las limitaciones para modificar objetos ya creados, el cúmulo de capas que se pueden llegar a generar y el tener que manejar dichas capas casi por obligación, lo hacen un programa lento y que hace perder muchísimo tiempo productivo en comparación a los anteriores. Por poner un simple ejemplo, si rellenas un recuadro degradado en photoshop y más adelante quieres modificarlo, deberás crear uno nuevo, ya que no dispone de la opción de modificar en vivo ese cuadro en concreto, a no ser que crees una capa de degradado, pero hacer esto para cada botón u objeto que tengamos con degradado, puede generar un número interminable de capas que ayudarán aún más a deteriorar nuestra productividad. 
Photoshop es un programa de retoque de imagen y todas sus herramientas están enfocadas a ello. Tiene herramientas vectoriales básicas, pero igualmente están más enfocadas al uso sobre imágenes. También dispone de opciones de exportado a web generando automáticamente el código completo de un diseño a html y css, pero el resultado no suele ser el perfectamente esperado, siempre habrá que reajustar.
Por otra parte, Photoshop es el perfecto compañero de cualquiera de los programas anteriores, ya que nos servirá para el retoque de cualquier imagen que vayamos a incluir en nuestro diseño, añadir efectos o dar los últimos retoques al diseño final.

Resumiendo: Con photoshop vas a poder diseñar una web completa, pero no lo harás con la flexibilidad y rapidez de los primeros tres programas. Es un programa de retoque fotográfico y deberás tenerlo para complementar los anteriores pero no como programa de diseño web principal.

Pros:
· Obligatorio tenerlo como complemento.
· Puede generar maquetas html/css de un diseño.
· Añadir efectos o mejorar las imágenes de nuestro diseño.

Contras:
· No está pensado para diseñar webs.
· El manejo de objetos es muy lento ya que debemos recurrir a las capas.
· Complejidad en modificar objetos en vivo.



Conclusiones:
Después de estos pequeños análisis sobre los programas de diseño que están en la palestra. Mi veredicto es bastante claro. La combinación perfecta es sin duda Fireworks+Photoshop. O incluso Fireworks en solitario aunque sus herramientas de manipulación de imágenes no son tan potentes como las de photoshop, en un momento dado pueden sacarnos de más de un apuro y para tareas de retoque menos avanzadas son totalmente aptas (reescalado de imágen, optimización, sombras, difuminados...). Tampoco está mal la opción de Illustrator, pero a partir de la versión CS5, ya que anteriores versiones no tienen la opción de quitar el suavizado al texto (sólo se podía hacer rasterizandolo, pero perdíamos la capacidad de edición del mismo) y por ello el resultado de un diseño web no terminaba de ser el definitivo.
Cada uno terminará usando el programa con el que se sienta más cómodo, pero la productividad y velocidad de manejo de objetos es lo que, desde mi punto de vista, es prioritario en el diseño de una web y si el programa que usemos es ágil en este sentido, habremos ganado muchísimo tiempo y dejado atrás muchos quebraderos de cabeza.

No hay comentarios:

Publicar un comentario

Comenta aquí lo que quieras