Principales diferencias entre wireframe, mockup y prototipo

por | Mar 18, 2021 | Diseño web y diseño gráfico | 0 Comentarios

Seguramente a la hora de crear y desarrollar una página web hayas escuchado hablar de algunos de estos tres conceptos, wireframe, mockup y prototipo. ¿Pero sabes qué son? ¿Conoces cuáles son sus principales diferencias y para qué sirven?

¿Cuáles son las principales diferencias entre wireframe, mockup y prototipo?

Por lo pronto podemos decir que cada uno se corresponde con las diferentes fases del proceso de diseño de una web. Ahora vamos a ir viéndolo más en profundidad.

¿Qué es un wireframe?

Como es lógico, el wireframe es una de las primeras partes de dicho proceso, se trata de la primera representación del diseño. Bien es cierto que existe un paso previo, el sketch que se corresponde con un primer boceto hecho a lápiz o bolígrafo sobre un papel y en el se plasman las ideas generales del proyecto.

Una vez realizado el sketch, es hora de plasmarlo en un wireframe. Se trata de una plasmación del proyecto en una escala de negros y grises sin elementos gráficos. Es decir, no se especifican tipografías, colores, etc,. Aquí ya sí es necesario tener conocimientos acerca de los productos, servicios, objetivos y público objetivo al que vamos a dirigirnos.

Por otro lado, también debemos de tener en cuenta aspectos como la experiencia de usuario y la usabilidad en todas y cada una de las fases que siguen a continuación.

Al final, un wireframe se trata de una representación en blanco y negro de recuadros y líneas donde se representa qué tipo de contenido y dónde irá ubicado.

¿Qué es un mockup?

Tras haber llevado a cabo un sketch y un wireframe, el siguiente paso es la elaboración de un mockup. Se basa en la representación del diseño mucho más visual donde incluimos los detalles del proyecto de manera estática. Es decir, todos aquellos elementos como vídeos, imágenes y botones por ejemplo, no muestran ningún tipo de interacción y se representan como elementos estáticos.

Son de gran ayuda tanto para el equipo de desarrollo como para el cliente final para que puedan ver más en profundidad como va a ser el resultado final.

¿Qué es un prototipo?

Y llegamos al último paso, el prototipo. Aunque la propia palabra lo diga y se trate de un prototipo, la idea es que se parezca lo máximo a la idea final del proyecto.

A diferencia del mockup, aquí ya sí incluimos interacción, por lo que aparte debemos de tener muy en cuenta tanto el contenido como la interactividad del sitio. Por otra parte, este es el momento de realizar pruebas en base a las funcionalidades del sitio, navegación y a la usabilidad para llevar a cabo los cambios pertinentes que sean necesarios.

Pues bien, acabamos de ver las diferencias entre wireframe mockup y prototipo. En definitiva cada una de las partes que componen el desarrollo web cuentan con su propia función y tienen el mismo grado de utilidad e importancia para poder mostrar un producto de calidad. Bien es cierto, que no siempre se aplican cada uno de ellos por diversos factores como pueden ser el tiempo o el presupuesto. Este es el caso del prototipo, pasando directamente al diseño final.

Para llevar a cabo alguno de estos procesos es necesario contar con una serie de expertos. ¿Tienes en mente llevar a cabo un desarrollo web para tu empresa o negocio? ¿Necesitas ayuda? Contacta con nuestro equipo, será un placer ayudarte en cada uno de tus procesos.

0 comentarios

Trackbacks/Pingbacks

  1. Los mejores consejos para desarrollar una app | App&Web - […] un boceto profesional donde se establezcan los elementos que se van a implementar en la app, las secciones o…
Enviar un comentario

Tu dirección de correo electrónico no será publicada.

Este sitio esta protegido por reCAPTCHA y laPolítica de privacidady losTérminos del servicio de Googlese aplican.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Solicita tu consultoría SEO gratuita con Mood 359, agencia de marketing online en granada

Artículos relacionados:

Optimización de  WordPress para la mejora de tu web

Optimización de WordPress para la mejora de tu web

Que Wordpress es un CMS (sistema de gestión de contenidos) de fácil aprendizaje ya lo sabemos muchos, y es que más del 40% de las webs en Internet se montan con Wordpress. Quizás pensabas que este dato sería más bajo y ahora piensas cómo poder destacar dentro de un...

¿Cuáles son los errores más comunes de usabilidad web?

¿Cuáles son los errores más comunes de usabilidad web?

Los errores más comunes de usabilidad web suelen conducir en una mala experiencia de usuario. Con lo cual podemos observar que se trata de uno de los aspectos fundamentales en el éxito o fracaso de nuestro sitio web. Antes de nada vamos a pasar a ver a continuación...

Neuromarketing aplicado al diseño web

Neuromarketing aplicado al diseño web

¿Neuromarketing aplicado al diseño web? Pues sí, marketing y neuromarketing son dos aliados que si ambos van mano a mano en tu estrategia harán que tu éxito esté aún más cerca. Pero, ¿sabes qué es el neuromarketing? ¿Quieres conocer cuáles son las técnicas más...

¿Cómo hacer una página web atractiva?

¿Cómo hacer una página web atractiva?

Una página web atractiva no se basa simplemente en que nuestro diseño web sea o no bonito. Debe hacer hincapié en una serie de requisitos como por ejemplo la funcionalidad. Y, por otro lado, debemos de tener en cuenta que nosotros no somos nuestro propio cliente, por...

Rebranding ¿Por qué es importantes renovarnos?

Rebranding ¿Por qué es importantes renovarnos?

Hoy en día es muy difícil poder diferenciarse en base a precio o calidad, por ello hacemos uso de nuestro poder de marca o Branding como nos gusta más llamarlo. Incluso en muchas ocasiones, debemos de llevar a cabo una estrategia de Rebranding, ¿sabes lo que es?...

Síguenos:

clic@mood359.com

• Granada, España

+34 623 064 407

¿Quieres Moodernizar el Marketing Online de tu negocio?

Porque agencias de Marketing Online hay muchas, ¿quieres ser Mooder?
Imagen de un perro en la zona de contacto de Mood 359

¡Te has suscrito satisfactoriamente!

¡Escríbenos!
1
¿Necesitas ayuda?
WahtsApp Mood
Hola 👋
¿En qué podemos ayudarte?