Acelerando la Innovación en Diseño y Desarrollo con Herramientas Impulsadas por IA

Rate this content
Bookmark
Slides

Los diseñadores y desarrolladores trabajan en diferentes cronogramas: los diseñadores miran hacia el futuro mientras que los desarrolladores construyen a partir de lo que ya se ha diseñado. Hablan diferentes idiomas y siguen diferentes procesos. ¿Cómo podemos cerrar estas brechas y construir un proceso de desarrollo más colaborativo? En esta charla, exploraremos la integración de herramientas y técnicas impulsadas por IA para mejorar los sistemas de diseño, fomentando una mejor comunicación entre equipos multifuncionales. Al aprovechar la inteligencia artificial, no solo podemos aumentar la productividad y la innovación, sino también crear un flujo de trabajo más armonioso y eficiente para diseñadores y desarrolladores

Cristobal Chao
Cristobal Chao
21 min
12 Dec, 2023

Video Summary and Transcription

La charla discute la importancia de la innovación y las iteraciones rápidas en la resolución de problemas. Enfatiza los beneficios de mezclar diseñadores y desarrolladores desde el principio y usar React para la reutilización de componentes. Se mencionan las capacidades del modo de desarrollo de Figma como una herramienta para un desarrollo más rápido, aunque todavía es un trabajo en progreso.

Available in English

1. Introducción a la Innovación

Short description:

Hola a todos. Muy emocionado de hablar con ustedes sobre este tema hoy. Un poco de antecedentes sobre mí. Comencé a trabajar para un laboratorio de innovación llamado Hatchery Labs. Me uní a Google como parte de la transformación de front end. Comencé mi propio estudio llamado Torii Studio. ¿Qué es la innovación? ¿Estás resolviendo el problema correcto?

Hola a todos. Estoy muy emocionado de hablar con ustedes sobre este tema hoy. La Innovation es algo que realmente me emociona. Y cuando veo productos que están innovando, o incluso personas que tienen grandes ideas, esto es algo que realmente me emociona. Y definitivamente esto es algo de lo que estoy muy emocionado de hablar con todos ustedes.

Así que comencemos. Y antes de comenzar, quiero darles un poco de antecedentes sobre mí. Mi nombre es Cristobal Chao. Soy originario de España, llegué a los Estados Unidos hace 11 años en 2012. Y cuando llegué a San Francisco, comencé a trabajar para un laboratorio de innovation llamado Hatchery Labs. Y nuestro objetivo era construir otras startups. Fue muy emocionante. Fui el primer ingeniero allí, y me lo pasé muy bien trabajando con muchas startups. Algunas de ellas no llegaron muy lejos, pero algunas de ellas pasaron al siguiente nivel. Y una de ellas se convirtió en un unicornio, lo cual es muy, muy emocionante. Un año y medio después, me uní a Google como parte de la transformación de front end. Y aprendí mucho, no solo desde una perspectiva de ingeniería, también desde un design UI y UX. Y trabajo en grandes equipos. Fui parte del material design versión 1 y versión 2, construyendo los principales sistemas de componentes, así como moviendo todas estas piezas a través de plataformas como Google Maps y Search. Fue muy emocionante y me lo pasé muy bien allí. Y luego, hace unos años, en realidad a finales de 2019, hace tres años y medio, comencé mi propio estudio llamado Torii Studio y trabajamos con startups y también pequeñas, empresas de tamaño mediano para tratar de ayudarlas a pasar al siguiente nivel construyendo grandes aplicaciones de front-end. Y lo que quiero decir con geniales es front-ends que pueden escalar muy bien desde una perspectiva de ingeniería, así como construir productos que se ven y se sienten geniales. Esto es muy emocionante para mí y hemos visto a algunas startups pasar al siguiente nivel utilizando algunos de nuestros sistemas, procesos, y lo que todavía estamos aprendiendo. Y tenemos muchas cosas que aprender todos los días que es algo nuevo. Así que estoy muy emocionado de hablar realmente sobre la innovation hoy, que es lo que intentamos hacer con las empresas con las que trabajamos en Torii Studio. Entonces, ¿qué es la innovation, verdad? Muchas personas probablemente están innovando ahora mismo, las que me están escuchando hoy, tal vez en el pasado o tal vez están pensando en hacerlo en el futuro. Pero todos nosotros tenemos un sentido diferente de lo que es la innovation. Para que yo pueda explicar cómo pienso en la innovation, les hago esta pregunta, ¿estás resolviendo el problema correcto? Y su primera reacción probablemente sea seguro, quiero decir, esa es la parte fácil entender el problema. Y lo conozco muy bien. Sin embargo, mi respuesta para usted probablemente sea

