Cómo socióloga, cuando empecé a asomar mi cabeza en el maravilloso mundo de UX tuve que salirme del Paint, aprender nociones básicas de diseño web y entender a qué se refieren sus nombres fancy.
Cada vez que escuchaba Wireframe, Mockup, Prototipo mi cabeza hacía cortocircuito.
“Pero, ¿entonces? ¿Ese es el que va primero? ¿O el que vamos a probar? ¡Ah, es el que vamos a subir a producción!" :|
La realidad es que confundir estos términos implica no tener claro el proceso de diseño. Muchas veces se cree que este proceso está relegado sólo a los diseñadores. Pero lo cierto es que hoy en la creación de software participamos personas de perfiles muy distintos: desarrolladores, investigadores, diseñadores, marketers… y seguimos sumando.
Los Wireframes, Prototipos y Mockups son herramientas que nos ayudan a comunicar los momentos del proceso de diseño. En cada uno de ellos es importante entender qué evaluar y en qué puntos enfocarnos. Tener estos puntos en claro nos ayudará a entender el contexto de cada elemento y el tipo de feedback que se espera de nosotros.
Wireframe
¿Qué es? Una representación de baja fidelidad (lo-fi) de un diseño.
¿Cuál es su objetivo? Comunicar la estructura de la solución de diseño que estamos pensando: ¿Dónde estarán los menús? ¿El logo? ¿Los Call To Action principales? ¿Qué jerarquía tendrán los distintos grupos de contenido?
Se recomienda que sean en blanco y negro para que el análisis se centre en lo estructural y no en el contenido. Puede que su contenido de copy (texto) e imágenes aún no esté definidos, lo elemental es que se tenga una idea del espacio y jerarquía que ocuparían. Es importante que a la hora de analizar un Wireframe nos enfoquemos en estos aspectos y no en cuestiones secundarias como colores, tipo de contenido, diseño visual de la interfaz.
No se recomienda invertir demasiado tiempo en ellos: cuanto más rápido lo hacemos, más rápido nos ponemos de acuerdo sobre qué construir realmente. Si invertimos demasiado tiempo en ponerle detalle, estaremos gastando tiempo en más en una instancia que aún tiene muchos cambios por experimentar.
Imaginemos que queremos crear una nueva Home de Platzi… así es como empezaríamos.
¿Cuándo usarlos? El momento ideal para usar Wireframes la primer etapa de una tarea. Esta herramienta suele servir para entender limitaciones básicas a nivel diseño. Por ejemplo, a veces pensamos jerarquías de menús que se ven muy bien pero son costosas de construir a nivel desarrollo. En ese caso, el Wireframe ayuda a entender esta limitación, y a pensar alternativas en equipo. Los Wireframes también sirven como documentación de un proyecto, para entender las decisiones previas que fuimos tomando a lo largo de una tarea.
En proyectos que son muy grandes o de rediseños completos, he creado prototipos con Wireframes para testear dichas estructuras. No es lo más común, pero cuando el equipo tiene muchas dudas sobre la Usabilidad o Arquitectura de la Información de determinadas soluciones, es importante recibir feedback de los usuarios en esta instancia.
Prototipo
¿Qué es? Es una representación o simulación de las interacciones que va a tener nuestra solución de diseño.
Pueden hacerse tanto con Wireframes como Mockups. Hay diversas aplicación para probar, la más sencilla y mi favorita es Marvelapp, pero también están Invision, Flinto, Origami y muchísimas más. La cuestión es encontrar una aplicación que se adapte a tus necesidades y tiempos. También cada aplicación o sitio web tiene distintos niveles de interacción: cuanto más compleja, más complejo es el programa que tienes que buscar para emular esa interacción.
También hay muchos diseñadores que saben maquetar estas soluciones y prefieren testear sus propios prototipos: cualquier herramienta es válida, siempre y cuando puedas representar lo más fielmente posible la interacción que buscas para tu diseño.
Haz clic en la imagen para probar un sencillo prototipo de la app de Platzi.
¿Cuál es su objetivo? Experimentar, testear y comunicar las interacciones de nuestro diseño.
¿Cuándo usarlos? Usamos prototipos siempre que queramos validar el tipo de interacción que estamos planteando para una solución de diseño. Una vez que tienes el prototipo construido, lo ideal es salir a testear y probar esas interacciones con usuarios. Te sorprenderá encontrar que muchas cosas que pensaste no suceden como esperabas y probablemente tengas que iterar algunas de las interacciones.
Los prototipos también sirven como documentación del proceso. Personalmente, trabajando con clientes directos, los prototipos han sido una herramienta poderosa para comunicar no sólo la interacción sino también el diseño de una aplicación.
ProTip para diseñadores independientes: genera prototipos de tus diseños finales en alta fidelidad e inclúyelos en tu portfolio. Pocas historias hablan tan potentemente de tus habilidades como un prototipo bien armado.
Mockup
¿Qué es? La representación de una solución de diseño en alta fidelidad (hi-fi).
¿Cuál es su objetivo? Comunicar y representar, de manera estática, la estructura, el contenido, las funcionalidades básicas y las decisiones gráficas de una solución de diseño.
Continuando con el ejemplo del rediseño de la Home de Platzi, así se vería uno de nuestros Mockups.
¿Cuándo se usa? El Mockup se construye una vez que hayamos acordado la estructura de nuestra solución de diseño. Sirve para comunicar las decisiones visuales: los estilos, los colores así como la vista final de la estructura y sus funcionalidades.
En las etapas finales de un diseño hay varias instancias en las que sirve comunicar a través de un mockup:
Cómo ven, teniendo estos conceptos más claros es fácil definir en cuál necesitamos trabajar de acuerdo al objetivo que tenemos. Sketch es mi herramienta favorita a la hora de construir wireframes, prototipos y mockups. ¿Ya la has probado?
Como profesionales de la tecnología en Latinoamérica, nos queda como tarea encontrar buenas palabras en español para hablar de Wireframes y Mockup sin dejar a nadie afuera :) ¿Ustedes cómo los llamarían? ¿Les costó entender estas diferencias? Cuéntenos en los comentarios.
Beicker Jesus Zambrano Escalona
Jonathan Jiménez Soveranes
Alonso Rojas
Belen Ceballos
Alonso Rojas
Daniela Carvajal
Francisco Imanol Suarez
Antonio Luis Fernandez Dromundo
Fabio Chiummiento
Juli Farsky de Dada
Catalinaprieto
Wilson Marino Pablo Mendez
María Guadalupe Aranda González
Andrea Jurado Narvaez
Christian David Sánchez
Alicia Avila Martínez
rebeca Narvaez
Jonathan Jiménez Soveranes
Bianca Meléndez Arellana
José Liendo
Juan Castro
Kevin Morales
julio pupo
Roberto Alessandro Castro Montoya
Paola Edith Gonzalez
Alejandro Sol Villaseñor
Solarte Orozco Jose Luis
Solarte Orozco Jose Luis
En resumen yo lo que aprendí en todo el curso fue lo siguiente.
Los Prototipos
Son versiones básicas del diseño de nuestro producto. Nos ayudan a presentar soluciones rápidas de los problemas a resolver en nuestros diseños así como ponernos de acuerdo con los demás equipos para saber bien qué vamos a crear. Dependiendo de las versiones hay diferentes tipos de fidelidad.
Baja Fidelidad (Boceto)
Es la versión más básica. Donde vamos a definir el concepto y a decidir la mejor forma de comunicarlo por medio del diseño. Aquí no vamos a dar detalles, solo composición, proporciones, qué puede ir aquí, qué puede ir allá. Esta versión nos ayudará a crear una serie de normas muy básicas y flexibles sobre las que nos basaremos para crear nuestras versiones posteriores.
Mediana Fidelidad (Wireframe)
Aquí pasaremos a un software para crear una versión más detallada pero nunca completamente exacta. Solo daremos aproximaciones. Vamos a establecer tamaños, posiciones, elementos que irán de alguna forma en relación a otros, más o menos qué tan oscuro será un color, un grosor, etc. Pero siempre aproximaciones y abiertos al cambio. En esta versión (al igual que la anterior) no es bueno gastar mucho tiempo. Si en el Wrieframe gastamos de medio a 1 día, en el Boceto no debemos gastar más de 10 minutos.
Alta Fidelidad (Mockup)
Esta es la representación más cercana a la versión final. Depués de haber establecido lo básico (estructura, elementos, etc) aquí seremos tan específicos como podamos. El Mockup es una versión estática. Pero el Prototipo es la simulación funcional de la versión final. En ambas vamos a definir tamaños exactos, grosores, colores, tipografía, etc listos para su desarrollo.
Consejos previos al diseño
Hay que basarnos en objetos. Según el problema iremos armando unas notas donde tendremos nuestras categorías (Acción, Objeto, Contenido, Metadata, Interacción) e iremos definiendo lo que tendrá nuestro diseño para siempre trabajar en base a la resolución de problemas (porque eso es realmente el diseño). Que todo tenga como propósito resolver los problemas.
Aplicar el diseño modular. Conciste en diseñar componentes reusables. Nos ahorrará tiempo y esfuerzo ya que si nos equivocamos solo **cambiamos nuestro componente ** y listo. Siempre debemos diseñar siguiendo ciertos patrones de diseño o aplicando soluciones ya existentes. Por lo que también habrá que hacer una investigación para averiguar todas las soluciones ya existentes.
Muy buen resumen!
Yo los llamaría:
Wireframe = Armazón (ya que un armazón es la estructura básica de algo)
Mockup = Maqueta (ya que en una maqueta puedes ver como se estructuran los objetos y que forma tendrán en el producto final).
Armazón es una buena idea. Con Maqueta es más complicado, porque también se les llama maquetas a los prototipos funcionales hechos en código, antes de subirlos a producción. Eso puede generar confusión.
Se que los nombres pueden parecer complicados a veces, y me parece que está bueno intentar encontrarles una forma de entenderlos mejor, pero recordá siempre que también es importante estar al tanto de cómo los llama el resto de la industria. Saber utilizarlos bien nos ayuda a comunicarnos mejor entre equipos y llegar mejor a los resultados.
Concuerdo contigo, yo personalmente tengo la “suerte” de entender ingles y poder utilizar esas palabras en su idioma original.
Encontrarles un símil en otro idioma creo yo que requiere mucho más que saber de la semántica de una palabra, puesto que muchas veces al traducir no se traducen palabras sino culturas completas.
Un saludo.
PD: las comillas en suerte son mas que nada porque ya me cabrea el que muchas veces ni me salgan palabras en español 😦.
Wireframe = Bosquejo
Mockup = Maqueta
Excelente explicación muy clara !
Por fin pude entender la diferencia entre estos 3
Excelente explicación.
En Diseño industrial o diseño de productos, el mock up es una representación que cuenta con detalles pero nada de colores. De hecho, son maquetas Blancas, donde mas que nada se analiza la forma, funcion y algunos detalles precisos. El Prototipo es el último paso de la creación del producto, antes de producirlo en serie y largarlo al mercado. Por qué se nombran al reves??
Puedes tener prototipos de diferentes niveles cómo tu lo mencionas de baja o alta calidad. Y si como tu lo mencionas y como su nombre lo dice es para validar la experiencia del usuario frente al producto o servicio
Buena explicación! Me quedaría con los términos en Ingles!
Este material está en mis favoritos y me ha servido como material de consulta y referencia en varias ocasiones. Muy bien explicado, gracias.
Gracias por la aclaración
Que excelente explicación y muy resaltantes las diferencias entre ambos.
Es recomendable hacer el prototipo después del mockup? Es decir ya que hayamos revisado estructura, colores contenido etc?
Según lo visto en las clases, entiendo que sí. Primero haces una representación de baja fidelidad (wireframe), luego haces la de alta fidelidad (Mock Up) y por último, a esta representación de alta fidelidad le agregas las interacciones (Prototipo), con las cuales se pueda entender y presentar el flujo realista de tu producto :)
Excelente explicación, gracias!
Soy usuaria de Sketch y ahora estoy experimentando con Figma porque creo que con las funciones de animación que tiene podría llegar a hacer un mock up mucho más parecido al producto final.
Hola, Sketch funciona solo en mac?
Sip. Solo en Mac.
Figma es muy similar y multiplataforma, incluso puedes probarlo sin necesidad de instalar nada porque puede funcionar desde el navegador. :wink:
Sí, solo para Mac.
También puedes probar Adobe XD que es multiplataforma y hay curso sobre él en Platzi :)
resumidito
Aun no he probado sketch se ve buena herramienta, lo haré en el futuro.
Me encanto la explicación , un articulo amplio y con excelente contenido
Muy buen post, realmente aporta la información necesaria para el uso de las distintas denominaciones.
Muchas gracias @benjimel por tu articulo, me ayudó a aclarar las preguntas que tenia.
Muy claves esas dos preguntas para aplicarlas al estudiar temas: ¿que es? ¿cuando usarlo?, las seguiré usando.
En cuanto al nombre me quedaría con los que vienen en inglés para no reinventar la rueda. me quedo con:
Wirerame= Lo-Fi
Prototipo= Interacciones.
Mockups= Hi-fi
Esta explicación también encaja con los niveles de prototipo que se detallan en este curso.
yo los relacionaría asi: ¿Que opinan?
Prototipo baja fidelidad = Wirerame= Lo-Fi
Prototipo de alta fidelidad =
Prototipo= Interacciones.
Mockups= Hi-fi
muchas gracias!
upa! no encuentro como editar lo que escribí: corrijo: wirerame = Wireframe 😃
