Prototipos y Wireframes, ¿ Qué son?

El caso es que me puse a mirar más sobre el tema, debido a una entrevista-prueba que tengo cerca sobre los wireframes; y me pareció una buena idea para añadir a mi calendario editorial, y voilá post al canto.

En este post veremos tanto qué son los prototipos como los wireframes; veremos algunos consejos de qué realizar antes de empezar a diseñarlo.

Pongámonos en situación, seguro que hay alguno que ha leído Wireframe y ha dicho,– ¿WTF? “A mí me hablas en cristiano”

Veremos una parte del Diseño Centrado en el Usuario, veremos una parte de la implementación de soluciones de diseños, donde entran en juego los prototipos y Wireframes.

El diseño centrado en el usuario tiene por finalidad crear productos para cubrir las necesidades de los usuarios que vayan a emplearlo, en nuestro caso, productos digitales, este diseño pretende obtener la mejor experiencia de uso y mayor satisfacción por su parte.

La verdad que tanto Torres Burriel como Ricardo Tayar en sus ejemplares han sido luz para mí a la hora de aclarar todos estos conceptos y hoy os transmito yo un poquito mi forma de entender.

Pero si os parece, primero empezaremos con las definiciones y luego ya, hablamos un poquito de las cosas a tener en cuenta.

Quizás también te interese:

Prototipos ¿qué son? 

La definición de prototipo como tal que nos da la RAE es :

         Ejemplar original o primer molde en que se fabrica una figura u otra cosa 

Esta definición es muy general y es aplicable a cualquier sector o ámbito, pero también es acertada para definir que son los prototipos en el diseño digital.

Ya que el prototipo en el diseño digital va ser ese primer contacto o vislumbramiento de cómo será el futuro producto digital del que tratemos

Para concretar más, el prototipo en este ámbito, abarca todo el proceso, interacción que un usuario llevaría a cabo.

Podríamos decir que es la consecución de Wireframes, que seguidos entre sí, forma el prototipo.

Por lo general, el prototipo al tratarse de un diseño que lleva una interacción definida se realizará de forma digital.

No te me asuste, ahora enseguida te explico lo que es un Wireframe! Sigue leyendo 🙂

            Tipos de prototipos 

Nos encontramos con diferentes niveles a la hora de elaborar un prototipo, wireframe o sketching. Donde se diferenciará el detalle, la precisión, número de elementos a describir, configuración …

Baja Calidad: 

Muy simple, como se puede deducir por su nombre, baja calidad, se tratará de un diseño simple, donde plasmaremos ideas rápidas , de forma ágil. Pero que no os lleve a error el nombre, es de mucha utilidad.

Nos sirve a nosotros mismos para resolver incertidumbres, además de ser muy útil cara a los clientes que no tengan conocimiento más técnicos. Más utilizado en Wireframing y Sketching.

Ventajas:

Focalizar de forma sencilla la estructura de diseño y decisiones

Lo rápido que puede ser el desarrollo del diseño.

Al realizarse de forma rápida, nos deja más margen de tiempo para equivocarnos, darle más vueltas, repetir, volver a empezar…

Podemos mostrar al cliente de forma más temprana las propuestas y poder así adaptarnos.

Es más fácil de trabajar así, ya que parece que la faena sale de forma más fácil.

En resumen, es una forma más ágil y cómoda que permite mayor reacción ante los distintos rumbos del diseño.

Alta Calidad: 

Os suena más mockUp? Esto de alta calidad, es relativo, ya que puede ir desde un poco más de detalle que uno de baja calidad hasta significar un diseño final. Lo que tenemos que tener claro, que tendrá una parte de detalle más elevada que en el caso anterior.Más utilizado en Prototipado.

Wireframes ¿ qué son? 

Bueno, ya nos hemos metido un poco en materia, ya sabemos lo que son los prototipos, vamos a ver lo que son los Wireframes, la verdad que la palabra asusta más de lo que en realidad es.

Llamamos Wireframes a los esquemas, planos o esbozos, que resultan después haber plasmado el concepto. Son planos que describen una situación estática. Donde no hay cabida a la interacción.

No incluyen elementos gráficos, ni contenido. Simplemente se trata de un esquema.

Es decir, dentro de un proceso que un usuario tiene que seguir para su cometido en una web o aplicación, el Wireframe, representa un momento dentro de esa interacción.

Generalmente los Wireframes se pueden realizar tanto con papel y lápiz, ( si es boli no me voy a poner tiquismiquis) , o de forma digital.

Alguien podrá pensar, papel y lápiz, ¡menuda bajeza!, todo lo contrario, a veces es la forma más cómoda de empezar a plasmar lo que tenemos en mente.

Antes he nombrado el Sketching, y quisiera definirlo de forma concisa y rápida, para resolver la duda de qué es, en caso de que pase.

 Mediante el sketching esbozamos o dibujamos el sitio web entero, incluyendo los procesos, relación entre pantallas, etc, generalmente se realiza en papel, de forma más general.


Wireframes y prototipos ¿ son lo mismo? 

NO.

Alomejor a alguien le han parecido conceptos muy parecidos, pero por si no ha quedado clara la diferencia, mejor la explico a continuación.

