Todo lo que siempre quiso saber sobre la creación de prototipos (pero no se atrevió a preguntar)

Los prototipos son mi marco para aprender nuevas herramientas, plataformas y técnicas. Un prototipo funciona como prueba contundente de que una idea funcionará o no. Es central en todo mi proceso creativo y es el medio que utilizo para relacionarme con las personas y empresas con las que colaboro.

Estoy entusiasmado con los prototipos porque creo que pueden hacer maravillas , pero también creo que no reciben lo debido. La creación de prototipos generalmente no se incorpora en absoluto a los cronogramas del proyecto o, si lo está, generalmente como una entrega tangencial a un proyecto más grande. ¡Puede ser más si quieres que lo sea!

Quiero convencerlo de que incorpore la creación de prototipos más profundamente en su flujo de trabajo. Esta forma de abordar los proyectos podría cambiar la forma en que colaboras, aprendes y creces como persona creativa. Este es el trato: intentaré obtener una buena definición en el papel y luego profundizaré en cómo puede hacer que la creación de prototipos sea tan importante para su práctica como lo es para la mía . Y para endulzar la olla, proporcionaré algunos prototipos que creé para un juego que hice, Melody Jams, que Apple presentó en 130 países y fue la aplicación para niños número uno en la tienda por un breve tiempo.

¿Qué es un prototipo?

La definición clásica de un prototipo es que es una demostración a escala de una cosa a gran escala que desea hacer. Un prototipo puede construirse o diseñarse parcialmente para mostrar una característica particular de un sistema más grande. Esta es una definición bastante buena, pero me gusta pensar en los prototipos como algo aún más amplio. ¿Mi definición de un prototipo? Es un artefacto tangible que explora una idea .

Podría ser tan simple como algunos bocetos toscos dibujados en papel. Tal vez esté puramente diseñado, como un tutorial animado de cómo funciona una interfaz en After Effects. Tal vez sea una demostración aproximada lanzada en Codepen. O podría ser algo mucho más alto en fidelidad. Cuando alguien ve un prototipo, no debe haber ninguna ambigüedad en su respuesta. En otras palabras, si la persona preguntara: "¿Qué pasaría si la aplicación fuera azul?", entonces eso no es un prototipo. Si muestra cómo se vería la aplicación si fuera azul, entonces lo es.

También existen diferentes tipos de prototipos, cada uno con un propósito diferente: interno, externo y público .

prototipo interno

Un prototipo interno no transmite necesariamente un valor inmediato a nadie fuera de mí o de mi equipo. Puede ser tan duro y rápido como yo quiera hacerlo. En el mundo de los sitios web, podría crear un componente simple utilizando CSS, HTML y JavaScript estándar, React, Angular o Vue, solo para tener una idea de cómo funciona y sopesar los pros y los contras. Estos tipos de prototipos tienden a aparecer muy temprano en mi proceso; de hecho, el primer día que comienza un proyecto. Con estos prototipos, no necesito tener miedo de que alguien no lo "entienda" o que cause más daño que bien. Puedo optar por mostrar prototipos internos a un cliente o parte interesada para reforzar el valor del proceso de creación de prototipos a mi discreción, pero ese no es el punto todavía: en este momento quiero mostrar ideas rápido, rápido, rápido.

prototipo externo

Un prototipo externo justifica la dirección en la que intenta ir, para mostrar el progreso o demostrar cómo funciona algo. Cuando un cliente necesita una herramienta de administración, puedo abrir un blog rápido en Craft, WordPress y Contentful (¡sí, los tres!) para darles una idea de cómo funciona cada herramienta, para que puedan tomar una decisión más informada sobre lo que es mejor para ellos. Estos prototipos son excelentes en las etapas intermedias y posteriores de un proyecto. Puedo recordar un proyecto en el que un cliente estaba considerando un cambio para incluir la API de un nuevo proveedor de servicios. La elaboración de un prototipo demostró al cliente lo que el proveedor podía hacer, la rapidez con la que podíamos integrarlo y cuál sería el impacto en el resto del proyecto.

