Procesos en diseño digital

Desde que comencé a diseñar y crear proyectos digitales a finales del 2008 he visto muchos cambios en los procesos y herramientas para diseñar y construir para la web. Y haciendo una retrospectiva me doy cuenta de lo notorios que son los cambios debido a necesidades o a la llegada de una nueva tecnología. Al final cada quien decide la forma que le funcione mejor, pero creo firmemente que los procesos que menos se alejan del código son los que mejores y más rápidos resultados obtienen.

Como muchos en esos años, quería crear soluciones innovadoras y sorprendentes. Por lo que generalmente se usaba Flash, esos famosos intros y transiciones. La verdad es que se sentía una libertad increíble de que podías crear todo lo que pudieras imaginar. Obviamente ignorando muy fuerte el UX y la accesibilidad como se acostumbraba.

Mi proceso en mis comienzos

1. Bocetaba de manera detallada la estructura y un poco sobre las interacciones o animaciones que buscaba agregar.
2. Tomaba Photoshop para darle vida al boceto con detalles, colores y tipografía.
3. Detectaba los elementos que requerirían animación o interacción (un header con menú desplegable) para exportar esos layers a Flash.
4. Ya en Flash creaba las interacciones y animaciones para exportarlo en un swf.
5. Los layers restantes se exportaban a imágenes para así agregarlas a Dreamweaver creando una estructura con tablas que junto con el swf resultante de Flash y exportaba el código para probarlo en un navegador y así subir el sitio por FTP.

Con todos esos pasos, era una cambiadero de aplicaciones, para tratar de lograr lo que uno quería ver en el navegador sin voltear a ver mucho al código resultante.

No duré mucho así, afortunadamente comencé cuando ya el movimiento de los estándares web estaba fuerte. Una vez que empece a leer un poco sobre eso mi manera de trabajar y forma de ver la web cambió por completo. Me obligue a perderle el miedo al código y comencé a aprender HTML y CSS.

Mi proceso sabiendo lo básico

1. Bocetaba de manera detallada la estructura.
2. Tomaba Fireworks para darle vida al boceto con detalles, colores y tipografía.
3. Creaba imágenes de los diferentes estados de botones y links en :hover, :active, etc.
4. Los assets se exportaban para así poderlos utilizar en el código.
5. De vuelta en Dreamweaver pero ahora usando solo la vista de código iba armando las páginas diseñadas en HTML y CSS.

La ventajas eran notorias, tenía más libertad y flexibilidad en mis diseños ya que por fin entendía el código que se utilizó para crearlos. Me ahorraba el tiempo que me tomaba en Flash y aprovechaba las ventajas que tenía en ese entonces Fireworks sobre Photoshop, siendo una aplicación enfocada para la web.

Ahí se podría tener estados en los elementos, una mejor exportación de imágenes; como la transparencia en gifs que funcionaba en IE6 y también poder trabajar con vectores. Lastimosamente Adobe no le dió suficiente atención y recursos a Fireworks.

Durante esos años Photoshop siguió actualizándose y Fireworks se quedo atrás. Y tomando en cuenta que el skeuomorphic design estaba en su auge, regresar a photoshop era la elección obvia.

Con el tiempo también me encontré con un mucho mejor editor de texto Coda y mi proceso nuevamente cambio.

Mi proceso para Skeuomorphic

1. Bocetaba de manera básica la estructura.
2. Abría Photoshop para finalizar el diseño con muchos detalles, degradados, colores y tipografía.
3. Los assets se exportaban a imágenes para así poderlos utilizar en el código.
4. Y terminaba en Coda escribiendo el HTML y CSS necesario para armar los diseños.

En ese entonces se invertía una gran parte del tiempo en Photoshop, así como la técnica para recortar imágenes y optimizar su tamaño para evitar que una página con tantas imágenes se hiciera tan pesada. Era un verdadero reto crear esquinas redondeadas de contenedores, así como agregarle sombras.

Aun así tomando todo eso en cuenta, fue una de las fases que mas disfrute, se tenía un gran enfoque en detalles gráficos. Y había mucha creatividad en la manera de llegar a extraordinarios diseños con las restricciones que se tenían con los navegadores del momento.

Después se empezó a hacer muy popular el término designing in the browser lo cual se me hacía bastante lógico, ya había mejor soporte de CSS en los navegadores y algunos empezaban a incluir algo de CSS3.

Mi proceso con mayor enfoque en código

1. Raras veces bocetaba, me iba directo al editor de texto.
2. Los assets se exportaban a imágenes para así poderlos utilizar en el código.
3. Y terminaba en Coda escribiendo el HTML y CSS necesario para armar los diseños.

Sin duda sentí un gran cambio en la velocidad, un mejor entregable al ser igual de flexible que el medio mismo de la web y más rápido de hacer cambios.

Aquí ya estaba el auge fuerte de responsive web design por lo que ayudaba usar el navegador lo antes posible para mostrar la adaptación a los diferentes tamaños que se iban a soportar.

Un problema que encontraba era que terminaba con diseños poco auténticos, inconscientemente iba armando el sitio en layouts relativamente fáciles de hacer. Recurría a lo familiar, considero que en el código es mas fácil iterar y crear muchas versiones alternas de una misma. Pero no tanto para la fase inicial de experimentación en el diseño.

Afortunadamente el software de diseño digital empezó a crecer a gran velocidad, iniciando con Sketch. Que por fin si era un programa enfocado 100% al diseño web y productos digitales, donde integraba varias herramientas esenciales que hacían el proceso mucho mas fácil.

Mi proceso actual

1. Boceto las principales ideas
2. Le agrego detalle y texto en Figma
3. Escribo el código para armar el diseño en VS Code

Hablando de CSS, recurrí a utilizar un preprocesador y adopte la arquitectura de ITCSS creada por Harry Roberts. Que hizo una gran diferencia en la organización de mi código y facilidad de encontrar exactamente lo que buscaba para hacer cambios. Así como también no tener que lidiar con problemas de especificidad.

Con la ola de nuevas aplicaciones de diseño digital, ayudaron a reducir el tiempo que tomaba ese paso, así como empezar a crear sistemas de diseño usando símbolos en Sketch o componentes en Figma. Ahora si hacía sentido mantener e iterar el diseño en esas apps.

Hace un par de años que cambie a utilizar Figma como mi aplicación de diseño predilecta, hay varias cosas de las que puedo hablar que contribuyeron en esa decisión pero solo mencionaré la mas fuerte. Y es su naturaleza colaborativa, que soy firme creyente que la colaboración produce mejores resultados que diseños en aislamiento.

Fue un ejercicio interesante recordar los pasos que tomaba anteriormente y como ha cambiado mi proceso a lo largo de los años. Debido a que el campo de diseño digital tiene que cambiar a la par de la tecnología, imagino que mi proceso también lo hará.