Diseño de productos digitales: crea un sistema de diseño flexible y duradero

1. Introducción: Mi nombre es Brad Frost, y soy diseñador web, orador, autor y consultor con sede en Pittsburgh, Pensilvania. Y la clase de hoy se trata de crear sistemas de diseño exitosos, e introducir la metodología de diseño atómico. Un sistema de diseño es la historia canónica de cómo su organización diseña y construye productos digitales. sistemas de diseño permiten a los equipos lanzar trabajos de mayor calidad más rápido que nunca. Muchas y muchas organizaciones están invirtiendo en eso, lo cual es genial. Pero al mismo tiempo ahora que es una especie de palabra de moda propia, ven muchos y muchos equipos saliendo en establecer botones, y tarjetas, y encabezados, y todo tipo de otros componentes de forma aislada. Entonces después del hecho, una especie de enchufarlos a sus productos reales solo para encontrarlos caer en su cara. El diseño atómico es una metodología que creé para ayudarme a mí y a los equipos con los que trabajo a pensar en UI como un conjunto reflexivo de partes interconectadas. Durante los últimos cinco años, diseño atómico ha surgido como onda bastante sólida para sin duda mis propios proyectos, pero también organizaciones de todo el mundo para ayudar a establecer sus sistemas diseñados y pensar en los sistemas de diseño en un forma conectada. Esta clase es para diseñadores y desarrolladores y realmente cualquier persona involucrada en el éxito de los productos digitales en una organización. Después de tomar esta clase, entenderás cómo poner en marcha con éxito una iniciativa de sistema de diseño. Estarás armado con la metodología para crear pensadamente unos componentes de sistemas de diseño que puedan ayudarte a levantar tu sistema de diseño inicial, así como a gobernar a lo largo del tiempo. Entonces gracias por unirte a esta clase, y vamos a sumergirnos. 2. ¿Qué son los sistemas de diseño?: Entonces, lo primero que vamos a hacer es tener un rápido refresco de lo que es exactamente un sistema de diseño. Esto está cubierto en muchos lugares en otros lugares pero en realidad es algo difícil de fijar exactamente. ¿ Qué es un sistema de diseño? La definición que tiendo a usar es que un sistema de diseño es la historia canónica de cómo su organización diseña y construye productos digitales. A mí me gusta poner esto a través de la lente de un nuevo contratante. Contratas a una persona inteligente y talentosa e inevitablemente lo van a preguntar, ¿cómo hacemos las cosas aquí? ¿ Cómo diseñamos cómo? ¿Nos desarrollamos? Cuando tengas un sistema diseñado, podrías responder a esa pregunta dirigiéndolos en la dirección del sistema de diseño. Se puede decir: “Aquí, aquí está la historia de cómo hacemos las cosas aquí, aquí está qué lenguaje de diseño utilizamos, aquí están mis convenciones de código que usamos, aquí están todas las demás cosas que ayudan a pintar el cuadro para cualquier persona que diseñe y construya productos digitales en la empresa. Hay muchos ingredientes diferentes a un sistema de diseño y generalmente toman la forma de un par de cosas diferentes. Ahí están los artefactos tangibles de un sistema de diseño. componentes reales de la interfaz de usuario que son el pan y la mantequilla de un sistema de diseño así como recursos de diseño, iconos, y cosas por el estilo. Pero luego también están las pautas generales sobre cómo usar estos artefactos. Piénsalo como muebles de Ikea. Tienes las partes reales de los muebles de Ikea que tiraste sobre la mesa y eventualmente montas en el producto terminado. Pero sin un manual de instrucciones, va a ser una jugada dura. Entonces, técnicamente puedes hacerlo con solo un kit de partes, pero al mismo tiempo, ese manual de instrucciones ayuda a proporcionar algún contexto y orientación para cómo armar estas cosas pensadamente para salvar tu cabello y tu cordura. En qué ingredientes incluye tu sistema de diseño va a depender de lo que tu organización, lo que necesiten tus equipos para poder diseñar y construir productos con éxito. Por lo tanto, su sistema de diseño podría incluir cosas como principios de diseño, tokens de diseño, directrices de UX, directrices de escritura, directrices de voz y tono, directrices desarrollo, los componentes de interfaz de usuario codificados reales, recursos de diseño como un boceto UI Kit, sistema de iconos recursos internos y externos a otras cosas vinculando a las mejores prácticas en sitios de recursos populares como la revista Smashing o CSS-tricks cosas como esa. Plantillas de página, flujos comunes, y patrones UX, pautas de marca. Hay tantos ingredientes diferentes para un sistema de diseño y de nuevo qué ingredientes contiene tu sistema de diseño va a depender mucho de las necesidades de tu organización y equipos. No es de extrañar por qué tantas organizaciones están invirtiendo en sistemas de diseño porque proporcionan una tonelada de beneficios diferentes. Proporcionan beneficios al usuario final al proporcionar experiencias más consistentes y cohesivas. medida que los usuarios viajan de una parte del sitio a otra o de un producto a otro, son recibidos con una experiencia de sentimiento muy similar y esto es importante por muchas razones diferentes porque en cualquier momento un usuario tiene que volver a aprender un nuevo patrón de interfaz, digamos que se encuentran con un recolector de fechas a través cuatro secciones diferentes de un sitio y cada vez que ese recolector de fechas es diferente, tienen que volver a aprender. Sin embargo ligeramente, vuelve a aprender las convenciones de la interfaz de usuario para seleccionar una fecha. Pero al tener un recolector de fechas proporcionado por el sistema de diseño, la cognición involucrada en tomar esa decisión al elegir esa fecha disminuye lo que les permite hacer lo que necesitan para hacerse más rápido, cual por supuesto es bueno para ellos pero también bueno para el negocio porque pueden tal vez salir más rápido, reservar un vuelo o reservar un hotel. Cualquiera que sea la tarea a la mano es buena para el resultado final de la empresa así como para respetar el tiempo y la atención del usuario. Si bien los beneficios para los usuarios son grandes, los beneficios reales de un sistema de diseño son en su mayoría internos. Están en beneficio de los equipos que realmente producen el trabajo. Los diseñadores, los desarrolladores, la gente de QA, la gente de producto, todas esas personas se benefician mucho de tener un sistema de diseño. El primer gran beneficio de tener un sistema de diseño para un equipo es que les permite lanzar el trabajo más rápido, y por qué este es el caso, es porque históricamente tuvimos que repetir mucho trabajo redundante innecesario. Tenemos una unidad de héroe para nuestra página de inicio y tenemos estas tres tensas o estas tres cartas y cada vez que tenemos una nueva página que necesita esos componentes, esos héroes o esos tensos, tuvimos que reinventarlos una y otra vez y otra vez y muchas veces con detalles de implementación sutiles o incluso a veces completamente diferentes. Entonces, en lugar de tener que reinventar el componente de tarjeta por decimoquinta vez, el equipo podría en cambio agarrar el componente de tarjeta existente del sistema de diseño, enchufarlo y luego enfocar sus esfuerzos en tareas más grandes y mejores. Los sistemas de diseño brindan el beneficio de lanzar trabajos de mayor calidad, porque de nuevo, no están reinventando las cosas, reinventando la rueda una y otra vez lo que significa que en su lugar pueden iterar sobre esos mismos componentes de UI en esos mismos patrones horneando en mejor accesibilidad , flexibilidad, material sensible, localización, animación, todo eso significa que la calidad del trabajo, la calidad de estos componentes de UI se elevan con cada nuevo iteración. Los sistemas de diseño proporcionan un vocabulario compartido que ayuda a reunir diferentes disciplinas y diferentes equipos de productos para que todos estén en la misma página y todos hablen el mismo idioma. Entonces, en lugar de que el desarrollador esté llamando a un componente la barra de utilidades, el diseñador lo está llamando la barra de administración, y el equipo de producto lo llama la barra gris en la parte superior, se puede establecer un vocabulario común para lo que ese cosa en realidad se llama. Permitir que los equipos se salten de tener que una reunión para discutir la nomenclatura para asegurarnos de que todos estamos en la misma página. Los sistemas de diseño también facilitan las pruebas permitiendo a los equipos aislar un componente individual y probarlo con las mejores prácticas de diseño receptivas, las mejores prácticas de accesibilidad, las mejores prácticas de rendimiento, etc. Por lo tanto, al probar cosas a nivel de componente y hornear en esas mejores prácticas a nivel de componente, cualquier lugar en que esos componentes se incluyan obtendrá automáticamente esos beneficios de forma gratuita. Los sistemas de diseño y sus guías de estilo que lo acompañan también proporcionan una referencia útil para que los equipos, diseñadores y desarrolladores se refieran a lo que hacen su trabajo diario. ¿ Cuándo eliges un acordeón versus pestañas? Puede consultar su guía de estilo para ver cuándo usar un componente u otro o qué nombre debe nombrar a un componente o qué convenciones desea utilizar. Al tener ese recurso compartido al que acudir, ayuda a que todos los flujos de trabajo de los equipos vayan más fluidos. Entonces, por último, un sistema de diseño proporciona una futura base amigable para construir en los años venideros. Esto es una gran cosa de los sistemas de diseño, es que es muy fundacional. No vas a resolver todos los problemas de tu organización y v1 de tu sistema de diseño. Pero lo que permite tener un sistema de diseño es mejorar la iteración a lo largo del tiempo estableciendo convenciones, estableciendo componentes, y construyendo sobre ellos a medida que pasa el tiempo, el equipo y la calidad del trabajo es capaz de subir y subir y hasta a medida que pasa el tiempo. Incluso si hicieras un rediseño masivo de tus organizaciones enteras, identidad visual, paleta de colores , y todo eso, todavía vas a tener botones, todavía vas a tener tarjetas, todavía vas a tener topografía e iconografía y cosas así. Entonces, no tienes que tirar al bebé con el agua del baño. Entonces, el sistema de diseño puede permanecer a medida que evoluciona tu lenguaje de diseño en curso. Obviamente hay tantos beneficios para diseñar sistema así que no es de extrañar que tantas organizaciones estén invirtiendo fuertemente en sus propios sistemas de diseño. Algunos ejemplos famosos incluyen el Diseño de Materiales de Google, sistema de Diseño de Carbon por IBM y heck incluso el Gobierno de Estados Unidos tiene un sistema de diseño para alimentar a los más de 30 mil sitios web producidos por el Gobierno Federal. Entonces, eso es solo una rápida actualización de lo que es un sistema de diseño y qué beneficios brindan. En la siguiente lección, vamos a hablar de cómo dar inicio a una exitosa iniciativa del sistema de diseño. 3. Puesta en marcha de una iniciativa de sistema de diseño: Entonces, ¿cómo diablos se inicia siquiera una iniciativa de sistema de diseño? Hay tantas facetas diferentes para diseñar sistema que puede llegar a ser casi paralizante hasta empezar. Encontré un gran primer paso es solo conseguir un laico de la tierra de lo que están hechos tus productos digitales. ¿ Cuáles son el ADN de sus productos digitales? Existen algunas herramientas y tácticas diferentes para redondear todos los diferentes componentes y estilos de interfaz de usuario contenidos en sus productos digitales. El primero es un sitio llamado cssstats.com. Lo que hace CSS STATS es imprimir todas las diferentes reglas de estilo contenidas en la hoja de estilo de tu sitio web. Entonces, podrías ir a cssstats.com y simplemente enchufar tu URL o a lo que sea tu dominio de productos digitales y presionar el botón go y lo que hará es escupir todas tus reglas de estilo. Entonces, si miras esta página, en realidad puedes enchufar varios sitios populares, nos quedaremos con Facebook por ahora y lo que hará es escupir todas las reglas de estilo que está en facebook.com, que como podrías imaginar son muchos. Entonces, esto no sólo te da todas las diferentes reglas de estilo y selectores, también señala todos los 85 colores únicos incluyendo lo que se ve como 50 tonos de gris y diferentes sabores del azul de Facebook. Lo que esto hace es que esto da a los equipos la oportunidad de redondear estos diferentes colores y de empezar a normalizarlos. Tener conversaciones sobre lo que debería haber ahí dentro y qué tal vez debería modificarse para reducir ese número. Lo mismo va con los colores de fondo, ¿cuál es el color correcto del rojo para los estados de error o del verde para los estados de éxito? Nuevamente, ¿qué azul de Facebook es el azul de Facebook correcto? ¿ Cuáles son los colores neutros en nuestra paleta de colores? ¿ Cuáles son los diferentes tamaños de fuente? Cuáles son las diferentes familias de fuentes y cómo podríamos reducirlas. Debido a que todas estas familias de fuentes, las declaraciones son un éxito de rendimiento. Entonces, ¿cómo reducimos pensadamente esos números y todo el camino a través. Entonces, esta es una gran herramienta. Solo estamos consiguiendo una instantánea de lo que están hechas tus IU y ayuda al equipo a facilitar una conversación sobre qué propiedades de diseño deberían estar quedando y qué debería estar pasando. La siguiente táctica para conseguir un laico del terreno es realizar lo que yo llamo un inventario de interfaz. Qué es un inventario de interfaz, es un ejercicio de captura de pantalla que básicamente todo el equipo va en una cacería de huevos de Pascua a través de todas tus propiedades digitales, y redondea y recoge y muestra toda la UI única patrones y los pone a todos bajo un mismo techo. Voy a caminar por los diferentes pasos de realizar un inventario de interfaz. El primer paso es redondear a todas las tropas, redondear a todos los diferentes integrantes del equipo que son responsables del éxito de su sistema de diseño. Este es un primer paso importante porque a veces un diseñador individual se encargará de salir y redondear todos los estilos de botones únicos y componentes de tarjetas y cosas por el estilo, pero no es muy útil de manera aislada un beneficio clave de los sistemas de diseño es establecer ese vocabulario compartido. Entonces, tener diferentes perspectivas en la sala ayuda a galvanizar esta iniciativa del sistema de diseño e inicia ese vocabulario compartido entre los diferentes integrantes del equipo. Por lo tanto, incluye diseñadores y desarrolladores y personas de QA y gestores de productos y gestores de proyectos y todas las personas que son responsables del éxito de tus productos digitales. Entonces, esencialmente un ejercicio de inventario de interfaz es realmente solo hacer capturas de pantalla de un montón de cosas. El paso dos se está preparando para la captura de pantalla. Me gusta asegurarme de que todos estén usando la misma herramienta para capturar capturas de pantalla. Digamos que esto podría ser una plantilla de PowerPoint o una plantilla de nota clave o Google Slides o algún otro mecanismo que permita al equipo tirar todas sus capturas de pantalla en un solo lugar, para que puedas combinarlas todas al final del ejercicio . He creado una plantilla de diapositivas de Google que podrías usar para iniciar tu propio ejercicio de inventario de interfaz. Ahora, para el evento principal. paso tres es en realidad la captura de pantalla de todos estos diferentes componentes distintos de la interfaz de usuario. Entonces, la forma en que esto tiende a funcionar es que asignamos una categoría diferente de componente de interfaz de usuario a un miembro del equipo diferente. Entonces, cuantas más personas tengas en la habitación mejor, más globos oculares tienes en tus propiedades digitales. Hay un montón de categorías diferentes a captura de pantalla. Hay componentes globales de interfaz de usuario, como diferentes encabezados y pies de página. Por lo tanto, alguna persona o un equipo de personas puede ser responsable de pasar y capturar todos los diferentes tipos de encabezados y pies de página y estados de esos componentes a través de sus propiedades digitales. Otro equipo podría ser el responsable de capturar diferentes tipos de imagen. Otras personas pueden estar encontrando iconos, como diferentes iconos de botón de aumento o íconos hamburguesa o de flecha a través de tus diferentes propiedades digitales. Otras personas pueden enfocarse en la tipografía. Otras personas pueden enfocarse en bloques, como héroes y cartas y cosas así. Alguien más podría estar en controles de formulario como áreas de texto e entradas de texto y botones de radio y casillas de verificación y cosas por el estilo. Otra persona puede estar en servicio de botones. Entiendes la idea, pero la idea es otra vez ir lejos y ancho a través de todas tus diferentes propiedades a veces incluso incluyendo tus propiedades nativas, en tus propiedades web, en propiedades de revestimiento interno, en propiedades de revestimiento externo. La idea es que realmente se arrastra a los rincones oscuros de tus interfaces de usuario para capturar todos los diferentes componentes que tienden a aparecer. Me pareció útil este ejercicio como ejercicio cronometrado. Podrías pasar fácilmente días o incluso semanas arrastrándote por las selvas de tus IU. Pero por el bien del tiempo, es útil solo obtener una instantánea del ADN de tus IU. He encontrado que una o dos horas es suficiente para obtener una huella suficientemente amplia de lo que están hechas tus IU. Una vez que has realizado el ejercicio de captura de pantalla, paso cuatro implica presentar tus hallazgos. Entonces, cada integrante individual del equipo que se encargó de decir encontrar los botones subirá al frente de la habitación y presentará lo que encontraron. Esta es una parte realmente útil del ejercicio porque es aquí donde todo el mundo es capaz experimentar el dolor de todos estos diferentes componentes de botones a través de tus diferentes propiedades digitales. También es aquí donde empieza a surgir ese vocabulario compartido, ¿verdad? Diferentes integrantes del equipo o diferentes disciplinas van a tener diferentes nombres para los mismos componentes. Entonces, es en esta presentación y discusión que los equipos capaces de empezar a reflexionar sobre cuál es el nombre de estos componentes, por qué estos componentes se ven de cierta manera o si esta cosa se queda o empieza a ir. Está bien. Entonces, esto proporciona una conversación realmente útil para que todo el equipo se apoye de la iniciativa del sistema de diseño y comienza a anticipar todo el proyecto del sistema de diseño que va a venir más tarde. Entonces el último paso de un inventario de interfaz es reagrupar y establecer los siguientes pasos. Obviamente solo hay tanto que puedes hacer en un par de horas juntos. Entonces, el equipo de trabajo que está creando el sistema de diseño podría entonces comenzar a tomar los hallazgos de ese ejercicio y averiguar cómo transitar eso a la hoja de ruta de los sistemas de diseño. Una de las mejores cosas que podrías hacer al final del ejercicio de inventario de interfaz es acarrear todos los resultados de ese ejercicio bajo un mismo techo, en un PDF gigante. Esto es realmente genial porque esto se convierte en una herramienta para ayudar a vender la iniciativa del sistema de diseño al resto de tus equipos así como a las personas que controlan las finanzas, ¿no? No tienes que ser diseñador para entender que tener 70 estilos de botones únicos es una mala idea. Entonces, literalmente podrías dejar caer un PDF o una copia impresa del ejercicio de inventario de interfaz en tu escritorio de CEOs y ellos entenderán por qué se necesita un sistema de diseño. Por lo que en resumen, un ejercicio de inventario de interfaz ayuda a señalar la inconsistencia y obtiene esa disposición de la tierra de lo que realmente están hechas tus IU. Señala esas inconsistencia para que el equipo del sistema de diseño pueda empezar a despejarse y especie de averiguar qué necesita quedarse y qué necesita ir. Es el comienzo de ese vocabulario compartido entre los miembros del equipo que se codificará en el propio sistema de diseño. También ayuda a establecer cuál será la forma del proyecto del sistema de diseño, qué componentes de la interfaz de usuario van a necesitar para estar contenidos dentro del sistema de diseño, y ¿cuál es su prioridad general? ¿ Hay montones de foros, hay montones de tablas de datos, hay montones de tarjetas, y cosas así. A lo mejor eso puede ayudar a tener una idea de cuál debe ser la prioridad de los componentes. Por lo que una vez que obtienes un laico de la tierra de la que están hechas tus IU, es súper tentador para diseñadores y desarrolladores simplemente sumergirse en las malas hierbas y conseguir diseñar y construir. Pero es importante no actuar según ese instinto y en cambio dar un paso atrás y en realidad hablar con la gente para averiguar qué debe hacer el sistema de diseño. Cualquier buen proyecto de diseño comenzará con la investigación y lo mismo es cierto para una iniciativa de sistema de diseño. Cuando tendemos a pensar en la investigación de usuarios, tendemos a pensar en las personas que están utilizando nuestro software. Si bien esto es cierto y deben estar involucrados en una investigación de sistemas de diseño, los usuarios reales de un sistema de diseño son los diseñadores y los desarrolladores, y los equipos reales que construyen estas interfaces de usuario. Al hablar con estas personas, puedes tener una idea de qué trabajos necesita hacer el sistema de diseño para tener éxito en la organización. Nuevamente, es por eso que es tan importante no solo sumergirse en la construcción de componentes y el diseño de componentes porque honestamente no sabes si esos componentes que terminas diseñando y construyendo realmente van para hacer frente a los retos organizacionales reales que están experimentando los miembros reales del equipo. Hay una idea errónea de que la investigación tiene que ser esta enorme cosa formal pero realmente se trata de hablar con la gente. Entonces, puedes sentarte uno a uno con diferentes miembros del equipo ya sea diseñador, desarrollador, persona de control de calidad, gerente de proyecto, propietario de producto, y obtener una idea de cómo es su flujo de trabajo, qué partes de su flujo de trabajo no son exactamente contentos con, con qué cosas los frustran, qué les gustaría ver fuera del sistema de diseño? ¿ Cuáles son las cosas que ven como aspectos importantes del éxito de la iniciativa del sistema de diseño? ¿ Cuáles son las amenazas potenciales a la iniciativa del sistema de diseño? En otras palabras, qué va a hundir la nave si no lo hacemos bien. Todas estas conversaciones ayudan a pintar el panorama de los trabajos que el sistema de diseño necesita hacer para atender con éxito las frustraciones de las personas y llevarlas a un mejor diseño y desarrollo de productos. Una vez que hayas terminado con tu investigación, podrías inmediatamente pasar eso a un taller de lanzamiento formal para la iniciativa del sistema de diseño. Solíamos cometer el error de dar inicio a una sesión sin hacer primero una investigación. Esas sesiones de inicio terminaron desvirtiendo en las voces más fuertes de la sala, dominando al resto de todos, y descarrilando las cosas con un montón de proyectos de mascotas de la gente. Al hacer la investigación primero y después hacer un taller de lanzamiento, puedes usar la sesión de lanzamiento para reunir amplio consenso para la iniciativa del sistema de diseño. Por lo que taller de lanzamiento implica reunir a todos los titulares de estaca para la iniciativa del sistema de diseño en una sala. Desde aquí, podrás presentar los hallazgos de tu investigación. Lo que tenderás a encontrar es que al hablar con un montón de personas, van a emerger diferentes equipos, ¿verdad? A lo mejor el flujo de trabajo del diseñador y desarrollador es áspero y están en sus propios silos. A lo mejor los desarrolladores se sienten frustrados por demasiadas pilas diferentes de tecnología que compiten. A lo mejor los diseñadores están utilizando para muchas herramientas diferentes y se hace difícil colaborar juntos. Todos estos diferentes insights ayudan a pintar la imagen de lo que el sistema de diseño necesita hacer. Por lo tanto, tendemos a tomar esos aprendizajes de nuestra investigación y ponerlos en estos amplios temas. Tendemos a terminar con cerca de 12 a 20 temas para el sistema de diseño, resultados potenciales para la iniciativa del sistema de diseño. Lo que hacemos es colgar estos temas en el muro y luego tenemos todos los estaca votan sobre cuáles son los temas más importantes. De todos los resultados de la iniciativa del sistema de diseño estas 10 a 20 cosas, ¿cuáles son las cosas que realmente necesita clavar? ¿ Cuáles son las cosas que realmente necesita hacer bien? Lo que hacemos es darle a todos tres notas post-it y hacer que todos voten sobre los tres objetivos del resultado que consideran que son los más importantes. Lo grande de este proceso es que es muy democrático. No tienes que preocuparte por las personas más extrovertidas o de las más pagadas de la habitación al vapor la conversación y distraer a todos. Todo el mundo obtiene un voto sobre lo que consideran que es el resultado más importante de la iniciativa del sistema de diseño. Al final de este ejercicio, eres capaz de dar un paso atrás y en realidad tener un mapa de calor de las prioridades del sistema de diseño, ¿verdad? Si esta cosa tuviera que hacer tres cosas realmente, muy bien, ¿cuáles son esas tres cosas? ¿ Verdad? ¿Cuál es el dolor y la frustración que este sistema de diseño necesita abordar? No quiere decir que los otros objetivos o resultados en la iniciativa del sistema de diseño no sean importantes o que el equipo no los vaya a abordar, es solo que cuando el empuje viene a empujar con recursos de tiempo y dinero limitados, tienes que hacer algunas cosas bien. No vas a poder cubrir todo con igual prioridad. Entonces, al realizar esta investigación y estos ejercicios de lanzamiento, el equipo es mejor capaz de entender qué es el sistema de diseño y qué trabajos necesita hacer. En la siguiente lección, vamos a hablar de cómo traducir los aprendizajes de ese ejercicio de lanzamiento en la elección proyectos piloto para configurar tu sistema de diseño para el éxito. 4. El proyecto piloto: Entonces, ahora has realizado un inventario de interfaces que te hace una idea de lo que están hechas tus IU, y has realizado una investigación y realizado un ejercicio de lanzamiento que ayuda a obtener un sentido amplio de las prioridades del sistema de diseño. Entonces, el siguiente paso es en realidad sumergirse y comenzar a construir el sistema de diseño. Podría ser tentador entrar y empezar a construir componentes individuales como botones y tarjetas y encabezados y cosas por el estilo. Pero un sistema de diseño verdaderamente exitoso no se crea en un vacío. Está conectado a los productos a los que sirve, y esa es la importancia de los proyectos piloto. Los proyectos piloto brindan la oportunidad de construir el sistema de diseño a través de la lente del software de trabajo real. Es sólo el uso de proyectos piloto que somos capaces de realmente poder decir que el sistema de diseño realmente puede alimentar productos de trabajo reales. Entonces, por ejemplo, un proyecto piloto podría ser un rediseño de la página de inicio para tu sitio web o podría estar rediseñando la pantalla del panel aquí o podría estar rediseñando la página de preguntas frecuentes o algo así. Estas rebanadas de productos te dan oportunidad de establecer todos los componentes que son necesarios para construir esas pantallas. Entonces, ¿cómo eliges con qué proyectos piloto dar inicio a tu iniciativa de sistema de diseño? Hay muchos criterios diferentes involucrados en la elección de un proyecto piloto y uno de los principales es donde se encuentra ese proyecto en su hoja de ruta. Si ya sucedieron los trabajos de diseño y desarrollo y se inician, ese barco probablemente ya esté navegado. Entonces, quieres estar en este punto dulce donde sabes que el proyecto está sucediendo y el equipo está planeando construir este proyecto como un rediseño de la página de inicio o algo así, pero en realidad no han comenzado el diseño y proceso de desarrollo aún, eso se convierte en una oportunidad para que el equipo del sistema de diseño se enganche a ese proyecto y ayude a crear ese proyecto así como los nacientes componentes del sistema de diseño. Hay muchos otros criterios involucrados en la elección de proyectos piloto y mi amigo y colega Dan Moll ha escrito un gran post explicando esos diferentes criterios. Algunos de esos criterios incluyen el potencial de componentes comunes. Entonces, hablamos de realizar un inventario de interfaz que te dé una mejor idea de lo están hechos tus productos Ulis y así quieres que el proyecto piloto pueda llevarse algunas de esas cajas. Si su inventario de interfaz mostró que su organización tiene cargas y cargas de formularios y tablas de datos, entonces probablemente desee tener un proyecto piloto que le dará la oportunidad de crear componentes de formulario y componentes de tabla de datos . El alcance del proyecto piloto también importa mucho. No quieres rediseñar toda la página web como un proyecto piloto, eso es demasiado grande. Quieres algo que puedas poner las manos alrededor y completar en un par de semanas o un par de meses. También quieres asegurarte de que sea alcanzable desde un punto de vista técnico. No se quiere tener que morder todo un CMS re-platforming o actualizarse a un marco completamente nuevo como un proyecto piloto que podría ser un poco demasiado engorroso para superar en estos primeros días del sistema de diseño. También quieres pensar en el potencial de marketing para tu proyecto piloto. Es esto algo un proyecto que podrías aguantar al final de este proceso al resto de la organización? ¿ Que todos los demás lo vean y digan “Hooh, yo también quiero hacer eso”? Acompañado a esto está la idea de tener un campeón disponible, ¿verdad? El equipo de producto con el que estás trabajando, quieres que estén a bordo con el concepto de un sistema de diseño porque pueden convertirse en animadora y evangelista para el resto de la organización. En esta madrugada del sistema de diseño, necesitas tener gente a bordo con nosotros y gente que sea capaz de rodar con los punzones, porque en los primeros días del sistema de diseño, estás construyendo lentamente el avión como estás volando adentro. Entonces, necesitas gente que esté dispuesta a venir en ese viaje contigo. No quieres asociarte con los más escépticos duro para trabajar con la gente para tus proyectos piloto iniciales. Entonces, de nuevo, elegir proyectos piloto ayuda a conectar el sistema de diseño con software de trabajo real y eso es absolutamente crítico para el éxito de su sistema de diseño. Entonces, una vez que tienes elegidos tus proyectos piloto, ahora puedes ponerte a trabajar y realmente construir tu sistema de diseño, lo que nos lleva a la metodología de diseño atómico. 5. Metodología de diseño atómico: El corazón y el alma de un gran sistema de diseño es un conjunto de componentes reutilizables, flexibles y resistentes. La mayoría de las personas entienden la importancia de un diseño impulsado por componentes en el proceso de desarrollo. Pero, ¿cómo se llega exactamente a estos componentes específicos que estarán contenidos en su sistema de diseño? Entrar diseño atómico. El diseño atómico es una metodología para pensar en las UI's como un conjunto reflexivo, jerárquico, interconectado de componentes que construyen pantallas reales. Para entender el diseño atómico, vamos a tomar un rápido desvío de vuelta a tu clase de química de preparatoria. Toda la materia en el universo está compuesta por un conjunto finito de elementos atómicos; hidrógeno, carbono, hierro y cosas así. Estos átomos se combinan para formar moléculas y en última instancia estructuras más complejas para crear toda la complejidad en nuestro mundo y en nuestro universo. Ese es un concepto increíblemente poderoso. Conforme sucede, podemos aplicar ese mismo concepto a nuestras interfaces. En el mundo del diseño de la interfaz de usuario, cualquier interfaz de usuario se puede desglosar en un conjunto finito de elementos atómicos. Cosas como etiquetas, entradas, y botones. Todos estos otros elementos que no se pueden descomponer más, sirven como base, los bloques básicos de construcción de nuestras UI's. Pero el diseño atómico es más que solo átomos. En realidad hay cinco etapas discretas de diseño atómico. Ahí hay átomos, moléculas, organismos, plantillas, y páginas. Vamos a pasar por cada etapa. Como acabamos de mencionar, átomos son los bloques básicos de nuestra interfaz de usuario. Entonces, cosas como etiquetas, entradas, botones, topografía, encabezados, imágenes, y esas cosas, sirven como nuestras materias primas. Pero es abstracto por sí solo ver un montón de botones o etiquetas flotando en el abstracto. Entonces, en la siguiente etapa, en la etapa de moléculas, tomamos esos elementos atómicos y los combinamos juntos. Entonces, por ejemplo, una etiqueta, una entrada, y un botón podrían unirse para formar un solo formulario de búsqueda de campo o un formulario de registro de newsletter. Ahora, de repente, estos átomos tienen un propósito, cierto. Esa etiqueta está definiendo esa entrada, hacer clic en ese botón se presentará ese formulario. Entonces, ahora tienes este bonito componente encapsulado que podrías caer en cualquier lugar que necesites la forma de campo único. Un organismo es un componente más complejo que está comprende moléculas más pequeñas. Entonces, un organismo de cabecera, por ejemplo, podría estar compuesto por un átomo de logotipo, una molécula de navegación primaria, y una búsqueda de una molécula. Todas esas cosas se unen bajo un mismo techo para formar este discreto trozo de interfaz de usuario. Subiendo a la etapa de plantillas, lo que hacemos ahí, es tomar nuestros organismos y los combinamos juntos y dejar todo en un diseño de página. Entonces, aquí estás empezando a ver tomar forma una página completa. Pero es importante destacar que a nivel de plantilla, realmente estamos definiendo el andamio de contenido o el sistema esquelético de una página en lugar del producto final o la salida final. En la etapa de página, somos capaces de tomar ese andamio de contenido o ese sistema esquelético luego verter contenido y datos representativos reales en él. Ahora, el escenario de la página es súper importante porque obviamente esto es lo que tus usuarios finales van a ver e interactuar con. Van a ver tu página de inicio con imágenes reales y llamadas reales a la acción y titulares reales involucrados en ellas. Pero también es en la etapa de página donde realmente somos capaces de probar la resiliencia del sistema de diseño subyacente. Podemos ver si un tipo específico de imagen se vierte en una unidad de héroe, ¿esa unidad de héroe se levanta? Correcto. ¿Y si es una foto de montañas y es bonita y es pacífica y hay mucho espacio en blanco y hay algún texto superponiendo esas montañas? Eso podría ser agradable y fácil leer ese texto. ¿ Y si sustituimos ese cuadro de montañas por un ruidoso grupo de personas? Ahora podría ser mucho más difícil leer el texto que está sentado encima de esa imagen. Entonces, es jugar escenarios de productos reales que somos capaces de llegar a soluciones robustas para los componentes subyacentes. También es en la etapa de página donde somos capaces de reproducir diferentes escenarios de una plantilla. Entonces, por ejemplo, podría iniciar sesión en un panel de su aplicación web, y para un nuevo usuario, podría querer ver algo diferente. Es posible que desee presentar un tutorial o un mensaje de alerta a un nuevo usuario que los usuarios veteranos podrían no ver. Tu sistema de diseño necesita poder manejar ese escenario real. Entonces, es en esta etapa de página que somos capaces de reproducir escenarios de productos reales que informarán e influirán en el sistema subyacente. Entonces, el diseño atómico podría aplicarse a literalmente cualquier interfaz de usuario. Ya sea un sitio web o una aplicación nativa o una pieza de software nativo como Sketch o Photoshop o incluso el kiosco de cajero automático de tu banco o algo por el estilo. Entonces, vamos a aplicar el diseño atómico a una aplicación con la que mucha gente está familiarizada, Instagram. Entonces, Instagram, como todos sabemos, es una aplicación para compartir fotos, y si aplicamos el diseño atómico a esta interfaz, y explotamos la experiencia de la app de Instagram en sus elementos atómicos, esencialmente nos queda un puñado de botones de icono, un puñado de átomos de textos, y uno para la foto real en sí. A nivel de molécula, se puede ver que esos elementos atómicos se unen para formar algunas piezas utilizables de la interfaz. Pero realmente a nivel de organismo es donde las cosas, la carne y las papas de la experiencia de Instagram se unen. Porque es aquí donde el organismo fotográfico que incluye todos los metadatos del usuario, la foto misma así como las acciones y comentarios para la foto donde todo lo que se une. Por supuesto, este organismo fotográfico es lo que está apilado uno encima del otro y nos desplazamos por el infinito, correcto. Entonces, podríamos ver que se juntan a nivel de plantilla, que es una plantilla bastante simple sólo porque es una aplicación móvil. Entonces, son solo estas cosas apiladas una encima de la otra. Entonces a nivel de página, es donde somos capaces de tomar nuestro sistema de diseño y realmente verter contenido representativo real en esa plantilla. Entonces, es en esta etapa que somos capaces de probar todas las diferentes variaciones, todos los escenarios de productos reales que nos vamos a encontrar como equipo de diseño. Entonces, por ejemplo, ¿qué pasa si tu manejador de usuario tiene 10 caracteres de largo? ¿Cómo funciona eso? Pero, ¿qué pasa si alguien intenta ingresar al manejador de usuario que tiene 50 caracteres de largo? ¿Qué pasa entonces? ¿ Se envuelve en dos líneas, tienes una conversación con el equipo de backend para tapar el número, la longitud de las cuentas de usuario? ¿ Qué pasa si una foto tiene cero me gusta? ¿ Qué pasa si en foto tiene un 100 millones de likes a ella? ¿ Qué pasa si hay cero comentarios? ¿ Qué pasa si hay 14 capas de comentarios anidados? ¿ Qué pasa si la foto es una plaza o un paisaje o un retrato o una presentación de diapositivas o un boomerang? Todos estos son escenarios de productos reales que el equipo de diseño y desarrollo de Instagram necesita atender. Por otro ejemplo, echemos un vistazo a Facebook. Entonces, antes, hablamos de cómo se podría aplicar diseño atómico a literalmente cualquier interfaz de usuario. Una interfaz con la que todos estamos familiarizados, es Facebook. Entonces, lo que vamos a hacer, es que vamos a tomar la interfaz de Facebook y literalmente cortarla en pedazos. A esto se le llama ejercicio de corte de componentes, documentado por la diseñadora web Charlotte Jackson. Entonces, lo que estamos viendo aquí, es el escenario de página de diseños atómicos, correcto. Estamos viendo una instancia específica de una interfaz de usuario con datos reales vertidos dentro de ella. Entonces, lo primero que vamos a hacer, es deconstruir esta página en sus organismos más pequeños. Estamos saltando la etapa de plantilla sólo porque en la plantilla está esencialmente esta pantalla sólo con algunos de los datos abstraídos, correcto. lugar de estas personas específicas en este perfil bloquea y estas historias específicas en mi feed, esencialmente simplemente quedaría gris fuera tipo de datos de portador de lugar. Entonces, como no podemos articular eso en papel, sólo vamos a saltar directamente a extraer nuestros organismos de esta página. Entonces, lo que voy a hacer, es ponerme a trabajar. Está bien. Entonces, lo que hemos hecho, es que hemos picado esto en trozos de componentes más pequeños en estos organismos más amplios. Entonces, vale la pena señalar que los organismos también pueden contener otros organismos. Entonces, digamos que los organismos de la barra lateral, por ejemplo, en realidad todavía contienen algunas piezas bastante complejas de interfaz de usuario como el trozo de la historia y la invitación de este evento en nuestras páginas en nuestro anuncio aquí. Entonces, lo que podríamos hacer, es en realidad tomar este organismo y en realidad descomponerlo aún más. Entonces, sigamos adelante y hagamos eso. Está bien. Entonces, ahora, tenemos organismos aún más pequeños, pero siguen siendo organismos. Entonces, ahora, a partir de aquí, podemos tomar un organismo específico y en realidad empezar a extraer nuestras moléculas de él. Entonces, voy a elegir el organismo historias y en realidad deconstruir eso aún más. Entonces, sigamos adelante y hagamos eso. Entonces, ahora, hemos deconstruido el organismo de las historias y lo volamos en unos componentes más pequeños. Entonces, ya verás tenemos un par de botones colgando a la parte superior derecha, tenemos un título para esta cuadra aquí arriba. Vamos a dejar eso en paz por ahora. En la parte inferior, tenemos este botón para ver más de tus amigos. Pero lo que voy a hacer es, me voy a centrar en este componente específico aquí. Entonces, podemos llamar a esto una molécula de perfil, o podríamos llamarlo un bloque de medios, que es un nombre más genérico para este componente específico. Pero esencialmente, lo que estamos viendo es una imagen de la izquierda y un nombre o un título de algún tipo y algunos metadatos debajo de ella. Esta es una pieza realmente importante del rompecabezas de la interfaz de usuario de Facebook. Puedes ver tenemos nuestra lista de contactos por aquí usando algún sabor de este mismo componente. Lo tenemos usado aquí, lo tenemos pasando el rato en nuestro encabezado aquí arriba, lo tenemos aquí en nuestra barra lateral, y se utiliza un montón de lugares diferentes a través de su sitio. Entonces, se puede ver lo importante que es poder abordar este componente porque es engañosamente simple. Si lo echamos un vistazo y consideras que hay 2.2 mil millones de usuarios, este componente aquí mismo tiene que hacer mucho levantamiento pesado. Entonces, estamos hablando de nombres de todas las formas y tamaños, diferentes idiomas, diferentes direcciones de lectura, cosas como árabe o mandarín o alemán u otras cosas que tienden a no seguir el estilo occidental de la escritura. Es realmente importante que esta pieza de interfaz de usuario sea capaz de manejar todos esos escenarios diferentes. No envidio a su equipo en lo más mínimo por esto porque se trata de una pieza engañosamente compleja de UI. Entonces, ahora que tenemos nuestro componente de bloque de medios o una molécula de bloque de medios o una molécula de perfil, sea que queramos llamar a esto, ahora incluso podemos deconstruir esto aún más. Entonces, lo que voy a hacer es cortarle esto en sus piezas atómicas. Entonces, hemos deconstruido nuestra molécula de bloque de medios o nuestra molécula de perfil hacia abajo en sus elementos atómicos. Entonces, tenemos este icono de imagen circular reutilizable que estamos utilizando a través de la página web de Facebook. Estamos usando este átomo de título que se utiliza para mostrar los nombres de las personas pero también llamadas a la acción, así como muchas, muchas otras cosas en todo el sitio, así como este tratamiento general para algo que llamaremos metadatos, o es algo que es un poco más sutil. Se supone para indicar ya sea una marca de tiempo, o por aquí, es un poco de texto descriptivo. Pero se podía ver que justo incluso a este nivel átomo, aquí se está trabajando mucho. Entonces, ¿qué pasa si la foto de perfil de un usuario se recorta de forma extraña y se corta parte de su cabeza, o qué pasa si no tienen una imagen de perfil en absoluto? ¿ Cuál es la cosa por defecto? ¿ Y si queremos usar algún tipo de icono o imagen diferente para eso? Todo esto, incluso a nivel del átomo, aquí está pasando tanta complejidad. Pero el espíritu de esto es, al controlar todo esto a este nivel átomo, al poder resolver problemas muy complejos y duros a nivel atómico, siempre que estas cosas se junten para formar estas moléculas y luego se unen más para formar estos organismos, luego se juntan para eventualmente formar estas pantallas finales, todas esas mejores prácticas que suceden todo el camino a nivel atómico burbujean y se percolan en toda la UI como un entero. Por lo tanto, Atomic Design puede ayudar a los equipos a tomar estos grandes espinosos problemas de interfaz de usuario, en realidad los desglosa en piezas más pequeñas y digeribles, lo que les permite diseñar y construir cosas de manera más sistemática y luego construir esos componentes hasta forman productos muy flexibles, resistentes. Pensar en los sistemas de diseño de interfaz de usuario a través de la lente de Atomic Design proporciona muchos beneficios. El primero y más grande que he estado repitiendo lo largo de esta lección es que es tan increíblemente importante conectar el diseño y desarrollo de productos con el diseño y desarrollo de sistemas. Atomic Design proporciona un puente entre esos mundos porque no solo los componentes que viven en un vacío fuera a lado en una abstracción y luego tus productos que viven en otro lugar, es todo eso de alimentarse entre sí. El diseño y el desarrollo del sistema informarán e influirán en los productos que salen del otro extremo, y los propios productos informarán e influirán en el sistema. Entonces, por ejemplo, podrías tener una página de inicio de marketing que tenga un par de cartas, una unidad de héroe, y cosas así, y entonces, podrías tener otro producto que use tarjetas de otra manera diferente, aún usando la misma molécula de cartas o organismo, pero se está aplicando a diferentes productos para diferentes propósitos. Aplicar Atomic Design a tu flujo de trabajo de sistema de diseño te permite construir el todo y las partes de ese todo al mismo tiempo. No diseñas un auto iniciando con el tapacubos o una tuerca de pasador y luego construyendo desde ahí, parte de un cuadro entero, cohesivo de lo que será ese auto, y llegarás a las partes que comprenden ese auto al mismo tiempo. Otra ventaja que proporciona Atomic Design es, proporciona una clara separación entre la estructura de sus componentes de interfaz de usuario y el contenido que vive dentro de ellos. Entonces, por ejemplo, podría tener un componente de tarjeta reutilizable. En un caso, ese componente de tarjeta podría albergar un montón de datos de producto. En otra instancia, podría contener un montón de datos de eventos. Al crear esta clara separación entre una estructura de componentes y el contenido que vive dentro de ella, puedes crear componentes de interfaz de usuario más reutilizables, agnósticos y flexibles. Otra cosa que Atomic Design proporciona es un lenguaje común para pensar en los componentes como jerarquía. Términos como componente y módulo y elemento son un poco demasiado abstractos, y aquí no hay sentido de jerarquía implícita. Pero términos como átomos, moléculas y organismos contienen ese sentido de jerarquía, donde los átomos se incluyen en las moléculas y las moléculas se incluyen dentro de los organismos. Ahora bien, si encuentras a tu equipo tropezando con los términos átomos, moléculas y organismos, no es gran cosa. Actualiza tu idioma y tu nomenclatura a algo que tenga sentido y ayuda a que todos se incorporen con estos conceptos. Eres capaz de practicar Diseño atómico sin usar los términos átomos, moléculas y organismos. El equipo de GE que trabaja en el Sistema de Diseño Predix decidió tomar la metodología de Diseño Atomico y modificar el vocabulario y agregar un par de pasos extra ahí. Eso ayudó a conseguirlos por dentro para toda la iniciativa del sistema de diseño. Entonces, ahora, hemos cubierto lo que es Atomic Design. Se trata de un modelo mental para pensar en nuestras IU como un conjunto jerárquico, interconectado de componentes que ayuda a construir pantallas reales de productos. Pero, ¿cómo aplicamos realmente el Diseño Atomico en el mundo real? En la siguiente lección, vamos a hablar de cómo los diseñadores y desarrolladores pueden trabajar con Atomic Design en sus flujos de trabajo. 6. Herramientas del comercio: Entonces, en su núcleo Atomic Design es solo un modelo mental. Entonces, ¿cómo aplican realmente los diseñadores y desarrolladores este modelo mental a su flujo de trabajo? Cómo aplique el diseño atómico a su flujo de trabajo va a depender del papel que desempeñe en una iniciativa de sistema de diseño. Los diseñadores tienden a trabajar en herramientas como Sketch o Envision Studio o Figma o Adobe XD u otros entornos de diseño estático. Por suerte, estas herramientas han evolucionado en los últimos años para incluir cosas como símbolos y componentes que son capaces de ser anidados dentro de uno del otro. Entonces, somos capaces de lograr Atomic Design en estas herramientas de diseño estático. Entonces, en un boceto similar a una herramienta, somos capaces de definir nuestros átomos, definir nuestras moléculas, y también definir que nuestros organismos son componentes más complejos, y lo que podemos hacer con esto es ahora hacer una conexión entre esos átomos, moléculas y organismos. Entonces, por ejemplo, si quisiéramos cambiar digamos el radio fronterizo de nuestros botones, podría entrar aquí actualizar nuestro valor de radio fronterizo y golpear “Guardar”, y lo que puedo hacer es ver cómo hacer ese cambio impactó nuestro componente teaser que está usando nuestro átomo de botón, y se puede ver que esos bordes ahora están redondeados, y luego si entramos en nuestros organismos los cuales están haciendo una lista teaser que es una colección de elementos teaser, podemos ver esos botones actualizados como bien. Entonces, todo eso es decir, eres capaz de crear este sistema interconectado de componentes de estos símbolos y hacer cambios en un solo lugar y que esos cambios ondulen hacia cualquier lugar en el que se incluya ese componente. Por lo tanto, mientras que los diseñadores están utilizando herramientas como Sketch and Figma y Adobe XD y Envision Studio, los desarrolladores tienden a construir componentes en un tipo diferente de entorno. Tiendo a llamar a esto el entorno de taller front-end, y lo que es un entorno de taller front-end es un lugar donde puedes definir componentes y poner los datos dinámicos reales en esos componentes sin necesariamente teniendo que conectarlo a la aplicación en funcionamiento real. Hay un montón de herramientas diferentes por ahí que proporcionan estos entornos de taller front-end. Hemos redondeado una colección de estas herramientas de taller front-end en un sitio llamado StyleGuides.io, que es una colección de recursos todo sobre sistemas de diseño. Hay un montón de entornos de taller front-end por ahí que son bastante populares incluyendo storybook, pattern lab, fractal, view DS y más. Lo que vamos a hacer es mostrar una demo de usar pattern lab para crear un diseño de componentes de sistemas y pantallas de proyectos piloto. Entonces, lo que hicimos fue crear un sitio web de comercio electrónico ficticio en el laboratorio de patrones. Por lo que puedes ver la página de inicio aquí tiene unas tomas al máximo de zapatos con algunas imágenes promocionales y un pie de página y todas esas cosas buenas, y luego podemos hacer clic en nuestras categorías de productos para ver zapatos de mujer y hombres zapatos y zapatos infantiles y luego podemos hacer clic en una página de detalles del producto que muestra el producto específico que un usuario quiere comprar, todo el camino a través de la experiencia de tarjeta de compra, y el flujo de trabajo de checkout. Entonces, este es un gran ejemplo de un sitio web que tiene mucho que hacer con él. Tenemos más cosas de marketing salpicado. Contamos con más páginas de detalles de producto utilitarias y por supuesto algunos foros para que los usuarios lo comprueben. Entonces, todo esto se crea con 100 sistema de diseño de mentira, y lo que el laboratorio de patrones nos permite hacer, es visualizar los sistemas de diseño subyacentes a los componentes. Entonces, saltando a la página del índice, puedes ver todas las piezas incluso subatómicas como nuestra paleta de colores de marca y son paleta de colores neutros y colores de utilidad así como nuestra topografía y tamaños de fuente y encabezados y otras cosas así, y a medida que nos desplazamos por aquí verás cosas como iconos en diferentes tipos de imagen y diferentes bloques como nuestra unidad de héroe y bloque de promoción en el que entraremos en un poquito. Pero se pueden ver todos los átomos, moléculas y organismos subyacentes puestos al descubierto para que el equipo pueda tener conversaciones sobre ellos. Entonces, lo genial es que somos capaces de usar laboratorio de patrones para atravesar entre estos diferentes patrones. Estos átomos, moléculas, organismos, plantillas y páginas. Entonces, por ejemplo, somos capaces de acercar un átomo individual lo que nos ayuda a tener una conversación sobre este componente específico de la interfaz de usuario. Entonces, este es un lugar útil donde diseñadores y desarrolladores son capaces de reunirse para hablar de qué dimensiones van a ser estas imágenes de producto. Entonces, se puede ver que se trata de una imagen de 600 por 400. Pero de nuevo mientras hablamos de estos átomos no son terriblemente útiles por su cuenta. Entonces, lo que somos capaces de hacer es usar la característica de linaje de los laboratorios de patrones para mostrar dónde realmente se acostumbra este patrón. Entonces, dice que la Stack Block Image se utiliza en nuestra molécula Stacked Block. Entonces, podemos hacer clic aquí, y en realidad ahora ver este componente de bloque apilado que es una tarjeta de producto o algo donde podríamos poner información del producto, pero también tal vez alguna otra información por el camino. Entonces, a partir de aquí, podemos decir que tenemos la tarjeta de bloque apilada, ¿de dónde sale uso esto? Y dice que esto está incluido en nuestra lista de bloques de pila que es una lista de estos componentes los cuales todos se unen para formar esta cuadrícula que podría ser usada para algo como un grado de producto o algo así. Ahora a partir de aquí, podemos decir que las listas de bloques de pila se incluyen en estos siguientes patrones hasta la plantilla de categoría. Entonces, ahora, somos capaces de ver que este grado de producto empieza a cobrar vida. Podemos ver que estas listas de bloques apiladas comienzan a aplicarse a algo muy específico. Ahora, desde aquí si nos fijamos en dónde se está utilizando esta plantilla, es decir que la estamos usando para nuestra categoría de niños o categoría de hombres y así sucesivamente y así sucesivamente. Entonces, si hago clic en una página específica, podemos visualizar cómo se ve esa plantilla con datos de zapatos de hombre vertidos en ella. Entonces, de nuevo este es un verdadero escenario de productos. Esta empresa necesita vender zapatos de hombre y esta UI está logrando eso. Pero entonces también somos capaces de navegar a diferentes áreas que están usando exactamente la misma plantilla, pero vertiendo contenido diferente dentro de estas plantillas de interfaz de usuario. Entonces, si eres un diseñador que usa símbolos anidados son componentes en un boceto o sigma similar a una herramienta o eres un desarrollador que usa una herramienta como el laboratorio de patrones o libro de cuentos para anidar componentes dentro de uno del otro en código, estás construyendo este conjunto de componentes interconectados e interdependientes para construir pantallas reales, y esas pantallas van a ser dictadas por tus proyectos piloto. Si el gig está construyendo una nueva página de inicio, entonces genial eso te va a brindar la oportunidad crear un componente de héroe y algunos componentes de cartas en tu encabezado, en tu pie de página y cosas por el estilo. Si eres el gig está rediseñando el flujo de caja que te va a dar algunos campos de formulario y algunas otras cosas. Entonces, la idea es que estamos usando esos proyectos piloto para diseñar y construir todos los componentes que en última instancia alimentarán esos productos. Al usar un entorno de taller front-end y usar las herramientas de diseño estático y son componentes anidados, puedes lograr sistemas de diseño atómico justo ahí están todos bajo un mismo techo. Entonces, este proceso se puede usar para construir tu sistema de diseño inicial, pero una de las cosas cruciales de un sistema de diseño es asegurarse de que aguante la prueba del tiempo. ¿ Cómo configura su sistema de diseño no para el éxito a largo plazo y maneja no solo los escenarios actuales de sus productos, sino que también aborda los resultados futuros de sus productos. En la siguiente lección, vamos a cubrir cómo hacer eso. 7. Uso de tu sistema para trabajos futuros: Entonces, construir un sistema de diseño a través de la lente de un puñado de proyectos piloto es una gran manera de establecer un conjunto de componentes reutilizables y flexibles que podrían ayudar a construir productos reales. Pero los proyectos piloto son justamente eso. Son pilotos. No van a abordar cada escenario en el que se va a encontrar su organización. En ocasiones, te vas a encontrar buscando un componente, enchufándolo, y encontrando que te pone tal vez el 90 por ciento del camino ahí. Pero para lograr algo se necesita este 10 por ciento extra para que realmente funcione correctamente. Entonces, lo que vamos a hacer es hablar del trabajo en curso del producto y cómo enrollar eso con la evolución continua de su sistema de diseño. Entonces, volvamos a nuestra hipotética empresa de zapatos. Digamos que el jefe siempre ha sido un poco reacio a ofrecer cosas que estaban a la venta. Entonces, todo lo que vemos en nuestra demo es un artículo de precio completo, ¿verdad? Por lo que nuestra categoría masculina, nuestra categoría femenina, nuestra categoría infantil no tiene nada más que artículos de precio completo. Pero los tiempos han cambiado. Y digamos que, esa estrategia no estaba funcionando, así que, a regañadientes, viene el jefe, y él dice: “Está bien. Tenemos que incluir una sección de ventas en nuestra página web ahora”. Entonces, ¿cómo funciona eso? Porque esto en realidad implica actualizar nuestra interfaz de usuario para abordar este nuevo escenario de negocios. Entonces, lo que necesitamos hacer es actualizar nuestra navegación para incluir una sección de ventas. Y podríamos actualizar nuestra página de inicio e incluir una nueva sección debajo de nuestros principales artículos promocionales, con esta especie de sección tout “En Venta”. Entonces también podríamos hacer clic en nuestra página de categoría de venta, que es exactamente la misma página de categoría que las categorías mujeres, hombres y niños, pero tenemos un par de diferencias de interfaz de usuario que se vuelven claras. Entonces, tenemos un cambio a nuestro patrón de bloques apilados donde estamos incluyendo y agregando esta pequeña bandera de venta en la esquina superior derecha de nuestro componente y también tenemos esta actualización a nuestro precio. cual se puede ver noqueado el precio original, y el nuevo precio de venta apareciendo en su lugar. Entonces, lo genial es, es que seguimos siendo capaces reutilizar los bits principales de este componente pero vamos a crear una variación de ese componente que nos permita abordar este escenario de ventas. Entonces, verás que en nuestra biblioteca de patrones, ahora tenemos un bloque apilado. Y luego hacemos una variación de ese patrón, escribiendo un poco de HTML y un poco de CSS, y haciendo esos cambios para abordar este escenario. Ahora, este bloque apilado podría manejar no solo productos normales sino también productos de venta. El resultado es un componente más robusto, un componente más flexible que es capaz de viajar a más lugares en todo el sitio web. Entonces -eso es grandioso - con sólo un par de retoques a un componente, somos capaces de abordar un escenario de producto totalmente nuevo. Esto es lo que Yesenia Pérez Cruz llama Sistemas de Diseño Impulsados por Escenario. El negocio tiene un problema, tiene un objetivo, que están tratando de lograr, y el sistema de diseño necesita ayudar a lograr esos objetivos. Entonces, es a través de la lente del trabajo en curso del producto que el sistema se vuelve más fuerte y más flexible con el tiempo. Usemos otro ejemplo de una guía de regalos navideños. El jefe entra y dice: “Es casi tiempo de vacaciones. Esta es una época importante del año para nosotros. Hacemos mucho de nuestros ingresos. Pero, seamos honestos, nuestras páginas de categoría actual no son tan salpicadas como nos gustaría que fueran”. Entonces, lo que queremos hacer es que queremos abordar eso. Entonces, si miras nuestras páginas de categoría de producto existentes, es posible crear una guía de regalos navideños como título y luego contar con los diferentes productos que van a estar a la venta para las vacaciones. Pero podríamos hacer algo mejor. Debido a que tenemos estos componentes reutilizables -algunos de los cuales están en nuestra pagina- que son más grandes y splashier, tal vez podríamos reutilizar algunos de esos componentes para crear una sección de guía de regalos navideños más salpicada y elegante. Entonces, lo que vamos a hacer es tomar este componente héroe, y lo vamos a conectar por encima de nuestra rejilla de productos. Y vamos a llegar a un diseño totalmente nuevo, utilizando componentes existentes en nuestro sistema de diseño. Entonces, esto es realmente, realmente poderoso porque esto nos permite mezclar y emparejar componentes existentes para lograr una experiencia completamente nueva, todo en cuestión de minutos. Históricamente, crear algo así como una guía de regalos navideños tardaría semanas o tal vez incluso meses en lograrlo. Pero una vez que tengas un conjunto de componentes reutilizables, flexibles y resistentes que podrías reorganizar de todo tipo de formas diferentes, literalmente podrías enchufar estas cosas en cuestión de minutos. Eso es una enorme ganancia para todo el equipo. Ahora, claro, eso no quiere decir que, “Es tan fácil que todo lo que necesitamos hacer es arrastrar y soltar un par de componentes ahí dentro e ir a almorzar temprano”. Todavía hay, obviamente, mucho trabajo duro de diseño de productos que necesita suceder. Pero aquí está la cosa. Ahora, que los diseñadores y desarrolladores no tienen que reconstruir los componentes del héroe desde cero cada vez, son capaces de enfocarse en problemas más grandes, mejores. A lo mejor se trata de traducir ese componente héroe en dos idiomas diferentes, tal vez se trata de buscar diferentes obras de arte o tal vez se trata de pasar más tiempo jugando con animación u otras cosas, ¿verdad? Todo esto es una oportunidad para liberar a diseñadores y desarrolladores para un trabajo más valioso. Al conectar su trabajo de diseño de producto en curso con la evolución de su sistema de diseño, cada iteración sobre los componentes de su sistema de diseño resulta en un sistema más robusto, más flexible, resistente y más potente. Ese es un concepto increíblemente poderoso. 8. Reflexiones finales: Entonces eso es eso. Ya lo has conseguido hasta el final del curso. Esperemos que por ahora entienda cómo los sistemas de diseño ayudan a impulsar productos reales y cómo podría utilizar la metodología de diseño atómico en sus flujos de trabajo de diseño y desarrollo con el fin de crear su sistema de diseño inicial, pero también para ayudar a guiar sus esfuerzos de sistema diseñados en curso. Me hubiera encantado escuchar cómo estás usando el diseño atómico en tu propio flujo de trabajo, y también me encantaría saber si te estás quedando colgado o frustrado o atascado en cualquier parte de tu iniciativa de sistema de diseño. Por lo tanto, siéntete libre de saltar a la sección de discusión a continuación y mantener la conversación en marcha. Muchas gracias por unirte a mí en esta clase, y realmente espero que esto te ayude en tu propio viaje de sistema de señas. 9. Explora más clases en Skillshare: [ MÚSICA]