Free AI web copilot to create summaries, insights and extended knowledge, download it at here

Abstract

sí que te tienes que sentar a hablar con ellos y negociar metodologías de trabajo y herramientas.</p><figure id="1140"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*9hEem9Frp5mMi9O5VsxBgg.gif"><figcaption>No queremos acabar así por no colaborar</figcaption></figure><h2 id="ebb7">2. Saber si usan ya un sistema de diseño.</h2><p id="6519">Como Material Design, Bootstrap o cualquier otro que les guste.</p><p id="9d44">A mi me ha sorprendido en varias ocasiones preguntar esto y que te digan: ¿Qué? Lo tienes que decidir tu, no sé que me dices. ¿Cómo sé que grid uso? No sé… <b>Y flipar</b>. Así que, ármate de paciencia porque dependiendo de que equipo tengas te van a mirar por encima del hombro y van a pensar quien se piensa que es esta o van a ser lo más simpáticos del mundo y te van a ayudar a tope.</p><p id="3d6e">Dependiendo de que usen bájate la librería de turno para el programa de diseño que uses (Sketch, Figma, XD…) y modifícalo a tu antojo, con colores, tipografías, forma de los botones…</p><figure id="7c35"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*9QO97Mcu7kSX-guZUQ7Ojg.gif"><figcaption></figcaption></figure><p id="25ee"><b>Recuerda:</b> usar recursos free no es robar, ni debes sentirte menos diseñador por ello. Además te permitirá gastar más tiempo en otras tareas más placenteras que crear todos los componentes de un Design System.</p><h2 id="be83">3. Preguntar por el grid.</h2><p id="9c45">Algo que parece no saber muchos desarrolladores con los que me he topado que el grid más usado, el de Bootstrap es customizable desde la web y se puede cambiar bastante.</p><p id="b645">Pero si usan CSS grid… YASS!! un avance porque aquí vas a poder lucirte y hacer “lo que quieras”. Lo que quieras dentro de lo estructurado que tiene un producto.</p><figure id="b094"><img src="https://cdn-images-1.readmedium.com/v2/resize:fi

Options

t:800/1*aizWBucMiDGRCh21w9-D8A.gif"><figcaption></figcaption></figure><h2 id="8533">4. Hacerte un site mapping y ver los estados de todo</h2><p id="a5bb">Si el producto es nuevo, pues lo irás poco a poco, pero si ya está desarrollado un día (o varios) sentada con el product owner/CTO/frontend o alguien que sepa en profundidad todos los entresijos del producto va a ser lo más productivo que puedas encontrar para documentar bien todo este Design System.</p><p id="9f1d">A mi me gusta hacer un árbol con todo el workflow del site e ir completando hasta las respuestas que da el backend los Ok, los errores, las alertas. También copio los mensajes para luego tener un sitio donde ver si tiene coherencia o no el UX writing (sí, para luego revisarlo con el UX writer o copy que idealmente debería existir).</p><h2 id="f91a">Y… ¡ya estaría! El trabajo de investigación para empezar el Design System</h2><p id="9ea7">Ahora toca bajarte la librería y ponerte con la ardua tarea, así que un café y a meterle caña.</p><figure id="b22c"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*wk7ZLq4l7d3TOpZe"><figcaption>Photo by <a href="https://unsplash.com/@jckbck?utm_source=medium&utm_medium=referral">Jakub Dziubak</a> on <a href="https://unsplash.com?utm_source=medium&utm_medium=referral">Unsplash</a></figcaption></figure><p id="550c">¡Ah! <b>No te olvides de seguir teniendo feedback con desarrollo.</b></p><blockquote id="dd98"><p>Mi amiga y compi <a href="https://www.linkedin.com/in/maddie-de-la-gandara/">Maddie de la Gandara</a> me ha pasado esta charla después de mandarle el boceto de este post y <b>me ha pasado <a href="https://www.youtube.com/watch?time_continue=2&v=7zZcFHZ87Wk&feature=emb_logo">esta charla de Miranda Garrido</a> en la Design Systems London 2019</b>. Igual os gusta más el video así que os lo dejo.</p></blockquote></article></body>

