June, 2008


23
Jun 08

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.


20
Jun 08

tricks & tips sobre retículas

El uso de la retícula es un must cuando estás trabajando con contenido en internet. Cuanto mayor sea la extensión de contenido, más evidente la necesidad de retícula.

Antes de ponerte a colorear cosas, coge un lápiz y un buen puñado de papeles. Boceta sobre papel diferentes estructuras y plantea el equilibrio de contenidos. Define toda la cantidad de layouts posibles, no sea que luego te lleves sorpresas.

El uso de CMS modulares exige un nivel de definición extremo, pero todo debe ser medianamente flexible para ofrecer al layout un envejecimiento natural o, todo lo contrario, mantenerlo siempre joven y fresco.

Debemos entender un site como un elemento vivo, que debe crecer y decrecer de forma natural acorde a las necesidades temporales y condicionantes variopintos.

Las retículas están ahí, como guía, no seas un jodido extremista. Rómpela, juega con ella, distorsiónala, sólo una vez que tengas todo el contenido estructurado y ordenado.

Usa un programa que realmente sepa cómo gestionar retículas … vale, no hay ninguno, pero hay soluciones: Reticulator ™ (para Adobe Fireworks).

Trabaja codo con codo con la gente de maquetación y desarrollo. Ellos deben entender y comprender la retícula. Una retícula bien definida es un camino de baldosas amarillas de cara al layout y marcado HTML/CSS.

Ayuda a la gente HCI a definir una retícula. Ambos podréis exponer puntos interesantes de discusión consolidando una retícula sólida que no hará aguas en ningún momento del proceso.

La retícula no lo es todo. Para que una retícula esté bien aplicada necesitas unos conocimientos avanzados de uso de tipografías, comportamiento de masas y composición. La teoría de color para jerarquizar contenidos es algo que deberías traer de serie si te dedicas a la dura tarea del diseño.

Los diferentes formatos publicitarios te van a condicionar la retícula que vas a tener que utilizar ¡debe ser lo primero que pongas en tu site! Cuando resuelvas la publicidad es tiempo de empezar con los contenidos.


16
Jun 08

Malmö – I have been there!

Last week I attended the conference From Business To Buttons held in Malmo, Sweden. I would highlight the organization and a clear focus on networking.

I was able to talk to professionals from Adaptive Path, Cooper, Inuse, … and a handful of interesting people with very good ideas and projects.

The trip has been spectacular, wonderful people, a charming city Malmö … I took a large number of photos to everything I saw: architecture and the use of typography in the local signage are pretty impressive.

Malmö - From Business to Buttons

Malmö - Jorgen K(R)ocks

Malmö - From Business to Buttons

Malmö - From Business to Buttons

Malmö - From Business to Buttons

More photos on my Flickr.