Evento #uxperience de Ironhack. Foto por @clarew

No es lo mismo un UIKIT que un sistema de diseño

Lo importante es molar haciendo que las cosas pasen.

Este sábado me invitaron a hablar de UX en el #uxperience que organizaba Ironhack. Y es curioso porque realmente hablé mucho de diseño y poco de UX. Mi idea no era llegar únicamente a aquellos que hacían UX, sino transmitir a los que me escuchaban que los diseñadores somos el pegamento de las compañías. Ser parte del pegamento viene a ser una responsabilidad más grande que evangelizar las buenas prácticas del UX y los documentos que, en su gran mayoría, son ineficientes y que, curiosamente, asociamos todos a hacer UX.


Para llegar a este punto, ponía un poco en contexto mi experiencia personal. Contaba que empecé a diseñar en el 2005 y hoy, con casi 27 años, he desarrollado una idea más clara del diseño y los sistemas de diseño.

Recalcaba que si soy un chico de producto es porque me gusta estar de principio a fin en el proyecto. O, al menos, formar parte y ser responsable de la producción de las cosas.

El mismo año que se estrenó la película de Facebook empecé a trabajar en consultoría. En ella aprendí qué se siente haciendo producto. Y, a partir de ahí, me volví adicto a ver las cosas en marcha, a lanzarlas y a ver como cientos, miles o millones de usuarios usaban cosas en las que había participado.

Hablé también de Fever. De mi primera toma de contacto con sistemas de diseño. De imposibles que se convirtieron en improbables al tener que trabajar con presión. Y cuando hablo de presión hablo de MUCHA presión. Pero trabajar así también nos hizo aprender. Aquí cuento esta experiencia y los resultados de ella de manera más detallada, pero esto simplemente fue una introducción para marcar una diferencia que está difusa y muchos no son capaces de ver…


Un UIKIT no es un sistema de diseño

Jonathan Payne

Los UIKIT son el mayor drama de internet. Es peor que escribir borracho en Twitter. Es aún peor que enviar etílico notas de voz a tu grupo y escucharlas a la mañana siguiente. Son lo puto peor.

Te preguntarás cuál es mi problema con los UIKIT o por qué los comparo con situaciones tan dramáticas como éstas (cuando no saben diferenciarlos).

Es sencillo…

Responsabilidad

Esta palabra la aprendes a lo largo de los años. Trabajando. Viendo que las decisiones que tomas afectan a tu empresa. Al dinero y futuro de los demás. Cuando una montaña de caspa o documentos te llega al cuello, importa muy poco el trabajo final porque estamos hablando de rentabilidad, de entregar un proyecto mañana para empezar con el siguiente ayer.

Los UIKIT carecen de responsabilidad absoluta. No hay ningún compromiso detrás de todas las soluciones de diseño que nos dan ya que acabamos usando un sin sentido de cosas que se ven horribles. Verdaderas Quimeras.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

¿Realmente necesito 9 tipos de paginación?

De las partes más divertidas de vender es poner a nuestros futuros clientes a sentirse ‘Homer diseñando su coche’. Y es que son soluciones que tenemos ahí, de las que partir y usar para testar nuestra hipótesis.

Foto por @Javiercn8

Al final del día es lo que queremos pero, si existe nuestra profesión y gente que se hace llamar diseñador, es porque no todos somos Homer, ni todos sabemos qué implicaciones hay detrás de escoger uno u otro entre los 9 tipos de paginación.


Unidad mínima

Todo sistema de diseño tiene su unidad mínima. Me encanta colar fotos de Le Corbusier y hacer uso del Modulor para explicar como el planteamiento de esta gran figura era el hombre. Unidad de la que partir y tomar decisiones de alturas, tamaños y distancias.

En el diseño de sistemas que aplican a la UI pasa igual. Existe una unidad conceptual y luego otra matemática. Probablemente como unidad conceptual esté el plan o evento y como unidad matemática los múltiplos de 8 pixeles en el caso de Fever.

Frank Gehry

Podemos evocar a Alvar Aalto y preocuparnos por cómo se lleva a cabo nuestro plan. Fabricar nuestros propios materiales.

O evocar a Frank Gehry y creernos que nuestro plan está por encima del dinero. Creernos realmente que todo vale.

No, señoras y señores, todo no vale (a no ser que seas Frank Gehry).

Cuando enseño el pequeño sistema de diseño que se hizo en Fever y hablo de los tiempos imposibles, intento mostrar que el verdadero trabajo está en lo que no se ve. Los noes, el depurar y jugar entre lo nativo y custom para ofrecer una experiencia óptima desde la performance hasta el fin mayor que es que descubrir planes y transaccionar. Dicho esto, irremediablemente llegamos a esta pregunta: ¿Nuestro trabajo es invisible?