prototipo público

Un prototipo público está disponible en el resto del mundo. Básicamente, se trata de enviar el proceso de diseño real a la naturaleza, aprender lo que hacen los usuarios e iterar desde allí. Podría ser un producto piloto completo o algo accesible para un pequeño subconjunto de usuarios. Es el tipo de prototipo más refinado y se acerca más a la definición tradicional a la que me referí anteriormente. Tiende a encajar en un proyecto más grande como parte de una fase de prueba de alguna naturaleza.

¿Son los prototipos rápidos buenos prototipos?

La respuesta corta es sí. Prototipar rápidamente y lo antes posible en un proyecto. Para darle una idea de por qué, intentemos un ejercicio.

Imagina en tu mente cómo se ve una silla. ¿Tienes una buena idea? ¿Era esta silla?

Probablemente no, ¿verdad? Puede que hayas estado pensando en una silla de exterior, un sillón, una silla de oficina o un taburete. ¡Es posible que ni siquiera hayas estado pensando en una silla fotorrealista! Ahora que tiene una imagen de esta silla, no hay ambigüedad. Esta es la silla de la que hablo y, de ahora en adelante, todos lo sabemos. Ahora tenemos un marco común de referencia.

Cuando su cliente dice: "Necesito que mi sitio web se sienta moderno", ¿cómo sabe lo que eso significa? Sin un artefacto tangible, como un moodboard, todos tendrán una definición diferente de "moderno" en mente, al igual que con la silla de arriba. El problema no es específico del diseño. Se trata de la forma en que funciona un flujo de inicio de sesión o de elegir entre entornos de alojamiento. Hacer cosas rápidamente fuerza conversaciones y reacciones. Todas las cosas nebulosas se resuelven más rápido.

Es importante destacar que el prototipo no tiene que resolver el problema que espera que resuelva . El simple hecho de crearlo y compartirlo a veces desbloqueará ideas, inspiración, desafíos o inquietudes que las personas no conocían. Cuanto más rápido y con más frecuencia cree prototipos, antes aparecerán todas esas cosas buenas.

Esta es la clave. La creación de prototipos desbloquea su capacidad de experimentar, fallar, aprender y crecer en una caja de arena. Al mismo tiempo, te estás mejorando a ti mismo y al producto en el que estás trabajando.

¿Quién debe hacer prototipos?

¡Todo el mundo! La creación de prototipos es una oportunidad para derribar muros entre disciplinas. Los diseñadores deben crear prototipos para que puedan aprender las limitaciones, complejidades y posibilidades del proyecto. Los codificadores pueden crear prototipos para probar la viabilidad, por supuesto, pero también para involucrarse más en el proceso creativo. Gerentes de proyecto, productores, redactores, cualquier persona que tenga una idea puede participar.

Nuevamente, la creación de prototipos no se trata necesariamente de codificar algo loco, ¡o incluso codificar en absoluto! Se trata de generar y probar ideas con cosas reales para jugar y explorar.

Debido a que la creación de prototipos puede ser tan simple o tan compleja como desee, obtendrá mucho valor al adoptarla como parte de su práctica. Repasemos algunos de los beneficios.

Rasca un picor creativo

A veces solo quieres intentar construir algo que nunca has visto antes, o emular algo que crees que es genial. Podría ser una idea descabellada o la próxima tendencia de la interfaz de usuario, ¿quién sabe? Como mínimo, descubrir cómo funcionan las cosas es una de las partes más satisfactorias de ser un diseñador, y la creación de prototipos proporciona un terreno fértil.

Agrega espacio para la valentía y las ideas radicales

Es difícil tratar simultáneamente de enviar algo que los usuarios entiendan y sean creativos. Incluso si inicia un proyecto con la "semana de creación de prototipos", esa es una semana en la que el cielo es el límite.

Crece la experiencia en la materia

Todos los talleres de desarrollo que conozco parecen tener una gran experiencia en una plataforma y secretamente desean trabajar más allá (estoy seguro de que esto es lo mismo para los diseñadores). ¿Estás construyendo todo en PHP y quieres entrar en Rails? Cree algunos prototipos a medida que inicia un proyecto, incluso si son irrelevantes para el objetivo comercial.

Mitiga el riesgo

Hacer algo que nunca has hecho antes da miedo. Averiguarlo de manera aproximada y rápida elimina las barreras psicológicas. De repente, lo imposible toma solo uno o dos días para hacer.

Construye un catálogo de ideas

A medida que su biblioteca de prototipos crece de un proyecto a otro, las ideas se revisan. A veces, la basura de un proyecto se convierte en un tesoro para el siguiente.

empodera a todos

Cuando recién comienza a entender las cosas, los títulos, los años de experiencia y las habilidades no deberían importar. Las buenas ideas pueden provenir de cualquier persona, pero eso es difícil de hacer cuando el creativo senior fulano viene de arriba para dirigir el pensamiento. Comenzar con un proceso de creación puro derrite los títulos y genera buenas ideas desde abajo.

Personaliza su proceso

He trabajado con una serie de diseñadores y agencias, y una cosa que les sorprende constantemente es la rapidez con la que empiezo a trabajar. No espero que se completen los requisitos, que se apruebe la dirección de arte o cualquier otra cosa. Al ponerme en marcha, puedo hacer avanzar el proyecto mucho más rápido.

Cómo empezar

La forma incorrecta de crear un prototipo es preocuparse de que esté creando un prototipo de manera incorrecta. Como dijo Bruce Lee: “Esfuérzate por no esforzarte”. Con eso en mente, aquí hay algunas pautas para ayudarlo a fomentar una práctica de creación rápida de prototipos.

Escribir enunciados de problemas

Dado lo que está tratando de aprender o resolver, divídalo en unidades atómicas y trate a cada uno de ellos como prototipos distintos. "¿Cómo cargo un mapa en iOS?" "¿Cómo coloco el mapa en una ubicación en particular?" "¿Cómo dibujo una forma en el mapa?" "¿Cómo coloco un pin en el mapa?" Cuatro declaraciones, cuatro prototipos, cuatro cosas aprendidas rápidamente.

Comience con algo que sepa hacer

Al igual que estirar antes de hacer ejercicio, no puede entrar en ritmo comenzando a toda velocidad. Si es un codificador que está creando prototipos de un sitio web, tal vez quiera comenzar creando su propio modelo: un archivo HTML estático, una configuración de Gulp, ese tipo de cosas. Esto hará que fluya su creatividad, de modo que cuando esté en un territorio desconocido, su mojo ya esté funcionando.

Construir feo

Use Comics Sans MS y verde lima brillante para sus fuentes. No nombre sus capas. Rompe todas las reglas. Ahora no es el momento para la perfección de píxeles; es el momento de poner las ideas en papel.

Mantenga los prototipos iniciales en 60 minutos como máximo

La creación de prototipos y la complejidad son enemigos mortales. Cuando lo haces bien, deberías poder producir al menos cuatro prototipos al final de tu primer día en el proyecto.

Prioriza por sentimiento, no por urgencia

¿Qué te apetece hacer hoy? ¿No tiene nada que ver con el proyecto? No luches contra eso. Hazlo. ¿Quién sabe? ¡Tal vez tiene un valor aún por descubrir!

Tenedor

Nunca sobrescriba un prototipo. En su lugar, haga una copia e itere desde allí. De esa manera, sus prototipos siempre serán lo más simples posibles, se pueden bifurcar en diferentes direcciones y será fácil aprender de ellos.

Sobrecompartir

¡Muéstrales a todos lo que estás haciendo! ¡Estar orgulloso de ello! La energía positiva que genere en torno a la práctica alimentará todo el ciclo de vida del proyecto. Este paso por sí solo puede mejorar dramáticamente la cultura de un proyecto.

Documente lo que está creando prototipos y los resultados

Esto podría ser tan simple como un archivo README en un directorio o un mensaje en Slack. Siempre regresa para aprender de lo que hiciste.