2. Desafiando Perspectivas y Rápidas Iteraciones

Short description:

Comienzas a construir la mejor solución para ese problema, pero la mayoría de los productos fallan en la primera iteración. ¿Puede un avión volar impulsado solo por la energía del piloto? Henry Cramer ofreció una gran suma de dinero para que las empresas cruzaran un canal con una bicicleta voladora. Después de años de costosos experimentos, Paul McGrady desafió la perspectiva y construyó un avión que podía ser reconstruido en horas, no en meses.

no eres realmente consciente de toda la perspectiva. Estás trayendo tu propia realidad, tus propios sesgos, y crees que lo sabes todo. Así que empiezas a construir la mejor solución para ese problema. Y esa es la principal razón por la que la mayoría de los productos fallan en la primera iteración. Realmente no conozco un producto que haya tenido éxito en el primer intento. Y te desafío a que me digas si me equivoco. No he visto uno en mi vida. Y para ilustrarte un poco sobre este tema, solo voy a compartir una historia que ocurrió en los años 50, 1959. Así que hace 70 años, el mundo era diferente al de hoy. Y Henry Cramer, era un magnate y surgió con esta pregunta. ¿Puede un avión volar impulsado solo por la energía del piloto? Así que es como ET, como volar en una bicicleta. ¿No es eso loco? Ofreció más de cien mil libras. En aquel entonces, era mucho dinero. Solo piensa que esa cantidad era alrededor de dos millones y medio de dólares. Así que era mucho dinero. Y había grandes empresas porque había una gran suma allí y mucha reputación que podían construir intentando resolver el problema. Quería que las empresas cruzaran un canal de dos millas con esta bicicleta voladora. Así que tenían que construirla. Tenían que hacer todo y luego intentar volar el canal. Así que grandes empresas estaban allí como la NASA y también un montón de individuos. Entonces, años después, nadie había descubierto eso todavía. Estaban gastando mucho dinero, mucho tiempo en cada experimento. Y era muy costoso porque cada vez que tenían que poner algo, les llevaría meses y luego se rompería y tendrían que reconstruir e intentar de nuevo. Así que estaba llevando mucho tiempo, mucho dinero. 18 años después, Paul McGrady como individuo desafió la perspectiva de las cosas. Así que vino con esta perspectiva, con una diferente. ¿Cómo puedes construir un avión que puedes reconstruir en horas, no en meses? Así que con esta perspectiva en mente donde estaba pensando en formas de crear un sistema que le permitiera aprender más sobre el problema haciendo iteraciones muy rápidas. Así que cada rápida iteración le ayudaría, bueno, le ayudaría a entender más sobre el problema e intentar de nuevo a partir de un aprendizaje que obtuvo de la iteración anterior y construir sobre eso. Así que en unos pocos meses, en realidad pudo crear un sistema que le permitió reconstruir la bicicleta que estaba construyendo en cuestión de horas. Así que en un solo día, en realidad pudo experimentar dos o tres veces. Y todos los competidores estaban tomando

3. Importancia de las Rápidas Iteraciones

Short description:

Logró cruzar el canal y ganar el premio al estar por delante de todos los demás. Las rápidas iteraciones son importantes para entender y encontrar soluciones. No esperes un éxito inmediato; se necesitan muchas iteraciones. El pensamiento de diseño es un proceso similar utilizado en la construcción de productos digitales. Aprende de cada iteración y sigue intentándolo. Albert Einstein enfatizó la importancia de la experimentación.

