¿Qué herramientas de creación de prototipos?

Es importante para mí mantener mi creación de prototipos en al menos dos hilos, y tres si estoy tratando de entender las interacciones detalladas con la animación.

Hilo 1: Flujo, función, forma y datos

• Comenzando en papel (en realidad, generalmente una sesión de diseño de pizarra con otros). Concéntrese en el flujo de la pantalla, luego en las principales funciones y diseños potenciales de pantallas particularmente importantes. Intenta por lo menos dos ideas diferentes.
• Siguiente nivel de fidelidad en Balsamiq. Agregue detalles funcionales, ajuste el diseño, agregue datos de muestra concretos y significativos a la pantalla (en el contexto de un escenario demostrable).
• Cree un prototipo de flujo de trabajo encadenando un escenario paso a paso, ruta única con pantallas e interacciones específicas esperadas para pasar a la siguiente pantalla. Tiendo a usar PowerPoint, colocando todas las maquetas de pantalla en secuencia. Este prototipo le permite obtener comentarios tempranos con usuarios reales por recorridos pluralistas , que son muy efectivos para refinar conceptos, flujos de trabajo, requisitos funcionales, terminología, etc.
• Iterar temprano, a menudo y rápidamente.

Tema 2: programa visual y estilo

• Usando algunas de las maquetas clave del hilo 1, visualícelas (como compilaciones) en detalle a nivel de píxel usando Photoshop u otro mecanismo similar. Explore el color, la proporción, las metáforas visuales, la tipografía, etc. Genere al menos 3 ideas.
• Obtenga comentarios sobre estos independientemente de los prototipos de flujo de trabajo. Utilice pruebas de preferencia, pruebas AB, críticas, charettes , etc.
• Iterar y refinar.

Tema 3: interacción detallada y animación

• Centrarse en una única interacción detallada o secuencia de animación hackea un prototipo funcional en cualquier herramienta que funcione mejor para usted: HTML/CSS/JS, Flash, lenguajes de programación de nivel inferior, marcos/bibliotecas de componentes de UI, etc. Al menos dos interacciones alternativas .
• Ejecute una pequeña cantidad de pruebas cortas de usabilidad, incluida la recopilación de datos de temporización. Haz pruebas comparativas. Cuente las pulsaciones de teclas/clics del mouse/gestos.
• Iterar y refinar.

En resumen, construya tipos específicos de prototipos para propósitos específicos ... para responder preguntas específicas. Ningún tipo funciona para todas las situaciones. Mantenga las preocupaciones estéticas fuera del flujo de trabajo/ciclo de retroalimentación de funciones. Use métodos apropiados y efectivos para los diferentes tipos de preguntas. "No cruces las corrientes".

Descubrí que casi todas las mejoras fundamentales de diseño provienen del hilo 1 y del hilo 2, pero el hilo 3 es necesario si va más allá de los controles estándar o si su dominio es nuevo/complejo/específico (por ejemplo, interacciones gestuales, modelo multidimensional manipulación, controles personalizados para un nuevo y elegante sistema operativo, optimizando el rendimiento humano en alguna dimensión).

Lápiz es una buena herramienta para crear maquetas de UI. Está disponible como complemento de Firefox o como aplicación independiente .

Tiene una ventaja sobre algunas de las otras herramientas mencionadas porque es de código abierto y gratuito.

Hace algún tiempo leí un artículo muy interesante que se llamaba "Dibujar o no dibujar": debe echar un vistazo: pregunta de dibujo Siempre que se necesite creatividad, no debe limitar sus pensamientos con herramientas tu usas. Mi elección personal para limpiezas posteriores es una herramienta cercana al área que estoy manejando. Para HTML/CSS, generalmente comienzo con diseños simples y aumento los detalles paso a paso. Lo mismo podría resultar útil para otras áreas también. Creación de prototipos de menor a mayor detalle. Así que no tengo una herramienta en particular para recomendar ... depende.

Entonces no tengo una herramienta en particular para recomendar ... depende .

Personalmente uso Balsamiq para las primeras revisiones, y luego voy directamente a un prototipo HTML usando un marco CSS como Blueprint .

Interesante que Adobe Fireworks haya recibido poco amor en este sitio.

Entre otras cosas, he disfrutado

