Diseñar en el Navegador (Parte I): Qué y Por Qué
Hace años tuve un profesor que nos dijo que, en un futuro no muy lejano, el flujo de trabajo de diseño de webs acabaría por eliminar Photoshop o Illustrator para diseñar directamente en el navegador. Obviamente en aquella época Sketch no era la herramienta de referencia para el diseño de interfaces que es ahora; poca gente la conocía y mucha menos la usaba.
Recuerdo que en aquel momento esa afirmación me pareció una locura –yo acababa de aprender HTML y CSS y aún estaba pegándome con Javascript– y no podía imaginar que nadie quisiera plantearse llevar todo el proceso de diseño a un lenguaje de programación “en crudo”.
Confieso que un tiempo después, cuando me puse como reto programar de cero mi propio portfolio en WordPress, me encontré a mi misma olvidándome casi por completo de programas de diseño (entonces Sketch ya era bastante más común y era el software con el que yo trabajaba) y prototipando e iterando directamente en código.
El impulso de empezar a hacer pruebas de estructuras o módulos directamente en el navegador fue tan inconsciente y natural que por primera vez me plantee la posibilidad de que aquel profesor quizá no fuera tan desencaminado y mereciera la pena explorar ese camino, intentando dejar el software de diseño a un lado en etapas muy tempranas del proceso de diseño, a favor de herramientas mucho más adaptadas al medio que nos ocupa.
¿Qué es “Diseñar en el Navegador”?
Supongo que “Diseñar en el navegador” puede tener diferentes interpretaciones dependiendo de a quién le preguntes, cómo trabaje o el tipo de proyecto. En mi caso, a lo mejor no lo llamaría “diseñar en el navegador” ya que creo que todo el proceso de diseño es algo mucho más complejo, que engloba muchas más etapas y que no puede ser reducido a una sola fase. Me inclinaría por un nombre tipo “prototipar en el navegador”, que lleva más a pensar en el concepto de “bocetar, ajustar, probar e iterar” usando HTML y CSS para crear wireframes de manera muy rápida que nos sirvan como un primer prototipo interactivo de nuestro diseño.
¿Por qué diseñar en el navegador?
1.Prioriza la estructura de los contenidos antes que el estilo
Al comenzar un proyecto lo primordial debe ser el contenido, dejando para la fase visual la elección de tipografías, colores o imágenes. El empezar a prototipar directamente en HTML nos obliga a trabajar con contenido real (o lo más cercano a la realidad que nos permitan las condiciones del proyecto) como base de todo nuestro diseño y a intentar que sea lo más semánticamente correcto posible, lo que ayudará enormemente a la hora de aplicarle estilo después.
2. Podremos aplicar cambios de manera mucho más rápida
Prototipar en el navegador nos permite diseñar y hacer cambios en nuestro diseño en tiempo real y además ver éstos cambios en contexto. Es tan sencillo como abrir el panel de Herramientas para Desarrolladores de Chrome o Firefox y empezar a cambiar colores, márgenes o tamaños de fuente.
Si además trabajamos con un preprocesador de CSS como Sass o LESS, definiendo todas nuestras variables al comienzo del diseño convertirá lo que en Photoshop o Sketch puede ser una tarea larga y tediosa en algo tan sencillo como cambiar un sólo valor.
3. Se agiliza el diseño responsive
A día de hoy, lo normal es que tengamos que entregar nuestro trabajo teniendo en cuenta cómo se verá este en, al menos, tres tamaños básicos; desktop, tablet y móvil. En un software de diseño como Sketch o Photoshop, esto significa tener que multiplicar nuestro trabajo por 3 para que, al final, lo único con lo que contemos sea un diseño estático, una “foto” en capas que luego el front tendrá que coger, interpretar y volver a diseñar por completo pero usando un lenguaje válido para la web.
Para complicar más las cosas, como prototipamos en un medio que no es aquel en el que nuestro diseño se verá finalmente, cuando estamos diseñando para diferentes pantallas no tenemos forma de saber si este prototipo funcionará en un escenario real. Sin embargo, si tenemos todo nuestro contenido ya escrito en HTML, prototipar para diferentes dispositivos directamente con CSS es tan sencillo como ir redimensionando el viewport del navegador y, allá donde detectemos un breakpoint, introducir un nuevo media querie con los ajustes necesarios. Trabajar de ésta manera nos asegura que nuestro diseño se verá bien a cualquier tamaño porque lo habremos ido comprobado según diseñamos.
4. Al terminar tendremos un prototipo funcional
Después de haber hecho en Photoshop o Sketch todo el trabajo del que ya hemos hablado, el resultado final sigue siendo un diseño estático, que los clientes no pueden usar para entender el flujo entre pantallas o el funcionamiento de los diferentes procesos, a no ser que previamente hayamos subido todas esas pantallas a una herramienta como Invision o Marvel. Tampoco podremos trasladarles cómo funcionarán determinados efectos de interacción, salvo que exportemos todas nuestras pantallas a otra herramienta (si, una más) específica de animación o prototipado como Flinto, Principle o incluso After Effects, en la que nos tocará volver a invertir una cantidad de tiempo preciosa en recrear animaciones y efectos que, de nuevo, no podrán ser posteriormente reutilizados en producción; a estas alturas ya llevamos un número importante de horas trabajando en algo que no será el producto final.
Sin embargo, si hemos hecho nuestro diseño en HTML y CSS, los enlaces, efectos de hover o pequeñas animaciones funcionarán sin ningún problema y tanto el cliente como los usuarios podrán navegar por las páginas, experimentar con la interactividad y evaluar el diseño basándose en una experiencia real y no en aquello que les pidamos nosotros que imaginen.
Tendremos un primer prototipo interactivo sobre el que comenzar a trabajar, analizar y testear en diferentes tamaños de pantallas y que además nos permitirá realizar cambios de manera rápida y con resultados instantáneos, agilizando mucho más el proceso de diseño, eliminando fricciones y pasos innecesarios y comprobando cada paso a tiempo real.
Conclusión
La web sigue cambiando. La manera en la que diseñamos para ella también.
El Responsive Web Design es una realidad desde hace años, el content first tiene más relevancia que nunca, los efectos de interacción y pequeñas animaciones de interfaz ya son casi una obligación, al igual que los procesos de diseño ágiles. Paralelamente a estos avances, la tecnología cada día pone a nuestra disposición más facilidades para hacer frente a esta nueva era.
Próximamente escribiré un post con una lista de las herramientas que uso yo a la hora de diseñar en el navegador y cómo veo el futuro del diseño web, veréis que empezar a adoptar esta forma de trabajo no sólo es muy sencillo sino que además resulta muy placentero porque estaremos trabajando directamente sobre el medio final y las herramientas pensadas para ello nos darán muchísimo juego para hacerlo de manera orgánica y eficaz.
Originally published at elenadrigal.com on October 16, 2016.