Tengo que crear Design System de un producto ya lanzado y no sé por donde empezar

Cómo empezar a crear un Design System rápido y escalable haciendote amigui de desarrollo.

Aclaración: Este artículo parte de la base de que sabemos lo que es un Design System, si no sabes bien que es te recomiendo esta web/libro de Atomic Design de Brad Frost.

Una de las preguntas más recurrentes en una entrevista de empleo es cómo creas un Design System (sistema de diseño) desde cero. Mi respuesta siempre es la misma: no lo creo desde cero.

Tal vez esta respuesta sea controvertida, pero os voy a contar cómo funcionan en desarrollo para crear cualquier cosa: Usan librerías, ¡Sorpresa! Porque crearlo desde cero es over-engeniering. En desarrollo suelen usar librerías para todo (Angular, React son librerías/frameworks) y por ello siempre que nos pongamos manos a la obra a hacer un rediseño o un diseño desde cero tenemos que sentarnos con el CTO y el equipo de frontend para asentar unas bases o saber que han usado para desarrollar lo que hay construido.

Los diseñadores y desarrolladores debemos trabajar colaborativamente para que no nos queramos matar en un futuro.

¿Qué hacer cuando vas a diseñar o rediseñar un producto digital?

1. Hacerte amigui del CTO y desarrollo.

Sí, sé que de normal son nuestros enemigos, pero hacerte su amigo al menos a nivel laboral te quitará muchos quebraderos de cabeza para el futuro, sí hasta de los backends no seas clasista. Así que te tienes que sentar a hablar con ellos y negociar metodologías de trabajo y herramientas.

2. Saber si usan ya un sistema de diseño.

Como Material Design, Bootstrap o cualquier otro que les guste.

A mi me ha sorprendido en varias ocasiones preguntar esto y que te digan: ¿Qué? Lo tienes que decidir tu, no sé que me dices. ¿Cómo sé que grid uso? No sé… Y flipar. Así que, ármate de paciencia porque dependiendo de que equipo tengas te van a mirar por encima del hombro y van a pensar quien se piensa que es esta o van a ser lo más simpáticos del mundo y te van a ayudar a tope.

Dependiendo de que usen bájate la librería de turno para el programa de diseño que uses (Sketch, Figma, XD…) y modifícalo a tu antojo, con colores, tipografías, forma de los botones…

Recuerda: usar recursos free no es robar, ni debes sentirte menos diseñador por ello. Además te permitirá gastar más tiempo en otras tareas más placenteras que crear todos los componentes de un Design System.

3. Preguntar por el grid.

Algo que parece no saber muchos desarrolladores con los que me he topado que el grid más usado, el de Bootstrap es customizable desde la web y se puede cambiar bastante.

Pero si usan CSS grid… YASS!! un avance porque aquí vas a poder lucirte y hacer “lo que quieras”. Lo que quieras dentro de lo estructurado que tiene un producto.

4. Hacerte un site mapping y ver los estados de todo

Si el producto es nuevo, pues lo irás poco a poco, pero si ya está desarrollado un día (o varios) sentada con el product owner/CTO/frontend o alguien que sepa en profundidad todos los entresijos del producto va a ser lo más productivo que puedas encontrar para documentar bien todo este Design System.

A mi me gusta hacer un árbol con todo el workflow del site e ir completando hasta las respuestas que da el backend los Ok, los errores, las alertas. También copio los mensajes para luego tener un sitio donde ver si tiene coherencia o no el UX writing (sí, para luego revisarlo con el UX writer o copy que idealmente debería existir).

Y… ¡ya estaría! El trabajo de investigación para empezar el Design System

Ahora toca bajarte la librería y ponerte con la ardua tarea, así que un café y a meterle caña.

¡Ah! No te olvides de seguir teniendo feedback con desarrollo.

Mi amiga y compi Maddie de la Gandara me ha pasado esta charla después de mandarle el boceto de este post y me ha pasado esta charla de Miranda Garrido en la Design Systems London 2019. Igual os gusta más el video así que os lo dejo.