Prototipos funcionales

1. ¿Por qué crear prototipos en HTML?

En los capítulos anteriores hemos visto la importancia de incluir la creación de prototipos en las fases previas al diseño, y después en el diseño de estructuras destinadas a presentar contenidos y garantizar la interacción.

Cada una de estas fases va seguida de prototipos específicamente adaptados: personas, luego escenarios y storyboards y, por último, wireframes.

Ahora vamos a profundizar en las herramientas de creación de prototipos que se utilizarán en las fases posteriores de un proyecto digital.

El principal objetivo ahora es probar recorridos o secuencias en condiciones lo más parecidas posible a la realidad.

En esta fase, se ha definido el producto mínimo viable, ya se ha establecido la identidad visual, se han integrado parcialmente los contenidos validados y las funcionalidades están operativas.

Siempre es vital que el responsable de UX mantenga la presión y garantice que durante las fases de diseño gráfico y desarrollo no se produzcan desviaciones que puedan perturbar la experiencia del usuario.

Por otro lado, en un proceso iterativo de mejora continua, las interfaces diseñadas inicialmente para el proyecto se han mejorado con funciones nuevas, probablemente los recorridos han evolucionado y, en algunos casos, se ha replanteado el objetivo inicial.

También hay un componente técnico presente, porque antes del desarrollo hay que asegurarse de que las soluciones elegidas, sobre todo en términos de diseño responsivo (adaptable a todas las pantallas), producen la mejor experiencia de usuario posible.

Por último, puede ser necesario reelaborar el sistema existente, ya sea para considerar una posible actualización, la adición de funciones nuevas o una reforma completa.

Por todas estas razones, necesitaremos crear prototipos de alta fidelidad que puedan visualizarse directamente en una estación de trabajo, ya sea un ordenador o un dispositivo móvil.

¿Hay que crear prototipos en HTML, es decir, programando de verdad las interfaces que se van a probar?

La respuesta a esta pregunta es a veces objeto de animados debates, sobre todo porque no todas las estructuras creativas pueden necesariamente integrar esta etapa en su flujo de producción por razones de presupuesto...

1. Adobe XD

Adobe XD CC (Adobe Experience Design) está integrado en la suite Creative Cloud, el sistema de suscripción de Adobe que proporciona acceso a todas las aplicaciones de este editor.

En el momento de escribir este libro, Adobe ha anunciado su intención de comprar el competidor en línea Figma y ya no ofrece XD a los usuarios nuevos. Sin embargo, sigue estando disponible para los titulares de cuentas Creative Cloud que lo tenían instalado.

Además, hay tres investigaciones en curso de las autoridades americanas, británicas y europeas para determinar si esta adquisición incumple las leyes antimonopolio. Por eso, el futuro de XD está en el aire.

Se puede acceder a XD a través de la aplicación dedicada de Creative Cloud en Mac o Windows.

Con Adobe XD podrás crear prototipos de manera fácil y rápida para todas las fases del diseño, desde wireframes (maquetas alámbricas) de baja fidelidad hasta sofisticados prototipos interactivos para todas las pantallas.

Los prototipos se podrán compartir en línea y probarse directamente en dispositivos conectados.

a. Iniciar Adobe XD

Cuando inicias Adobe XD, una pantalla de bienvenida te ofrece varias opciones.

 Para empezar puede elegir un formato predefinido. Por ejemplo, para nuestro prototipo elegiremos iPhone 14 Pro Max.