¿Tienes un producto digital que necesitas actualizar o un nuevo proyecto en marcha para impulsar la transformación digital de los procesos y servicios de tu negocio? Ten en cuenta que el diseño y la usabilidad no son solo complementos para un proyecto, sino las claves que pueden determinar el éxito de tu solución (ya sea app, web app, ecommerce…). Sin perder de vista la accesibilidad (web y app) que es un requisito fundamental para muchos proyectos.

¿Quieres saber algunos de nuestros trucos? Alejandro Garrido, UX/UI Designer de IAGT, comparte su kit básico de herramientas para transformar ideas creativas en productos digitales funcionales y visualmente impresionantes.

Herramientas orientadas a mejorar el diseño y la usabilidad

Descubre cómo cada herramienta contribuye a una experiencia de usuario excepcional:

• Donde todo comienza: ¡una libreta! Cerca del ordenador de Alejandro siempre debe haber un cuaderno y, si tiene retícula de puntitos, ¡mucho mejor! «Que mola más”. Según su experiencia es imprescindible para «coger notas, hacer bocetos o incluso perder el tiempo dibujando”. Una herramienta imprescindible.

• Figma: la herramienta que domina ahora mismo el mercado en muchos aspectos. Nos permite prácticamente trabajar todo el proceso sin salir de ella: desde definir la arquitectura de la información, wireframes, la creación de los componentes UI o los prototipos dinámicos. “Aunque bien es cierto que si quieres definir microinteracciones quizás no sea la herramienta más cómoda”.

• Origami Studio: aunque no la hemos usamos demasiado, sí es útil para definir algunas animaciones o microinteracciones que no permita la herramienta de prototipado de Figma.

• Tokens Studio: un plugin de Figma muy útil para trabajar los tokens de los sistemas de diseño. Figma de momento no tiene esta funcionalidad tan desarrollada y por eso usamos un plugin externo, “pero podemos considerarla una herramienta en sí misma de lo completa que es”.

• El inspector de Chrome (o de cualquier otro navegador): lo usamos sobre todo para validar que lo que se ha desarrollado cumpla con los estilos que debe tener a nivel de CSS. Una herramienta habitual pero fundamental «para poder ver las tripas de las cosas”.

• No puede faltar: ChatGPT. En este caso, lo usamos desde para generar contenido «real» y evitar el uso de Lorem Ipsum o el clasico «aklsdkjnasdjk asd123l«. También lo usamos para que nos ayude a generar documentación, ya sea a través de un resumen que le demos o una imagen.

BONUS:

• Además de este top de imprescindibles, hay herramientas que son complementos o bien del navegador o de Figma que nos ayudan a comprobar la accesibilidad. Una de ellas es «axe DevTools» en Chrome. También desde la propia Figma se pueden instalar multitud de plugins para comprobar el contraste de color y que se cumplan las reglas WCAG2.

¿Estás preparado para crear un producto digital que supere las expectativas y que además cumple con los parámetros de accesibilidad y usabilidad? Contacta.