La creación de prototipos, como concepto, ha existido desde antes de Internet. Típicamente, las personas que desarrollan un nuevo producto físico primero construirían la cosa, y se asegurarían de que funcionara como se esperaba. La primera versión sería patentada, tal vez, y se mostraría a los posibles inversores. Si el inventor tuviera acceso a sus propios medios de fabricación (si trabajaban en una compañía existente, por ejemplo), simplemente seguirían adelante y resolverían los errores hasta que tuvieran un modelo listo para la producción.
¿Recuerdas esos viejos discos de demostración? Ya sabes, los que vinieron con programas con funcionalidad limitada, o el primer nivel o dos en un juego? Los prototipos son muy parecidos a esos demos, solo que aún más simples.
Construyes un prototipo de un sitio web o aplicación para asegurarte de que el concepto funcionará según lo previsto
Su objetivo no es tanto que los clientes potenciales compren un producto, sino que lo ayuden a hacer uno mejor. Usted construye un prototipo de un sitio web o aplicación para asegurarse de que el concepto funcione como se esperaba. También lo usa para mostrarle a sus clientes o posibles inversores cómo se supone que debe funcionar.
Recientemente, hemos visto muchas aplicaciones orientadas a la creación de prototipos para la web y también para aplicaciones móviles. Ahora, se ha lanzado Adobe Experience Designer, que combina la funcionalidad de una "aplicación de diseño" específica para web y móvil con la de una aplicación de creación de prototipos. Dada la reputación de Adobe, y su participación en el mercado en el sector profesional, es lógico pensar que mucha gente que no ha hecho muchos prototipos en el pasado ahora puede dar ese paso.
Entonces, como la mayoría de las otras guías definitivas, esta es para principiantes. Es para personas que están comenzando a construir prototipos de forma regular, independientemente de su experiencia previa (o la falta de ella) en la industria del diseño.
En esta guía, hemos tratado de cubrir los principios básicos sobre todo. Después de eso, hay enlaces a guías con más información y, por supuesto, una gran lista larga de aplicaciones y herramientas con las que puede trabajar.
Ahora, y el diseñador que ha existido por un tiempo probablemente ya haya trabajado con wireframes y / o diseñado maquetas en algún editor de imágenes. ¿Estos no son prototipos?
Nop. No siempre, de todos modos.
El problema con los wireframes y las maquetas estáticas es que son ... bueno ... estáticos. Hay mucha información que simplemente no pueden transmitir sobre la funcionalidad de una cosa. Esto puede llevar a conceptos erróneos en la mente de los clientes, o incluso de sus desarrolladores, sobre cómo se supone que funciona. Por esta razón, los prototipos suelen ser interactivos de alguna manera.
Las excepciones más comunes son prototipos conceptuales y prototipos estáticos excepcionalmente bien documentados. Lo que hace la diferencia no es la interactividad en sí misma, sino el transporte de información sobre la funcionalidad prevista de un producto.
Dicho esto, los wireframes y las maquetas se usan a menudo para fabricar prototipos, por lo que nadie los abandona.
Siempre que necesites mostrar cómo se supone que algo funciona. Eso es.
El ejemplo más obvio es el de una aplicación web o móvil. Las aplicaciones tienden a tener un poco de funcionalidad que puede no verse o deducirse fácilmente de una maqueta. Sin embargo, incluso los sitios web basados en contenido bastante estáticos pueden requerir un prototipo.
Por un lado, he tenido clientes que miran maquetas de un sitio comercial simple y preguntan "De acuerdo, entonces si hacen clic en esas cosas en la parte superior, 'Sobre nosotros', 'Servicios' y demás, eso los lleva a otros ¿páginas? "o" Cuando hacen clic en enviar en el formulario de contacto, ¿recibo un correo electrónico? "
Incluso simples ... las tareas suelen estar llenas de incertidumbre ... los prototipos pueden ayudar a resolver algunas de las conjeturas
Incluso las tareas simples de exploración suelen estar llenas de incertidumbre para algunos usuarios y clientes potenciales, por lo que los prototipos pueden ayudar a eliminar algunas de las conjeturas del proceso de aprobación.
Además, siempre son útiles en las pruebas de usuario. Después de todo, si va a hacer alguna prueba de usuario, es mejor comenzar con una vista preliminar del proyecto. Lo último que desea es tener que hacer grandes cambios una vez que la mayor parte del trabajo ya se haya realizado.
Antes de comenzar la creación de prototipos, querrá determinar qué tipo querrá usar. Siempre puedes usar más de un tipo en cualquier proyecto dado; la mayoría de los diseñadores lo hacen, en algún momento.
El tipo de prototipo que elijas tendrá que ser el adecuado para ti, tu cliente, el proyecto e incluso la etapa específica del proyecto en el que te encuentres. Ahora, eso puede parecer complejo, pero en realidad no es tan malo.
Cada uno de estos están destinados a ser utilizados en diferentes etapas en la fase de diseño. El resto depende de tu preferencia y de lo bueno que sea tu cliente para comprender visuales abstractos.
Los clientes que tienen menos experiencia con los procesos de diseño modernos pueden esperar ver algo que se vea más "pulido" para que puedan decirle que haga que el logotipo sea más grande, mueva esa línea una pulgada a la izquierda y que su sitio no estará en latín , ¿podrías poner algo de inglés por favor?
Si tiene problemas con eso, prototipos más detallados y mucho café son su mejor opción. De lo contrario, puede usar algo un poco más vago, y centrarse en burlarse de la funcionalidad prevista.
Estos a menudo no se parecen en nada al producto final en forma o forma. Con prototipos conceptuales, los detalles y el diseño de la interfaz no importan. Las únicas cosas en las que estás trabajando son las interacciones y los procesos.
El objetivo de cualquier prototipo es mostrar cómo funciona algo o si funcionará. En ese sentido, esto es prototipos en su forma más pura. Literalmente se trata de la función, y la forma ni siquiera entra en juego.
Pueden verse casi como cualquier cosa, en esta etapa. Puede usar un diagrama de flujo, notas post-it, una presentación de PowerPoint, un video explicando el proceso con ilustraciones crudas basadas en íconos, o una grabación suya hablando en la cámara y moviendo los brazos violentamente. Cualquier cosa que consiga transmitir el punto lo hará.
Los prototipos conceptuales se usan generalmente en la etapa más temprana de cualquier proyecto. Su proyecto tal vez ni siquiera tenga un nombre. Es solo una idea para una aplicación o un sitio web, y dirá cosas como: "Sí, creo que debería funcionar de esta manera ..."
Los prototipos de baja fidelidad son donde comienza a incluir cosas como el diseño y el tamaño de la pantalla, y otras preocupaciones más tangibles. Por lo general, se fabrican rápidamente y se descartan más rápido.
Están destinados a proporcionar la forma más rápida posible de iterar sus ideas hasta que usted y / o su cliente estén contentos con los conceptos básicos. Entonces no te apegues. La mayoría de estos no durarán mucho, y eso es algo bueno.
Como se mencionó anteriormente, el término "prototipos de baja fidelidad" a menudo es intercambiable con "wireframes". De hecho, esta etapa a menudo se lleva a cabo en papel.
Cuando se hace en una aplicación, es recomendable usar una que tenga funciones básicas de creación de prototipos, como vincular a otras pantallas, anotaciones, etc. Las aplicaciones de armado de cables tienen la ventaja de permitir una colaboración más sencilla a través de Internet, pero a menudo son un poco más lentas. utilizar.
Estos también se usan al comienzo de un proyecto, pero es probable que ya tenga un modelo de negocio y una idea para un nombre. Es hora de ordenar las innumerables ideas que flotan alrededor de su cabeza, e iterar hasta que tenga algo que seguramente funcionará.
A veces, un prototipo de baja fidelidad simplemente no logrará transmitir el mensaje lo suficientemente bien, y una alta fidelidad es demasiado trabajo por el momento. Tal vez no haya refinado completamente la guía de estilo o aún no se hayan hecho todos sus recursos gráficos.
En cualquier caso, este es el tipo de prototipo que puede usar desde el principio hasta la mitad de la fase de diseño. A menudo se hacen con aplicaciones de creación de prototipos, que hacen un uso intensivo de la interacción simulada. También se pueden construir con HTML y CSS, generalmente con la ayuda de un marco CSS.
Sí, Bootstrap y Foundation son probablemente dos de las herramientas de creación de prototipos más grandes que existen en este momento.
Deberías usar imágenes de marca para estos si lo tienes, pero las imágenes de archivo funcionarán. Los elementos de la IU de stock se usan generalmente para construir la interfaz simulada más rápido. Muchas aplicaciones de creación de prototipos vienen con bibliotecas de estos elementos para agilizar su trabajo.
Este tipo de prototipos son geniales para los pensadores más literales que necesitan ver una aproximación aproximada de cómo se verá y cómo funcionará. Es más fácil para ellos ignorar un encabezado que "no está terminado todavía", que una forma de aspecto incompleto que no se parece en nada a un encabezado de sitio web como lo conocen.
Para estos clientes, es posible que desee estructurar rápidamente sus ideas y nunca mostrarlas al cliente. Luego haga un prototipo de fidelidad media que les facilite ver hacia dónde se dirigen.
Bueno, estamos aquí. Y así es tu proyecto. Tienes tus maquetas para cada pantalla, y todo se ve genial. Es hora de mostrarle a la gente cómo va a funcionar esto, en todo su esplendor, cuando alguien finalmente lo integre con el código de back-end.
Los prototipos de alta fidelidad generalmente se usan para obtener una aprobación final del diseño del cliente. Pero no puedes simplemente enviarles los PSD. Esto tiene que ser interactivo.
Esto generalmente se logra de una de dos maneras. Algunos usan HTML y CSS estáticos para juntar los elementos visuales de una manera semi interactiva. Otros usan aplicaciones que importan imágenes, o incluso archivos PSD sin procesar, y agregan características pseudo interactivas para imitar la funcionalidad final de la aplicación.
Dependiendo de la aplicación, puedes incluso probar estos prototipos en la web (o en un dispositivo móvil, si has estado trabajando en una aplicación).
Ahora que hemos revisado los principales tipos de prototipos que puede hacer, es hora de cubrir las herramientas que se usan para fabricarlos. Mencioné la mayoría de estos en la sección anterior, y su uso básico; pero me gustaría entrar en un poco más de detalle.
Una vez más, el método que elija dependerá de con qué usted y el cliente se sientan cómodos.
A menudo se hacen para vender una idea antes de que se haya realizado un trabajo concreto. Por lo tanto, generalmente están dirigidos a posibles inversores. Se pueden usar también para clientes; pero a menudo hay formas más eficientes de comunicarse con un cliente. Su experiencia puede ser diferente.
El video y los prototipos basados en presentaciones que se hacen para los lanzamientos de ventas generalmente siguen una fórmula de estilo comercial:
Algunos de estos prototipos solo usan iconos, texto e ilustraciones. Otros tienen animación; y aún otros usan acciones en vivo para transmitir el mensaje. Y eso es, bueno ... el punto. Mientras vendas tu idea, lo has hecho bien.
Aquí hay un ejemplo impresionante que mezcla prototipos de video con prototipos de papel.
Los wireframes se pueden hacer en papel o en aplicaciones. Casi siempre se consideran prototipos de baja fidelidad, aunque se pueden actualizar a fidelidad media si les dedica suficiente tiempo. Sin embargo, rara vez vale la pena el esfuerzo.
Por lo general, los wireframes están diseñados para ser dibujados y descartados rápidamente. Esta es una de las cosas que hace que dibujarlos en papel sea tan atractivo. Las aplicaciones pueden ser mucho más precisas, y puede editar fácilmente wireframes existentes; pero nada supera la velocidad de un boceto que nadie debería ver, salvo usted ... nunca.
Sin embargo, como se mencionó anteriormente, los wireframes basados en aplicaciones tienen la ventaja de imitar más fácilmente la funcionalidad de una interfaz. Al tocar en un marco de alambre de papel solo obtendrá un agradable sonido de thunk-thunk-thunk.
Eso puede ser divertido, pero puede no transmitir su significado.
Puede optar por utilizar ambos: papel para definir los conceptos más básicos y una aplicación para desarrollarlo y compartirlo fácilmente.
Estos difieren de los wireframes en que son mucho más que dibujos. En este tipo de prototipo, el papel se usa para hacer un modelo físico de la interfaz, aunque todavía plano. Puedes ver uno de estos en el video de arriba.
Los elementos de interfaz generalmente se dibujan, recortan, a veces se copian para hacer extras, y luego se ensamblan en otra hoja de papel. Esto les da la ventaja de la flexibilidad. Donde puede tirar una hoja entera de papel con una estructura de alambre, puede volver a organizar los elementos de un modelo de papel hasta que esté satisfecho. ¿Tienes un elemento que tiene el tamaño incorrecto, después de que hayas arreglado las cosas un par de veces? Solo corta una nueva versión.
También tienden a sentirse un poco más "real" que un marco de alambre. Aunque no sucederá nada interesante, un cliente puede tocar un modelo en papel. Ellos pueden sentirlo. Esa sensación táctil a veces puede explicar más a un cliente que cualquier cosa que puedas mostrarles.
Todos necesitan contacto físico para lograr una mejor comprensión de cualquier objeto. La mitad del diseño de UX se trata de recrear la sensación de interacción física con una interfaz digital.
Estos tienen mucho en común con los prototipos de papel. Los prototipos hechos con una aplicación como Invision, o una de las muchas otras opciones disponibles (consulte la lista a continuación), generalmente están hechos de elementos de interfaz prediseñados y luego se combinan para imitar el producto final.
La diferencia es, por supuesto, que todo se hace en la pantalla. Ah, y puedes hacerlo con los gráficos y la marca finales, haciendo que el prototipo luzca exactamente como el producto terminado. Entonces, como mencioné anteriormente, algunas aplicaciones pueden demo el producto en el navegador y en dispositivos móviles.
Esto vuelve a poner en juego la sensación táctil y quieres esto. Si le puedes dar a tus clientes ese sentimiento, y les gusta, básicamente has obtenido su aprobación final.
Por supuesto, si la interacción es lo que quieres, entonces construir prototipos de interfaz con código es una buena forma de obtenerlo. Ahora, puede elegir prototipos basados en código por una de varias razones:
Los prototipos en el navegador pueden ser un poco más lentos, especialmente si aún se están realizando revisiones importantes. No lo recomendaría para las primeras etapas de un proyecto, por lo que es mejor para prototipos de fidelidad media a alta.
Aún así, es una de las mejores formas de mostrar un proyecto casi terminado, si ya te gusta trabajar con HTML y CSS.
Prototipos con marcos
Cabe señalar que el uso de un marco para construir prototipos puede acelerar la creación de prototipos basados en código considerablemente. Como beneficio adicional, si utiliza el marco que se pretende usar para el producto final, hay menos codificación que hacer en general.
Como nota al margen, algunas personas han creado editores de páginas web arrastrando y soltando basadas en marcos más populares, como Oreja y Fundación . Usando estos, una vez podría concebiblemente crear todo, desde los prototipos de baja fidelidad hasta el producto final con código.
Sin embargo, algunas personas simplemente los usan para construir prototipos rápidamente y luego usan un código personalizado para el proyecto final. Funciona de cualquier manera.
Ahora que hemos cubierto todos los aspectos básicos, es hora de entrar realmente en detalles. Como con casi todo lo demás en el diseño y en la vida, no hay una sola manera correcta de construir un prototipo. Solo hay la manera que funciona para ti. Dicho esto, los procesos de diseño exitosos tienden a tener algunas cosas en común.
Aquí hay algunas guías diferentes para prototipos que se enfocan en diferentes métodos y fidelidades, solo para comenzar. Toma de ellos lo que funciona para ti, ignora lo que no funciona.
(No incluiremos tutoriales específicos de la aplicación porque simplemente hay demasiados).
Esta guía de Smashing Magazine se enfoca en una metodología para construir prototipos rápidamente, e iterar a menudo.
Esto es un más artículo personal por Nick Pettit en el blog Treehouse que describe su propio enfoque para la creación de prototipos.
Aquí está un tercer artículo en prototipado rápido. Parece ser popular. Este está aquí en Webdesigner Depot, y describe algunos consejos y dificultades inherentes al proceso.
Otro artículo de Smashing Magazine , este entra en mayor detalle sobre la creación de prototipos de baja fidelidad.
En este en profundidad, y francamente fascinante artículo la agencia Newfangled describe su proceso en profundidad. Gira en torno a la creación de prototipos de pantallas grises basadas en navegador, y constituyen un caso convincente para probarlo.
Otro aquí en WDD , este artículo trata de asegurarse de que su prototipo tenga sentido. Si solo hace su prueba de usabilidad después de que haya completado el proyecto final, entonces probablemente lo esté haciendo mal.
Tendrás que ceder parte de tu información personal (o simplemente mentir) para obtener este ebook , pero bueno, ¡no están pidiendo dinero! incluye más información sobre métodos populares de creación de prototipos, tutoriales basados en aplicaciones y las mejores prácticas de grandes compañías como Google, Apple, Zurb y más.
Ahora, está hecho por las personas detrás de UXPin, una aplicación de creación de prototipos, por lo que pueden ser un poco parcial sobre qué aplicación debe usar. Aún así, tiene mucha información buena.
De acuerdo, entonces tienes la teoría. Es hora de empezar a construir prototipos. Suponiendo que no va a seguir con los modelos de papel o el código, usará una aplicación en algún momento.
Las buenas noticias: hay muchas aplicaciones geniales para elegir. Las malas noticias: hay muchas aplicaciones geniales para elegir.
Una vez más, todo se reducirá a tu forma de trabajar. ¿Necesita la capacidad de probar aplicaciones móviles? ¿Necesita sincronizar sus archivos con Google Drive, Dropbox u otro servicio? ¿Qué hay de la integración de Github? Bajo-fi, medio o alto-fi? Scripting avanzado?
Las aplicaciones enumeradas a continuación incluirán algunas o todas esas opciones. Enumeraré las características más relevantes para cada una de ellas para darte una idea de dónde buscar.
Cabe señalar que muchos de estos se conocen principalmente como herramientas de enmarcado de cables. Es común que el software wireframing integre las características necesarias para los prototipos interactivos. Su kilometraje con estas aplicaciones puede variar.
Esta es la oferta más nueva en el mercado en este momento, y está a punto de ofrecer una competencia seria a un mercado algo saturado. No es solo una aplicación de enmarcado de alambre o creación de prototipos; es una aplicación de diseño. Es como Bosquejo , o los ahora muertos Fuegos artificiales , pero lleva las cosas un paso más allá al permitirle hacer prototipos de todo lo que acaba de diseñar.
Actualmente es solo para Mac, y en la etapa de vista previa, pero se debe entregar una versión de Windows antes de fin de año.
La versión preliminar es gratuita, una vez que se envía la versión final, formará parte del plan de suscripción Creative Cloud de Adobe.
Microsoft PowerPoint , Keynote de Apple , LibreOffice Impress y Diapositivas de Google todos pueden ser utilizados para hacer prototipos. En su mayoría, estos prototipos serían de la variedad conceptual. Sin embargo, puedes imitar una cierta cantidad de interactividad simplemente vinculando diapositivas.
Podría funcionar igual de bien para crear prototipos de sitios basados en contenido, y es probable que ya esté utilizando al menos uno de estos programas. Si no, Impress and Slides son gratuitos.
Invision es otro de los "grandes nombres", con más prototipos de alta fidelidad. Hace hincapié en el control de versiones y se enorgullece de su colaboración en tiempo real y sus funciones de retroalimentación. Al igual que la aplicación Marvel, también tiene animación, incrustación de prototipos, demostraciones en el dispositivo y más.
Además, recientemente compraron Silver Flows, una herramienta que integra la funcionalidad de creación de prototipos con Sketch. Tienen la intención de usarlo para integrar Sketch con su software en línea.
Hay un plan gratuito, pero solo puedes crear un solo prototipo. Después de eso, puede comenzar en $ 15USD por mes.
Justinmind parece orientarse deliberadamente hacia la creación de prototipos de aplicaciones de alta fidelidad. El sitio también menciona la creación de prototipos de sitios web receptivos. También hay demostraciones en la aplicación.
El precio actualmente comienza en $ 19USD por usuario, por mes, si paga anualmente.
Aplicación Marvel es una gran aplicación (uno de los "grandes nombres" en creación de prototipos) con un plan gratuito y precios moderados para todas las actualizaciones. Las características notables incluyen: soporte para Photoshop y Sketch, sincronización con Drive y Dropbox, incrustación de prototipos en páginas web) y características que convierten sus prototipos en presentaciones animadas.
Esta es sobre prototipos de alta fidelidad con seguridad.
Axure es un tanto extraño con las funciones para prototipos de alta fidelidad y baja fidelidad. es aún más extraño, porque es una aplicación de escritorio con un precio único. Está diseñado para usuarios empresariales y grandes equipos, con funciones para escribir su propia documentación, gestión de proyectos y más.
Las ediciones estándar tienen un costo de $ 289USD por licencia.
HotGloo se trata de los marcos de cables y prototipos de fidelidad baja a media. Comenzó como una aplicación principalmente de wireframing, principalmente, pero la funcionalidad para prototipos más avanzados está ahí.
Mientras que otras aplicaciones se centran en crear prototipos de aplicaciones, HotGloo comenzó con diseñadores web. Entonces, puedes hacer cualquiera de los dos, en serio.
Los planes comienzan en $ 14USD por mes, y ese plan puede incluir hasta 10 personas colaborando.
Annnnnd volvemos al prototipo de alta fidelidad con Proto.io . Tiene interacciones complejas, animación, exportación, impresión, incrustación y demostraciones de dispositivos, todo integrado. Los precios comienzan en $ 24USD por mes, pero hay una prueba gratuita de 15 días si quieres darle un giro.
Solidificar es traído a nosotros por Zurb, la misma compañía que hace el marco de la Fundación. Está diseñado para manejar (y obtener comentarios) todo, desde bocetos hasta prototipos y maquetas de alta fidelidad.
En lugar de centrarse en la animación y otras herramientas de presentación, Solidify ofrece una gran cantidad de funciones de prueba de usuario. Puede ejecutar pruebas en persona o de forma remota y compartir los resultados con su equipo.
POPULAR se distingue de otras aplicaciones al ayudarlo a hacer un híbrido de bocetos con estructura de alambre y prototipos digitales. Empieza por tomar fotografías de sus bocetos con un iPhone, teléfono Android o teléfono con Windows, y convertir esos bocetos en un prototipo interactivo.
Si realiza la mayor parte de su trabajo en papel, podría ser una excelente forma de compartir los resultados. El servicio es gratuito para dos proyectos, y luego los planes comienzan en $ 10USD por mes.
Flairbuilder es otra aplicación de escritorio, aunque tiene un visor en línea para proyectos. Parece orientado hacia wireframes y prototipos de fidelidad media. Tiene funciones que le permiten agregar interacción, puede hacer demostraciones en el dispositivo y pone un énfasis especial en el diseño basado en cuadrículas.
Tiene un precio de $ 99USD por única vez. Eso es empinado, seguro, pero mucho más barato que Axure.
Flinto en realidad tiene dos versiones: hay una aplicación Mac y una versión Lite basada en la web. ¿La diferencia? La versión de Mac trae animaciones, funciones e interacciones más complejas a la mesa. También le permite importar sus activos desde Sketch, lo que la versión web no puede hacer.
Cuesta $ 99USD como una compra única. Curiosamente, la versión Lite (que cuesta 20USD por mes) incluye una licencia para la versión de escritorio, que le ofrece lo mejor de ambos mundos.
UXPin es una aplicación de creación de prototipos de mediana a alta fidelidad con todas las características que esperábamos. Al igual que algunos de los otros, también cuenta con colaboración en tiempo real, funciones de prueba de usabilidad integradas y administración de proyectos.
A diferencia de otras aplicaciones, UXPin pretende ser una tienda de diseño de ventanilla única. Al igual que en, puede omitir Photoshop, Sketch o what-have-you, y convertir sus wire-frames en maquetas. Esto es ambicioso, por decir lo menos, pero si funciona como se prometió, puedo ver que es útil para muchos diseñadores.
El precio comienza en $ 19UD por mes, por usuario.