De PSD a HTML: ¿un flujo de trabajo conveniente?

En un equipo de trabajo con roles bien delimitados, el diseñador web realiza una plantilla estática del sitio web utilizando un software de edición gráfica, mientras que el maquetador y el desarrollador traducen ese concepto visual a código fuente y así le otorgan funcionalidad. Este flujo se conoce como «de PSD a HTML» (las plantillas base suelen presentarse en el formato por defecto de Photoshop) y consiste en dividir el documento original en varias imágenes, para luego posicionarlas según lo previsto en un documento HTML. Este documento hace las veces de wireframe, base del diseño pixel perfect.

Actualmente, son muchos los diseñadores que deciden exceder su rol tradicional y prueban suerte codificando sus propias plantillas. Algunos aprenden lenguajes de programación para realizar la conversión por sus propios medios, mientras que otros contratan servicios pagos dedicados a tal fin. Otros eligen utilizar alguna de las innumerables herramientas software que automatizan el proceso. Pero cada vez son más quienes aseguran que este flujo de trabajo es obsoleto en sí mismo. ¿Cuáles son sus ventajas y desventajas?

Ventajas

  • Facilidad. Para el maquetador/desarrollador será mucho más fácil trabajar sobre un diseño definido que codificar sin una idea ya implementada de lo que se quiere alcanzar.
  • Creatividad. El proceso de construir una plantilla en PSD se encuentra limitado por menos restricciones gráficas que las que aparecen trabajando con HTML y CSS. Los efectos visuales complejos que ofrece Photoshop no son realizables siquiera a través de CSS3.

Desventajas

  • No adaptabilidad. Una plantilla en Photoshop tiene, naturalmente, un ancho fijo. Por eso, probablemente sea imposible de traducir a un diseño responsivo. El sitio se verá bien en una sola resolución de pantalla. Se pueden crear plantillas en Photoshop para distintos anchos específicos, pero inevitablemente habrá muchas resoluciones intermedias que no podrán ser diseñadas.
  • Obsolescencia. Actualmente se tiende a realizar sitios web con efectos visuales simples, que sí pueden implementarse a través de CSS, sin necesidad de utilizar archivos de imagen. Los bordes redondeados, los gradientes, las fuentes web y las interfaces planas son ejemplos de ello.
  • Poca flexibilidad. Realizar cambios en un documento HTML es más fácil que hacerlo en un documento PSD, especialmente si éste ya ha sido «dividido» en varias imágenes.

Si bien hay razones importantes para abandonar este esquema, Photoshop y programas similares siguen siendo herramientas irreemplazables para crear elementos gráficos (como fondos, íconos e imágenes retocadas) de cierta complejidad.