DISEÑO WEB Herramientas de prototipado

Elegir la herramienta de prototipado más

adecuada
Cuando se trata de crear prototipos, hay tantas herramientas y métodos que elegir que no
es tarea fácil. ¿Cuál es la mejor? No hay "mejor" porque todo depende de lo que necesites
en este momento. Aquí van algunas ideas sobre lo que debe considerarse cuando necesites
considerar una solución para la creación de prototipos.

Siempre es bueno estar al día sobre últimas herramientas de diseño y prototipado, solo para
ver si alguna de ellas podría mejorar tu flujo de trabajo y permitirte mejores resultados. Hace
unos años era más fácil que ahora decidir si una herramienta era útil. Hoy en día, las
aplicaciones se están actualizando continuamente, y es algo difícil seguirles el ritmo.

1. Curva de aprendizaje

Los métodos más eficaces de aprendizaje aprovechan los conocimientos para que no
tengamos que empezar desde cero. Esto es lo que llamamos "transferencia de conocimiento”:
Aplicar conocimientos adquiridos previamente a una nueva situación.

También es útil cuando se está aprendiendo a utilizar una nueva herramienta de creación de
prototipos: Los que tienen una interfaz familiar y un conjunto familiar de herramientas
probablemente será más fácil de aprender que los que son nuevos en todos los aspectos.

Esto es especialmente cierto para Creative Suite de Adobe, en la que cada aplicación está
diseñada para parecerse a las demás. Así que los paneles y diálogos y las simulitudes hacen
que sea más fácil aprender las nuevas versiones de las aplicaciones o cambiar entre ellas,
por ejemplo de Illustrator a Photoshop .

Pero también hay que tener en cuenta cuánto tiempo habrá que invertir en aprender una
nueva herramienta para utilizar realmente esa herramienta en el proceso de diseño. la
situación ideal sería dedicarle poco tiempo a aprender la herramienta que se va a utilizar
con frecuencia o bien todos los días.

2. Apoyo al trabajo en equipo

Una herramienta de creación de prototipos es necesaria para consolidar la retroalimentación de

los clientes acerca de los diseños, para que pueda reutilizar la información y así modificar el
trabajo realizado, y luego compartir una la última o nueva versión mejorada.

Para lograr esto, se puede pasar las pantallas de diseño a InVision donde el cliente
podrá agregar comentarios sobre las características en particular en el lugar exacto al que se
refieren. Y de este modo, el diseñador tendrá la oportunidad de responder al comentario o
cerrarlo si el problema ha sido resuelto.

Pero si se trabaja en una empresa, entonces lo idóneo es que el cliente se sienta como parte
del equipo, por lo que trabajará con los diseñadores como compañeros. Es importante
contar con una herramienta que permita a los compañeros de trabajo compartir y subir las
diferentes versiones de las pantallas de diseño, para que todos permanezcan en la misma
página mientras contribuyen al proyecto. Herramientas como InVision presentan la

Ing. Ernesto Nicho Córdova USAT|1

DISEÑO WEB Herramientas de prototipado

actividad general de un proyecto en una especie de vista de línea de tiempo, para que se
pueda mantener al día y realizar un seguimiento de todos los cambios.

BAJA FIDELIDAD
Cuando lo que se quiere es probar la idea de un producto digital, un diseño de la aplicación
de alta fidelidad sobre el diseño no es conveniente, porque te distraerá fácilmente con los
detalles que no son relevantes durante esta etapa. Lo más importante es poder navegar de
una pantalla a otra, sin preguntarte si los elementos de la interfaz tienen el tamaño o la
disposición adecuada. (Es difícil resistir la tentación de alinear elementos, pero no es crucial
en este punto.)

A todos nos pasa qué cuando tenemos una idea y vamos directamente al ordenador, a
menudo te encuentras haciéndote preguntas como qué tamaño debe ser el documento
de diseño o qué colores debo elegir - cuando ni siquiera está definido ni siquiera está el
concepto en "el camino correcto" . Es por eso que, en momentos como estos, lo mejor es usar
la opción más antigua y básica:

3. La idea no es nueva

"¿Pero por qué debemos comenzar con dibujar?”, Podrías preguntarte... La razón es que no se
debe quedar atrapado en la precisión de los píxeles en un proyecto al ir directamente al
terreno digital es demasiado fácil y costará mucho tiempo a largo plazo. Volviendo a lápiz y
papel. Es una manera rápida y fácil de sacar las ideas para empezar a iterar.

Usando lápiz y papel, no se estará preocupado por ninguno de los detalles específicos del
diseño que mencioné anteriormente. En cambio, uno puede concentrarse en la idea.

MEDIA FIDELIDAD

El lápiz y el papel están bien, pero llega un punto en el proceso de diseño cuando no es
suficiente. Cuando se está seguro acerca del concepto central de la aplicación y ya se han
hecho algunos prototipos básicos en el papel, se necesita una herramienta diferente para
seguir adelante. Normalmente, cuando hablamos de prototipos de fidelidad media, nos
referimos a wireframes cuyo propósito principal es transmitir la interacción y la información.

Cuando se desea diseñar wireframes, lo más idóneo es utilizar la información real tanto como
sea posible. Sin embargo, no siempre se tienen todos los datos a nuestra disposición en esta
etapa. Por lo tanto, por lo general se tiene que aproximar el texto final, gráficos y colores,
ya que están vinculados a la marca. Pero vale la pena concentrarse en lograr un diseño y
una interacción convincente.

Durante esta etapa, se podría utilizar perfectamente Sketch. Esta herramienta es

relativamente fácil de usar y nos ayudará a llevar el concepto de diseño del papel al
siguiente nivel. Utilizando Sketch, podrá reutilizar fácilmente los elementos de la interfaz de
usuario, para que no se tenga que empezar desde cero y beneficiándonos de muchos
componentes estándar de interfaz de usuario. También hay muchos componentes de
interfaz adicionales que podrás utilizar para crear los diseños, como los que se encuentran
en Sketch App Sources.

Ing. Ernesto Nicho Córdova USAT|2

DISEÑO WEB Herramientas de prototipado

A medida que el proceso continúa, también se podrá controlar el grado de personalización

de esos elementos y decidir dónde hacer una pausa para las pruebas del usuario.

El uso de estos componentes de diseño también es una buena idea si lo que se desea es
alinearse con las expectativas y no caer en sobrediseño. Normalmente, diseñar todo desde
cero tomará mucho más tiempo (y los desarrolladores tardarán más tiempo, cuando
comiencen a implementar nuestro diseño). Es por eso que es mejor reutilizar elementos
comunes de la interfaz de usuario, como listas, diálogos, formularios y pestañas.

Pero hay que tener en cuenta que Sketch es una herramienta sólo para Mac; Así que, si
trabajas bajo Windows, tendrás que confiar en otra herramienta como
Balsamiq y Omnigraffle son bien conocidos. O bien puedes utilizar un par de nuevas
herramientas de diseño de interfaz de usuario están basadas en web (y por lo tanto no
necesita ninguna instalación); Gravit y Figma

ALTA FIDELIDAD

Cuando el prototipo se acerca a ser un producto viable, necesitaremos diseñar componentes

que antes no eran relevantes, como diálogos infrecuentes, algunos mensajes de
retroalimentación (mensajes de error y mensajes que muestran el resultado de una acción),
estados vacíos, botones deshabilitados y así sucesivamente...

Básicamente, durante las primeras etapas de la creación de prototipos de baja y media fidelidad,
nos concentraremos en la estructura, la información y el flujo y en un pequeño conjunto de casos
de uso básico. A medida que el diseño madura, deberemos considerar más:

 Casos de uso adicionales (a menudo, menos frecuentes);

 Casos puntuales y contingencias (por ejemplo, ¿qué sucede en un flujo de salida si
se rechaza una tarjeta de crédito?);
 Prevención y manipulación de errores.

Todos estos casos de uso son importantes a considerar para un buen UX, pero no deben ser
las primeras cosas que diseñamos. Comencemos con los casos de uso básico y
centrándonos en los aspectos más relevantes y destacados del diseño. A continuación,
incluimos el resto de las condiciones para completar y validar el diseño.

En esta etapa, entonces, es cada vez más importante elegir una herramienta que nos
proporcione una fidelidad alta sobre los componentes del diseño, para que se
pueda determinar el aspecto y el comportamiento de cada uno de los elementos de la interfaz
de usuario.

En esta fase, se puede usar Axure para este tipo de tareas. De hecho, cada vez es más
utilizada por las empresas. Es una herramienta de gran potencial, se utiliza características
como condicionales, que te permiten mostrar y ocultar diálogos, banners y otros bloques
temporales de información, dependiendo de la interacción del usuario. Esto es muy útil
para minimizar el número de pantallas que se diseñarán completamente desde cero.

Hasta ahora nos hemos centrado principalmente en diseños estáticos. ¿Y la animación?

Esto se está volviendo cada vez más importante, no sólo porque la animación se puede
encontrar en todas partes en las interfaces modernas, sino también porque es muy
difícil comunicarse con el resto del equipo cómo desea algo para moverse o volver sin mostrarlo.

Ing. Ernesto Nicho Córdova USAT|3

DISEÑO WEB Herramientas de prototipado

Cuando se trata de prototipos de animaciones, micro-interacciones y transiciones, se debe

dividir las herramientas de prototipado en dos grupos:

 Herramientas que tienen UIs familiares y que no requieren que aprendas ningún
código;
 Herramientas que requieren al menos unas pocas líneas de código.

En el primer grupo, han aparecido algunas nuevas herramientas, como Pixate,

Principle y Flinto. En muchas situaciones, se puede utilizar estas herramientas paraprototipar
no toda la aplicación, sino sólo un subconjunto de pantallas, para ver cómo se mostrarán los
diferentes elementos o cómo pasar de un estado (o pantalla) a otro.

Si se desea ir un paso más allá, se puede optar por el segundo grupo. Este conjunto de
aplicaciones puede parecer menos familiar para los diseñadores, pero tendrá un control
más preciso sobre las animaciones. Además, en muchos casos, se puede
utilizar componentes nativos para lograr un resultado más realista, lo que facilita el paso del
prototipo al código final. Herramientas de este tipo tenemos Framer, Facebook Origami cuyo
acompañante Origami Studio, que te permitirá exportar fragmentos de código que se
podrán enviar a los desarrolladores.

Para iOS, se puede utilizar Interface Builder que te permite diseñar interfaces que utilizan
componentes nativos de iOS en un entorno visual. (Esta solución está completamente libre
de código). Y Para Android, tenemos Android Studio.

4. Integración con su flujo de trabajo

Otro punto a considerar al elegir una herramienta de creación de prototipos es lo bien que
se ajusten al proceso de diseño y otras herramientas que se utilizan regularmente. El
prototipado es parte de un proceso mucho más amplia que incluye: investigar a los usuarios,
probar, recopilar métricas, comunicar la idea a las partes interesadas y compartir diseños con
los desarrolladores para su implementación final.

Es probable que no encuentre una herramienta que lo haga todo, pero las herramientas de
creación de prototipos deberían al menos ayudarnos a movernos a través del proceso sin
problemas, especialmente cuando se espera que iteren en plazos muy ajustados.

Por ejemplo, si se está diseñando en Photoshop, Illustrator o Sketch, sería genial si el software
de creación de prototipos pudiera utilizar directamente los archivos producidos por estas
aplicaciones sin necesidad de exportar los recursos por separado y luego construirlo todo
desde cero para crear las interacciones.

Uno de los últimos pasos en la construcción de un prototipo es probarlo y recopilar información

(gestos, taps y respuestas) de usuarios reales para que pueda mejorar el producto.
Herramientas como InVision y Marvel se conectan con Lookback lo que nos permitirá probar
la aplicación y grabar vídeo al mismo tiempo, para que se pueda analizar los datos con el
resto del equipo.

5. Facilidad de uso y comodidad

¡Y para concluir, el cómo te hace sentir el utilizar una herramienta de prototipos

determinada es lo más importante! Si la vas a estar usando todos los días -y a veces incluso

Ing. Ernesto Nicho Córdova USAT|4

DISEÑO WEB Herramientas de prototipado

los sábados y domingos, si eres un profesional independiente, - sabemos lo importante que

es sentirse bien, ¿verdad?

Consejo
Busca una herramienta que te satisfaga, no una que haga que su trabajo sea más difícil, te
coloque obstáculos en tu camino, te frene, añada pasos adicionales o te obligue a
encontrar nuevas soluciones.

Conclusión
Teniendo en cuenta que todas las herramientas de diseño y prototipado que están
disponibles hoy en día (y ni siquiera se han mencionado todas), te harían sentirte intimidado.
Tal vez por eso todos estamos esperanzados en que aparezca "una herramienta para gobernar
todo" - una aplicación que nos permita crear todo tipo de diseños e incluso hacer los
prototipos.

De alguna manera, estamos empezando a ver algo de esto con Adobe Experience Design
CC (una nueva herramienta de diseño que te permite vincular entre pantallas de diseño)
y Sketch (cuando se utiliza con complementos como Craft Prototype para interacciones
y AnimateMate para animaciones).

¿Este es el futuro de las herramientas de diseño y prototipado? si es esta la dirección,

podríamos terminar con una herramienta demasiado compleja...lo mejor es que existan
diferentes herramientas y utilizarlas dependiendo de la ocasión. Una de las cosas más
importantes es identificar qué herramienta es la más adecuada para el trabajo dado.

En cualquier caso, no hay que obsesionarse tanto con las herramientas. Se supone que nos
ayudan a dar forma a nuestras ideas; No debemos determinar o restringir cómo nuestros
productos se verán o se comportarán.

También hay que entender que las directrices anteriores serán bastante inútiles si la empresa
para la que se trabaja te obliga a utilizar una herramienta en particular. Si ese es el caso,
está en nuestra mano intentar persuadir al equipo por lo menos intentar algo diferente, si el
razonamiento es claro y lógico. Y con suerte, tal vez algunos de los puntos anteriores
apoyarían tu argumento.

Por último, hay que tener cuidado cuando alguien te diga que una determinada
herramienta es "la mejor" o "la más fácil de aprender". Esto es altamente subjetivo, y es algo que
se debe descubrir por nuestra cuenta. Al final, tú, como yo y todos los demás, somos
diferentes.

Referencias

[1] C. Álvarez, «Elegir la herramienta de prototipado más adecuada,» 4 Abril 2017. [En línea].
Available: https://openwebinars.net/blog/elegir-la-herramienta-de-prototipado-mas-
adecuada/. [Último acceso: 23 Marzo 2019].

Ing. Ernesto Nicho Córdova USAT|5