Aquí está el resultado (repito, en este post explico mucho mejor el proceso). Una solución a un problema de tiempos, expectativas y objetivos.


¿Se está devaluando el valor del diseño visual?

Claramente, no. El compromiso con la estética es cada vez mayor pero, como podemos ver en la imagen de arriba, estamos homogeneizando y centrando el foco en el contenido. En una experiencia mobile es importante la performace y, eso, implica no customizar demasiadas cosas para que ingeniería esté de nuestro lado. Debemos usar patrones de uso interiorizados por el usuario y centrados en resolver el problema en lugar de decirle al mundo que hacemos cosas bonitas o documentos enormes con cuadros grises.

¿Pasará con el diseño de apps como con el diseño de un tenedor? ¿Llegaremos al diseño perfecto y será una cuestión de gusto y complementos?

No lo sé, pero ahora paso más tiempo pensando en jugar con mi Lego (también llamado sistema de diseño) y centrado en medir e iterar, que en diseñar interfaces deliciosas. Aquí es cuando no creo en el valor de un UX que tira documentos al peso y carece de contexto y compromiso con la forma y con lo que, aún peor, es su desarrollo.

No es nada nuevo, llevamos haciéndolo años

En Fever lo hicimos en el 2013 y, este año, Airbnb se ha unido a nosotros compartiendo su sistema de diseño. Gracias Brian Chesky. Es fácil vender esto a un CEO, un Product Manager o tu equipo cuando lo hace Airbnb.

Su unidad mínima. Pocos colores, pocos pesos tipográficos y pocos tipos de espaciado.
Componentes que no se alejan de lo que entendemos todos como listados, cards y detalles.
Un sistema multiplataforma consistente gracias a las restricciones de diseño, la cantidad de noes y la cantidad de responsabilidad con su propósito y desarrollo.

Un marketplace que ha cambiado el mercado, con negociación y la misma posibilidad de vender como de comprar.

¿Dónde hablamos de UX y dónde hablamos de UI? Al final todo es producto y, como diseñador de producto, estás enfocado a los objetivos. Servir de herramientas (servicios) y principios a la gente para que las cosas ocurran.

Lo importante es molar haciendo que las cosas pasen

Sin duda lo importante es molar y dormir bien por las noches. Y, para hacerlo, tienes que ser responsable con tu trabajo.

En la última parte de la charla enseñaba ejemplos de sistemas de diseño en los que he participado o diseñado y hablaba de Atomic design, que ahora está en boca de todos.

Os voy a ser muy franco. Esto es diseño de sistemas de toda la vida pero separado en tres grupos. De menor a mayor complejidad. Hablamos de avatares, de avatares más enlaces y de cards con todo junto. Átomos, moléculas y organismos.

Moléculas del sistema de diseño de Finect
Organismos en Zeplin del sistema de diseño de Finect.

Lo importante, como repito una y otra vez, es la responsabilidad a la hora de crear nuestro sistema de diseño. Añadir lo justo y necesario y, a partir de ahí, componer. Nunca añadir algo que no sea necesario y en su gran medida teniendo en cuenta a desarrollo para que todo vaya de la mano.

Mi papel en Finect junto con Nacho, como en muchos otros proyectos, es servir al propósito de validar hipótesis, tomar datos y saber si lo que tenemos encima de la mesa cumple los objetivos o no. Mi transición hacia el mundo del diseño de producto va cada vez más dirigido en entender de negocio y que mis habilidades como diseñador estén a merced de los objetivos. Y, como Alvar Aalto, hacer que las cosas pasen y pasen lo mejor posible.

Aquí hablo de cómo ayudamos al equipo de diseño a sacar el sistema de Jobandtalent y Fever. En ambos, muestro ejemplos de otros sistemas de diseño.

En resumen, si necesitas vender esta forma de afrontar los proyectos, puedes venirte a mis clases, invitarme a un café o comunicarle bien a tu CEO a través de este post que no vas a ayudar a diseñar ‘el coche de Homer’ y que, de esta manera, todo será más sostenible, consistente y realista


Mucha gente me pregunta por qué soy profesor, por qué me gusta compartir soluciones de diseño. La respuesta es: cada día me siento en deuda con muchos grandes profesionales que, en algún momento, me han dedicado su tiempo, me han hecho pensar y me han enseñado caminos claves para llegar donde estoy. Trasladar ese conocimiento a otras personas es mi agradecimiento.