Sistemas de diseño en tiempos revueltos

Ahora todo el mundo quiere molar con el Atomic Design.

No empecé a hablar de sistemas de diseño hasta que no conocí a Javier Cañada y no empecé a ponerlos en práctica hasta que trabajé en Fever.

Hoy voy a hablar de cómo entender el diseño de esta forma me ha llevado a tener un proceso de trabajo que traslado a todo lo que diseño.

Pero antes, un poco de contexto…

Gladiator (2002)

Allá por el 2013 teníamos un marrón entre manos

Nos contactó Bernardo Hernandez y Pep Gómez a Adrian y a mí para diseñar Fever. Nos vimos con la responsabilidad de:

  • Tener todo listo en 6 meses (definición, diseño y desarrollo)
  • Competir en un mercado con otras apps con un año de ventaja y más capital
  • Diseñar algo que fuera Fácil de iterar
  • Que fuera bonito, usable y diferencial
  • Que la app no pesara demasiado

El proceso fue duro, laborioso y complicado. De la experiencia extraigo que en situaciones límite te abstraes, no te queda otra que centrarte en lo importante.

En esos 6 meses nos dimos de lleno con problemas de diseño, limitaciones técnicas, corner cases… y todo esto enfocado a que el diseño nos permitiera tomar decisiones rápido y ejecutarlas a la par.

¿Cuál es la unidad mínima de tu producto?

Esa era LA pregunta. A partir de ese momento el camino estaba nublado pero sabíamos la dirección. En el caso de Fever claramente era el plan porque a partir de ahí ocurren todas las cosas.

El diseño iba de la mano de la definición y la definición de la visión de producto; nos pusimos a probar mil y un tipos de cards, detalles de plan y formas de consumirlo.

Iteraciones de las cards en la home

Una vez convencidos de cómo queríamos que los usuarios consumieran el contenido nos pusimos a diseñar el resto de vistas: listado de usuarios, actividad, notificaciones…

¿Y qué hago con todas estas cosas?

Si puedes poner en una única foto todas las piezas que componen tu armario, te das cuenta que hay muchas cosas que te sobran, prendas repetidas y calcetines sin pareja.

Sistema de diseño de Fever

Una de las cualidades que hacen a un diseñador senior son precisamente el tener siempre presente esa foto. La foto donde están todas las piezas que componen tu producto. Nosotros lo hicimos y sintetizamos en un sketch: listados, cabeceras, botones…

Si lo importante es molar, ¿cómo puedo molar con tan pocas piezas?

Sin ver aun la utilidad real de ese documento, nos dimos cuenta lo importante que era tener una paleta de color que nos diera juego, que fuera neutral y contrastara lo suficiente como para guiar al usuario por la pantalla.

La matemática te ayuda a molar y que los ingenieros te quieran

Nuestros prototipos “molaban todo”, pero sólo estaba preparado para iOS; no habíamos terminando las vistas y ya nos pedían los assets el equipo de Android.

Espaciados, márgenes, alturas y anchos todos en múltiplos de 4. Porque si no tienes tiempo, y tienes que hacer assetings no hay nada mejor que la matemática para evitar cometer errores y hacer perder el tiempo a tu equipo.

Con Fever despiezado empezamos a crear reglas:

  • Si una vista es muy parecida a la otra reutilizamos elementos
  • Los componentes se definen desde el principio y sólo si no queda otra se añaden nuevos
  • Nunca usamos un peso tipográfico ni un color que no esté en la guía
  • No hay medidas que no sean múltiplos de 4
Es mi responsabilidad el uso que le doy a los recursos de diseño en cada proyecto.

Con todo listo y afinado nos quedaba hacer revisiones de diseño, siempre se nos pasan cosas. Sentados el ingeniero y yo, con el sistema y las vistas diseñadas nos asegurábamos que todo estaba en su lugar.

Hace dos años no teníamos conocimiento de herramientas como Zeplin, sin duda ayudan a la hora de documentar y medir. Quién las pillara hace dos años…

¿Qué fue lo siguiente?

Lanzamos, la pifiamos por no contemplar un par de corner cases y seguimos iterando. A día de hoy el equipo sigue trabajando en la mejora de Fever, ni Adrian ni yo continuamos en el proyecto pero lo seguimos de cerca.

Empezar a diseñar usando sistemas de diseño en 10 pasos

¿Preparado? porque va a doler.

  • Identifica cual es la unidad mínima de tu producto
  • Define pesos tipográficos y colores
  • Diseña una librería de iconos dentro de la retícula de 4px
  • Diseña los componentes principales
  • Dite NO a ti mismo. Muchas veces. Hasta que duela
  • Pinta vistas a partir de componentes
  • Exporta assets para distintas plataformas, android incluido
  • Prototipa
  • Revisa con los ingenieros apoyados del sistema documentado
  • Lanza, mide e itera.

Sin duda algo que he aprendido estos dos años diseñando a partir de sistemas es que de las rescricciones salen oportunidades para hacer cosas que molen.

Un juego de lego bien escogido siempre es mejor que un cuadro de Pollock que nadie entiende, adapta o itera.

Aquí van ejemplos de otros sistemas diseñados por saltaren&co

Payroll

Sistema y pantallas a partir de componentes

Samantha Vallejo Nagera

Sistema y pantallas a partir de componentes

Liferay

Sistema y pantallas a partir de componentes

Puedes escribirme si deseas profundizar sobre el tema, estaré encantado de responderte en cuanto me sea posible.

Gracias.