Diseño digital: cómo crear sistemas de diseño para lograr un diseño más fácil, mejor y más rápido

1. ¡Empecemos!: Soy Dan Mall, diseñador y director creativo y fundador y director de diseño SuperFriendly colaborativo en Filadelfia. La clase de hoy se trata de sistemas de diseño, cómo crearlos, cómo trabajar con ellos y cómo conseguir que todos tus colegas estén a bordo. Un sistema de diseño es una herramienta para ayudarte a ser más eficiente y más efectivo en tu trabajo. Debería ayudarte a moverte más rápido. Debería ayudarte a trabajar mejor con otras personas, y honestamente, solo debes divertirte más. Una cosa que veo a diseñadores y desarrolladores haciendo y otra vez es simplemente reinventar la rueda. Cuántas veces quieres diseñar ese botón o esa forma, o simplemente las cosas que están realmente secas sobre un proyecto. Saquemos esas cosas del camino. Un sistema de diseño debe encargarse de esas cosas, que te puedan liberar para hacer todas las cosas divertidas que normalmente no tienes tiempo para hacer, pero en realidad quieres hacer otra cosa. Después de tomar esta clase, tendrás todos los conocimientos y las herramientas que necesitas para poder trabajar con un sistema de diseño, crear el tuyo propio y trabajar con otras personas. Mi objetivo para ti es hacerte pensar cada vez más en los sistemas de diseño, probar uno, y luego usar realmente uno en tu proyecto. No hay buena clase completa sin tarea, así que te voy a estar dando algunas cosas que hacer también. Lo que haremos es crear una lista de comprobación de cosas que te ayudarán a averiguar por qué necesitas usar un sistema de diseño y en realidad te entusiasmarás por hacer eso. Podrás compartirlo en la galería de proyectos, comentarlo y ver lo que están haciendo otras personas también. Gracias por tomar esta clase. Empecemos. 2. ¿Qué son los sistemas de diseño?: Si piensas en un sistema de diseño, no sé que tengamos una definición canónica para ello, pero debería ser algo que te ayude a hacer fácilmente las cosas que quieres hacer. La mayoría de los sistemas de diseño tienen muchas cosas en común. Tienen componentes o patrones que son realmente las pequeñas piezas que vas a usar para armar en lo que estás haciendo. Entonces también está la orientación y la referencia de cómo vas a usar esas cosas. Esas cosas se suelen armar en un sitio de referencia. Ese sitio de referencia tiene todo tipo de instrucciones para ti. Cosas como cómo empezar, cómo descargo esto y en realidad empiezo a usarlo cuando estamos hablando de un producto digital. ¿ Qué hago con él? ¿De dónde obtengo los archivos? ¿ De dónde saco todas las cosas que necesito? Entonces una vez que los tengo, ¿cómo los uso? Cuáles son las mejores prácticas en cuanto tanto a las mejores prácticas de la industria como a las mejores prácticas de este sistema en particular. Esas cosas suelen ser las cosas que vienen con un sistema de diseño. Creo que también es importante hablar de lo que no es un sistema de diseño. Esto respondo se pone súper matizado porque lo que no es un sistema de diseño es decir un archivo de boceto. Un archivo de boceto puede ser parte de un sistema de diseño, pero en sí mismo, no es un sistema de diseño. De la misma manera, una biblioteca de patrones o una biblioteca de componentes no es un sistema de diseño por sí solo porque le falta la parte de orientación, solo las piezas. Una biblioteca de patrones y una biblioteca de componentes son parte de un sistema de diseño, pero no es todo el asunto. Entonces realmente creo que lo importante del sistema de diseño es que es la combinación de estas cosas. No es sólo una de esas cosas por sí sola. Esa combinación otra vez, tiene que tener un resultado también. El sistema de diseño tiene que ayudarnos a colaborar mejor. Como diseñadores, desarrolladores, personas de productos, personas de contenido, el sistema de diseño debe ser una herramienta que todos podamos reunir y utilizar para ayudarnos a hacer un mejor trabajo. Si nos faltan partes de eso nuestro trabajo no puede ser mejor. Hay muchas cosas grandiosas sobre los sistemas de diseño. Lo primero genial es que un sistema de diseño te ahorre tiempo y te ahorre dinero. Ese podrías ser tú como freelancer o una sola persona trabajando en algo. O podría ser toda tu organización. ¿Cómo ahorra tiempo? Bueno, piensa en cuántas veces has diseñado un botón, o cuántas veces has diseñado un formulario. Digamos que lleva un día entero diseñar una página de formulario y lo haces por cada proyecto. Ahora imagina tener una herramienta que haga que eso pase de un día a diez minutos. Eso ya es un día que ahorras. Ese es un día en el que se puede hacer otra cosa. Si estás facturando por tu tiempo, ese es un día entero que no tienes que facturar por esa cosa. En realidad puedes facturar algo más. Te ayuda, ayuda a tus clientes, ayuda a tu organización. Te ayuda a ahorrar tiempo en hacer las cosas que ya no necesitas hacer. Ahorra dinero a todos porque no tienen que preocuparse por esas cosas. También ahorra dinero en un poco de forma indirecta también, en que te da consistencia. Una de las cosas que descompone las organizaciones y descompone los proyectos a un nivel matizado es realmente sobre lo consistente que es algo. Cuando las cosas son inconsistentes, hace incómodos a los usuarios, hace que los diseñadores se sientan incómodos. Hace que los desarrolladores tengan que construir cosas ligeramente diferentes. La consistencia en realidad te ayuda a construir algo una vez y saber que se propagará por todo el resto de tu sistema. Otra forma en que un sistema de diseño ayuda es que debe ayudar a que todas las personas de un equipo colaboren. Sé que cuando estoy trabajando en mi trabajo con un equipo, a veces soy el diseñador y estaré trabajando con un desarrollador. Lo que me encanta de tener un sistema de diseño es que podemos usarlo como referencia compartida. Conocemos el mismo idioma. Podemos sentarnos alrededor de una pizarra y podríamos decir: “Oh, vamos a usar el componente desplegable”. Todo el mundo sabe a lo que me refiero. Lo que ha hecho es que me ahorró tiempo y ahorró nuestro tiempo de colaboración donde no tengo que irme, hacer un archivo de Photoshop o Sketch entregado a un desarrollador y luego tienen que construir eso. En realidad podemos simplemente bosquejar eso juntos. A veces ni siquiera tengo que saltar a Photoshop para hacer esas cosas. Lo dibujaremos juntos. El desarrollador puede construirlo, y luego puedo volver después de eso y decir: “Está bien. Vamos a retocar esto. Vamos a retocar el espaciado” y cosas así. En realidad ayuda a la colaboración al darte un lenguaje compartido que todos ustedes están usando la misma palabra, diciendo las mismas cosas sobre las cosas que están tratando de diseñar y construir. A lo mejor mi forma favorita de que un sistema de diseño te ayudará es que en realidad te debería liberar para hacer las cosas que realmente quieres hacer que normalmente ni siquiera puedes llegar en un proyecto. Sé que tengo una lista de todas las cosas que no puedo hacer en un proyecto a veces. Tener un sistema de diseño o algo que me ayude y me dé algo de eficiencia ahí, me ayuda a llegar a esas cosas. A modo de ejemplo, si no tuviera que diseñar ese botón una y otra vez, o esa forma o ese encabezado o estos elementos globales. En cambio, podría tomarme tiempo para hacer esa animación a la que realmente quería llegar, o tal vez esa ilustración, o tal vez probar una nueva técnica o aprender una nueva tecnología, o tal vez sigma aprendida o una nueva aplicación o algo así. Si tienes esas cosas ya en la lata, si tienes los componentes, si tienes los principales y las estás usando, eso solo te ahorra tiempo. Ahora puedes llegar a ese poco extra de oomph que quieres poner en tu proyecto que normalmente no tienes oportunidad de hacerlo. 3. Ejemplos de sistemas de diseño: Hablar de definiciones es bastante abstracto así que veamos algunos ejemplos para ayudarnos a hacerlo más real para nosotros. Este es el manual de normas gráficas para la Autoridad de Tránsito de la Ciudad de Nueva York y esto ha existido desde hace mucho tiempo. Esta es realmente la biblia de los manuales de estándares gráficos. Parte de la razón por la que creo que la Autoridad de Tránsito de la Ciudad de Nueva York ha durado tanto tiempo es porque este manual está escrito tan bien, porque este sistema de diseño está tan bien escrito. Echemos un vistazo a las agallas de esto. Ya verás aquí que una parte de este manual son sólo las partes. Ya verás que tienen de todo por cómo se supone que cada letra debe especificarse aquí. Así es como imprimes un doble A aquí te explicamos cómo imprimes un B. Así es como imprimes un doble C y es con meticuloso detalle. Es cada letra del alfabeto para mostrarte si había una línea de metro que tuviera estas letras, así es como la imprimirías. No escatiman gastos en asegurarse de que tienes especificaciones para cada cosa que podrías querer usar, todas las letras del alfabeto. No es que te estén mostrando uno y luego te están diciendo: “Sí, solo hazlo así todo el resto”. Están entrando en minucioso detalle para mostrarte esas cosas. Este libro está lleno de todas las diferentes partes, pero no son sólo las partes. También está lleno de ejemplos de cómo usar las cosas y orientación sobre cómo usar esas cosas. Permítanme mostrarles un ejemplo de eso. Esta página aquí es una página sobre signos temporales y esto muestra a las personas que están implementando el sistema, cómo se puede crear un signo temporal. Aquí hay orientación que te dice lo que es un signo temporal. El carácter del signo temporal requiere que será más fácil producir, colocar y quitar, y luego tiene instrucciones de cómo producir un signo temporal. Entonces también muestra ejemplos de dónde poner ese signo temporal, cómo debería verse, a dónde debe ir, y cómo debería funcionar en realidad. Esta es una gran orientación para un sistema de diseño. Todo este libro, todo este manual es parcialmente sólo las partes, parcialmente los componentes mismos, pero luego parcialmente la orientación y tuvo la minuciosidad tanto de las partes la orientación es yo creo lo que ha hecho que este sistema aguante por tanto tiempo. Ahora ambos libros son realmente geniales. Se trata de libros que se escribieron a finales de los años 70 sobre arquitectura. Christopher Alexander básicamente habla en estos libros, cómo puedes acercarte a la construcción de la arquitectura de una manera que sea sistemática y como dice la portada del libro: “Una forma atemporal de construir”. Esta es una parte 1 y la parte 2 en el lado del lenguaje de patrones de la misma es, ¿cómo realmente implementas esas cosas? Esta es la teoría de la misma. Es casi como un sistema de diseño en dos partes, donde parte del mismo son las partes y luego parte de él es la orientación real en esas partes. Hay mucha gran teoría y filosofía en cuanto a cómo construir arquitectura de esta manera mucho de lo cual se aplica a cómo podríamos construir productos digitales hoy en día. Si estás buscando algo más moderno este es un libro fantástico de Alla Kholmatova, se llama Design Systems. Se trata de cómo construir un sistema de diseño moderno. Todas las cosas de las que estábamos hablando en términos de teoría y en términos de práctica y en términos de partes, Alla compila en este libro y habla de cómo usar realmente sistemas de diseño y hacer sistemas de diseño y mantenerlos como un fantástico referente para cualquiera que quiera conocer más sobre este tema. Ahora este es un ejemplo un poco no tradicional aquí. La mayoría de las cosas que hemos visto son en realidad manuales y este libro se llama Diseño de Apple en California. Es un poco diferente a algunos de los otros ejemplos. Si miro a través de este libro verás que no hay muchas palabras. En realidad solo hay fotos. Estas son hermosas fotos que documentan cómo se ven realmente los productos de Apple. Ahora bien, se podría llamar a esto un libro de fotografía más que como un sistema de diseño, pero sí tiene un poco de referencia para el sistema de diseño. lo que me refiero con eso es que hay unas 100 páginas aquí y como simplemente te pasas por este libro, solo página por página mirando Hardware, mirando todos los diferentes dispositivos que hacen, y simplemente conseguir y ver ellos desde diferentes ángulos. Lo que encontrarás aquí es que puedes hojear a través del par de 100 páginas de este libro, y al final del libro, pesar de que no ha habido palabras, puedes entender cómo Apple construye sus productos. Probablemente puedas concluir algo al final que dice: “Aquí están los principios que son importantes para el trabajo de Apple”. Creo que ese es el trabajo de un buen sistema de diseño demasiado manera es poder mirar a través de todas las cosas y poder concluir : “De acuerdo, esto es lo importante para esta organización sobre cómo se construyen los productos”. A pesar de que este es un ejemplo un poco no tradicional, creo que todavía hace un buen punto en cuanto al trabajo de lo que debe hacer un sistema de diseño. Una de las cosas que quiero señalar a través de esto es que no todos los sistemas de diseño tienen que parecer iguales. El resultado es lo que es importante, no el formato real del mismo. Este es un ejemplo de un sistema de diseño que Apple podría tener. También tienen otro que quizá sea un poco más popular que este libro. Se llama Apple HIG, las Directrices de Interfaz Humana y eso es para cualquiera que quiera construir una aplicación para iPhone. Cuando miramos ese HIG y miramos esto, son dos ejemplos de sistemas de diseño de la misma empresa. Eso no quiere decir que sólo se pueda tener un sistema de diseño. Puedes tener dos si se aplican de diferentes maneras o si quieres mostrar tus productos de diferentes maneras. También hay versiones digitales de sistemas de diseño, no solo en libros y así veamos un par de los más populares. El diseño de materiales es uno que es creado por Google y mucha gente usa el diseño de materiales para productos que no son de Google, pero también Google los usa para productos de Google. Lo que verás aquí es que es una interfaz unificada para aplicaciones de Android, para aplicaciones que son de Google, para cosas como G-mail y Google Maps, pero también algunas de sus subsidiarias como YouTube. Este es un sistema de diseño que tiene todas las cosas de las que hemos estado hablando. Tiene componentes y tiene orientación así que pinchemos por aquí. Si vamos a la pestaña Desarrollar para desarrolladores, tiene todos los componentes que realmente necesitamos y se distribuye por plataforma. Tengo Android, iOS, Web, y Flutter. Si hago clic en la parte Web aquí, lo que verán es que puedo llegar a los componentes y puedo llegar a la documentación misma. Componentes me da esta lista completa de cosas y voy a dar click en una. Si quisiera usar un botón como parte del diseño de materiales, que me da un ejemplo de lo que es esto y puedo desplazarme hacia abajo y me da toda la orientación en cuanto a cómo instalar esta cosa y cómo usarlo, e incluso más que eso, todo este sistema me da orientación sobre cómo usar estas cosas desde un punto de vista filosófico. Tiene todo el trabajo técnico así como el trabajo filosófico. Todo esto está en un solo lugar y esto es bastante común con los sistemas de diseño, es poder ver una especie de lista de todos los componentes, poder ver aquí el componente en acción, una versión en vivo del mismo, y luego alguna orientación sobre cómo para usarlo y cuándo usarlo. Lo mismo es cierto en el extremo del diseño para el material, este es el extremo de codificación, pero el final del diseño introduce cosas como principios así que veamos los principios de color para el Diseño de Materiales, por ejemplo. Lo que esto muestra son todas las paletas de colores que vienen con el material y cómo podrías usarlas. Muchas paletas de colores robustas aquí para todo el camino desde Shades 50 hasta 900. Te mostrarán los colores primarios y secundarios, así como todas las variantes y los tintes y los tonos. Esto también viene con principios por lo que hablan de la legibilidad como principio, y de la expresividad como principio, y de la jerarquía como principio. Nuevamente, se ven estas combinaciones por lo que no son solo los componentes y no es solo la orientación, todas esas cosas juntas en contexto. Nos pasamos a otro ejemplo. Este es el sistema diseñado por fuerzas de ventas, y esto se llama el Sistema de Diseño Lightning. Consulta aquí algún tipo de enfoque similar donde tienen pautas y también tienen componentes, pero también tienen detalles específicos sobre cosas como accesibilidad y tokens e iconos. Si vamos y miramos los propios componentes, ya verás aquí otra vez, lo mismo. Aquí tienes una lista de todos los componentes que vienen con este sistema. Si entro en botones aquí, verás que consigo toda la varianza. Tengo todo el botón basado, el neutral, la marca, la marca de contorno, destructivo, y el éxito y otra vez, justo debajo está solo el código para poder usar eso. Desde el punto de vista del diseño, es como se vería la cosa, desde el punto de vista del desarrollo aquí está el código que necesito para implementar esto. Entonces otra vez, justo en contexto está la orientación. Nuevamente, aquí hay una regla de accesibilidad de pulgar para el botón. No tengo que ir a otro sitio para verlo en realidad. Es en contextos que el propio componente. El último ejemplo que veremos aquí es Polaris de Shopify. Este es un sistema de diseño y así tiene de nuevo, las mismas cosas que tienen el material y el aligeramiento, pero de una manera ligeramente diferente y quiero señalar algo específico al respecto. Al ver los componentes de Shopify, Shopify es una plataforma de comercio electrónico y lo que es realmente genial de su sistema de diseño Polaris es que en realidad muestran cosas que son específicas para sus usuarios, y para sus clientes. No es solo, aquí hay un botón para usar porque es un botón y la gente necesita usar botones, sino que en realidad muestran cosas en relación con los comerciantes y en relación con el comprador. A modo de ejemplo, entra en Acciones aquí y entraré en una lista de Acciones y esta lista de acciones me da alguna orientación. Lo mismo que vimos en material y en relámpagos, donde tenemos el componente en acción y lleguemos a ver cómo funciona y obtengo el código para poder implementar eso. Pero de lo que hablan aquí que es específico para ellos si leo esta guía aquí es una lista de acciones renderiza una lista de acciones u opciones seleccionables, eso es universal, eso es genérico, pero luego se ponen más específicos. Este componente generalmente se coloca dentro de un contenedor pop-over para crear un menú desplegable para permitir que los comerciantes seleccionen de una lista de opciones. Nuevamente, esto es realmente específico de cómo quieren que los comerciantes puedan usar estos componentes. Esa es una de las cosas que más me gusta de este sistema Polaris es que no es solo cualquiera que quiera usar una lista aquí que uso lista, está específicamente diseñado para comerciantes y para compradores. 4. Hacer tu lista de deseos del sistema de diseño: Empecemos en nuestra primera tarea. Digamos que no tienes un sistema de diseño con el que estés trabajando, ya sea por ti mismo o tal vez con tu equipo. Empecemos a crear uno. Lo primero que queremos hacer en crear uno es realmente sólo entender por qué lo necesitamos. Entonces hagámoslo. Agarra un pedazo de papel y dobla ese pedazo de papel por la mitad. Del lado izquierdo, lo que me gustaría que hicieras es apuntar todas las tareas que hiciste en el último proyecto. Entonces piensa en el último proyecto que hiciste. Todo lo que hiciste sin importar lo matizado, escribe eso. Eso podría ser yo diseño los iconos. Podría ser yo diseñé esta página. Podría ser que escribí un breve. Podría ser lo que sea. Envié este e-mail sobre esta cosa en particular. Trata de escribir todo lo que puedas recordar sobre tu último proyecto. De acuerdo, siguiente paso. Ahora, que tienes una lista de todo lo que hiciste en tu último proyecto en el lado derecho del periódico, me gustaría que escribieras todas las cosas que desearías haber llegado a que no tuviste oportunidad también. Esto es realmente como lo de tus sueños. Entonces piensa en esa animación que no podías hacer. Ese poco extra de accesibilidad ayudó a que no construyeras. Ese podría ser el sistema de iconos que quieres diseñar, personalizado, pero en su lugar tenías que usar una biblioteca de valores. Cuales son todas las cosas que desearías poder hacer en ese proyecto o tal vez en cualquier proyecto. Aquí es donde se pone interesante. En el lado izquierdo de tu periódico, tienes todas las cosas que hiciste en el último proyecto. Me gustaría que rodearas las cosas que crees que se podrían hacer de manera más eficiente. Un buen formato para pensar en eso es que si tan sólo tuviera x, esta cosa hubiera sido más fácil. Último paso, ahora que tienes todas las cosas rodeadas a la izquierda de las cosas que podrías ser más eficiente, me gustaría que dibujaras una línea de esa cosa a algo del lado derecho. Esta va a ser tu hoja de rasgo. Por ejemplo, a la izquierda, podrías tener algo como yo diseñé todos los botones. A la derecha, podría tener algo que diga diseño conjunto de iconos personalizados. Si dibujas una línea desde los botones hasta el conjunto de iconos, esencialmente has hecho una lista comercial para decir, si ya tuviera un conjunto de botones, ahora podría pasar tiempo en este conjunto de iconos. Aquí es donde entra la magia. Acabas de crear tu primera lista de deseos para lo que debería hacer tu sistema de diseño. Ahora que ya sabes para qué quieres diseñar sistema, empieza a cruzar cosas del lado izquierdo, donde en tu sistema de diseño a medida que comienzas en él, primero que cuidas, botones. Una vez que cuidas esos botones, obtienes tu icono establecido en el siguiente proyecto. Aquí está la parte genial. Ahora, que ya tienes tu tarea hecha, tienes una lista de todas las cosas que deberían estar en tu versión 1 de tu sistema de diseño. Esto es genial cuando estás trabajando solo. Lo que hace que esto sea aún mejor es, ahora puedes empezar a hacer esto con tu equipo y puedes hacer este ejercicio con tu equipo. Puedes liderar esto. Haces tu lista. A lo mejor puedes pedir a tus compañeros de trabajo que hagan su lista también. Si eres diseñador, tal vez te pregunten desarrolladores con los que trabajas para hacer su lista. ¿ Cuáles son las cosas que desearían poder hacer? Cuales son las cosas por las que cambiarían, algo que podrían tener en la lata ya. Después pide a los miembros de tu equipo que los intercambien. Esto es lo que hago en talleres todo el tiempo. Haré que los diseñadores hagan una lista de todas las cosas que quieren hacer. Entonces haré que los desarrolladores hagan una lista de todas las cosas que quieren hacer y todos los demás están trabajando en el proyecto. Entonces intercambiamos listas y lo que eso hace es que crea empatía el uno para el otro porque a veces los diseñadores ni siquiera saben que a un desarrollador le hubiera gustado poner un poco de esmalte de diseño extra en esa cosa. A lo mejor eso estaba en su lista. Los diseñadores se hartan realmente de desarrolladores como, oh hombre, no pusieron el tiempo, pero podría haber sido que simplemente no tenían el tiempo. Entonces exponer estas listas, hacerlas públicas y poder ver las de todos demás en realidad ayudará a construir algo de empatía por decir, bueno, ni siquiera sabía que tú quieres hacer eso, así que ahora te puedo ayudar con eso en su próximo proyecto. Ese es un ejercicio realmente genial de construcción de equipos y algo que realmente hace que la gente comparta sobre la visión de un sistema de diseño. Incluso ese proceso de crear uno podría ser algo que ponga más a la gente en la misma página. Ahora que tienes esta lista, sabes por qué necesitas un sistema de diseño. A continuación, hablemos de cómo realmente hacemos uno. 5. Creación de tu propio sistema de diseño: Los sistemas de diseño generalmente tienen dos partes, patrones y procesos. Con cuál comienzas realmente depende de ti. No hay orden correcto o incorrecto. Donde recomendaría que empieces sin embargo, es el para el que más ideas tienes. ¿ Qué es sólo picazón para salir de tu cabeza? ¿ Simplemente sabes qué botones quieres diseñar o qué componentes desplegables quieres diseñar? Pues entonces empieza por ahí. mejor sin embargo, si no tienes ideas para eso, tal vez tengas más ideas para principios, cosas que quieres guiar el sistema. Si eso es algo que te interesa y ya sabes lo que quieres decir ahí, empieza con esos. Por lo que eventualmente tienes que llegar a ambos, pero donde quieras empezar depende de ti. Vamos a sumergirnos en principios. Existen dos tipos de principios. Hay principios universales, y hay principios específicos. Entonces, por ejemplo, un buen principio universal podría ser algo así como el acceso para todos. Eso es algo a lo que a medida que haces apps y sitios web, quieres que todos puedan acceder. Pero eso también es cierto de cada sitio web. Eso no significa que no deba estar en tu sistema de diseño, ponlo ahí dentro. Hablemos de principios específicos aunque. Principios específicos son aquellos que funcionan solo para su sistema. Un gran ejemplo de un principio específico es de TiVo. Uno de los diseños de principios de TiVo es, es estúpido de TV. Lo que me encanta de ese principio para TiVo es que es tan grande para ellos, es un gran mantra para que sigan. Es el espíritu de ellos, es casual, es un poco irreverente, se ajusta a su marca y además, no funcionaría para otra organización. No funcionaría por decir, Quickbooks o Salesforce o cualquiera de esos. Un principio específico debería ser algo realmente genial para ti y tu organización, pero un ajuste incómodo para otra persona. Me imagino que si estuviera trabajando en TiVo, y tendría un problema en algo que estaba tratando de diseñar, entonces podría mirar a esos principios para ir, ¿cómo me puede ayudar esto? Entonces principio realmente debería ayudarte en puntos de tensión. Entonces cuando realmente no sabes qué hacer, deberías poder hacer referencia a tus principios e ir, oh bien, eso es lo que está diciendo hacer. Entonces un principio como es estúpido de TV, si estoy tratando de decidir entre dos interfaces diferentes. A lo mejor elegiría la más sencilla porque está más en línea con el principio de la empresa. Tanto los principios como los patrones deben tener tanto aplicación universal como aplicación específica. Entonces hablemos del lado patrón de eso. Cuando hablamos de que los patrones son universales, hay algunas cosas que cada sitio va a tener. El texto es un buen ejemplo de eso. Un formulario es probablemente un buen ejemplo de eso también. A lo mejor no necesitas reinventar la rueda con cómo vas a mostrar el texto. Eso está bien. Pero también vas a querer algunos patrones específicos para ti, para este proyecto en el que estás trabajando, o la organización en la que trabajas. Entonces como ejemplo, digamos que trabaja para el IRS. Su sistema de diseño para el IRS probablemente debería centrarse realmente en los foros y la entrada de datos. Pero digamos que trabajas para compañía de entretenimiento. Probablemente se trate menos de entrada de datos que de vallas publicitarias y héroes. Así que asegúrate de que los patrones en los que estás trabajando, los componentes que estás creando, sean realmente específicos para tu organización y las necesidades de tu organización o las necesidades del proyecto en el que realmente estás trabajando. Hay un matiz interesante a los patrones y componentes y el lenguaje entre ellos. Si miras todos los sistemas de diseño que son públicos y por ahí en este momento, no todos usan esas palabras de la misma manera. Por lo que los componentes generalmente significan las pequeñas piezas y piezas que necesitarás para poder crear ese sistema. Patrones a veces significa eso. Pero he visto que muchas organizaciones usan patrones de una manera diferente. A veces un patrón es un ejemplo de un flujo. Entonces, por ejemplo, un componente podría ser algo así como un menú desplegable, pero un patrón podría ser algo así como un flujo de caja. Depende de ti lo que es un mejor ajuste para ti. Solo asegúrate de que eres consistente sobre cómo lo estás usando. Si eres un tipo de persona de lista de chequeo, hay algunos grandes recursos por ahí para ti también. El diseñador Nathan Curtis tiene unas listas de comprobación impresionantes para sistemas de diseño que delinea todas las diferentes partes que podrías necesitar en tu sistema de diseño. Ahora, ciertamente no los necesitas todos. Pero quizá échale un vistazo a través de ellos y descubrirás que probablemente también coincidan con tu lista. ¿ Cuáles son algunas cosas en las que tal vez no pensaste. Esas otras cosas que puedes agarrar de la lista de Nathan. Estas son las piezas que necesitarás para la primera versión de tu sistema de diseño. Otra manera realmente genial de crear un sistema de diseño, es realmente tomar cosas que ya están funcionando y extraer todas las cosas buenas de eso. Entonces sobre todo si trabajas en una organización grande, probablemente has hecho cosas y otros equipos que probablemente hicieron cosas, eso probablemente sea realmente bueno. Por lo que podría tener un producto por ahí que tenga un flujo realmente bueno en él. A lo mejor es un flujo de checkout, tal vez es un flujo de inicio de sesión, tal vez es un componente realmente genial como hay una gran consistencia en eso o la topografía ahí es realmente buena. Lo que puedes hacer para arrancar tu sistema de diseño, es realmente mirar esas cosas y salir, ¿sabes qué está funcionando ahí? El topografía. La topografía ahí es lo que debemos usar para muchas cosas más. Entonces ahora empiezan a extraer esas cosas de ese proyecto, llamamos pilotos. Usa esos como pilotos y di, vale, podemos extraer esas cosas del piloto y esa va a ser la base de nuestro sistema de diseño. Si no tienes esa cosa, puedes empezar a crearla. Entonces digamos que trabajaste para una empresa de entretenimiento, y tal vez no tengas el producto ideal. Bueno, puedes crearlo. Se puede decir, está bien, vamos a hacer un ejercicio ficticio donde creamos una app de guía. Puedes crear esa app guía y luego decir, está bien, vamos a tomar las cosas de esa app guía y vamos a usar eso para iniciar nuestro sistema de diseño. Entonces la clave aquí cuando estás usando proyectos piloto es mirar cosas que son reales, no cosas que son abstractas. A veces es difícil diseñar un botón si no sabes lo que se supone que tiene que hacer. Entonces en lugar de diseñar un botón de forma aislada, una pantalla completa, luego saca el botón de esa pantalla y di que este va a ser el botón que usaremos. Por lo que los proyectos piloto realmente vienen muy bien para eso, es poder mirar las cosas en contexto y luego sacarlas de contexto. Si lo haces al revés, va a ser mucho más difícil. Entonces ahí es donde las cosas que son aplicaciones reales vienen muy útiles. Entonces, ¿cómo organizas todas esas cosas? Digamos que has sacado algunas cosas de un proyecto piloto. Has creado algunas de tus propias cosas. Has hecho una lista de cosas que quieres hacer. ¿A qué se hace? Bueno, creo que el primer paso en eso es tratar de organizarlo. Eso depende realmente de ti y de la cultura de tu organización. Entonces para algunas organizaciones, podría que ya tengas una junta de Jira o una junta de Trello o una confluencia o algo así donde puedas conseguir un bonito espacio para poner las cosas y organizarlas. Pero tal vez no. Por lo que podrías iniciar tu propio Google Doc o una hoja de Excel o alguna carpeta en tu computadora como lugar para iniciarla. Eso está bien. Cualquiera de esas formas son las formas correctas de hacer las cosas. No hay manera equivocada de hacerlo. Creo que eso es algo bueno que puedes hacer. Organízalo y entonces el siguiente paso sería averiguar cómo compartir eso. Entonces, ¿cuál es la mejor manera de compartirlo? ¿ Está enviando un correo electrónico al resto de su equipo? Bueno, genial. Haz eso. ¿ Está preparando un puesto de campamento base o un poste de holgura? Haz eso también. Así que empieza a pensar en estas formas en las que podrías organizar algunos de estos materiales para que esos pudieran ser los componentes y algunos tal vez las pautas que lo rodean, y averigua cómo puedes compartirlo. Algo bueno que hacer es mirar cómo lo hacen otros sitios de referencia. Entonces si necesitabas un ejemplo, está bien ir y copiar el diseño de material o bootstrap o el sistema de diseño de aligeramiento y usar lo suyo como guía. Entonces si quieres estructurar tu doc de Word de esa misma manera, eso está bien ese es un buen comienzo, y no hay una manera equivocada de hacerlo. Es importante que lo organices y puedas compartirlo y eso te hará empezar con el pie derecho. Como diseñador yo mismo, hay una peculiaridad interesante que encuentro sobre los diseñadores. Siempre somos tan preciosos con nuestro trabajo. Tratamos de hacer todo realmente especial. Trabajar en un sistema de diseño es un poco contraintuitivo porque la primera versión de tu sistema de diseño especialmente si trabajas en una gran empresa, debería cuidar las cosas aburridas. Mi amigo Josh Clark tiene un gran post sobre los sistemas de diseño cuidando las cosas aburridas. Dice que los sistemas de diseño más emocionantes deberían ser aburridos. Debería cuidar todas las cosas que no quieres hacer. No debería ser todo lo especial del copo de nieve que realmente sí quieres hacer. Guarda eso para ti mismo y guárdalo para algo en lo que realmente puedas verter tu tiempo y esfuerzo. Entonces, la primera vez que inicias un sistema de diseño, ya sea que trabajes en una gran empresa o solo trabajas tú mismo en un proyecto. Empieza con todas las cosas aburridas. Hacer los botones, hacer los foros, hacer los aleteos. Saca esas cosas del camino para que realmente puedas trabajar en las cosas que son mucho más frescas. 6. Lograr la participación: Una de las partes más difíciles de los sistemas de diseño es conseguir que las personas se suban a bordo. En mi experiencia, ese es el arduo trabajo de la misma. Somos diseñadores, somos desarrolladores, sabemos hacer el diseño y desarrollo muy fácilmente. Eso es lo que hacemos, eso es en lo que somos realmente buenos, lo que es difícil es en realidad convencer a alguien de que necesita eso, y que nosotros necesitamos eso, y que se les debe incentivar en eso. Esa siempre es la parte más difícil para mí de los sistemas de diseño es conseguir que la gente se suba a bordo. He tenido la fortuna de poder trabajar con clientes realmente geniales que lo saben y han hecho un buen trabajo en poner el tono y poner la mesa en su extremo para que podamos hacer un buen trabajo. A modo de ejemplo, trabajamos con la Iglesia Adventista del Séptimo Día para ayudarlos con un sistema de diseño y un año antes, sí trabajamos con ellos. Nuestro cliente, Brent que era el encargado de la web allí, fue a ver a su jefe e hizo algo que fue realmente interesante. Hacen muchos sitios web ahí, lo que hizo fue imprimir esos sitios web y estas miniaturas son de tres pulgadas por tres pulgadas y las puso todas en tableros de montaje y terminó teniendo seis o siete tablas de montaje alrededor de un 150 miniaturas diferentes. Todos ellos se ven diferentes y se metió a su jefe con estas tablas de montaña y dijo, mira todo el dinero que estamos desperdiciando, todos estos son hechos a medida diseñados desde cero, reinventando la rueda todo el tiempo y simplemente no estamos haciendo esto lo suficientemente rápido. No somos capaces de hacer esto a la velocidad y al volumen que queremos y así, estamos desperdiciando dinero, sé cómo arreglarlo, necesitamos un sistema de diseño y si me puedes dar el presupuesto para ello, y si me puedes dar el espacio para poder crear esto bien, podemos conseguir mucho más eficientes, podemos ir mucho más allá en nuestra organización. Para él, lo que fue realmente genial de eso, y para nosotros también es eso, realmente puso la mesa para que hagamos un buen trabajo. Hizo el trabajo de conseguir que todos aborden la idea de un como a por qué lo necesitan y nuestro trabajo se volvió realmente fácil. En realidad podríamos hacer bien el trabajo, eso fue fácil para nosotros, que es el trabajo de diseño y desarrollo, porque realmente no teníamos que hacer lo convincente. Alguien más tiene que hacer lo convincente también. Creo que esa es una parte importante de este trabajo. ¿ Cómo consigues que alguien haga algo por ti? Bueno, hay que averiguar cuál es su incentivo. Porque no mucha gente es de su buena voluntad hacer algo por ti, siendo desinteresado. En cambio, tienen que saber qué hay en él para ellos. Depende con quién estés hablando y tienes que hablar su idioma. Si estás hablando con un desarrollador, ¿por qué un desarrollador quiere un sistema de diseño? Bueno, lo quieren para que no tengan que escribir códigos desde cero o tal vez no quieran escribir códigos que falle porque se están uniendo desde cero cada vez, tal vez la consistencia es el lenguaje que les hablas. A lo mejor para tu jefe financiero en tu empresa, para ellos, se trata de saber que, oh vamos a ahorrar dinero haciendo esto porque no vamos a tener que dar vueltas tantos equipos o no vamos a tener que gastar tanto tiempo en proyectos. Hablando, el lenguaje de la eficiencia es probablemente algo bueno para ellos. De verdad depende de quién te estés hablando y trata de averiguar cuál es el lenguaje que necesitan, cuál es la cosa que necesitan escuchar para saber eso, tal vez sea el CEO de una empresa y para esa persona, se trata de entregar en la misión de la empresa. A lo mejor para ellos, se trata de cómo nos va a ayudar este sistema de diseño a lograr nuestra misión? De verdad, piensa en tu sistema de diseño es poder atender a todas las diferentes partes de tu organización. Alto nivel, bajo nivel en las malas hierbas, en el bosque y los árboles. Lo que es genial de un sistema de diseño es que tiene todas esas partes diferentes. Si puedes extraer esas partes y decir que esta parte se trata de finanzas, esta parte se trata de eficiencia, esta parte se trata de misión. Creo que podrás convencer a la gente de manera mucho más efectiva. Cuando convences a alguien de algo, tienes que hacer tu investigación. Una de las formas en que esto me parece realmente efectivo es sólo hablar con la gente uno-a-uno, esa es una buena manera. Cuando empezamos con los clientes, les hablamos de cuáles son sus necesidades, cuál es el dolor, qué duele ahora mismo. Simplemente somos muy lentos en esta cosa. De acuerdo, genial, Si esto fuera más rápido, cómo te ayudaría. Hacer preguntas realmente básicas es útil. A veces hacer eso uno-a-uno es menos presión que si está en un grupo. Una de las cosas que recomendaría es empezar por hablar con la gente uno-a-uno en cuanto a cómo esta cosa podría ayudarles o en general hasta cómo se les puede ayudar. A lo mejor la solución no es un sistema de diseño, sino muchas veces en una organización con preguntas sobre eficiencia y velocidad y dinero y tiempo. Un sistema de diseño es realmente buena herramienta para eso. Una buena manera de prepararme para eso y conseguir el buy-in es decir, bueno, todos díganme dónde duele ahora mismo, díganme cuáles son los dolores y luego un sistema de diseño puede ser una solución para esos dolores. Creo que es útil mirar otros sistemas de diseño como una forma de decirlo, aquí hay una solución a un problema que es similar a lo que tenemos. Pero lo que es duro de eso, lo que realmente no está claro es, bueno, la gente no está realmente preocupada por la solución al problema. Están realmente preocupados por el desenlace. Es difícil mirar otro sistema de diseño e ir, veo cómo eso ha ayudado a la eficiencia en esa organización. Lo que es realmente útil y desafortunadamente, no hay muchas estadísticas al respecto en este momento, pero cada vez salen más, lo que creo que es realmente genial, no sólo es decir, bueno, Salesforce tiene un sistema de diseño relámpago, pero en cambio diciendo, bueno Salesforce realmente redujo su tiempo en proyectos a la mitad debido a su sistema de diseño. Creo que eso es lo que realmente ayuda a la gente es entender eso y escuchar esas estadísticas por decir. Porque estamos en el mismo barco y si ese es el resultado que consiguieron con esta herramienta, tal vez podamos tener un resultado similar con una herramienta similar. Un sistema de diseño es una herramienta realmente grande para que una organización emprenda el proceso de diseñar uno, construir uno, implementar uno es un esfuerzo hercúleo. No es algo que probablemente puedas hacer en un día. Algo en lo que podrías pensar es, bueno, ¿cuál es la versión de la misma que puedes hacer en un día? ¿ Cuál es la cosa que podrías armar en un par de horas y decir, de acuerdo, el transcurso de una semana en este proyecto, esta pequeña herramienta me ayudó recortando mi tiempo a la mitad. Imagínese si escalamos esa herramienta, que cortaría tiempo a la mitad también, ahora si tuviéramos la herramienta que nos pudiera ahorrar seis meses en lo que normalmente sería al proyecto de 12 meses, eso sería genial. Si no tienes estadísticas, si no tienes acceso a, bueno, esto es lo que ha hecho otra organización con esto. A lo mejor puedes crear tu propio caso de prueba y decir, de acuerdo, ahora que si escalamos esto, si extrapolamos esto, podemos ver que probablemente conseguimos tanto ahorro, y lo que es genial de eso es que será realmente específico para su organización. No serán datos anecdóticos. No serán datos los que digan, bueno, estas organizaciones consiguieron esto o tal vez podamos conseguir esto aquí. De verdad se basará en lo que tengas experiencia en ese entorno en particular. La aprobación es realmente importante con los sistemas de diseño, y la razón de eso es porque un sistema de diseño es tan amplio que toca cada parte de una organización. No es solo para diseñadores a pesar de que se le llama sistema de diseño. No es solo para diseñadores, es para desarrolladores, y personas de productos, y personas de contenido, y todos en la organización. Todos tienen que ser comprados porque se va a implementar en toda la organización. Por muchas cosas sobre un gran proponente de pedir perdón en lugar de permiso con un sistema de diseño que podría ser la excepción. Creo que conseguir que la gente compre y te va a ahorrar mucho dolor de cabeza más adelante porque aunque empieces a nivel del suelo y te vayas, bueno, solo empecemos y averiguaremos cómo implementarlo más tarde, te vas para tropezar con una barricada cuando llegues a ese punto donde estás bien, necesitamos implementar esto, necesitamos involucrarnos en nuestra infraestructura o parte de eso. vas a tropezar con una pared. Obtener más por un principio por lo general es más beneficioso. Obtener buy-in y una organización es un poco diferente a conseguir buy-in en un proyecto. Digamos que eres un freelancer, trabajas en una agencia, tal vez una pequeña agencia, y estás hablando con un cliente sobre un sistema de diseño para ellos. Algunos de los matices ahí, son realmente interesantes donde he trabajado en el diseño de sistemas para clientes es a veces va a crear una biblioteca de patrones y una guía de referencia solo para nuestro equipo, y a veces el cliente no tiene interés en ello. Se convierte en una herramienta útil para nuestro equipo y decir así es como vamos a hacer que el trabajo para el cliente. El cliente quiere la salida de esa obra. He tenido que decir algunos clientes, realmente no nos importa la biblioteca de patrones ni el sitio de referencia, solo queremos las páginas finales y eso está totalmente bien. Si utilizas un sistema de diseño para ti mismo para hacer la salida para el cliente, eso es genial. Te fue útil. No tienes que sentir que tienes que entregar eso. Ahora, creo que deberías estar dispuesto a entregarle eso a tu cliente y en realidad tener las conversaciones con ellos y estar abiertos con ellos para decir, escucha así es como pudimos hacer de esta cosa tan efectivamente en esa alta calidad y muy rápidamente, pensamos que si te lo dimos también, en realidad podrías hacerlo con tu organización. Algunos clientes compran eso, algunos clientes no. Pero si trabajas en una agencia o eres un freelancer, no tengas miedo de usarlo solo para crear la salida y luego ofrecerla como un bono para el cliente si realmente quieren tener esa parte de herramienta también. Ya sea que le cobre al cliente extra por este sistema de diseño depende realmente de usted. 7. Implementar tu sistema de diseño: La implementación es súper importante para diseñar sistemas. Todos son diseñadores, piensa en cuántas veces has conseguido una guía de estilo PDF que alguna marca ha dicho, sí, solo usa, sigue la guía de estilo y luego lo que hacemos es simplemente tirarla y luego hacemos lo que pensamos que es correcto de todos modos. Si un sistema de diseño es realmente solo un sitio de referencia y no realmente implementado en las herramientas y la cultura de su organización o de su proyecto, nadie lo va a utilizar. Por lo que asegurarse de que sea como parte de la mezcla es súper importante para un sistema de diseño. Uno de los principios que mi equipo usa mucho cuando trabajamos en sistemas de diseño, uno de nuestros favoritos es hacer que lo mejor sea lo más fácil. Muchos equipos con los que trabajamos usan Bootstrap y cuando empiezan a querer un sistema de diseño, parte de nuestro reto es cómo hacemos que el sistema de diseño sea mejor que Bootstrap? Bootstrap es una herramienta tan grande y así que lo que hayamos usado que tenga que reemplazarlo tiene que ser mejor y hay muchas versiones de lo mejor que puede ser. Entonces como ejemplo, Bootstrap es bastante vainilla. Si uso Bootstrap y quiero usar eso para mi organización, aún tengo mucho trabajo que necesito hacer con él. Necesito incrustar las fuentes de mi marca, necesito tener mi organización o mis proyectos palets de color, así que hay trabajo que tendré que hacer. Si el sistema de diseño ya tenía esas cosas horneadas, ahora lo mejor para usar, el sistema de diseño es en realidad lo más fácil de usar porque no tengo que hacer tanto trabajo en él. Uno de los principios que tratamos de usar y cómo trabajamos con clientes y cómo podrías hacerlo con tu trabajo es ¿cómo puedes hacerlo más fácil que lo que la gente está trabajando ahora mismo? El santo grial de un sistema de diseño es una herramienta que se implementa en el flujo de trabajo de todos. Por lo que hace que el diseño sea más fácil para los diseñadores y hace que la codificación, el front-end sea más fácil para los desarrolladores front-end. Hace que la codificación del back-end sea más fácil para los desarrolladores back-end. Cuenta con herramientas de gestión de productos para gestores de productos. Entonces las mejores implementaciones son la única y así el Santo Grial es el que todos pueden utilizar el sistema de diseño. Ahora, eso es realmente difícil de hacer. Hay muchas herramientas que necesitan construirse, hay mucho proceso que necesita implementarse y flujo de trabajo que necesita implementarse. Por lo que idealmente, diría un sistema de diseño, tener las referencias de diseño para los diseñadores, tendría las herramientas front end para los desarrolladores front-end y también se integraría en la implementación para que los desarrolladores de back-end pudieran usarlo también. Pocas veces he visto que eso suceda, y así muchas organizaciones están trabajando para ello pero sólo hay un puñado de que realmente lo han logrado y menos aún así que en realidad publicado al respecto. Lonely Planet es una organización que lo ha hecho hace unos años y tienen un gran sistema llamado Rizzo, que vale la pena investigar y muy recientemente, Airbnb tiene un sistema bastante bueno donde se implementa en muchas de sus herramientas. Creo que una buena manera de pensar en cómo integrar un sistema de diseño en el flujo de trabajo, es pensarlo como cualquier herramienta nueva. Cuando hay una nueva herramienta que estás usando, probablemente te vas a dar cuenta de eso mucho. Probablemente vas a poder llamarlo, probablemente vas a tener que hablar de ello, probablemente vas a tener que recordarle a la gente que lo use. Entonces, cuando implementas por primera vez un sistema de diseño en tu organización, probablemente vayas a hacer un proyecto sin él y entonces alguien dirá, oh, deberíamos estar usando un sistema de diseño para eso y eso está bien, eso probablemente es parte del periodo de prueba, el periodo de incorporación del mismo. A medida que se integra cada vez más en tu flujo de trabajo a medida que te acostumbras a él, empieza a convertirse en una segunda naturaleza donde ahora ya no construyes ni diseñas sin tu sistema de diseño, ahora realmente lo estás alcanzando con más frecuencia y simplemente se convierte en parte de tu naturaleza, parte de tu herramienta, parte de la parte natural de tu flujo de trabajo. Más a menudo en las organizaciones, un sistema de diseño es realmente útil para diseñadores y desarrolladores front-end y ese es un gran lugar para empezar, tener alguna referencia y orientación de diseño y además tener algún código front-end, algún HTML, CSS, y JavaScript con el que puede trabajar un desarrollador front-end para poder construir interfaces, ese es un primer paso realmente bueno. Integrar eso en una herramienta back-end es probablemente la siguiente fase de tu sistema de diseño, cómo podría ser una versión dos, hay algunas herramientas para ese tipo de cosas. Entonces si ese es el lugar que estás empezando, está bien, ese es un lugar realmente bueno para estar. Una de las definiciones de las que hablamos con los sistemas de diseño es un sistema de diseño es un producto y así hay que tratarlo como un producto. Entonces, ¿cómo consigues que la gente se interese en un producto? Bueno, tienes que hacer marketing para ese producto. Eso podría ser correo electrónico, boletines, podría ser una cuenta de Twitter, podría ser un grupo de Slack, podría ser solo formas en que puedes involucrar e interesar a la gente. Un sistema de diseño incluso dentro u organización no es una excepción a eso. Por lo que podría tener que hacer el mismo tipo de evangelismo que harías si estás haciendo software como producto de servicio excepto que solo lo estás haciendo internamente. Entonces eso significa meter a la gente a bordo, hablamos de comprar un poco, eso significa poder evangelizarles un poco, enviar materiales, enviar actualizaciones frecuentes, así que hay que tratarlo como un producto completo. No es solo una herramienta, es un producto real que ahora tienes que apoyar. Lo que realmente es genial del sistema de diseño es que puede ser opt-in, por lo que no todo el mundo tiene que usarlo. De la misma manera que algunas organizaciones que no ordenas las herramientas de diseño o las herramientas de desarrollo para que las personas las usen, las personas pueden usar sus propios editores de código o si quieres usar sketch versus sigma versus ilustrador, tienes la libertad de hacerlo. Ahora, puedes hacer un incentivo para que la gente diga, si todos usamos esta única herramienta todos nos beneficiamos, pero no necesita ser mandado. He descubierto que mandar desde arriba hacia abajo muy raramente funciona, nunca ha funcionado en especie de forzar a todos los desarrolladores a usar la misma plataforma de codificación, no ha funcionado en hacer que los diseñadores usen la misma app, no va a funcionar con haciéndolo también con un sistema de diseño. Entonces en lugar de pensar en cómo se puede mandar, en lugar de pensar en cómo se puede incentivar a la gente a querer poder usar eso. Los incentivos son interesantes de los que hablar. Al igual, ¿cómo consigues realmente que la gente use algo? Les apela. Tan diferentes cosas atraen a diferentes personas. Ciertamente la eficiencia y ese tipo de cosas son realmente útiles para convencer a la gente de que, oh, deberías usar esta cosa. Pero a veces, como una especie de formas más suaves de hacerlo, a veces la gente solo quiere ser parte de algo y así crear comunidad es una gran manera de incentivar a la gente a decir mirar todas las personas que están usando este sistema de diseño internamente o mirar a toda la gente que puede estar usándolo y ¿no quieres ser parte de este club? Entonces no creo que tenga que ser solo los duros beneficios tangibles, también podría ser como, te estás uniendo al club de niños cool o estás haciendo esta cosa nueva o eres parte de la parte de vanguardia de esta organización y lo que estamos haciendo o incluso mirando hacia fuera en el mundo para decir, mira lo que están haciendo todas las empresas cool como Google y Airbnb y Facebook con sus sistemas de diseño, hagamos de nuestra organización una de ese tipo de organizaciones. El modo en que se integra un sistema de diseño en una organización es realmente interesante porque hay mucha gente ahí antes de que tengas un sistema diseñado, hay mucha gente ahí que tiene sus viejas formas de hacer las cosas porque no tenías un sistema de diseño. Entonces ahora presentaste esta nueva pieza de utillaje a todos y eso es un obstáculo en sí mismo para que todos los que ya trabajan ahí de una manera diferente se suban con esto. nuevos contratados son un poco más una complicación a veces pero creo que hay algunos beneficios en eso también. Entonces a modo de ejemplo, estamos trabajando con una organización en la que les estamos ayudando a crear el primer sistema de diseño y también están contratando al mismo tiempo. Entonces la gente que trabaja ahí en este momento, estamos trabajando en el sistema de diseño con ellos juntos, y así el sistema de diseño es un poco incómodo, es un poco incómodo para ellos. Pero lo que en realidad están haciendo, cual creo que es una jugada realmente genial es, ya que estos nuevos contratados vienen a bordo, solo están haciendo parte del protocolo que estamos usando el sistema de diseño, esto es parte de las herramientas que trabajas aquí. Esto es lo que usas para tu portal de RRHH, esto es lo que usas para la comunicación con el resto del equipo, así te explicamos cómo construyes productos. Entonces aunque no sea del todo cierto en este punto, todo el mundo se está probando ese disfraz, están diciendo, vamos a actuar como si esta es una herramienta que vamos a usar y siempre hemos estado usando y veamos cómo va eso. Entonces para los nuevos contratados, tienes una oportunidad ahí también tienes una oportunidad ahíporque es un poco de pizarra en blanco decir, bueno, así es como hacemos las cosas y por un nuevo contrato, no saben mejor, no saben eso no usas eso en esa organización. Por lo que probarlo en nuevos contratados y tal vez informarles que así es como queremos trabajar, no hacemos eso exactamente ahora pero como ustedes vienen a bordo tal vez podrían ser uno de los que encabezar la carga. En realidad le da a un nuevo contrato algún incentivo para decir, oh, esta es una forma en la que podría estar involucrada y en realidad ayudar a la gente que está aquí en contraposición a sentir que ya me estoy poniendo al día. 8. Evolución de tu sistema de diseño: Definitivamente los sistemas de diseño necesitan ser mantenidos, como hablamos, es un producto y cada producto necesita ser mantenido. Algunos productos se mantienen más que otros, algunos se sientan ahí por un año hasta que el equipo trabaja en ello y luego se actualizan a la versión 2. He visto algunos sistemas de diseño que son así. Otros son un producto en el que la gente está trabajando cada semana y a veces incluso todos los días. De verdad depende de su organización o de su equipo en cuanto a la frecuencia con la que desea trabajar en el sistema de diseño, mantenerlo actualizado, mantener los componentes actualizados, la orientación actualizada, mejorarlos, iterar en ellos, haciendo otra versión de ellos. Eso puede ser tan lento o tan rápido como su organización puede apoyar y en realidad debería apoyar. De verdad depende de la cadencia de tu esfuerzo, cuán disponibles están todos para trabajar en él y con qué frecuencia lo necesitas. gobierno para los sistemas de diseño es un tema tan complicado. Parte de eso es sólo porque la idea de los sistemas de diseño, pesar de que han existido en el mundo de la impresión desde hace mucho tiempo, son nuevos en lo digital. No sé que haya un sistema de diseño que haya existido el tiempo suficiente para decir realmente, así es como debería funcionar la gobernabilidad. Parte de ello es que la industria está averiguando cómo se debe mantener un sistema de diseño y quién debe estar a cargo de él y de todo ese tipo de cosas. Hay muchos modelos diferentes de gobernabilidad. Un modelo obvio es que, bueno, hay una persona en nuestra organización y esa persona está a cargo de este sistema de diseño. Eso funciona bien, pero solo funciona bien por poco tiempo, porque idealmente quieres que tu sistema de diseño sea un éxito, y quieres que sea algo que todos usen. Cuantas más personas lo usen, muy rápido esa persona se abruma con la gente que les hace preguntas, averiguando cómo se pueden integrar con ella, crece muy rápidamente un trabajo de tiempo completo. Empieza con mucho sistema de diseño, hay una persona a cargo de esa cosa, pero muy rápidamente superan eso. El siguiente paso de eso es, bueno, de una persona, tal vez sólo crezca un equipo alrededor del sistema de diseño. En lugar de que una persona esté a cargo de ello, hay seis personas a cargo de ello. Ese es un modelo que hemos visto antes a diversos grados de éxito. Donde ese modelo realmente se descompone es, ahora parece que, bueno hay seis personas a cargo de ese sistema de diseño y en realidad no están a cargo de hacer otros productos para esta organización y así son un fuera de contacto para lo que el sistema de diseño realmente necesita soportar. En ocasiones ese equipo de una organización trabajará como una agencia interna para cultivar las cosas y tomar solicitudes de otros equipos de productos dentro de la organización y se siente un poco desligado. Uno de los modelos que hemos visto funcionan más bien, y creo que esto también está en esos artículos, es lo que se llama modelo federado. No hay un equipo dedicado al sistema de diseño que funcione solo en eso. Pero podría haber una o dos personas que solo estaban en el sistema de diseño y luego el resto de ese equipo en realidad está conformado por personas que trabajan en otros equipos de producto. Es un poco de modelo representativo decir, algunas personas que trabajaron directamente en eso y solo eso, pero luego vamos a tener a algunas personas para otros equipos en. Es casi como una junta de asesores, pero la gente que realmente puede aconsejar decir, en ese solo producto, hicimos esta cosa, vamos a enrollar eso en el sistema de diseño o necesitamos esto aquí para que se obtiene perspectivas variables de la organización. Ese es el modelo hasta ahora que hemos visto trabajar con más éxito. De nuevo, creo que es un poco demasiado joven para decirlo, ese definitivamente es el modelo de futuro. Hay muchas maneras de trabajar en componentes y actualizarlos y orientación y actualizar eso en sistema de diseño. En un extremo del espectro, se está actualizando todo el sistema de una vez. Lo liberas el primer día, un año después, podrías lanzar la versión 2 de todo el sistema de diseño. Cada componente se actualiza, toda la orientación se actualiza, es todo de una sola vez. Del otro lado del espectro, hay poder trabajar en cada componente de forma independiente. En el lapso de una semana, podría actualizar un componente de la versión 1 a la versión 1.1. Otro componente podría quedarse la versión 1 por otros dos años. Se puede trabajar en ello a nivel de componente. Hay pros y contras a cada enfoque. El beneficio de trabajar en ello a un nivel muy finito y un nivel muy detallado es que, en realidad estás trabajando en esto en tiempo real y no estás esperando todo un año para intentar hacer un montón de trabajo. En realidad se puede dividir el trabajo sobre eso en piezas muy pequeñas que son mucho más manejables. Los inconvenientes de eso sin embargo, es que ahora hay que tener gente dedicada en eso. Tienes que tener gente que esté trabajando en él a tiempo completo para poder estar trabajando en ello, digamos cada semana o todos los días incluso, para saber que un componente necesita ser actualizado. El otro lado del espectro, el beneficio de hacerlo una vez al año es que puedes hacerlo todo a la vez. Sin embargo, las inconvenientes de hacerlo de esa manera, es que digamos que necesitas una actualización de componentes. Bueno, tener que esperar un año para esa actualización de componentes, no es una gran cosa, sobre todo para otras partes de tu organización que van, bueno, o necesitamos esto fijo ahora mismo o nos vamos a desviar del sistema. Su kilometraje puede variar dependiendo la organización en la que trabaje y de lo ocupado que esté, y cuánto esfuerzo y tiempo puede dedicar al sistema de diseño y su mantenimiento. Pero probablemente no sea de un lado u otro, pero probablemente aterrizando en algún lugar del medio. Una de las preguntas más frecuentes en torno a los sistemas de diseño es, cuánto debería cambiar y debería ser una cosa de uno y hecho o hay algo que deberías estar tuiteando todo el tiempo. Una de las cosas que me encanta del trabajo digital es que tenemos la capacidad de cambiar las cosas tantas veces como queramos. Eso es diferente a hacer trabajos de impresión, si imprimes algo mal en un papel e hiciste un error tipográfico, tienes que tirar ese papel a la basura e imprimir uno completamente nuevo. Con lo digital, no tienes que hacerlo, podemos iterar. Esa es una de las cosas que es genial del diseño de productos y el diseño digital es que podemos cambiar las cosas de una manera pequeña y cambiar las cosas de una manera grande. La cuestión de si o no, debes hacer tu sistema de diseño de esa manera, cambia muy amplio o iterar en él, realmente depende de lo bueno que sea. Diré que si es realmente genial, puedes dejarlo en paz. Si no es tan grande, entonces probablemente deberías arreglarlo. Pero lo que sabemos por el diseño de productos digitales es que muy raramente cualquiera de nosotros puede predecir algo sobre un producto digital. Hazlo realmente bien la primera vez y puedes clavarlo, tenerlo perfecto y luego nunca tendrás que tocarlo de nuevo. Es probable que tengas que tocarla un poco después de hacer tu hipótesis inicial y convertirla en la primera vez. Probablemente haya una versión 2 a la vuelta de la esquina en algún lugar. Ya sea a un año de distancia o a seis meses o a seis semanas de distancia, creo que depende de lo bien que hayas adivinado la primera vez. Lo que es emocionante de los sistemas de diseño también es que son fundacionales y por lo que deberías poder construir sobre ellos. Diseña sistemas como los vemos hoy en día, si miras el aligeramiento o si miras el material, si miras alguno de los populares de código abierto que hay por ahí, muchos de ellos son para las plataformas estándar, web y tal vez aplicaciones nativas. Es posible que veas aplicaciones para Android o aplicaciones para iOS. Vivimos en un momento realmente fresco hoy eran esos no son solo los dispositivos con los que estamos interactuando. Muchos de nosotros tenemos Amazon Echos en nuestros hogares o Google Homes. Interactuamos con cosas que son sólo voz o solo tocan y no sólo cosas para las que usamos un ratón, tabletas y cosas así. Creo que cómo un sistema de diseño debería apoyar eso desde una perspectiva de plataforma y patrón está realmente a la altura de cómo lo vas a implementar. Pero una cosa que debe mantenerse firme en todo el camino, es en realidad tus principios deberían apoyar esas cosas nuevas. Una prueba de sus principios es decir, si miramos a este principal, ¿guía esto nuestro trabajo web tan bien como puede guiar, digamos, un dispositivo de solo voz? Si no, tal vez haya alguna afinación fina que ver con tus principios. A pesar de que las plataformas pueden ir y venir, pensar en, podrías apoyar reacciones en una versión de tu sistema de diseño, y luego si reaccionar desaparece en un par de años, vas a ser tal vez quieras retirarte eso. Tus plataformas pueden ir y venir pero tal vez pensar en tus principios persistiendo todo el tiempo. Uno de los tropiezos más comunes que veo con los sistemas de diseño es llegar demasiado específico a una tecnología. Siempre hay un sabor de la semana. Un sistema de diseño desde una perspectiva de diseño visual y diseño gráfico y diseño de interfaz de usuario. Esas cosas son probadas y verdaderas, diseño visual no ha cambiado, los principios del diseño gráfico se mantienen firmes. Esas son geniales, pero siempre hay un sabor de la semana en cuanto a tecnología. Una semana, es angular una semana, es reaccionar otra semana es vista. Una de las trampas que veo con los sistemas de diseño es ir todo en una tecnología. Si pretendes que tu sistema de diseño dure mucho tiempo, sugiero no ir demasiado lejos en el sabor de la tecnología y en su lugar ir con algo un poco más agnóstico. Muchas de las formas en que construimos sistemas de diseño es admitir HTML, CSS, y Vanilla JavaScript, y luego construir capas de tecnología encima de eso. Aquí nuestros componentes HTML y CSS y componentes JavaScript y luego aquí está la versión reactiva de esos componentes o la versión angular de esos componentes. Pero realmente asegurándose de que tengas ambas versiones. Si vas todo y dices, nuestro sistema de diseño solo reacciona, entonces si te alejas de reaccionar por cualquier razón tienes que reutilzar todo el sistema. Si piensas en la longevidad, te sugeriría bajar a las tecnologías HTML, CSS, y JavaScript que han existido y siguen persistiendo desde hace décadas, lugar de algo que podría retirarse en tres o cuatro años. Parte de la trampa de un buen sistema de diseño es que se siente como si tuvieras las herramientas correctas, eso es todo lo que necesitas. Si tienes un gran sistema de diseño ya configurada, has hecho el trabajo para identificar los componentes correctos, para identificar grandes principios , tienes unos universales , tienes específicos, es digamos, bueno, lo tenemos. Ahora solo podemos hacer lo que queramos sin hablar. Creo que parte de lo que es fácil de olvidar con un sistema de diseño, es que el sistema de diseño debe fomentar la colaboración y no desalentarla. Si eres diseñador y tienes un gran sistema de diseño o desarrollador y tienes un gran sistema de diseño, eso no debería ser una excusa para que te vayas, solo puedo hacer esto sin hablar con alguien, aunque puedas. Creo que esa va a ser una de las grandes tentaciones de tener un buen sistema de diseño, es poder decir esto debería ser una cosa que me haga hablar gente con la que trabajo más que algo que me haga ir, no lo hago necesitan trabajar más con ellos. Esa es la forma en que mejora el sistema de diseño. Si no estás colaborando, tu sistema de diseño se estancará. Se volverá rancio muy fácilmente. Cuanto más estés colaborando, más oportunidades encontrarás para mejorar realmente tu sistema de diseño. 9. Reflexiones finales: Nosotros lo hicimos. Llegamos al final de la clase. Ahora espero que sepas todo lo que necesitas saber para empezar a usar sistemas de diseño. Si no has usado uno antes, dale una oportunidad. Si has usado uno antes, ¿ ahora sabes cómo hacerlo mejor? Lo que espero que hagas desde aquí es empezar a colaborar más, empezar a trabajar más con tus clientes, con tus proyectos, con los miembros de tu equipo, con tu organización, pero cómo puedes implementar sistemas de diseño y utilizarlos al mejor de su capacidad. En el transcurso de esta clase, hiciste algunas listas, generas algunas ideas, tienes algunos pensamientos, ahora, comparte los con otras personas. Ese es el punto completo de un sistema de diseño es colaborar. Ponga eso en práctica. Se puede ver en la Galería de Proyectos. Allí puedes presentar tu trabajo. Puedes obtener comentarios sobre los tuyos y ver lo que otras personas están haciendo también, así que asegúrate de aprovechar eso. Cualquier buena clase probablemente te dejaría con más preguntas que respuestas, así que espero que ese sea el caso aquí. Si tiene alguna pregunta o comentario, déjalos en la discusión del proyecto, y voy a estar registrando con bastante frecuencia para ver lo que tiene que decir. Muchas gracias por tomar la clase. No puedo esperar a ver qué haces. 10. Más clases en Skillshare: manera.