1. Construyendo en diferentes estados
2. Páginas maestras
3. Los objetos HTML, como enlaces e íconos, pueden recibir marcas que se exportarán (enlaces internos y externos, metadatos, todo eso)
4. Exporta diseños basados ​​en CSS que cumplen con los estándares con hojas de estilo reales
5. Integración nativa de Illustrator y Photoshop para logotipos, etc.

Me gusta Balsamiq por lanzar un IA a un cliente, luego Fireworks por un prototipo navegable una vez que un diseñador ha colaborado. El trabajo realizado en Fireworks se exporta fácilmente a HTML y CSS que se traducen fácilmente en un sitio estático completo o como páginas/temas de plantilla para un sitio dinámico.

Voy a decir que solo el papel es la mejor herramienta prototipo. Sí, es obvio, pero es mejor que comenzar con la electrónica.

• Paper le dice al cliente que esta es una idea, una de las muchas posibles.
• El papel no permite que el cliente quede atrapado en fuentes, colores, formas o imágenes. Hay una razón por la que balsamiq eligió los wireframes de estilo boceto.
• Las revisiones son rápidas
• Es fácil obtener su escritura a mano real y no les intimida de dibujar en ella.
• Puede escanearlo o enviarlo por fax si necesita que se vuelva electrónico.

Soy un gran fanático de los prototipos funcionales html después, pero el papel reduce la barrera para la lluvia de ideas y pruebas rápidas de interfaz de usuario en el pasillo

Es fácil guiar a alguien a través de un boceto en papel:

"Where do you click if that transaction was a mistake?"
"Great now what do you do to find out which kitten has the highest durability?"

Si no comienza con bocetos y obtiene alguna validación del usuario, está saltando el arma y solo se vuelve más costoso deshacer e iterar más adelante.

Prefiero hacer maquetas de IU web en HTML/CSS.

1. La creación de prototipos funcionales es una solución mucho mejor porque los usuarios obtienen una experiencia real en lugar de una experiencia no dimensional (mirando Photoshop).

2. Los prototipos funcionales no son trabajos descartables.

3. Es mucho más rápido iterar sobre un prototipo funcional durante un ciclo de retroalimentación

Yo uso Axure .

Aunque es bastante caro (casi $ 600 por licencia), ofrece una flexibilidad increíble y le permite personalizar casi todo.

Poder utilizar sus propios controles (o maquetas de los mismos), maestros, etc. es imprescindible al crear una aplicación en lugar de un sitio web.

El papel y el HTML son los mejores.

Bocetos rápidos en papel. Luego construya lo real en HTML. StaticMatic texto del enlace es excelente para la creación de prototipos.

En el pasado utilicé Axure, pero la estructura de alambre es una pérdida de tiempo.

También había votado por Axure. Nuestra oficina utiliza sus herramientas de colaboración para dividir las responsabilidades entre nuestros AI y diseñadores gráficos.

Si bien no es Omnigraffle, las opciones de estructura de alambre son más que adecuadas. El software tiene una gran funcionalidad de maestros, por lo que podemos aumentar la fidelidad de un prototipo con bastante rapidez.

Y como dijo Dan, es completamente personalizable y hace documentos de especificaciones profesionales.

r.

Adobe InDesign. Puede parecer un poco extraño, pero hay características que me gustan:

• Interfaz de estilo Adobe. Si ha trabajado con Photoshop u otros productos de Adobe, sería muy fácil cambiar a InDesign
• poderosas herramientas para trabajar con tipografía, tablas, estilos, cuadrículas, etc.
• de hecho, puede crear no solo una estructura metálica sino también un diseño gráfico
• puede exportar wireframes como PDF en los que se puede hacer clic

Estoy de acuerdo con algunas de las respuestas anteriores, pero me gustaría agregar información adicional y consejos. Casi comienzo cada proyecto con la pizarra, bolígrafos de diferentes colores y también algunos post-it. La forma más fácil de comunicar ideas y obtener comentarios rápidos. Dependiendo del tipo de proyecto, intento dibujar los diagramas de flujo principales con un programa llamado yEd . Es una forma simple de estructurar las ideas. Si tengo una Mac cerca, elegiría OmniGraffle (un programa excepcional para más que un diagrama de flujo).

Sigo haciendo prototipos en Balsamiq , Sketch flow y Illustrator para obtener diferentes tipos de prototipos de baja y alta fidelidad.

