Wireframe: Qué es y cómo hacer uno

|

Muchas veces comenzamos y acabamos un diseño web o una aplicación móvil sin haber realizado el proceso previo de análisis de los objetivos, distribución de los elementos y diseño de la interacción, cayendo en un error muy típico del mundo del diseño web.

En el diseño centrado en el usuario y la usabilidad, existe un proceso clave que nos ayudará en el desarrollo eficiente de la web: El Wireframing.

Te acaba de sonar a chino, ¿verdad?

Los wireframes o prototipos son herramientas fundamentales para analizar la usabilidad, y son imprescindibles en el mundo del diseño y desarrollo web para tratar de convertir nuestros visitantes eficientemente y eficazmente, y estas herramientas o procesos pueden ayudarnos en esta fase.

Por ello, quiero explicarte qué es un wireframe para una página web, cómo hacer un wireframe y ejemplos de wireframe para ayudarte a verlo de forma visual.

¿Qué es un Wireframe?

Un wireframe es una representación visual con la estructura de las páginas de una web. El wireframe no tiene fotos ni diseño, tan solo texto, enlaces o cualquier explicación de forma esquematizada.

No es un trabajo final, sino un adelanto de lo que será el proyecto con su concepto, jerarquías de contenido, estructuras y componentes básicos del diseño.

Cuando hablamos de prototipado, se trata de una primera versión de algo que se fabrica, por lo que esto habría que trasladarlo al término en web o App.

Por ejemplo, cuando hacemos los planos de una casa que se va a construir, previamente creamos la distribución y pensamos cómo vamos a circular dentro de ella, ¿verdad?

Pues sería lo mismo, pero trasladado a un diseño de página web o aplicación móvil.

Un consejo es que tu Wireframe sea muy simple, no utilices colores, tipografías o  dibujos complejos, ya que esta fase no es de diseño y perderíamos el foco del esquema. Aquí puedes ver un ejemplo de wireframe que creé para una página de producto.

 

Ahora que ya sabes qué es un wireframe, te voy a nombrar algunas de las ventajas de utilizarlos en el proceso de diseño:

Te permite detectar problemas y mejorar la usabilidad.
Mejora y optimización de la experiencia de usuario.
Focalizar de forma más sencilla en determinadas decisiones de la estructura de la página web o aplicación.
Ser más rápidos a la hora de diseñar.
Mostrar al cliente la estructura de la web antes de construirla.
Mejor organización del trabajo (y más si es en equipo).
El cliente se sentirá parte del proceso, ya que estará presente en cada momento del desarrollo.

Además, encontramos dos niveles de elaboración de un Wireframe, en función de la precisión o detalle con la que se realicen: wireframes de baja o de alta fidelidad.

Wireframe de baja fidelidad

Es un primer boceto muy simple de lo que va a ser el resultado para darnos una idea general.

Seguramente lo que establezcamos en este wireframe variará, pero viene bien para tener una primera visión. Podría hacerse a mano alzada en un papel o en una pizarra.

Wireframe de alta fidelidad

Este boceto se acercará más al resultado final, nos aproximará a lo que será el diseño de la página web.

Esto permitirá que en las primeras fases del proyecto se puedan tomar decisiones sin afectar al desarrollo posterior.

¿Cómo hacer un Wireframe?

Encontramos dos tipos de herramientas para crear wireframes: descargables y online.

En las primeras contaremos con la ventaja de que no dependemos de internet, y en las segundas, de que no necesitamos tener un buen ordenador o un sistema operativo acorde al programa y son totalmente accesibles.

Para elegir una entrará en juego la facilidad de uso y tus preferencias, así que te voy a decir cuáles son las que conozco para que decidas tú por tu preferida.

Adobe Illustrator y Power Point

Creías que empezaría a decirte herramientas raras, ¿verdad? Pues empiezo por las que son mis favoritas y que considero muy accesibles (sobre todo PowerPoint).

Con las dos podemos crear vectores en forma de elementos como cuadrados, círculos, cruces, y crear un wireframe perfecto para el desarrollo de la web, no hace falta nada más.

Y lo mejor de todo, son muy flexibles, ya que podemos modificar lo que queramos como queramos.

Aquí te dejo también un tutorial de Illustrator para que aprendas a utilizarlo: Tutorial de Illustrator.

wireframe illustrator

A mano

¿Te has vuelto a sorprender? Para mí la mejor herramienta para hacer un boceto de baja fidelidad es hacerlo a mano, un papel y un bolígrafo, y… ¡que venga la inspiración!

Ahora sí que empiezo a decirte herramientas menos conocidas y que pueden ayudarte en el proceso (tenía que empezar por las que utilizo en mi día a día jajaja).

Sketch

Esta herramienta la probé hace un par de meses y me gustó mucho, pero como la mayoría, su versión gratuita es limitada en el tiempo y hay que pasar a la de pago.

No solo sirve para crear el esquema de tu wireframe, prototipo o sketch, sino para crear mockups de tus webs con el diseño final.

Descarga: Sketch
Precio: 99$

sketch

Axure

Axure solo permite una prueba gratuita de 30 días y es descargable, pero aquí podrás determinar si es la más acorde para tus trabajos.

