skip photoshop

Jason Fried, de 37Signals, ha dejado en el blog corporativo una interesante reflexión sobre su metodología de trabajo. Aboga por un método non-photoshop a favor de un prototipado y diseño directamente en HTML/CSS.

Obliga al paso previo de sketcheado en papel, y anima a prototipar y diseñar con ejemplo reales, argumentando que todo lo que se vea en una pantalla debe ser clickable:

If it’s on your screen it should work

En parte puedo estar de acuerdo, sería un ideal, y es algo que llevamos a cabo en The Cocktail a medias (sólo a medias).

Cuando estás involucrado en proyecto para cliente tienes la obligación de iterar con el cliente. Asumir que vas a acertar con un diseño a la primera puede ser demasiado presuntuoso por tu parte. Para este grado de iteración, sin duda, es más rápido tirar de vectores.

Prototipar y diseñar en HTML/CSS es algo que sólo te puedes permitir cuando estés en perfecta sintonía con el cliente o estes trabajando para un proyecto de la casa.

Por no llevarle la contraria a Jason debo suscribir el título de su post: Why we skip photoshop, pero por motivos diferentes. En The Cocktail, y desde sus orígenes, nunca se ha usado Photoshop como herramienta de prototipado y diseño. Tras unos años de experiencia podemos argumentar y argumentamos que Fireworks, aún sin ser la herramienta perfecta, cumple con todas las necesidades básicas para poder desarrollar un proyecto sin echar en falta ninguna otra herramienta.

Photoshop queda relegado para el tratamiento fotográfico, Illustrator/Freehand para los vectores más complejos y, para todo lo demás, Fireworks.

  • El uso de vectores es real y básico, ni tan extremo como Illustrator ni tan fake como Photoshop.
  • Las herramientas son las justas para desarrollar un diseño moderado, sin excesos. Photoshop te invita al exceso de forma nativa.
  • Los textos son tratados como vectores, por lo que su manipulación es mucho más ligera. Photoshop convierte los textos en bitmaps, por lo que manejar grandes cantidades de textos se puede convertir en una pesadilla.
  • No tendrás problemas con la gestión de color porque trabaja de forma nativa con RGB, sin posibilidad de cambio.
  • El uso de librerías, paginas, frames, símbolos, 9-slice scaling guides, finalmente, la convierten en una herramienta excelente para nuestros fines.

Conclusión: Fireworks, aún sin poder decir que sea una herramienta perfecta, puedo afirmar que se trata de la mejor solución para el diseño de interacción e interfaz. Dependiendo del proyecto y sus características puede ser aún más ágil y versátil que iterar con HTML/CSS y cumple con todas las expectativas del resultado final.

Asumiendo tu buen criterio como diseñador / maquetador, me atrevería a afirmar que un 80% de las cosas que pudieras hacer con Fireworks son facilmente transportadas a código … ¿podríamos afirmar lo mismo sobre Photoshop?

Edito: A los pocos minutos de publicar este post y siguiendo en mi tarea de mantener al día mi GReader, encuentro un post de Stopdesign donde comenta y cita otras fuentes que mantienen un debate abierto sobre el tema. Una de las referencias es a John Hicks (Graphics Editor or Text Editor) también con un argumento en defensa de Fireworks. Interesante también leer el hilo de comentarios en todos los posts enlazados.

5 thoughts on “skip photoshop

  1. KekoNo Gravatar

    Es fudamental trabajar con un una barra de propiedades. Poder seleccionar un elemento y modificar en px sus dimensiones (o simplemente poder verlas), conocer sus estilos, etc, no tiene precio a la hora de diseñar para web.

    Una decente exportación a HTML sería perfecto para crear de forma ágil un prototipo con auténtica interacción. Es una lástima que el chorro de html tipo dreamweaver que escupe fireworks sea tan poco fiable. Aún así, me parece relativamente solvente para según que proyecto.

  2. Jorge CorreaNo Gravatar Post author

    Yo es que directamente ni me planteo usar la exportación HTML de Fireworks en alguno de mis proyectos :D no way!

    Aclaro que en ningún momento he pretendido decir que sea mala idea crear un prototipo navegable, sólo que dependiendo del proyecto y sus características será factible o no.

    Cuando hago freelanceos tiro cuatro líneas básicas en Fireworks (colores, formas, logos, iconos, …) y el resto ya en HTML, pero es que cuando es un DIY es fácil.

    Si 37Signals se permiten el lujo de hacer una afirmación de ese tipo, es porque no trabajan con clientes reales …

  3. ainiestaNo Gravatar

    Interesante comentarios… Me quedo principalmente con una frase que me ha parecido genial:

    Photoshop te invita al exceso de forma nativa. :D

    Lo que dice keko de la barra de herramientas es fundamental, menudos jaris mas guapos que se te montan con las dimensiones en PS…

    Saludetes.

  4. Javier CañadaNo Gravatar

    Me declaro ultrafan de Fireworks y añado otra ventaja más a tu lista:

    Su formato nativo se puede ver en cualquier navegador. Te ahorras mucho tiempo y molestia cuando puedes intercambiar con compañeros y clientes los archivos sin tener que hacer la correspondiente conversión a jpg o gif.

    Para la interacción yo hago lo siguiente: enchufo un prototipo al dreamweaver y en dos patadas le monto un mapa de imágenes encima, de modo que tengo un html navegable cutrecillo pero suficiente para que se entiendan las secuencias de pantallas. Y todo eso en cuestión de segundos. Pero sí, molaría no tener que cambiar de programa.

  5. AlvaroNo Gravatar

    Tuve que aprender Fireworks por imperativo legal en la anterior compañia donde trabaje y viendolo con perspectiva es de las mejores cosas que saque de alli. Difundo Fireworks a capa y espada, lo he recomendado en mis cursos y la gente de mi equipo se va animando a su uso poco a poco. Coincido en todo lo que comentas en tu post y ademas añado otra evntaja, cosume poca maquina, no todos andamos sobrados de ram y en ordenadores justitos photoshop se lo come todo.

    Un saludo.

    Alvaro Varona
    http://www.marca.com

Leave a Reply

Your email address will not be published. Required fields are marked *