Con respecto a esta información, me pareció adecuado tener una rica caja de herramientas para elegir. Para mí es importante poder adoptar diferentes enfoques según el tipo de proyecto.

Secundo la moción de Daniel Bleisteiner: "Depende".

Para el 90% de los proyectos, considere mi voto para el papel. La justificación para el papel abunda en este hilo, por lo que no volveré a repetir.

El diseño nunca es el mismo entre proyectos, y ciertamente no entre clientes. (Hablo de diseño en el sentido más vago, es decir, diseño, desarrollo, creación de prototipos, estructura de alambre; seamos honestos, todos se están fusionando gradualmente entre sí).

Entonces, para el otro 10% de los proyectos, la herramienta de prototipos dependerá del proyecto. Si requiere colaboración a larga distancia, Axure puede ser el mejor. Si requiere trabajar con el equipo interno de un cliente que utiliza principalmente Adobe, Fireworks puede ser el mejor. Hay muchas herramientas Desafortunadamente, por definición, las herramientas no pueden adaptarse tan rápido como los problemas para los que están diseñadas para resolver; por lo tanto, muchos de estos productos parecen muy similares, pero no idénticos entre sí. Y depende de nosotros evaluar cuál es el mejor para el trabajo.

Pensamiento adicional: el iPad está comenzando a ayudar a difuminar las líneas entre la colaboración del cliente en persona frente al cliente en persona que te vigila por encima del hombro. Omnigraffle, SketchBook, TouchDraw, Draft y otras aplicaciones de iPad están allanando el camino para una mejor experiencia de colaboración. (Me refiero a la mejora como trabajar para lograr el objetivo final de que un cliente se sienta tan cómodo dibujando en un iPad como en papel, con la ventaja de que el cliente podría estar usando un prototipo funcional en lugar de una página estática. El objetivo final es solo mi opinión.)

Sigo estos pasos ...

1. Creación de prototipos. Yo uso Balsamiq Mockups porque es fácil. El objetivo de la creación de prototipos es descubrir el diseño básico de las cosas. Esta es la etapa en la que estás haciendo cambios drásticos. Afortunadamente, Balsamiq no pretende ser algo que no es y sigue siendo extremadamente fácil de usar. Para mí es más rápido usar Balsamiq que dibujarlo. Y viene con el beneficio de poder arrastrar elementos a través de la pantalla en lugar de borrarlos y volverlos a dibujar.

2. Finalice el diseño. Utilizo Photoshop y, a veces, un poco de Illustrator para esto, de modo que pueda perfeccionar los gráficos antes de escribir cualquier código.

Es más difícil hacer cambios drásticos en su diseño en Photoshop, ya que tendemos a dejarnos llevar por la perfección de píxeles. Y aún es más difícil una vez que está en su aplicación. Esta es la razón de mi progresión, y por qué empiezo con la herramienta más fácil posible ... Balsamiq.

Soy un bloc de dibujo/lápiz primero y Balsamiq - segundo tipo de chico. Luego, Photoshop para desarrollar los detalles hasta que haya suficiente para saltar a HTML y CSS.

Balsamiq. También es bueno para el software de escritorio, y es muy fácil de aprender.

También vale la pena echarle un vistazo gomockingbird que acaba de salir de la versión beta

La agencia interactiva de mi esposa ha tenido éxito con:

http://www.mockflow.com/

Rápido para comenzar y una cantidad razonable de controles integrados y pantallas para prototipos y estructuras alámbricas.

La pregunta menciona la necesidad de una herramienta de creación de prototipos, pero no cuán realista debe ser su prototipo. Para un prototipo de tipo de estructura alámbrica, estoy de acuerdo con la mayoría de los comentarios aquí de que el bolígrafo/papel, Balsamiq o incluso Visio son buenas herramientas. Sin embargo, cuando requiera un prototipo de aspecto más realista, estos no funcionarán y luego sugeriría que mire a personas como Axure o Adobe Fireworks/Catalyst (iRise tiene un precio demasiado alto) y aunque tiene sus problemas, optaría por Axure .

También uso Pencil, aunque tiene algunas desventajas:

• sin manejo de datos de tabla: si desea trazar una tabla, está perdido.
• sin WordWrap en cuadros de texto. Cuando trato de colocar algo de lorem ipsum, tengo que hacer el envoltorio yo mismo. Eso apesta.

sin embargo, me gusta mucho esta herramienta.