meses. Entonces, si piensas en eso, él estaba por delante de todos los demás simplemente al poder hacer eso. Y en cuestión de meses después de que creó el sistema, en realidad pudo cruzar el canal y ganar el premio. La historia se llama Estás Resolviendo el Problema Crecido. Esto es de la Universidad de Stanford de Innovation. Realmente te animaría a echar un vistazo. Está mucho mejor explicado de lo que yo te estoy explicando. Así que es muy, muy interesante, esta historia. Y te dice, ¿verdad?, cuán importantes son las rápidas iteraciones. Cada iteración es muy importante. No pienses en construir la mejor solución. Solo intenta encontrar una forma de llegar allí rápido, y en realidad entenderás mucho. Y no pienses que lo vas a conseguir de inmediato. Probablemente te llevará muchas iteraciones.

Entonces probablemente te estás preguntando, OK, esto es genial. Esto es 1959. Así que la historia ahora es diferente. Estamos construyendo productos digitales. Usamos React. Entonces, ¿a quién le importa construir bicicletas voladoras? La Universidad de Stanford también presenta este proceso de design thinking. Algunos de ustedes lo saben, pero es una idea muy similar. Empatizas con el problema. Definir qué problema es. Idear una solución. Luego haces un prototipo y lo pruebas. Y quieres hacerlo muchas veces diferentes. Y cada iteración es un problema de aprendizaje muy, muy interesante. Así que quieres aprender de cada iteración tanto como puedas e intentar de nuevo y de nuevo y de nuevo. Como dijo Albert Einstein, ninguna cantidad de experimentación puede demostrarme correcto. Un solo experimento puede demostrarme equivocado. Logró muchas cosas simplemente

4. Importancia de las Iteraciones y Retroalimentación

Short description:

Cada experimento es una iteración. Comienza con papel y dibuja tu idea. Obtén retroalimentación a través de diferentes fases. Construir el producto es lo que más tiempo lleva. Las grandes empresas luchan por innovar. Los equipos pequeños innovan mejor con recursos limitados.

haciendo experimentos. Para nosotros, es la misma idea. Queremos hacer experimentos. Cada experimento es una iteración. Así que es un concepto muy importante para que entiendas. Porque eso es la principal razón por la cual la mayoría de las startups tienen éxito, mientras que otras no.

Cuando estás tratando de innovar en el ciclo de vida de un producto, vas a empezar con un papel y dibujarás tu idea en él y la pondrás frente a la gente. Y vas a empezar a preguntar sobre cómo se siente. Sin embargo, si empiezas con papel, probablemente no vas a obtener mucha retroalimentación valiosa. Vas a obtener algún nivel de retroalimentación que será útil, pero no es la realidad. Puedes pasar por otras fases como intentar hacer wireframes, baja fidelidad, alta fidelidad, completamente funcional o construir el producto, ¿verdad? Pero hasta que no llegues al producto, no vas a obtener la retroalimentación de nivel más alto. Cuando construyes el producto, lo pones frente a la gente, es cuando entiendes lo que está pasando, pero es muy doloroso, especialmente la primera situación porque es cuando te dan un golpe en la cara. Eso es cuando fallas. Especialmente la primera vez. Estás construyendo algo que es nuevo, ¿verdad? Que tú crees que va a resolver todo y no lo hace, ¿verdad? Y eso está bien. Pero hasta que no estés allí, no vas a obtener la retroalimentación de nivel más alto. Y la segunda pregunta que quieres hacerte en el ciclo de vida de cualquier producto es, ¿qué tan rápido puedes llegar allí? Dibujar algo en papel, muy, muy rápido. Puedes hacerlo ahora mismo. Te lleva unos pocos segundos, minutos de tu tiempo, pero construir el producto es lo que más tiempo lleva. Así que si ponemos esto en perspectiva, ¿qué tan rápido y qué tan precisas son nuestras suposiciones dependiendo del ciclo de vida de cualquier producto? Sabes que el producto es lo que más tiempo lleva, pero también queremos llegar allí. Y si piensas en el tamaño de la empresa, el producto es lo que más tiempo lleva, especialmente si estás en una gran empresa. Y ese es un concepto muy importante para entender. Por eso la mayoría de las empresas, cuando son grandes, tienen dificultades para innovar algo nuevo. Si miras a Google en los últimos 10 años, apenas hemos visto productos innovadores. Sin embargo, han invertido miles de millones en IA. Y una pequeña empresa como OpenAI entra en juego y crea solo GPT. Piensa en eso. Esa es la principal razón por la cual los equipos pequeños pueden innovar mucho mejor que las grandes empresas. Sin embargo, tienen recursos mucho más limitados, un presupuesto mucho más limitado. Pero es un concepto muy interesante para que entiendas porque al final del día, así es como funciona el mundo.