Escriba sus miedos a medida que avanza y conviértalos en enunciados de problemas

Entonces, ¿acaba de enviar su primer sitio web a Heroku, pero le preocupa cómo configurar un certificado SSL? No es un problema. Póngalo en cola para crear prototipos más tarde.

Cómo presupuestar esto en su proyecto

Aquí está la cosa: no lo haces. Esto no es una especie de venta adicional. Esta es la forma en que lo hago. Este artículo tiene la palabra "proceso" en el título por una razón: no se trata solo de cómo crear un prototipo. Es un principio rector sobre cómo construir cosas.

Comenzaría a crear prototipos el día que comience un proyecto. No se detendría hasta que no quede nada para crear prototipos. Un prototipo no es lo mismo que su código principal o archivos de diseño. Al principio, sus prototipos deberían ser demasiado toscos para estar listos para la producción. Más adelante, si parece que tiene sentido encontrar una manera de hacer la transición, está bien. Es una decisión proyecto por proyecto. La creación de prototipos es siempre una constante. Cuando está configurado de esa manera, no existe un prototipo fallido o un error.

Cuando hablo con un cliente potencial, le explico que este proceso tiende a generar muchos más resultados mucho más rápido de lo que esperaría de mis competidores (léase: usted). Ese resultado podría ayudar a definir una API o probar la viabilidad técnica o verificar una tarea aterradora. Donde es particularmente impactante es con los diseñadores y los equipos de diseño internos: les encanta trabajar de esta manera porque estoy muy rápidamente en la maleza con ellos, resolviendo las cosas. Produzco trabajos de mayor calidad, más personalizados y menos propensos a errores. Debido a que todos se acostumbran a ver un trabajo duro, no hay riesgo de que un prototipo que falle alarme a un cliente; algunas cosas que no funcionan son solo una parte esperada del proceso.

También me posiciona bien a largo plazo, porque soy capaz de aprender nuevas tecnologías muy rápidamente. Mis clientes saben que pueden ponerse en contacto conmigo para una instalación, un proyecto de computación física, una aplicación o un sitio web de cualquier escala, porque saben que el enfoque garantiza resultados exitosos.

Para mí, esto no se trata de maximizar las ganancias. Se trata de ganarme la vida haciendo lo que quiero hacer. Nunca me propuse ser bueno en sitios web o aplicaciones; de hecho, ¡esas cosas no existían cuando comencé! Me propuse aprender cosas geniales e interesantes con el código. Quiero que mi carrera sea larga, satisfactoria, emocionante y constantemente llena de cosas nuevas para aprender. Un proceso basado en prototipos es perfecto para eso.

Herramientas

En estos días, parece que no se puede decir la palabra "prototipo" sin pensar en InVision: es como el Kleenex de la creación de prototipos. En caso de que no haya usado InVision antes, es una excelente herramienta para que los diseñadores hagan clics en los proyectos sin necesidad de un programador. Es el verdadero negocio: rápido, intuitivo y fácil de aprender.

Con Sketch ganando popularidad, están apareciendo muchos complementos para facilitar el uso de prototipos. Framer es un ejemplo fantástico; importa archivos de Sketch y, con un poco de conocimiento de codificación, puede crear demostraciones personalizadas, como animaciones de toque. InVision también tiene un complemento de Sketch. Vale la pena explorar otros, incluidos Marvel y Craft. Hay un montón de herramientas para probar.

No necesita ser programador o incluso usar software para crear prototipos. La creación de prototipos en papel es una excelente manera de experimentar con el diseño de la interfaz de usuario sin necesidad de una computadora. También puedes hacer pizarra. Estas técnicas incluso funcionan para el diseño de juegos.

¿No sabes por cuál empezar? ¡Considere un sprint de creación de prototipos usando cada una de estas herramientas!

De vuelta en el mundo del desarrollo web y de software, una cosa que me encanta hacer es configurar un repositorio de GitHub específicamente para prototipos. He incluido un archivo LÉAME que describe algunas de las reglas que me interesan al crear prototipos, que puede usar o bifurcar para intentarlo.