La verdad es que algunas veces, he visto o oído llamar indistintamente los Wireframes con los Prototipos.

Pero en realidad lo mejor es aclarar términos ya que se tratan de aspectos algo diferentes.

Vamos a verlo.

Wireframe, como hemos definido anteriormente se trata d una imagen estática. Se trata de un momento en concreto de todo el proceso que el usuario llevará a cabo dentro de la web o app.

Prototipo, a diferencia del Wireframe refleja todo el proceso que un usuario llevaría a cabo, es decir, definiría toda la interacción que las visitas realizan en el sitio web o aplicación.

Por lo tanto, un prototipo se compone de los distintos Wireframes hasta completar toda la secuencia.

  • Facebook
  • Twitter
  • Buffer
  • Linkedin

¿Qué hacer antes de diseñar Wireframes o Prototipar? 

Ahora bien, tenemos conceptos claros, pero, tsssssss quieto parao! Suelta el lápiz y la regla, deja de hacer cuadraditos!

Imagino, que como lector astuto que eres, no se puede empezar un proyecto sin cierta planificación. Así que, tampoco podemos empezar a diseñar sin tener claro los objetivos a conseguir.

Una de las partes más difíciles es la descripción de objetivos de un proyecto, pero es una de las partes fundamentales ( iba a decir impepinable, pero luego recordé que esto es un blog serio :)) para poder encarar un proyecto.

Como comentaba al principio del post, estábamos viendo una de las partes del diseño centrado en el usuario, por lo tanto, antes de comenzar a diseñar, deberíamos ser capaces de responder a las preguntas:

¿Quienes van a ser los usuarios?

Aquellas personas que acabarán utilizando el producto diseñado, o muestren la intención de hacerlo, cuanto antes los segmentemos, mejor que mejor, para considerar así los objetivos según estos.

¿Cuáles son sus finalidades?

Deberemos identificar, analizar cuáles son las finalidades de los usuarios.

¿Qué nivel de experiencia o conocimiento tienen estos usuarios? 

Este es un punto bastante importante ya que nos ayudará a definir posteriormente las tareas que tendrá que realizar el usuario al aterrizar en nuestro producto digital.  Teniendo siempre presentes los objetivos finales del producto, para alinearlo con el diseño y así ajustarnos a la experiencia de los usuarios finales.

¿Qué funciones van a ser necesarias?

Deberemos considerar las utilidades que los usuarios utilizarán para cubrir sus necesidades

¿Qué información van a necesitar los usuarios?

Este es uno de los apartados más importantes, junto con la siguiente pregunta, en relación al diseño del producto digital. Empezaremos a considerar el tipo de contenido, deberemos estructurar el contenido de forma genérica. Es importante definir que información necesitan los usuarios donde también estaremos teniendo en cuenta la experiencia de usuario y la conversión.

¿De qué manera van a necesitar esta información?

En relación a la pregunta anterior, de qué manera, esa información, a través de la interfaz van a necesitar la información los usuarios?

¿Cómo se presupone que va a funcionar?

Deberemos describir como será el funcionamiento global del producto, cómo se desempeñarán los usuarios por la aplicación?

¿Cuáles son los escenarios más negativos?

Deberíamos definir cuáles serían las situaciones más adversas, considerar distintos aspectos en nuestro producto digital.

¿Se podrá realizar distintas tareas a la par?

Deberemos plantearnos también algún aspecto técnico, en la aplicación se podrán realizar distintas tareas a la vez?

  • Facebook
  • Twitter
  • Buffer
  • Linkedin
Cosas a tener en cuenta: 

. Tener en cuenta que el prototipado, nos servirá como herramienta, pero nunca es un fin.

. Olvídate de los colorcitos y del diseño gráfico, deberá ser un diseño cuanto más claro mejor.

. Cuando diseñas no tienes la verdad absoluta, por lo tanto, tienes la visión de diseñador, pero sería conveniente más visiones, trabajar en equipo nos llevará de una mejor forma a la solución del diseño.

. No tengas miedo a tirar a la basura prototipos, ahí está la gracia, debe ser algo útil y que permita actuar rápido.

. A la hora de tratar con clientes, es importante si no tienen conocimiento acerca de Wireframes,  informarles de que no se trata del aspecto final sino un simple esquema, ya pueden acabar  denegando las validaciones de diseño,

. Cuanto más estemos en colaboración con el cliente, mejores resultados obtendremos, ya que este validará las propuestas de diseño de forma efectiva.

A lo largo del post, hemos visto que son los prototipos y wireframes, podemos decir, como broche final, que son el medio que nos permite tomar decisiones acerca de los diseños, llevar a cabo esas decisiones y finalmente validarlas.

Seguiremos informando! ¿ os gustaría conocer herramientas para el diseño de prototipos y wireframes? 

2 comentarios en “Prototipos y Wireframes, ¿ Qué son?

  1. Me gusta mucho el prototipo de productos y el Design Thinking. Me ha encantado tu post y que uses sin usar la palabra «impepinable» 😂

    Enhorabuena, Noemí

Deja un comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
Share This