Website wireframes: Qué son y cómo diferenciarlos de los Mockup y de los prototipos

Desde Nubulus sabemos que estos tres conceptos pueden dar lugar a confusión cuando uno se inicia el diseño web. Y es completamente normal, no sólo porque pueden ser palabras nuevas sino porque desgraciadamente es frecuente encontrar sus significados intercambiados o, incluso, que se hable como si fueran conceptos sinónimos. Sin embargo, aunque todos ellos se refieran a etapas del diseño web, describen fases diferentes dentro del flujo de trabajo. 

 

 

Wireframe, Mockup y Prototipo: Diferencias.   

• Webiste wireframe: Los wireframes son bocetos esquemáticos donde se plantea la arquitectura básica de un proyecto, es decir, la colocación de los contenidos. Estos se realizan durante la fase más inicial y son el tipo de representación más básica de un proyecto. Es por ello que, en esta etapa inicial, no se utilizan herramientas visuales como colores, tipografías o textos, que nos puedan distraer de la parte más importante de esta etapa: La estructura del contenido web. 
• Mockup: Los mockups son representaciones más realistas del producto final. Estos van un paso más allá que los wireframe, ya que en esta fase se aplican elementos visuales, como diferentes tipos de topografías o bien la gama de colores finales, consiguiendo así una representación más cercana del producto final. Sin embargo, estos siguen sin ser funcionales, tratándose aún de un esquema.
• Prototipo: Es en esta etapa cuando nuestro proyecto se parece más a ser su versión final, ya que los prototipos ya son versiones funcionales. Es pues, la etapa en la que se puede simular la interacción y la experiencia del usuario. La manera más adecuada para probar el funcionamiento web. 

  

En resumen, los wireframes utilizan al principio del flujo de trabajo y definen la estructura básica de nuestro proyecto, los mockup, en cambio, definen el aspecto visual y el diseño, y por último, los prototipos, los cuales se utilizan para probar la interacción del usuario con la web. 

  

¿Qué beneficios aportan los wireframes en nuestro proyecto? 

Ya que, los wireframes son una representación básica y sencilla de realizar, permiten crear varias versiones de manera rápida, permitiendo así, una visualización clara de la colocación de todos los contenidos web. 

Esto también los convierte en una herramienta fundamental para facilitar la comunicación, ya sea con miembros del mismo equipo o con los clientes, ya que permite visualizar ideas de manera sencilla y efectuar cambios de manera rápida. 

  

¿Cómo puedo crear un wireframe? 

Actualmente existen una gran cantidad de herramientas que se adaptan a las diferentes necesidades de cada proyecto, así como, a las habilidades del diseñador y sus recursos. 

Estas van desde las más clásicas, como es el dibujo con lápiz y papel, hasta las más avanzadas, que serían el uso de herramientas específicas como Adobe Xd, Blasamiq, Mogups o cazón, Invision, Sketch, etc. También podemos encontrar herramientas con un uso más general, pero sin que dejen de ser útiles para el diseño de wireframes como Photoshop, cambios, Powerpoint o Illustrator. 

  

Los wireframes son, pues, un paso esencial para el diseño web, ya que, nos permiten crear una estructura bien definida desde el primer momento, ahorrándonos así tiempo y costes inesperados.