¿Cuáles son las mejores herramientas para crear rápidamente prototipos de una aplicación web? Idealmente, la herramienta debería ser capaz de modelar tanto la interfaz de usuario como la lógica del lado del servidor y el código de salida debería generarse. No me refiero a simplemente hacer maquetas de pantalla o diseño.

Trabajo con la creación de prototipos UX en Weld (herramienta de diseño web), y escucho mucho esto. Es una pregunta popular, pero no hay una respuesta simple. Todo depende de:

El objetivo con el prototipo. Esta es la gran pregunta, y no deberías comenzar a construir tu prototipo sin saberlo.
¿Es para responder una pregunta específica o para explorar un área temática más amplia?
¿Son importantes las interacciones a nivel micro (gestos, animaciones) o se trata más de comprender el flujo de una aplicación completa ?
¿El prototipo solo se mostrará a usted y a su equipo, o se mostrará a las partes interesadas externas o sujetos de prueba, en cuyo caso:
La experiencia del público objetivo de probar prototipos. Si son diseñadores profesionales de experiencia de usuario, tal vez puedas sobrevivir con un prototipo en papel o con estructuras simples. Si no lo son, probablemente desee un prototipo de más alta fidelidad. El uso de redacción e imágenes más finalizadas también es importante para los diseñadores que no son UX.
La plataforma prevista para el proyecto. Teléfonos, tabletas, escritorio? ¿Web o aplicación nativa? ¿Estás incluso en una etapa en la que puedes tomar esa decisión?
Tu experiencia y preferencias personales. Seleccione herramientas con las que se sienta cómodo y con las que pueda trabajar rápidamente.
Restricciones de tiempo y costos. ¿Tendrá tiempo para repetir? ¿Para construir múltiples prototipos?

Teniendo en cuenta todo lo anterior, siempre debe realizar un prototipo en el medio viable más rápido . El objetivo de la creación de prototipos es iterar rápidamente , es decir, ejecutar el ciclo Build-Measure-Learn tantas veces como sea posible:
“Creación es descubrimiento” , como dijo Bret Victor una vez. Simplemente no sabe lo que aprenderá antes de construir y probar su prototipo, por lo que cuanto más rápido pueda sacarlo, mejor. Su segunda iteración será infinitamente mejor que la primera.

Asi que. Llegando a las recomendaciones de herramientas reales. Aquí hay algunos escenarios típicos:

Resolver una pregunta específica de UX (no una aplicación completa), con usted / su equipo como actores principales: recomendaría lápiz y papel , Balsamiq , Keynote . Un procesador de textos como Google Docs o MS Word es una herramienta subestimada para prototipos con uso intensivo de texto (por ejemplo, una página de inicio de producto).
Creación rápida de prototipos de una aplicación completa para comprender el flujo, probando con usuarios reales . Aquí es donde brilla nuestra propia aplicación, Weld (herramienta de creación de prototipos).
Probar el flujo de una aplicación completa, cuando ya ha diseñado todas las pantallas de la aplicación: InVision App es el jugador dominante aquí, desafiado por Marvel y Flinto .
Diseñando micro interacciones (gestos, animaciones) en una sola pantalla, probando con usuarios reales: iría por Pixate , pero también Framer.js y las nuevas aplicaciones Mitya y Noodl podrían ser útiles.

Y se coloca en una cuadrícula para que quede más claro:
¡Espero que esto haya sido útil!

Desarrollo webDiseñoweb

Cómo crear una página web (blog de imágenes) y ganar dinero con ella

¿Por qué usas HTML?

Cómo obtener ideas frescas y únicas para crear sitios web y aplicaciones

Cómo transferir archivos del servidor xampp local a nuestro dominio

¿Cómo puedo eliminar el bloatware de Android?

¿Cuál es la mejor manera de dividir un proyecto de desarrollo web basado en Rails entre dos desarrolladores?

Sacar una idea de tu cabeza y llevarla al mercado no es un proceso simple. Hay muchos obstáculos que pueden interferir si los dejas. Pero, si sigue algunas reglas simples que le permitirán pasar de la idea a la estructura al prototipo y al mercado, puede minimizar estas dificultades y poner su idea en manos de usuarios reales mucho más rápidamente.

Hemos hablado mucho sobre la validación de ideas en el pasado reciente y esta es una parte esencial del proceso. En lugar de repasar el viejo terreno, aquí hay una lista de nuestras mejores publicaciones que lo llevarán desde la idea hasta el inicio del proceso de diseño:

Una vez que esté satisfecho de que está trabajando en una solución real a un problema real, puede comenzar a diseñar la solución. Si crees que este será un proceso muy largo, te equivocas. Debe ser un número muy intenso de etapas.

