Sistemas de diseño en tiempos revueltos

Ahora todo el mundo quiere molar con el Atomic Design.

Danny Saltaren
May 3, 2016 · 5 min read

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…

Image for post
Image for post
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)

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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post

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
Image for post
Image for post

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…

Image for post
Image for post

¿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

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

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Samantha Vallejo Nagera

Sistema y pantallas a partir de componentes

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Liferay

Sistema y pantallas a partir de componentes

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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

Gracias.

Startups (es)

Crear y gestionar una startup es una aventura.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight.
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox.
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month.

Get the Medium app