Archivos de diseño versátiles y escalables

Nos encontramos en otro de esos momentos de ebullición tecnológica que suelen girar entorno a determinados equipos, gadgets o dispositivos que posibilitan la creación y el uso de determinados productos, servicios y prácticamente mercados. El ritmo de evolución es tan alto que los smartphones y tablets más avanzados dejan de serlo en cuestión de pocos meses y el trabajo de diseño y desarrollo invertido en aplicaciones de todo tipo necesita ser constantemente revisado para adaptarse a las nuevas necesidades y/o posibilidades.

Analicemos un ejemplo reciente: la nueva pantalla Retina del iPad de tercera generación, con un impresionante incremento en términos de resolución. Gráficamente, pasamos a disponer del doble de píxels para representar un mismo elemento.

Por lo que, inevitablemente, aplicaciones limpias, perfectamente válidas para un iPad de apenas un año, muestra elementos gráficos desenfocados, excesivamente contrastados al depurado aspecto de la tipografía en una pantalla de menos de 10 pulgadas, que es capaz de mostrar más de 2000 brillantes píxeles en su disposición apaisada. Solventar esta incidencia requiere ajustes en términos de programación, pero también de diseño, que son los que nos ocupan en este post.

Diseño escalable

No son pocas la empresas que ofrecieron sus productos adaptados a las posibilidades del nuevo iPad a las pocas horas de estar disponible al público, algo bastante loable especialmente en el caso de videojuegos, donde los elementos gráficos en uso se cuentan por cientos o miles en lugar de por docenas. Independiente de lo que ello diga de los equipos humanos de dichas empresas en términos de anticipación y capacidad productiva, probablemente contasen con un diseño base óptimo para su escalabilidad hacia resoluciones superiores. Hablamos esencialmente de layouts creados mediante elementos vectoriales.

Utilizar este tipo de elementos para el diseño de páginas web o aplicaciones puede parecer una obviedad a día de hoy, especialmente para aquellos que se han formado profesionalmente con herramientas recientes, siendo conscientes de las posibilidades de las mismas.

Sin embargo, todavía son muchos aquellos que por el hábito heredado de sus primeros contactos con determinadas aplicaciones estándar, como Adobe Photoshop, siguen utilizando recursos y formas de hacer menos eficientes (edición con selecciones y píxeles), probablemente por diversos motivos: desde la imposibilidad de investigar dentro del marco de su actividad cotidiana y la necesidad de rendir al máximo a corto término, hasta la (admitámoslo) ineficacia de las herramientas vectoriales de Photoshop, todavía muy lejanas a las de otras aplicaciones específicamente diseñadas para la edición de vectores.

Aplicación al diseño web

Podría parecer entonces que la forma de trabajar este tipo de archivos está específicamente indicada para la creación de aplicaciones para dispositivos móviles o tablets, intentando prever nuevos avances técnicos. Es fácil argumentar que también lo está para el diseño web, por infinidad de motivos, de entre los que podríamos remarcar varios:

1. Es posible que un sitio web haga uso de elementos que posteriormente necesitemos reutilizar en aplicaciones externas (apps) vinculadas al servicio o producto ofrecido. Partir de una base escalable nos asegura que el diseño inicial es readaptable, ahorrándonos horas de poco productivo trabajo de re-generación.
2. También existe la posibilidad de que estemos utilizando un planteamiento de Responsive Web Design a la hora de afrontar la creación de un sitio web, en cuyo caso es probable que debamos readaptar los mismos elementos de diseño a diversos esquemas estructurales. Esto incluye el potencial reescalado de objetos, por lo que volveríamos a beneficiarnos de la flexibilidad de nuestros archivos versátiles y su edición gráfica sin pérdidas.
3. No es extraño el caso en el que un sitio web o una aplicación deba ser expuesto/a en situaciones ‘anómalas’, como presentaciones impresas de una escala considerable que necesitemos imprimir en alta resolución o incluso la producción de vídeos full HD de screencasting, donde probablemente será necesario centrarnos en determinados elementos ampliados que en caso de estar basados en píxeles serán, como poco, ilegibles y estéticamente poco agradables para el receptor.

Cabe destacar que las posibilidades de exportación e interacción entre los programas de diseño actuales han hecho que en los últimos años, aplicaciones en principio muy poco apropiadas para el diseño web, como Adobe Illustrator, se hayan convertido en una opción válida a la hora de crear layouts. Una opción interesante para aquellos diseñadores más vinculados al diseño impreso y que estén poco habituados a diseñar de forma estricta con Photoshop.

Implicaciones productivas

Diseñar interficies de usuario con el propósito firme y constante de que sean 100% escalables no supone ninguna implicación productiva especial una vez que nos habituamos al uso de las herramientas necesarias. La estructura por capas de los archivos será prácticamente idéntica y el esfuerzo necesario para plantear cada elemento, esencialmente el mismo.

No debemos perder de vista la postura del desarrollador asociado al proyecto que nos ocupe. En última instancia, será él/ella quien edite dichos archivos para rescatar cada elemento gráfico que necesite. Un desarrollador veterano podría tener dificultades (escasas, por otra parte) para editar un archivo creado en base a objetos inteligentes o formas vectoriales si no ha reciclado sus conocimientos técnicos de edición gráfica con el paso del tiempo.

Sin embargo, nuestra experiencia nos dice que en muchas ocasiones es el propio desarrollador quien solicita de forma específica que los archivos de diseño se hayan planteado de esta forma, por lo que podemos ser más que optimistas al respecto.

A la práctica…

A modo de ejemplo final, para aquellos que prefieren ver el concepto ilustrado, podemos hacer una comparativa sencilla:

(Arriba) Detalle de una aplicación a escala 100%, contrastado con una ampliación al 200% en base a un archivo creado mediante píxeles. Podemos apreciar la excesiva pixelación que nos obliga a crear de nuevo el diseño adaptado a las nuevas dimensiones globales. Un tiempo de producción adicional considerable que lógicamente tiene un coste.

(Arriba) Detalle de una aplicación a escala 100%, contrastado con una ampliación al 200% en base a un archivo creado mediante formas escalables. Podemos ver cómo el reescalado mantiene intactos todos los elementos, incluyendo efectos de capa y textura, por lo que evitamos una etapa adicional de readaptación.

Conclusión

Parece claro que utilizar el mismo número de horas para obtener un material más versátil, flexible, polivalente (y en definitiva, mejor) resulta productivo tanto para las personas directamente implicadas en el proceso de conceptualización y desarrollo, como para el cliente final, que verá drásticamente reducidos los tiempos de readaptación de su producto a nuevos formatos, pudiendo aligerar costes y responder con mayor eficacia a las exigencias del mercado actual.