Inteligencia Artificial en Diseño UX/UI: Herramientas y Aplicaciones

Inteligencia Artificial para Diseño UX/UI

Los modelos y herramientas de Inteligencia Artificial para diseño de interfaces avanza a una velocidad vertiginosa. En estos momentos, todavía no se encuentran tan desarrollados como para poder trabajar con ellos con garantías.

No obstante, podemos comenzar a integrar algunas herramientas en ciertas partes del proceso de diseño UX/UI. Vamos a verlas.

Inteligencia Artificial para Arquitectura de la Información

Podemos utilizar Inteligencia Artificial para ayudarnos en el proceso de diseño de la Arquitectura de la Información.

Por ejemplo, podemos pedir a ChatGPT, que nos ayude creando un primer esbozo de las categorías, en base a las categorías que utilizan empresas de la competencia para luego realizar un card sorting cerrado con los usuarios.

Ejemplo: diseñar la Arquitectura de la Información con ChatGPT

Inteligencia Artificial para generar wireframes y prototipos

A la hora de comenzar el proceso de diseño UX, podemos utilizar Inteligencia Artificial para agilizar nuestro proceso de diseño, permitiéndonos, así poder, testear con usuarios más rápido. Hay dos momentos en los que podemos hacer esto:

• Para ayudarnos a generar ideas para las pantallas y los flujos. Introduciendo información sobre el producto y nuestros objetivos, obtendremos una descripción escrita de las necesidades para cada momento de la navegación. Herramientas que nos pueden ayudar a esto son:
  • ChatGPT
  • Dice

👉Puedes ver ejemplos de este proceso, en la clase de Inteligencia Artificial para Diseño de Interfaces del curso ChatGPT para Product Designers 👈

• Podemos ayudarnos de herramientas que específicamente se enfocan en generar prototipos para poder comenzar a trabajar. Con estas herramientas, únicamente tienes que introducir un prompt sobre tu producto, y te genera una landing page, un wireframe de alta fidelidad o un prototipo más o menos funcional. Esto puede ayudarte a idear y a tener una primera base con la que trabajar para, posteriormente, adaptarlo a las necesidades de tu producto o servicio. Algunos ejemplos de estas herramientas son:
  • Uizard
  • Mixo
  • Galileo

Además, herramientas de diseño y no-code también están comenzando a integrar herramientas de IA. Por ejemplo, Webflow genera contenido con IA, y Framer está a la cabeza, con IA generativa, de landing pages, paletas de colores e imágenes.

Ejemplo: diseñar una landing page con Mixo

Prompt:

A CRM SaaS like pipedrive or salesforce that helps organization and startups having a clear view about their leads, deals and their ongoing offers and projects, as well as the status.

Inteligencia Artificial para diseño visual

La Inteligencia Artificial también nos puede ayudar con el look&feel dentro del proceso de diseño y a asegurar que nuestro contenido es content-first.

• Para la paleta de colores, herramientas como Khroma permiten generar automáticamente paletas de colores accesibles.
• También puedes generar un logo provisional para los mockups con herramientas como logoai.
• Herramientas como copy.ai te permiten generar los copies para tu proyecto. Además, te permiten especificar el tono y estilo para adaptarlos a las necesidades de tu producto. Esto permite generar un contenido para los wireframes y que el prototipado tenga un enfoque content-first.

Ejemplo: diseñar copies para una landing con copy.ai

Prompts:

Create the copies for the landing page of a CRM SaaS like pipedrive or salesforce, named Salesflow, that helps organization and startups having a clear view about their leads, deals and their ongoing offers and projects, as well as the status.

I want you to design the microcopies for all the call to action buttons on that landing page

Inteligencia Artificial en Figma

Por otro lado, en la comunidad de Figma se encuentran multitud de plugins basados en Inteligencia Artifcial que ayudarán al equipo de UI a optimizar el proceso de diseño. A continuación, encontrarás una selección de los más útiles.

• Qoqo: para diseñar user personas y customer journeys desde Figma.
• Attention Insight: analiza y crea mapas de calor, focus maps y análisis de interés de componentes bajo Inteligencia Artificial. Puedes mejorar la visibilidad y posicionamiento de algunos recursos dentro de una pantalla, según las lecturas de la AI y la generación de porcentajes de atención para cada componente.
• Writer for Figma: es un plugin que hace la función de "writing assistant" una forma de comprobar que el contenido es claro y consistente.
• Octoicons: genera iconos en SVG con un prompt directamente desde tu mesa de trabajo.
• Builder.io: convierte los prototipos directamente a código. También puede generar una sugerencia de diseño, a partir de un prompt, y generar posteriormente el código.
• Automator: personaliza tus tareas más repetitivas en Figma, y convertirlos en un comando drag and drop.