5. Fusionando Diseñadores y Desarrolladores

Short description:

Estamos en la última fase de innovación. Pero, ¿qué tal si en lugar de simplemente construir lo que los diseñadores nos entregan, fusionamos los mundos de los diseñadores y desarrolladores desde el principio? La parte más crítica es la mentalidad, venir con una mentalidad clara y abierta, como un niño, listo para aprender y experimentar. Al fusionarnos en la misma realidad con sistemas de componentes, como Figma y React, podemos crear sistemas reutilizables y centrarnos en construir la experiencia del usuario. Comenzando con un enfoque mínimo utilizando HTML5, podemos iterar y pulir a medida que avanzamos sin la necesidad de una biblioteca.

Entonces, ahora, nosotros, como desarrolladores, usualmente, la mayoría del tiempo, simplemente estamos construyendo el producto. Estamos en la última fase de innovation. Pero la innovation ocurre antes que nosotros, ¿verdad? Los diseñadores usualmente pasan por papel, wireframes, baja fidelidad. Dependiendo del tamaño de tu equipo, puedes pasar por todas estas diferentes fases. Pero luego, al final, simplemente estamos construyendo lo que los diseñadores nos entregan. Quiero cuestionar esta perspectiva. Y tengo una pregunta para ti. ¿Qué tal si en lugar de hacer eso, mezclamos estos dos mundos, los fusionamos de tal manera que los diseñadores y desarrolladores sean parte de esta fase de innovation desde el principio? La primera pregunta es ¿cómo? Y lo primero que necesitas entender es que la parte más importante es la mentalidad. No es el nivel de conocimiento que tienes, la experiencia que tienes. Es la mentalidad. Si vienes con una mentalidad muy clara, como un niño. Cuando digo un niño, es que quieres ir allí sin tener ningún tipo de ego. Nada que te diga, oh, yo sé esto mucho mejor que tú. Deja tu ego en la puerta. Solo intenta tener la mentalidad correcta porque eso es muy importante. Y quieres estar aprendiendo desde el principio. Incluso si has estado 20, 30 años en el espacio, quieres venir con una mentalidad muy clara y sin conocimientos, sin ego. Quiero decir, el conocimiento es muy importante. No me malinterpretes. Pero quieres llegar como una persona muy fresca allí tratando de entender qué está pasando, intentando aprender. Creo que cada experimento es un aprendizaje para ti. Así como los niños aprenden tan rápido porque no les importa, prueban muchas cosas. Eso es lo que también queremos aplicar con la misma mentalidad. Entonces, ¿cómo empezamos? Nosotros, como desarrolladores y diseñadores, en realidad nos estamos fusionando en la misma realidad cuando pensamos en sistemas de componentes. Los diseñadores usualmente usan Figma, los desarrolladores usamos React. Podemos transformar estos design systems en sistemas que funcionan muy bien y son reutilizables en ambos lados. De hecho, hay herramientas que permiten ir de Figma a React y viceversa, pero esta es una mentalidad muy interesante que quieres tener porque quieres reutilizar tanto como puedas para no gastar demasiado tiempo en construir los componentes. En realidad, estás construyendo la experiencia que quieres poner frente a los usuarios. Y con esta idea mía de iteraciones, quieres hacer una pequeña iteración, intentar llegar allí, y a medida que avanzas, estás puliendo cosas. Kind of start cuando tienes una idea con una forma muy mínima que es HTML5. Realmente no necesitas una biblioteca.

6. Beneficios de Usar React

Short description:

Te animo a usar React por su reutilización de componentes. Construir en HTML puede ser rápido, pero a menudo resulta en una experiencia de usuario poco atractiva. Los usuarios ahora esperan mejores experiencias debido a su uso constante de herramientas digitales. La transición de HTML5 a bootstrap o material UI no es difícil.

Quiero decir, realmente te animo a usar React porque eso realmente implica la reutilización de componentes que pueden llevarte al siguiente nivel mucho más rápido. Por eso también te animo a usar otras bibliotecas, pero antes de saltar a eso, solo piensa en esto, construir algo en HTML, quiero decir, es muy rápido, pero también es algo muy feo. La gente realmente no pasa un buen rato, especialmente los usuarios en estos días. En estos días, los usuarios han elevado el listón al siguiente nivel. Esperan una experiencia de usuario mucho mejor que antes. Entonces, ahora, y la razón por la que lo hacen es porque usan herramientas digitales todo el tiempo. Están en sus teléfonos constantemente y eso realmente conduce a grandes experiencias de usuario. Entonces si les das algo que parece feo, lo van a rechazar desde el principio. Eso es algo a tener en cuenta, pero para que pases de los componentes HTML5 a bootstrap o material UI en realidad no es tan difícil. Solo necesitas crear, quiero decir, si nunca lo hiciste antes, tal vez te llevará un poco, pero no es tan difícil.

7. Capacidades del Modo Desarrollador de Figma

Short description:

Las capacidades del modo desarrollador de Figma te permiten obtener componentes y herramientas para un desarrollo más rápido. Sin embargo, todavía no es la mejor solución. Figma está iterando e intentando crear algo innovador, pero aún no han llegado a una gran solución para todos.

