05/03/2014

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

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.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce