BBVA API Market
Prototipar. Esa es una de las claves principales en el proceso de conceptualización, diseño y desarrollo de aplicaciones móviles. Elaborar un prototipo o un boceto navegable de una app permite materializar de forma aproximada una idea, acercarnos al resultado final, acelerar la fase de desarrollo, evitar problemas futuros e involucrar también a los clientes.
Dentro del desarrollo de aplicaciones móviles, hay tres tipos de maquetas:
1. Sketch: el diseñador esboza en un papel la futura aplicación y la navegación entre distintas pantallas. Sirve para adelantar un proceso de prototipado posterior en soporte digital. Es una representación estática.
2. Wireframes: son unas maquetas más completas que las que se realizan en el proceso de sketching. Se hace en papel y en digital. Contiene información adicional en cada una de las pantallas: disposición de los botones, contenidos, llamadas a la acción, movimientos tipo dentro de la navegación entre pantallas… Muy habitual en proyectos digitales. Es una representación estática, se suele entregar en formato de imagen.
3. Mockup: es llevar los wireframes un poco más lejos. Sigue siendo una representación estática de la app, se entrega al posible cliente en una imagen, pero permite visualizar la línea gráfica, la estructura de la información, el contenido y avanza las funcionalidades del proyecto.
4. Prototipos: esbozo digital del proyecto. Se muestra la interacción entre pantallas y contenidos. Es una representación navegable, en la que el usuario interactúa con el propio prototipo y el contenido como lo hará en un futuro sobre el producto final: la aplicación móvil.
Herramientas para hacer prototipado
1. Proto.io
Proto.io es una herramienta para el diseño de prototipos navegables de aplicaciones, tanto para dispositivos móviles como relojes inteligentes. Sus características más importantes son:
– Librerías de interfaz de usuario. En Proto.io el diseñador puede arrastrar y soltar elementos en la futura interfaz para completar la pantalla interactiva como un Tetrix. Al final, el usuario se encontrarán un pantalla en la que se podrá navegar igual que en la aplicación real. Estas librerías nativas permiten dar vida a los prototipos navegables sin picar una sola línea de código. Es como un mecano.
– Prototipos interactivos y animados. Proto.io permite diseñar prototipos que sean capaces de trasladar toda la experiencia de usuario real de la futura aplicación. Se permiten los contactos habituales de la navegación en aplicaciones: un clic, doble clic, navegación en vertical hacia arriba y hacia abajo, navegación horizontal hacia la izquierda y hacia la derecha, hacer o deshacer un movimiento de zoom…
Además, la herramienta dispone de funciones para animar componentes o botones de unas pantallas a otras. Normalmente son animaciones a 60 frames por segundo, en la que los elementos se pueden mover, rotar, hacer transiciones en las que aparecen o se desvanecen… o incluso crear secuencias o bucles de componentes.
– Aplicaciones para teléfonos inteligentes. Proto.io también dispone de herramientas para diseñar prototipos para el nuevo escenario de las aplicaciones móviles, los famosos teléfonos inteligentes.
– Exportar el prototipo. El trabajo se puede exportar en varios tipos de archivos: las pantallas se pueden descargar en PNGs, en formato PDF o incluso en HTML5. Se le puede enviar al cliente o embeberlo en un site.
2. Prototyper
Herramienta de prototipado desarrollada por Justinmind. Características:
– Prototipos multidispositivo. Prototyper permite el desarrollo de prototipos navegables de aplicaciones para iOS y Android, también para páginas webs responsive (escritorio, tableta y móvil) con todo tipo de menús, botones… Con todas la posibilidades en interacción y navegación. También es posible desarrollar prototipos de aplicaciones que más tarde correrán dentro de las Google Glass y crear tus propios widgets a partir de modelos preestablecidos por la propia herramienta.
– Interacción y navegación. Prototyper permite definir desde el prototipo toda la interacción entre pantallas, establecer los gestos habituales en la navegación (scroll vertical, navegación horizontal, zoom) e incorporar todo tipo de transiciones y efectos.
– Valor añadido en la parte de diseño. Esta herramienta da muchas opciones a cualquier diseñador: colores, sombreados, tipografías, tratamiento de imágenes… Además, su integración con Adobe Illustrator, posiblemente el programa más utilizado dentro del diseño, da algunas ventajas interesantes: se puede abrir cualquier archivo Illustrator dentro de Prototyper en formato vectorial (SGV), que permite escalar sin que la imagen pierda calidad en ningún momento.
– Testear el producto. Prototyper permite escoger algunas de las mejores herramientas de testeo de aplicaciones: Keynote, Userzoom, Loop11, Clicktale, Usabilla, Usertesting, Crazyegg, Google Analytics, TryMyUI…
3. Axure RP
Axure RP es una herramienta profesional de pago. Permite hacer desde wireframes de páginas y aplicaciones web a apps móviles hasta prototipos navegables de cualquier proyecto digital. Es una plataforma muy completa, con posibilidades de compartir en tiempo real los avances en el trabajo de prototipado para buscar feedback con compañeros y clientes. Características:
– Herramienta de wireframes: es algunos proyectos, los clientes piden ir paso a paso. Prefieren ver primero una maquetación en wireframes y tomar decisiones desde ahí, antes de ver un prototipo navegable. Axure RP permite ese flujo de trabajo, Se puede hacer wireframes con sus cajas de imagen o texto, sus marcadores de posición, botones… y después ir añadiendo color, rellenos o transparencias. Tiene muchas posibilidades.
– Hacer prototipos interactivos: aquí Axure RP incorpora elementos nuevos que se incluyen con una sencilla función de arrastrar y soltar. Maquetas donde el usuario puede navegar por los menús, visualizar los distintos tipos de navegación, interactuar con los contenidos…
– Compartir los prototipos: la herramienta siempre genera una maqueta en HTML y JavaScript que se puede ver en cualquier navegador, Internet Explorer, Firefox, Safari o Chrome. Se puede alojar en un servidor propio o en el hosting de Axure. Por tanto no es necesario disponer de Axure RP para ver prototipos hechos con esta herramienta.
– Tutoriales: la herramienta dispone de entrenamiento virtual.
4. Invision
Invision es una herramienta gratuita limitada a un único proyecto o bien de pago con varios planes. Hay características interesantes para una empresa de diseño dentro de Invision, que se unen a las funciones ya vistas en las herramientas de prototipado anteriores.
– Integración con plataformas de gestión de proyectos y flujos de trabajo: Invision permite compartir el trabajo de prototipado en gestores de proyectos como Basecamp, Trello o el rompedor Slack.
– Compartir contenido de forma sencilla en comunidades: Invision está totalmente integrado con plataformas como Dribbble, pensadas para compartir material con la comunidad de diseñadores y que eso permita mejorarlo o encontrar nuevos puntos de vista. El contenido que allí se comparte va con titular, descripción y etiquetado.
5. Fluid UI
Fluid UI es una herramienta muy específica para desarrollo de prototipos de aplicaciones móviles tanto en Android como en iOS (iPhone y iPad). Dispone de su propia aplicación para probar los prototipos directamente en móviles. También se pueden testear las maquetas en un navegador web (Internet Explorer, Firefox, Chrome y Safari). Tiene una demo gratuita con una limitación en el número de proyectos (sólo permite uno) y páginas (10) y varios planes de pago (12, 29 y 49 dólares/mes con incremento de funciones).
Existen otras muchas herramientas gratuitas y de pago, con sus ventajas y también sus limitaciones: PopApp, Marvel, Launch, Realizer, Form, iPlotz, MockFlow, Balsamiq, Moqups, Adobe Muse… Prueba, prueba, prueba.
Síguenos en @BBVAAPIMarket
Una API es el mecanismo más útil para conectar dos softwares entre sí para el intercambio de mensajes o datos en formato estándar como XML o JSON. Así es como se convierte en un instrumento para buscar ingresos, abrirse al talento, innovar y automatizar procesos.
Las APIs pueden ser un gran apoyo a la hora de automatizar procesos empresariales Las empresas, a menudo con foco en las PYMES, dedican demasiadas horas-persona a procesos empresariales que consumen un tiempo precioso, incurriendo con ello en errores que una máquina jamás tendría. ¿Cómo puede la automatización de procesos empresariales (BPA) ayudar a estas […]
Se espera que durante los próximos años se regule el ‘open finance’, lo que dará lugar a un nuevo ecosistema de datos abiertos El open finance está abriéndose paso en el terreno legal mediante la consolidación de varias iniciativas que le darán blindaje jurídico. Una vez esto se haya completado, los clientes confiarán en un […]
