Bocetos, Wierframes, Prototipos

Cuando estás en una reunión de inicio de proyecto o en un planning y escuchas la siguiente conversación:

-Creo que lo mejor es tener los bocetos, para saber qué queremos –dice el diseñador- y tener todos claro el alcance.
– ¿Bocetos?
– Sí, claro… los que no son wireframes.
– ¡hmmm!
-Aunque también podríamos hacer los wireframes, pero no alcanzamos a tenerlos listos en esta reunión.
-Entonces nos entregan para entender la HU, el diseño gráfico y la maquetación –comentan en el equipo-
-¡ja! Si no tenemos los wireframes mucho menos el diseño.
-¡hmmm! Está bien, hagamos bocetos.
-Súper, comencemos – responde el diseñador – mientras entrega los marcadores al PO o a cualquier miembro del equipo.
Y es justo allí, en ese momento, donde todos dicen: ¡Qué es un boceto! ¡No sé dibujar!

Bueno, te tengo una buena noticia, no necesitas saber dibujar 🙂

Pero, antes de enseñarte cómo lograr unos buenos bocetos, te contaré la diferencia entre: Bocetos, Wireframes y Prototipos.

Bocetos, Wireframes, Prototipos

it-sketches


Bocetos o Sketches:
Nos permiten generar ideas más rápidamente y cuestionarlas, lo que hace que podamos iterar y explorar nuevas ideas, nuevas vías. El objetivo del boceto es ensayar, tener una validación temprana y una buena conversación. En consecuencia en los Sketches, la creatividad no tiene límite. Por lo tanto, los Scketches se realizan a mano alzada.

 

Wireframes: Cuando tenemos las ideas seleccionadas, cuando todos estamos de acuerdo y concretamos, podemos realizar los wireframes. Estos wireframes son diseños en escala de grises, donde nos importa: Ubicación de elementos, interacción y lenguaje. Al igual que en los bocetos, la construcción de los wireframes se realiza de manera iterativa. Los wireframes deben tener más detalle que los Scketches, esto hace que se pueda diferenciar entre Scketches y Wireframes.


Prototipos:
Los prototipos tienen el aspecto visual, ya encontramos color y vemos reflejada la marca y la comunicación gráfica que el cliente espera, por lo general se entrega un JPG, aunque este prototipo puede ser funcional, HTML y CSS. En este punto el cliente aprueba colores, evalúa el diseño.

 

¿Ahora tienes clara la diferencia entre bocetos, wireframes y prototipos? Al menos el concepto, y si es así, ¡Bien! Vamos por buen camino 🙂

En las próximas entregas te estaré explicando:

  • Objetivo de un boceto
  • Tipos de bocetos
  • ¿Cómo decidir qué tipo de boceto hacer?
  • Materiales y diccionarios visuales para apoyar la construcción de bocetos

Y te recomendaré algunos ejercicios que te pueden ayudar a mejorar tus bocetos y como resultado serás ¡¡¡el mejor boceteador del mundo mundial!!!

Finalmente, si tienes alguna sugerencia, duda o comentario, no dudes en escribirme.

Written by Herlency