También quiero compartir este concepto, algunos de ustedes ya lo saben, supongo que la mayoría de ustedes deberían saber que Figma tiene estas capacidades del modo desarrollador, que te permiten obtener componentes ya de Figma y tener ciertas herramientas que te llevan al siguiente nivel mucho más rápido. Sin embargo, tengo que decir que esto se lanzó hace unos meses. No soy el mayor fanático. Creo que la idea es genial, pero creo que todavía estamos lejos de ser los mejores o algo de lo que estoy muy orgulloso de usar. Así que tenlo en cuenta. Me encantaría saber qué piensas al respecto, pero esta es un área muy interesante. Y espero que Figma haga un mejor trabajo a medida que avanzamos. ¿Están iterando, verdad? Están intentando crear algo innovador y creo que están en camino, pero aún no han llegado a una gran solución para todos. Si estás interesado en construir design systems, tengo esta masterclass que he creado. Se llama Innovar con React. Solo toma un par de horas construir un sistema de componentes en un storybook que puedes empezar a usar. Si ni siquiera sabes mucho de React, esta es una excelente manera de aprender. Así que realmente te animo a echarle un vistazo si quieres construir un design system por tu cuenta. Si no lo has hecho. Si lo has hecho, probablemente no vayas a obtener mucho de ello, pero hay ciertas cosas que podrías encontrar interesantes. Solo toma un par de horas. Así que si tienes tiempo, hazlo. Y ahora estamos llegando a la parte más interesante de o las tecnologías más recientes que existen, que son las herramientas de IA, especialmente ChatGPT, GitHub Copilot. Quiero decir, un viaje medio para ilustraciones, visualizaciones y todo. Creo que esta es un área muy interesante. La mayoría de ustedes probablemente lo saben y lo han usado bastante desde el comienzo del año. Tengo que decir que esto ha cambiado drásticamente la forma en que desarrollamos cosas. Hoy en día, podemos ir mucho más rápido, creando cada producto diferente, incluso cosas que no podíamos hacer antes, incluso cosas que no estábamos muy contentos o entusiasmados porque no conocíamos la tecnología. Ahora con las herramientas de IA, podemos cerrar esa brecha y llegar allí más rápido que nunca. Estas herramientas de IA se sienten como tener un equipo que realmente te asiste en todo lo que necesitas, y tenemos que realmente necesitamos abrazar eso. Hay diferentes formas en las que puedes usar estas herramientas, y creo que cuanto más y más sepas sobre estas herramientas, realmente te hace más rápido y mejor, por eso realmente te animo, si estás interesado en esto, a que realmente uses tu teléfono y te sometas a la encuesta porque estoy armando una masterclass sobre esto. Realmente quiero compartir mi experiencia y los aprendizajes sobre el uso de herramientas de IA en React y estoy muy emocionado de hablar sobre este tema. Es por eso que tengo una pequeña encuesta donde quiero entender por qué y qué te hace cada vez más entusiasmado acerca de esta nueva realidad. En cualquier caso, quiero decir que este es un momento muy interesante. Creo que esta es la primera vez que Paul McReady puede innovar y superar a grandes empresas como Google, Microsoft, Apple. Tenemos tecnologías en estos días que cualquiera puede ser un innovador. No realmente necesitas tener un gran equipo o un gran presupuesto o realmente no necesitas nada de eso. Solo necesitas tener mucha curiosidad, la mentalidad correcta y empezar a usar estas herramientas de la manera más eficiente. De todos modos, ha sido un gran placer hablar contigo sobre esto. Me encantaría conectar con tú si estás interesado en este tema. Ahí tienes mi LinkedIn, así que siéntete libre de usar tu teléfono y espero que en algún momento pueda encontrarme con alguno de ustedes. De todos modos, muchas gracias y que tengas un buen día.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Brain-controlled Interfaces in JavaScript
JSNation Live 2021JSNation Live 2021
27 min
Building Brain-controlled Interfaces in JavaScript
Top Content
Neurotechnology is the use of technological tools to understand more about the brain and enable a direct connection with the nervous system. Research in this space is not new, however, its accessibility to JavaScript developers is.Over the past few years, brain sensors have become available to the public, with tooling that makes it possible for web developers to experiment building brain-controlled interfaces.As this technology is evolving and unlocking new opportunities, let's look into one of the latest devices available, how it works, the possibilities it opens up, and how to get started building your first mind-controlled app using JavaScript.
TensorFlow.js 101: ML in the Browser and Beyond
ML conf EU 2020ML conf EU 2020
41 min
TensorFlow.js 101: ML in the Browser and Beyond
Discover how to embrace machine learning in JavaScript using TensorFlow.js in the browser and beyond in this speedy talk. Get inspired through a whole bunch of creative prototypes that push the boundaries of what is possible in the modern web browser (things have come a long way) and then take your own first steps with machine learning in minutes. By the end of the talk everyone will understand how to recognize an object of their choice which could then be used in any creative way you can imagine. Familiarity with JavaScript is assumed, but no background in machine learning is required. Come take your first steps with TensorFlow.js!
Crafting the Impossible: X86 Virtualization in the Browser with WebAssembly
JSNation 2022JSNation 2022
21 min
Crafting the Impossible: X86 Virtualization in the Browser with WebAssembly
WebAssembly is a browser feature designed to bring predictable high performance to web applications, but its capabilities are often misunderstood.
This talk will explore how WebAssembly is different from JavaScript, from the point of view of both the developer and the browser engine, with a particular focus on the V8/Chrome implementation.
WebVM is our solution to efficiently run unmodified x86 binaries in the browser and showcases what can be done with WebAssembly today. A high level overview of the project components, including the JIT engine, the Linux emulation layer and the storage backend will be discussed, followed by live demos.
Makepad - Leveraging Rust + Wasm + WebGL to Build Amazing Cross-platform Applications
JSNation 2022JSNation 2022
22 min
Makepad - Leveraging Rust + Wasm + WebGL to Build Amazing Cross-platform Applications
Top Content
In this talk I will show Makepad, a new UI stack that uses Rust, Wasm, and WebGL. Unlike other UI stacks, which use a hybrid approach, all rendering in Makepad takes place on the GPU. This allows for highly polished and visually impressive applications that have not been possible on the web so far. Because Makepad uses Rust, applications run both natively and on the Web via wasm. Makepad applications can be very small, on the order of just a few hundred kilobytes for wasm, to a few megabytes with native. Our goal is to develop Makepad into the UI stack of choice for lightweight and performant cross-platform applications. We intend to ship with our own design application and IDE.
WebHID API: Control Everything via USB
JSNation 2022JSNation 2022
23 min
WebHID API: Control Everything via USB
Operational System allows controlling different devices using Human Interface Device protocol for a long time. With WebHID API you can do the same right from the browser. Let’s talk about the protocol features and limitations. We’ll try to connect some devices to the laptop and control them with JavaScript.
How I've been Using JavaScript to Automate my House
JSNation 2022JSNation 2022
22 min
How I've been Using JavaScript to Automate my House
Software Programming is naturally fun but making something physical, to interact with the world that you live in, is like magic. Is even funnier when you can reuse your knowledge and JavaScript to do it. This talk will present real use cases of automating a house using JavaScript, Instead of using C++ as usual, and Espruino as dev tools and Microcontrollers such as Arduino, ESP8266, RaspberryPI, and NodeRed to control lights, doors, lockers, and much more.