A veces uso esta herramienta http://www.hotgloo.com/

Dado que su pregunta era específicamente sobre la creación de prototipos, supongo que está haciendo todos los pasos que considere necesarios antes de la creación de prototipos, como dibujar, etc.

Si su producto se entregará a través de la Web, cree sus prototipos utilizando la Web (HTML, CSS, JS). Al final es más rápido, más barato y más preciso que cualquier otra cosa que pueda usar. Descubrí que herramientas como Axure están bien para cosas simples, pero luego requieren una curva de aprendizaje empinada para hacer algo moderadamente complejo. En ese momento, está gastando tiempo aprendiendo una herramienta patentada cuando podría estar aprendiendo estándares web que serán más beneficiosos para usted a largo plazo.

Si le preocupa que un cliente piense que está "hecho", puede omitir el diseño hasta el final, sin embargo, he descubierto que cuanto más "real" sea su prototipo, más fácilmente se evaluará.

Realmente depende de cuál sea el proyecto.

Si el sitio web que está creando prototipos tendrá solo unas pocas páginas con contenido estático, usar un editor de gráficos como Photoshop o Fireworks probablemente estará bien. El consejo para mantener los elementos de diseño fuera de la creación de prototipos "a toda costa" puede no ser apropiado aquí.

Sin embargo, en el otro extremo del espectro donde está creando una aplicación grande con muchos casos de uso, recomendaría algo más como la respuesta de Jim Jarrett. Agregaría que las aplicaciones a gran escala son (o al menos deberían ser) un proceso iterativo: creará un prototipo para la fase I y luego prototipará nuevamente para una versión de la fase II, etc. Cada una de estas fases de creación de prototipos puede requerir diferentes niveles de detalle . Puede terminar queriendo trabajar desde la construcción/prototipo de la fase actual, o puede ser el momento de volver a los primeros principios y comenzar desde cero.

Axure es una gran herramienta de enmarcado/creación de prototipos/especificación. Le permite concentrarse en lo que está creando y hace que cosas como anotaciones, notas e interacciones sean muy fáciles de especificar.

La ventaja es que cuando especifica interacciones, cuando genera prototipos a partir de sus estructuras alámbricas, esas interacciones se traducen en widgets de trabajo reales. (Axure genera prototipos HTML)

También puede tomar un diseño de pantalla (en JPEG, por ejemplo), importar la imagen, activar áreas de la imagen usando la herramienta "mapa de imagen" y ¡entonces efectivamente tiene un prototipo de mayor fidelidad!

Axure también le permite crear acciones basadas en variables (puede establecerlas o leerlas). También existe el concepto de obtener un widget para generar un evento, puede hacer que otro widget escuche el evento y luego ese widget puede responder de alguna manera.

Puedo seguir y seguir ... El lado negativo es el costo ~ $ 550, pero el ahorro de tiempo vale la pena. Su atención al cliente, por correo electrónico, es excelente; generalmente me responden en un par de horas ... a veces de inmediato.

Encontré Mockingbird bien para estructuras simples. No me hará abandonar la omnigrafía en cualquier momento, pero es bastante bueno para una herramienta basada en la web: http://gomockingbird.com/

Eche un vistazo a App Sketcher (actualmente en el candidato de lanzamiento) para ver si se ajusta a sus necesidades. Es una herramienta rápida de creación de prototipos HTML para crear prototipos de aplicaciones web interactivas y de estructura alámbrica. Utiliza un navegador WebKit incorporado como superficie de diseño donde puede agregar componentes HTML, componentes de la interfaz de usuario jQuery, widgets web (como Google Maps y el reproductor de YouTube) y diseñarlos con el tema jQuery y las propiedades CSS. También se pueden definir acciones simples. Los usuarios pueden ejecutar/probar el prototipo en su navegador predeterminado y exportar la fuente HTML/CSS/JavaScript una vez que estén satisfechos con el diseño. Esta herramienta está más orientada a la experiencia de Axure, pero hace hincapié en el "diseño en el navegador para ejecutar en el navegador", ya que garantiza que las maquetas/wireframes sean realizables en la fase de desarrollo con tecnologías web.

Soy el desarrollador de esta aplicación. Lamento mucho esta descarada autopromoción. Sin embargo, creo que puede ser una buena herramienta de creación de prototipos HTML y vale la pena echarle un vistazo.