¿Qué es un wireframe y cómo crearlo?

¿Qué es un wireframe y cómo crearlo?

Los wireframe son diferentes herramientas que se encargan de analizar la usabilidad y, además, son fundamentales para el mundo del diseño y desarrollo web. Sirve para tratar de convertir a las personas en clientes de forma eficiente y eficaz

A continuación, vamos a desgranar la información para que se entienda mejor, posteriormente, hablaremos de los tipos que hay y, por último, programas para la realización del wireframe.

 

Qué es un wireframe

Un wireframe es una representación visual con la estructura de la página web. No tiene ni fotos ni diseño, sólo texto, enlaces o cualquier tipo de explicación esquematizada.

El trabajo final es la página web o aplicación en sí, esto es un adelanto de lo que será el proyecto cuando finalice, con conceptos, jerarquías, contenido, estructuras y componentes básicos de diseño.

Un sinónimo podría ser “prototipo” o “prototipado” pero adaptado al término en una web o aplicación móvil. Es el esqueleto que va a tener la web o la app, los planos previos a montarla.

 

Cómo crear un wireframe

 

Un ejemplo podría ser una casa. En primer lugar, se dibujan los planos y se estudian los accesos a la vivienda. El wireframe sería el plano de la página web o aplicación móvil.

El wireframe de la web es la encargada de que se conecte la estructura, la arquitectura de la información, con el diseño visual de la web.

Un consejo es que se haga de forma sencilla, sin fotos, sin colores, sin nada que distraiga y desvíe el camino de formar el wireframe.

 

Ventajas de utilizar wireframe:

  • Detecta problemas y mejora la usabilidad: al ser tan sencillos y rápidos, te permiten exponerlos rápidamente y tener feedback para poder resolver los problemas relacionados con la usabilidad y funcionalidades propuestas.
  • Mejora y optimiza la experiencia de usuario: gracias a haber hecho ese esquema previo, cuando se realiza la página web, directamente se solventan una gran multitud de errores que, de la otra manera, lo más probable es que se hubieran cometido. Es más sencillo arreglar un wireframe que, ir cambiando la página web en sí, ya que, tiene un nivel de dificultad más elevado.
  • Focaliza de forma más sencilla determinadas decisiones de la estructura de la web o aplicación.
  • Ser más rápidos al diseñar: con una variedad de programas, se diseña de forma sencilla, se decide qué se cambia y cómo se hace y, cuando el wireframe está listo, se pasa a realizar la web.
  • Mostrar al cliente la estructura de la web antes de construirla para que el cliente sepa cómo va a quedar y que se ajuste a lo que quiere.
  • Mejor organización del trabajo: ya que se sabrá con precisión cada detalle de la web antes de construirla.
  • El cliente se sentirá parte del proceso.

Además, hay dos tipos de wireframe. Depende de la precisión o detalle con la que se realicen.

 

Wireframe de baja fidelidad

Es un primer boceto muy simple de lo que va a ser el resultado de la página web y dar una idea general. Se puede resumir como un dibujo en bruto o un boceto rápido, tienen menos detalles y son rápidos de reproducir. Estos wireframes ayudan a un equipo a trabajar y colaborar de forma más efectiva debido a que son más abstractos, usando rectángulos y etiquetas para representar el contenido. El contenido de prueba o el texto de relleno, muestra el contenido de forma simbólica para representar datos cuando el contenido real todavía no está disponible.

Se puede realizar en alguna aplicación o a mano alzada en un papel o pizarra.

 

Qué es un wireframe

 

Wireframe de alta calidad.

Este es un boceto que se acerca más a la realidad, se verá el diseño de la página web.

Esto va a permitir que en las primeras fases del proyecto se puedan tomar decisiones sin que afecte al desarrollo posterior. En esta etapa de wireframe, el nivel de detalle es muy alto, ya que se acerca mucho al diseño final de la página web y se necesita más tiempo para ser creado. Para proyectos de esta envergadura, es común utilizar para realizar wireframes, programas especiales para ello, que posteriormente comentaremos.

 

Cómo crear un wireframe

Hay dos tipos de herramientas, las descargables y/u online.

En las primeras no necesitamos internet y en las segundas no necesitamos un buen ordenador o sistema operativo acorde al programa.

A continuación, voy a mencionar algunos programas para realizar los wireframe:

  • Sketch: es la herramienta estrella, podrás hacer un diseño visual muy avanzado y customizado, aunque la versión gratuita es limitada en el tiempo. Sirve tanto para hacer wireframe, como prototipos, Sketch o crear Mockups de tus webs.
  • Invision: es muy parecida a la anterior, se puede crear desde un wireframe para la primera propuesta hasta la creación de toda la interfaz de interacciones para la web que necesites.
  • Adobe XD: es también muy usada, ya que es muy potente y buena. La primera versión es gratuita, aunque si quieres compartir proyectos con el equipo, se necesita espacio en la nube y suele ser limitado.
  • Figma: es muy potente para la realización de wireframe o diseño final.
  • Axure: sólo permite una prueba gratuita de un mes y es descargable, es bastante intuitivo. El programa está bien, pero si necesitas hacer un diseño final, es mejor utilizar una de las anteriormente mencionadas.
  • UXPin: es sencilla de utilizar, ya que se puede arrastrar y soltar. Se puede realizar hasta dos protitipos de forma gratuita, para los demás hay que pagar la licencia.
  • Mockflow: esta herramienta se utiliza de forma online, aunque tienen la versión offline para que no se necesite internet cada vez que se vaya a realizar un wireframe. Puedes realizar un proyecto de forma gratuita y luego pasar a la versión de pago con 3 meses gratis.
  • Wireframe.CC: esta herramienta es puramente online y nos permite crear bocetos y Wireframes de la web o aplicaciones móviles. Es fácil de utilizar.
  • Adobe Illustrator, Photoshop y Powerpoint: con cualquiera de estas se puede realizar con cuadrados, círculos y curvas un wireframe perfecto para el desarrollo de la web, no hace falta nada más. Lo mejor de todo es que se puede modificar todo lo que queramos, como queramos.

Hay que diferenciar entre wireframe, prototipo, sketch y mockup, ya que en el mundo UX y UI tienen distintos significados.

El sketch es el boceto inicial en papel (un dibujo), wireframe es el boceto en papel o digital con detalles (esquema), el prototipado es la interacción y procesos de toda la web digitalmente y mockup la representación más avanzada de diseño.

 

¿Es fundamental realizar un wireframe antes de diseñar una página web o una aplicación móvil?

Depende del tamaño del proyecto, ya que, si es pequeño, se puede tener en la mente sin trasladarlo a ningún formato.

Cuando el proyecto es de gran magnitud, sería conveniente realizar un wireframe para que se vea cómo va a quedar el proyecto.

Los wireframes se enfocan en los tipos de información que será demostrada, la cantidad de funciones disponibles, las prioridades relativas de la información y las funciones, las reglas para mostrar algunos tipos de información y el efecto que tienen en la pantalla.

 

Regalito por llegar hasta el Final

Por ser uno de nuestro lectores te regalaremos un pack con plantillas de wireframes ya diseñados en formato SKetch para que no tengas que empezar desde cero, y lo más importante ¡Totalmente GRATIS!

 

👉 Decargar plantilla Gratuita de Wireframes 👈

 

Qué es un wireframe

 

 

 

 

5/5 - (3 votos)