Prototipando: Las Mejores herramientas (vol 1):

En los últimos años, hemos ido viendo que el desarrollo digital, que antes consistía en hacer un website estático con un poco de HTML, algún que otro gif y con un par de formularios en PHP (como máximo), se ha ido complejizando más y más hasta el punto de crearse auténticos productos de software similares a los que nos vendía Microsoft en cajitas de colores en el año 2000, pero con la particularidad de estar alojados en un data center en Silicon Valley y a los que podemos acceder a través de nuestro explorador favorito.

Con la aparición de este desarrollo digital cada vez más complejo repleto de algoritmos, validaciones, testeos cruzados y un de tiempo de desarrollo más y más extenso, se hace necesario usar métodos de prototipado previos al producto digital final a los que los diseñadores nos tenemos que ir adaptando y acostumbrando rápidamente, estos métodos nos permiten poder testear el producto digital antes de ponernos a programarlo, y no descubrir que todo el trabajo está mal y hay que rehacerlo porque no pensamos en que la gente no iba a entender que el logo de la compañía con el león rugiendo es en realidad el acceso al menú del site.

Prototipado digital:

El prototipado digital, nos permite explorar un producto digital (mobile app o website) y aprender sobre el mismo antes de que esté construido, de esa manera podemos visualizar, diseñar, validar y hacer tests de usabilidad con nuestros amigos y co-workers para así poder finalmente programar un producto 100% validado y sin “sorpresas” de última hora.

Los métodos de prototipado en el mercado son muchos, y abarcan desde hacer unos trazos en la servilleta de un bar a auténticas réplicas exactas de como va a funcionar nuestro website o app y que podemos compartir en directo con quien queramos.

Hay varios factores que determinan qué herramienta elegir tales como, coste, fidelidad con el modelo final, capacidad de gestión y colaboración entre un equipo de personas.

Si realmente quieres prestarle atención a la experiencia del usuario, a la interfaz y al diseño de las interacciones te recomiendo que uses alguno de estos programas:

1-InVision:

InVision es la herramienta de diseño colaborativo más utilizada. InVision permite trabajar en equipo para prototipar, revisar, iterar, gestionar y hacer tests de rendimiento y usabilidad con usuarios de verdad (resultados con datos, gráficos y todo) sin tener que picar una sola linea de código además, piensa en una especie de Photoshop + After Effects + Basecamp.

Si quieres saber si los diseños que se te han ocurrido para tu startup que hace ratings de retretes públicos van a funcionar antes de soltar esos 20.000€ a los programadores necesitas InVision. Es la herramienta número 1 para prototipado y sobre todo para desarrollar proyectos largos y complejos con variedad de pantallas donde mucha gente va a tener que intervenir y opinar. InVision funciona a nivel de servidor, es decir, desde tu explorador, es como Basecamp con sistema de asignación de tareas y comentarios pero orientado a construir un producto digital, donde además puedes plantear hipótesis a nivel de usuario y comprobar que funcionan testeandolo con sujetos reales de prueba (tus compis de curro, tu abuela y tu sobrino). Se combina con todo (Dropbox, GIthub, Basecamp, Google Drive), tiene Chat, es fácilmente compartible con cualquiera que quiera testear el prototipo y además puedes importar tus diseños desde Sketch (hablaremos más adelante) o Photoshop.

El único punto en que fallaba y que se ha solucionado gracias a su actualización que incluye el software motion, es el diseño de las interacciones, ahora puedes añadir modelos de animaciones realizados en función a un timeline tal y como podrías animar cualquier cosa con After Effects. Si las herramientas de prototipado se dividen entre baja, media y alta fidelidad (mayor parecido con el modelo final), podríamos definir InVision como una herramienta de fidelidad media ya que las interacciones entre elementos y pantallas están limitadas, pero igualmente permite testear perfectamente la app entre usuarios.

Es la herramienta usada por Mailchimp, Uber, Airbnb y Linkedin entre otros.

Puedes adquirirla gratis siempre y cuando no tengas más de 3 prototipos en marcha, a medida que tengas más el precio va aumentando hasta no más de $99 al mes, así que si no tienes más de 3 proyecto en marcha es gratis, y si tienes más, te recomiendo que te montes una agencia e instales una cama junto al escritorio.

agencia_publicidad_digital_madrid_miami_bogota_invision_app

2 – Sketch:

Sketch App es una herramienta de diseño vectorial enfocada 100% a diseño de interfaz, es extremadamente fácil de usar y permite construir para múltiples plataformas simultáneamente. Sketch está siendo una revolución entre los diseñadores digitales, se descarga en 5 minutos y se instala en el sistema, es un software diseñado por Bohemian Coding y se ha ganado ya tropecientos premios de usabilidad.

Puedes fácilmente crear un flujo de trabajo o un Roadmap del proyecto entero a través de este software gracias al sistema de “Artboards”, cada uno de estos “Artboards” representa una pantalla o una interacción con una pantalla del producto digital que estés diseñando, y aunque Sketch no es una herramienta enfocada al prototipado, sino al diseño visual del producto, es una manera increíble de diseñar y “visualizar” todo un proyecto digital en un solo lugar. Te recomiendo que si tienes que diseñar una app o un website utilices este software que además te permite exportar todo lo que diseñes en pedacitos, directo para programación en .png, .svg o en un .pdf. Sketch trabaja exclusivamente con gráficos vectoriales y cualquier cosa diseñada usando el programa puede ser exportada como una ristra de código (objetos vectoriales) o como una hoja en cascada en CSS para facilitar todo al desarrollo.

Imprescindible para combinar con cualquiera de las herramientas de las que vamos a hablar en este post. Por $100 al año puedes descargarlo y si rascas un poquito seguro que te puedes encontrar algún buen promo code. Si te gusta el diseño web te aseguro que no volverás a diseñar una interfaz jamás con otro programa.

agencia_publicidad_digital_madrid_miami_bogota_sketch_app

3 – Atomic.io

Atomic es otra herramienta de prototipado de media/alta fidelidad que funciona a nivel de explorador (no hay que descargar nada) y que aunque desgraciadamente está perdiendo la batalla contra Invision, no deja de ser interesantísimo para hacer un buen modelo realista de tu web/app. Con un sistema de juego estructurado perfectamente en páginas y artboards, se combina a la perfección con Sketch, tanto que puedes copiar desde tu sistema un layer en Sketch y pegarlo en Atomic que está funcionando desde el explorador directamente “Oo”, además de esto el sistema de Atomic te permite dibujar formas y elementos así como diseñar directamente dentro de su interfaz, de tal manera que podemos realizar diseños de interacciones más complejos que los que permite Invision y a través de un timeline de animación similar al de After Effects. Tiene un método de compartir y testear para hacer pruebas con usuarios finales así como un centro de trabajo compartido quizá no tan elaborado como Invision, los modelos de funcionamiento tiran en CSS, así que si te sientes valiente y sabes un poco de código puedes toquetear y customizar elementos dentro de la interfaz.

El único inconveniente que le he encontrado es que a veces los modelos no quedan perféctamente definidos al pixel.

Puedes descargár una version de prueba durante un mes y para luego pagar $15 dolares mensuales por su uso.

agencia_publicidad_digital_madrid_miami_bogota_atomic-io_app

4 – Framer.js

De acuerdo, esta sí es la herramienta definitiva para crear un prototipo de alta fidelidad y que sea una pre-réplica exacta del original (final). ¿Qué puedo decir de Framer? Es perfecto y te permite diseñar lo que se te pase por la cabeza sin ningún tipo de restricción, si por ejemplo quieres que el logotipo de tu compañía se separe en diferentes pedazos y que cada uno de ellos conforme los elementos de la siguiente pantalla de tu interfaz o si quieres que el icono de la hamburguesa de tu menú se convierta en el Ave Fenix y se vaya volando siendo cabalgado por el mesías a través la pantalla de tu prototipo cuando haces click, puedes hacerlo, pero tiene una serie de “inconvenientes“.

  1. Funciona con código puro y duro, sí, para realizar todas esas animaciones y transiciones debes hacerlo con una variante de javascript llamada coffescript, que es una especie de javascript increiblemente rápido de escribir, iniciarte en este programa implica aprenderte las librerías de coffescript que utiliza framer para su interfaz que están muy bien explicadas en su página.
  2. No tiene un sistema sofisticado de artboards, es decir, puedes reproducir 100% tal y como quedaría la app que estás prototipando, pero no encontrarás una interfaz visual donde ordenar tus pantallas, tendrás que hacerlo planeando muy bien tu proyecto y echándole mucha cabeza.
  3. No es una herramienta de trabajo en equipo, los prototipos se pueden compartir muy fácilmente en un link o directamente a través del teléfono móvil si es un app, pero no existe ningún tipo de interfaz colaborativa, el Feedback se devuelve en un email.

Las ventajas son muy interesantes también, combina perfectamente con Sketch y Photoshop, permitiéndote organizar bien los artboards desde estas otras plataformas para después importarlos a Sketch quedando un modelo idéntico y perfecto al píxel, además si tienes todos los elementos bien organizados en carpetas, podrás animarlos fácilmente una vez que estés en dentro de Sketch “llamando” a estas carpetas desde el código fuente.

Framer dispone de la comunidad de prototipadores más activa del mercado, desde la que estarán encantados de poder ayudarte solucionándote problemas y compartiendo los prototipos entre todos, ya que los prototipos compartidos con Framer permiten ver todo el código utilizado por su creador y modificarlo.

Framer cuesta $129 al año y te permite un trial de 15 días.

framer-studio

5 – XCode:

Estás leyendo bien, si quieres hacer un trabajo bien hecho, no prototipes, hazlo directamente con Xcode en código Swift. Agarra el toro por los cuernos y ponte a ello, ahórrate el tiempo invertido en el prototipo y haz de una el Front-End, te aseguro que te va a resultar más fácil que aprender Framer.

¿Y cómo demonios un diseñador como yo va a perpetrar un programa que solo un ingeniero con una camiseta así se atrevería a tocar?

  1. A través del MVC, Model View Controller (Modelo-Vista-Controlador). Suena muy mal, pero lo que hace es por un lado definir componentes para la representación de la información (cosas de ingenieros que no vas a tocar), y por otro lado componentes para la interacción del usuario (una interfaz muy parecida a la de Sketch donde puedes colocar las pantallitas de tu prototipo y que sí que vas a tocar).
  2. Usando como ayuda Spring para Xcode, un componente para el código fuente de Xcode (Swift), que te permite diseñar interacciones sin tocar código, simplemente incrementando valores y seleccionando opciones dentro de una interfaz.
  3. Aprendiendo un poco. Está bien, no todo iba a ser perfecto pero te toca aprender un poco, eso sí, imagina tu currículum cuando puedas poner que sabes realizar el Front-End de una app para IOS. Te recomiendo seguir este maravilloso curso lleno de vídeo-tutoriales de @MengTo desde el que aprenderás todo acerca del triunvirato Sketch + Spring + Xcode.

Los archivos en el MVC (Model View COntroller) son muy fáciles de importar y las conexiones de unas pantallas con otras se hacen arrastrando el cursor de un lado a otro. Todo tiene una organización perfecta al píxel que puedes importar sencillamente desde Sketch, además el sistema responsive para las diferentes pantallas de IOS es sencillísimo, te lo recomiendo como meta personal y como un peldaño más si quieres estar más metido en el mundo digital.

Además es gratis.

Inconvenientes: Solo vale para prototipar (o hacer) apps y para IOS.

agencia_publicidad_digital_madrid_miami_bogota_xcode_prototipo

By: Jose Bao @baojose.

Si te ha gustado esto, te gustará:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *