Wireframes: 7 Tips Prácticos (Descarga las plantillas)

December 14, 2019
Wireframes: 7 Tips Prácticos (Descarga las plantillas)

Alguna vez haz oído el termino MVP? Mínimo producto viable es un término que tiene su raíz fundamental en la ley de paretto. Es el 20% que va a causar el 80% de los resultados. Este 20% (a veces más y a veces menos), nos va a permitir probar un producto de la manera mas economica y en la menor cantidad de tiempo posible.

Los diseñadores UX y UI tienen muchos artefactos, técnicas y prácticas que también tienen su raíz fundamental en esta ley de “causar la máxima cantidad de resultados con la mínima cantidad de tiempo, trabajo, recursos” para poder probar teorías y productos. Uno de los artefactos más útiles que tenemos los diseñadores son los wireframes.

Los wireframes son bocetos no detallados que nos ofrecen una guía visual sobre cómo debe funcionar un producto. Con esta guia visual el diseñador puede probar diferentes teorías y comunicar sus ideas con otros miembros del equipo de producción del producto.

Por la naturaleza simplista de los wireframes es muy fácil hacer modificaciones, arreglos o iteraciones del producto sin tener que invertir en desarrollar o ni siquiera en prototipar con detalle el producto.

Wireframes: Que son

Antes de que empecemos a adentrarnos más en las aplicaciones prácticas de los wireframes vamos a definirlos de manera formal:

Los Wireframes son una representación visual de una interfaz (UI) en la que utilizamos únicamente formas simples como cajas, círculos, líneas y flechas. Los diseñadores usamos los wireframes para comunicar y mostrar la estructura y la jerarquía de la información.

Wireframes: Que no son

Los wireframes no son prototipos. La creación de un prototipo toma mucho más tiempo y esfuerzo que la creación de un wireframe, por lo que debe ser más preciso y su elaboración debe ser más pensada. De hecho, los wireframes son fundamentales para la creación de un prototipo. Los prototipos son creados a partir de wireframes que han sido discutidos y aprobados.

Para entender mejor la diferencia, veamos un ejemplo.

Con este ejemplo podemos comparar un wireframe con un prototipo. Es evidente la diferencia de esfuerzo y tiempo que hay que emplear para hacer cada uno de estos.

Como cualquier disciplina, el diseño de un producto, tiene muchos pasos que son fundamentales. En mi opinión la creación de wireframes es uno de estos pasos fundamentales. A pesar de que muchos diseñadores empiezan creando prototipos de alta fidelidad desde el principio, pienso que los wireframes son la mejor forma de empezar un proyecto de manera ágil y sin grandes costos.

Los diseñadores UX no vemos la iteración como algo negativo. Cambiar el producto luego de estudiar una idea es la base del diseño UX.

Partiendo de esta idea, los wireframes son una herramienta excelente para poder estudiar y analizar una idea sin tener que invertir grandes cantidades de tiempo o dinero en ella.

El tiempo que invertimos en las primeras etapas del proceso de creación de un producto se transforma exponencialmente en tiempo y dinero ahorrado en las etapas más avanzadas del proceso de creación.

Piensa en lo costoso que sería crear una aplicación móvil si empezamos el proceso de creación desarrollando y escribiendo código, sin ni siquiera dibujar un boceto o probar un prototipo. Sería muy costoso e imposible de crear un producto bueno para el usuario. Tendríamos que modificar este código cada vez que nos encontramos con una mejor solución o con un problema.

Mi recomendación es que utilices la creación de wireframes en el principio del proyecto, y que emplees más tiempo del que crees necesario en este paso.

Nuestro cerebro es complejo, y muchas veces las mejores ideas están escondidas detrás de ideas que parecen ser buenas, y que luego de probarlas nos damos cuenta que no lo son. Así que: pon en papel absolutamente todas la ideas que tengas, sin importar lo buenas o malas que sean, y no te obsesiones con ninguna idea en específico (al menos por ahora).

Siete recomendaciones para optimizar la creación de wireframes:

1) Empieza en papel:

A pesar de que a muchos nos fascina la perfección y rapidez con la que podemos crear algo en Sketch, Photoshop, XD, InVision o cualquier otro software, te recomiendo que empieces con papel y marcadores. Los wireframes generalmente ocurren en la etapa de ideación. En esta etapa, la meta es generar la mayor cantidad de ideas posibles para luego iterar sobre estas ideas.

2) Mantén tu mente abierta:

No juzgues las ideas antes de ponerlas en papel. La idea del proceso de wireframe es como ya dije: salir de las malas ideas y conseguir las buenas ideas. La única forma de sacarnos de la cabeza una mala idea es poniéndola en papel y analizándola. Suena contraintuitivo, pero creo que es extremadamente importante y a la larga puede ahorrar mucho tiempo.

Por otro lado, muchas veces nos damos cuenta de que una idea que creíamos “mala”, tiene mucho potencial y luego visualizarla conseguimos la forma de convertirla en una buena idea.

El ego que tenemos todos los diseñadores puede limitar nuestro potencial si lo dejamos controlarnos. Dejar de escribir, decir o dibujar una idea por el miedo a que sea rechazada o seamos vistos como tontos por proponer es el peor error que podemos cometer como diseñadores UX. Deja tu ego fuera de este proceso. Nuestro trabajo es abogar por el usuario, no por nosotros mismos o nuestro ego.

3) No te tomes mucho tiempo en un boceto específico.

La calidad visual de los wireframes DEBE ser baja. No debemos tomarnos mucho tiempo en refinar nuestro bocetos ya que estos son solo una herramienta para explicar una idea. Mientras más tiempo tomes en una idea específica, menos cantidad de ideas vas a tener. A veces es bueno cronometrar la cantidad de tiempo que tomamos en cada boceto y al final del proceso tomarnos unos minutos para revisar todas las ideas y refinarlas un poquito.

4) Utiliza herramientas que te ayuden a comunicar tus ideas de manera más fácil.

Mi herramienta preferida para crear wireframes son sharpies o cualquier marcador grueso y papel punteado. Usar papel punteado ayuda muchísimo a mantener líneas rectas.

Freeby UIUX Wireframes

Al final del artículo hay un link para que descargues e imprimas el PDF gratis.

5) Utiliza “Placeholders” o marcadores.

Tus wireframes no suponen ser una representación fiel de tu producto final. En vez de usar imágenes o texto real, utiliza “marcadores” para mantener el proceso rápido y efectivo. Acá esta la leyenda visual que yo utilizo:

Leyenda Visual

6) Agrega color y anotaciones a tus wireframes.

Para explicar tus ideas puedes agregar diferentes colores y anotaciones a tus wireframes. La meta es comunicar una idea de la manera mas fácil, rápida y efectiva.

7) Comparte tus wireframes.

Compartir tus ideas con otras personas puede ser extremadamente útil, siempre y cuando estemos abiertos a escuchar lo que la otra persona tiene que decir, criticar o sugerir. El proceso de UX conlleva estar equivocado muchas veces e iterar sobre nuestras ideas y muchas veces sobre nuestros errores. No seas la persona que no puede aceptar criticismo. Lo repito de nuevo, tenemos que dejar nuestro ego fuera siempre que diseñamos o tratamos de resolver problemas.

Conclusión:

No existe una sola manera correcta de dibujar tus wireframes, así que siéntete libre de romper estas reglas si lo deseas. Es bueno experimentar y probar distintos métodos para conseguir el proceso más efectivo para ti. Si solo te queda algo de este artículo te diría que sean estos principios:

  • Emplea tiempo en hacer wireframes pero no te demores mucho en ninguna idea en específico.
  • Saca todas las ideas que tengas en tu cabeza, incluidas las que creas que son malas ideas.
  • Los wireframes no son para demostrar tus cualidades artísticas. Hazlos rápido y sin demasiado detalle ni precisión.
  • Deja tu ego fuera de este proceso (o cualquier proceso de UX). Tu ego solo va a obstruir tu proceso creativo y ponerte a ti como protagonista en vez del usuario.
  • DIVIÉRTETE!

HAZ CLICK PARA DESCARGAR LAS PLANTILLAS PARA WIREFRAMES GRATIS!

APRENDE DISEÑO UX PARA FREELANCERS
DE PRINCIPIANTE A EXPERTO
EL CURSO COMPLETO 100% ONLINE
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.