Para el que no está demasiado familiarizado con el diseño y más específicamente con el diseño UX (experiencia de usuario), las palabras wireframes y mockups pueden significar lo mismo: una representación de la estructura de una página web. Sin embargo, estos dos conceptos en realidad hacen alusión a dos cosas muy distintas.
Cada una de estas representaciones comunica una etapa distinta del proceso de diseño que abarca desde la estructura más sencilla y general hasta la más compleja y detallada.
¿Aún no ves la diferencia? No te preocupes, en el siguiente cuadro te explicamos cada una de sus características para que sepas para qué sirve cada representación y cuándo es mejor usarlas.
¿El punto en común entre el wireframe y el mockup?
Ambos se realizan antes de la ejecución del proyecto para tener una idea clara de lo que quiere el cliente y lo que se va a diseñar.
¿Cómo se hacen un wireframe y un mockup?
Hoy en día existen mucha herramientas que te pueden ayudar con esta labor. Aunque los wireframes son un bosquejo y podrían estructurarse a mano, es recomendable usar ciertos programas o aplicaciones que les den un look más limpio y profesional.
En el video que te presentamos a continuación te proponemos cuatro opciones que podrás usar para mostrar ambas representaciones.
Conclusión:
Tanto los wireframes como los mockups son importantes a la hora de plantear un proyecto de diseño. Mientras uno muestra los “ingredientes” del diseño, el otro presenta el producto ya horneado. ¿Te gustaría tratar este tema más a fondo? ¡Comunícate con Motion! Nuestro equipo de diseño está siempre preparado para asumir cualquier reto.
Referencias:
https://platzi.com/blog/wireframes-prototipos-mockups-que-son/