Wireframing

Wireframing es una forma de diseñar un servicio de sitio web a nivel estructural. Una estructura alámbrica se usa comúnmente para diseñar el contenido y la funcionalidad en una página que tiene en cuenta las necesidades y los viajes de los usuarios. Los wireframes se utilizan al principio del proceso de desarrollo para establecer la estructura básica de una página antes de agregar el diseño visual y el contenido. ExperienceUX

Tienes la solución en tu cabeza y, para empezar, sabes que vas a trabajar en un diseño basado en aplicaciones. Ahora, la primera lección es que siempre debes comenzar con el móvil. Mobile primero es un concepto que fue defendido por Luke Wroblewski. Existen argumentos a favor y en contra del argumento de los dispositivos móviles primero como concepto, pero tenemos que comenzar en alguna parte y, en mi opinión, la razón básica para utilizar dispositivos móviles es que va a poner su aplicación en manos de los usuarios y mejorará los comentarios que recibirás.

Entonces, vas a diseñar una aplicación para un dispositivo móvil. La segunda lección es ignorar las tendencias por completo. La primera etapa es esbozar la amplia superestructura de la aplicación: básicamente el esqueleto.

Esto se puede hacer muy fácilmente en papel y el papel es el mejor lugar para comenzar. Puede moverse rápidamente por las pantallas. Reorganícelos a medida que avanza. Moverse a través de numerosos borradores rápidamente.

Una vez que haya llegado al escenario donde esté satisfecho con el diseño básico de la estructura metálica, desea comenzar a colocarlo en la pantalla. Con Fluid UI, esto se puede lograr muy fácilmente y será aún más rápido que el marco de papel.

Una vez que haya diseñado las pantallas en un esquema básico, tendrá la primera idea real de cómo se verán. En esta etapa, es importante volver a su equipo, colegas, partes interesadas y obtener algunos comentarios. Ponga el alambre en su mano y muéstreles cómo se desplazarán las páginas, cómo pasarán de una página a la siguiente. La gran ventaja de esto es que los demás siempre verán cosas que echas de menos porque estás demasiado cerca del proyecto. Esa es la razón principal por la cual la retroalimentación y la investigación son esenciales y deberían ser una parte constante del proceso.

Prototipos

Con algunas herramientas no es posible crear tanto wireframes como prototipos y para muchas personas esto no es un problema. Sin embargo, poder pasar de la estructura al prototipo también tiene muchas ventajas. Tienes los wireframes en el editor, has puesto mucho trabajo en ellos y has recibido muchos comentarios que te ayudarán con el diseño posterior de la aplicación.

Ahora necesita pasar al prototipo. En esta etapa, pasará a una representación de alta fidelidad de la aplicación. Desea poder hacer dos cosas al final de esta etapa. Debe poder poner la aplicación en manos de las partes interesadas y ellos deben poder tener una idea muy clara de cómo funcionará la aplicación.

Pruebas de usuario

Las pruebas de usuario son un poco inapropiado. No estás ‘probando al usuario’. Estás probando la usabilidad de tu diseño. Si no toma nada más que ese punto de esta publicación, entonces habrá aprendido algo de valor.

Todos piensan que tienen una idea para una gran aplicación. Alguien podría incluso pensar que una aplicación donde puedes ver una pinta perfecta de Guinness sería solo el boleto. Pero, seamos honestos, cuántas personas van a sacar una aplicación solo para asegurarse de que el barman está tirando la pinta correctamente. No muchos, y de los que quisiera, estoy bastante seguro de que ninguno de ellos son bebedores de Guinness. He investigado mucho y estoy seguro de que mis resultados son correctos. por lo tanto, si su aplicación va a ser exitosa, tiene que atraer a una determinada base de usuarios y tiene que resolver algún problema para esa cohorte. Tiene que ser un problema real.

Ahora, encontrar la mejor pinta de Guinness a poca distancia es más probable que tenga éxito porque resuelve un problema que tendría un conjunto de usuarios.

De repente, una aplicación que no iba a ser de utilidad para nadie ahora es un recurso potencial para varias cohortes de usuarios.

Cinco usuarios encontrarán el 85% de los problemas de usabilidad.
Rolf Molich

Realmente no necesitas cientos de usuarios para llegar a esa conclusión. A veces, entre 3 y 5 usuarios pueden brindarle información muy poderosa sobre la utilidad de su solución. El punto más importante es que encuentre usuarios y realice investigaciones.

Si crees que estoy inventando esto, entonces solo tienes que echar un vistazo a la aplicación real desarrollada por Guinness para resolver este problema.