Estudio de caso: Jams de melodía

Hace aproximadamente un año, construí y lancé un juego de iOS para niños con algunos amigos, llamado Melody Jams (¡y escribí un artículo para Smashing Magazine al respecto!). Ese juego fue codificado sopa de nueces en unos tres meses. Hubo algunos desafíos: el diseñador nunca antes había creado una aplicación, vivía a 3000 millas de mí y nunca nos habíamos conocido. Además, no había codificado una aplicación de iOS en un año, por lo que mis habilidades se habían atrofiado considerablemente.

El juego implica arrastrar monstruos desde la parte inferior de la pantalla a puntos de acceso designados en el escenario. Solo a partir de ese diseño, una serie de declaraciones de problemas fluyeron por mi cabeza:

• ¿Cómo creo una aplicación para iOS?
• ¿Cómo puedo crear un juego para iOS?
• ¿Cómo puedo crear una cosa en el juego?
• ¿Cómo puedo hacer tapping en esa cosa?
• ¿Cómo arrastro la cosa?
• ¿Cómo tengo varias cosas que se pueden arrastrar?
• ¿Cómo detecto cuando una cosa está cerca de otra cosa?

Y así. Cada uno de estos se convirtió en prototipos individuales a medida, una aplicación de iOS para cada uno, hasta que se resolvieron todos. Cada uno resolvió un problema y algunos plantearon nuevos problemas, por ejemplo, ¿cómo animo una cosa cuando termino de arrastrarla?

Recreé estos prototipos en Swift 3, para que pueda ver cómo se vería el repositorio de prototipos si se construyera hoy. Una cosa que notará es que la documentación sobre estos es bastante ligera: un archivo README y una captura de pantalla o GIF en cada directorio, pero no una tonelada de documentación detallada. Si ayuda imprimir nuestros comentarios, por todos los medios hágalo. Para mí, se trata de ver una progresión. Aquí no hay teoría, ni publicación de blog ni tutorial. El prototipo 3 fluye del prototipo 2, que fluye del prototipo 1. Con suficiente práctica, puede captar los matices del lenguaje de programación rápidamente, incluso si nunca lo ha visto antes.

Seguimos este flujo durante las primeras semanas del proyecto, desarrollando en gran medida prototipos sin trabajar en la aplicación principal. Al final del proyecto, teníamos más de 50 prototipos distintos que probaron diferentes tipos de animación, esquemas de carga, almacenamiento en caché, pruebas de sonido y mecánica de interfaz de usuario.

Mientras eso sucedía, el diseñador creaba prototipos de logotipos, pruebas de movimiento, íconos de aplicaciones, etc. El diseñador de sonido proporcionó ejemplos de canciones en las que estaba pensando. Y a todos les encantó lo que estábamos haciendo todo el tiempo que lo estábamos haciendo.

Conclusión

Siguiendo mi definición amplia, es probable que ya hagas algunos prototipos sin siquiera pensar en ello como tal. Tal vez el próximo paso para usted sea compartir con sus compañeros con más frecuencia, o afirmar que la creación de prototipos será la forma de iniciar su próximo proyecto.

La integración profunda de la creación de prototipos en su proceso creativo puede ser transformador . Puede contribuir a una cultura de equipo más positiva y enriquecedora. Puede ser un mecanismo para que los desarrolladores aprendan nuevos lenguajes o para que los diseñadores aprendan nuevas herramientas. Los proyectos se realizan más rápido y con mayor calidad y son más divertidos. Tus clientes tendrán una mayor visibilidad del proceso y estarán preparados para ver las cosas con menor fidelidad, lo que hace que compartir cosas con ellos sea más frecuente y menos doloroso. También parecerá que trabaja mucho más rápido que sus competidores y que puede trabajar en una variedad más amplia de proyectos.

Con todos estos beneficios, ¿qué es lo que no puede gustar? Entonces, dime, ¿estás convencido? ¿Inspirado? ¿Cómo es tu próximo paso?