Con esta herramienta puedes crear las conexiones e interacciones de las páginas de forma muy sencilla, ya que se trata de arrastrar y soltar los elementos del panel de la izquierda, y darle las personalizaciones correspondientes desde el panel de la derecha.

Podemos llegar a crear un wireframe o un prototipo muy completo como el que te pongo de ejemplo en la siguiente imagen.

Descarga: Axure
Precio: Versión gratuita de 30 días, luego 29$ o 49$.

axure

UXPin

Esta herramienta me gusta mucho porque no solo te permite la realización del prototipo, sino que puedes aproximarte al diseño de forma muy sencilla con su panel de drag&drop (arrastrar y soltar).

Puedes hacer hasta 2 prototipos de forma gratuita, pero para los siguientes deberás pagar su licencia.

Descarga: UXPin
Precio: Gratis, 12$ o 20$.

uxpin wireframes

Mockflow

Lo que más me gusta de esta herramienta es que podemos hacer nuestros wireframes de manera online (lo cual para mí personalmente es muy cómodo).

Cabe destacar que tienen la versión offline para que no requieras de internet cada vez que vayas a realizar un wireframe.

En su versión gratuita puedes probar hacer un proyecto, y luego pasar a la de pago (te ofrecen 3 meses gratis).

Acceder: Mockflow
Precio: 14$, 29$, 89$.

mockflow

Microsoft Visio

Tengo que decirte que no he probado esta herramienta, pero dicen que funciona bastante bien para crear flujos de navegación y esquemas, por lo que vendrá bien a la hora de hacer wireframes.

Si tienes el pack de Microsoft podrás acceder a él dentro del precio anual o mensual que tengas asignado.

visio-microsoft

Wireframe.CC

Esta herramienta también es online y nos permite crear bocetos y wireframes de nuestras páginas web o aplicaciones móviles.

Es una herramienta muy sencilla de utilizar, ya que nos presenta un lienzo en blanco con cuadrícula para alinear los elementos, y solo tendremos que organizarlos como queramos.

Acceder: Wireframe.cc
Precio: 144$, 390$ o 990$ en función del número de usuarios.

wireframe-cc

Diferencia entre Wireframe, prototipo, sketch y mockup

Algunos expertos recalcan la diferencia entre wireframe, prototipo, sketch y mockup, ya que todos ellos tienen significados distintos en el mundo del UX y UI.

Para empezar, un wireframe será el plano (en papel o digital), a diferencia del prototipo, que será el conjunto de wireframes que definan la interacción de la web, es decir, el prototipo será con el comportamiento y funcionamiento de la web de forma digital.

Por otro lado, también nos encontramos con el término “Sketch” o “Sketching”, el cual es el boceto inicial en papel del sitio web de forma muy básica. Vamos, que es el primer dibujo que trasladamos al papel o pizarra cuando vamos a empezar el proyecto.

Y por último, para que no los confundas, también tenemos el mockup, que es un paso más allá del wireframe, sketch y prototipo, ya que sí que incluirá colores, tipografías, elementos, dimensiones y tamaños e incluso podría llevar textos (o el típico Lorem Ipsum).

En conclusión, sketch es el boceto inicial en papel del sitio web (dibujo), wireframe el boceto en papel o digital con detalles y elementos del sitio web (esquema), prototipado, la interacción y procesos de toda la web en formato digital (interacción), y mockup una representación más avanzada (diseño).

¿Lo entiendes mejor? Al final son 4 pasos que debemos de realizar para un buen diseño.

¿Es necesario hacer un Wireframe antes de diseñar una página web o una aplicación móvil?

Para un proyecto pequeño y sencillo es muy probable que la fase del boceto inicial la tengamos en la mente y no la traslademos a ningún formato.

Pero cuando tratamos con proyectos de gran magnitud, es imprescindible hacer cada uno de estos pasos para ir validando la idea.

También es importante tener en cuenta los objetivos del proyecto, ya que sin objetivos no se podrían tomar decisiones de diseño, por ello el cliente debe ser partícipe en esta tarea y decirnos qué es lo que quiere conseguir (será lo primero que tengamos en cuenta antes de empezar).

Espero que a partir de ahora te animes a realizar este proceso previo en tu proyecto y me cuentes los resultados en los comentarios.

¿Crees que es importante la fase de prototipado y wireframing?
¿Conoces alguna otra herramienta para hacer un wireframe?

Consultora de Marketing Digital especializada en diseños web que conviertan. Mi objetivo es impulsar tu negocio mediante un diseño con estrategia que aumente tus conversiones y te dé más notoriedad en internet.

4 comentarios en “Wireframe: Qué es y cómo hacer uno”

Deja un comentario

Responsable: Bego Romero (Begoña Romero)
Finalidad: Gestión de los comentarios de las publicaciones
Legitimación: Consentimiento del interesado
Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. Los boletines electrónicos o newsletter están gestionados por entidades cuya sede y servidores se encuentran dentro del territorio de la UE o gestionados por entidades acogidas al acuerdo EU-US Privacy Shield.
Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional. Si no facilitas los datos solicitados como obligatorios, puede dar como resultado no poder cumplir con la finalidad para los que se solicitan