Qué es un wireframe y qué ventajas tiene su uso

Qué es un wireframe y qué ventajas tiene su uso

En este artículo vamos a ver qué es un wireframe y qué ventajas tiene su uso en el diseño de productos y servicios digitales.

Desde Píldoras UX siempre hacemos incapié en que lo imporante no es conocer las herramientas sino conocer la teoría y sobre todo saber cómo aplicarla de manera que seas capaz de resolver problemas de forma más efectiva.

El mejor proceso a seguir cuando estás ante la resolución de un problema es el de generación de ideas dibujando wireframes, este proceso necesita de rapidez y creatividad, algo que es mucho más difícil de conseguir cuando estás enfrente de tu ordenador o computadora.

Para ello mi recomendación es que te acostumbres a tener cerca un papel y un lápiz para dibujar todas las ideas que te surjan en el proceso de ideación que tendrás que realizar cuando te enfrentas a un nuevo diseño de interfaz de usuario.

Qué es un wireframe (definición)

Pero antes de seguir hablando de qué es un wireframe y qué ventajas tiene su uso veamos su definición:

Un Wireframe es un esquema visual que transmite un nivel básico de comunicación, estructura y comportamiento durante el diseño de un sistema. Los wireframes son diseños de baja fidelidad que evitan la inclusión de una interfaz de usuario detallada o un diseño visual, transmitiendo lo suficiente para mostrar la idea central. (everyinteraction.com)

Un wireframe se usa comúnmente para idear lo que serán lo primeros bocetos del diseño de una interfaz de usuario en cuanto a su estructura y funcionalidad de un producto o servicio teniendo siempre en cuenta las necesidades de los usuarios. Los wireframes se utilizan al principio del proceso de diseño para establecer la estructura básica antes de agregar el diseño visual.

Los wireframes nos sirven para:

1. Presentar la idea básica de la funcionalidad e interacción.
2. Dibujar la estructura y elementos de la navegación a nivel básico.
3. Ofrecer una visión general de la interfaz de usuario.

Cómo crear un wireframe

El proceso es sencillo y lo mejor es que los materiales están al alcance de todo el mundo.

Antes de comenzar tienes que poder responder estas preguntas:

1. ¿Cuál es el objetivo de la aplicación? ¿Para qué sirve? ¿Qué objetivo principal tiene el usuario?
2. ¿Quién lo está haciendo? ¿quién es el usuario final, el que utilizará el servicio o producto digital?

El objetivo del wireframe es poder contestar ¿Cómo lo hacen?

Algunos diseñadores se saltan el proceso de crear wireframes y comienzan directamente a diseñar el prototipo con un programa en el ordenador. Creo que para realizar esto primero hay que tener una idea clara y no ayuda en nada hacerlo directamente en tu ordenador el brainstorming de ideas que puedes realizar, dibujar y plasmar en un papel para finalmente quedarte con la más adecuada. Saltarte este paso podría afectar a tu diseño final y que este no tenga la calidad adecuada por haberte quedado con la primera idea que vino a tu mente.

Cómo puedes aprender

Piensa que la mejor manera de aprender a plasmar tus ideas en wireframes es practicando, si no todavía no te atreves a comenzar a dibujar mi consejo es que comiences a seguir a profesionales que muestran su trabajo a través de sus redes sociales. A continuación te indico algunos de ellos:

Krisztina Szerovay

Uno de mis últimos descubrimientos fue el trabajo de la diseñadora Krisztina Szerovay, ella tiene mucha experiencia dibujando wireframes y además de ofrece mucho contenido gratuito y puedes apuntarte a su newsletter a través de ux knowledge base.

Krisztina ayuda a los estudiantes de UX y los diseñadores de UX que recientemente han comenzado su viaje en UX a entender los conceptos de UX, diseño de interacción y psicología cognitiva visualizados en estos bocetos.

Su colección también aporta valor a profesionales de UX con experiencia ya que las técnicas de dibujo y la forma en que presenta las ideas pueden ser inspiradoras.

Mi recomendación es que comiences a seguir a Krisztina a esta diseñadora UX.

Daniela Unzueta

Encontré a Daniela en Medium leyendo un artículo sobre sketching donde hace una analogía con la cocina muy original y divertida. En su artículo explica qué es un wireframe y cuál es el proceso de creación. Un wireframe no solo requiere creatividad sino que también puede complementarse con métodos diferentes y con la ayuda de algunos post-it que son un elemento básico en el diseño.

Puedes leer su artículo completo en este enlace.

Alumnos de la universidad ICESI

Y hablando de metodologías y elementos como post-it no puedo dejar de nombrar esta universidad colombiana que ha dado mucho de que hablar este año, fueron nombrados por la gente del podcast de UXPodcast y también en un hilo de diseñadores franceses en linkedin. Y es que los estudiantes de esta universidad hacen unos wireframes interactivos, sí como lo lees wireframes en papel interactivos, ¿no te lo crees? pues mira el video de abajo.   Ejemplo de wireframe interactivo publicado en el twitter de UX Podcast

En la web de la universidad hablan de ello en este artículo, el trabajo realizado por sus alumnos ha dado mucho de que hablar, por lo que podemos ver en su trabajo estos wireframes están preparados para hacer test de usuarios reales y no solo para captar y explicar una idea.

Si te ha gustado este artículo sobre qué es un wireframe y qué ventajas tiene su uso, compártelo en tus redes sociales 🙂

Comienza aprendiendo diseño UX

Te recomendamos que veas nuestro seminario online gratuito de «Los 3 errores a evitar para aprender Diseño UX» disponible en nuestro canal de youtube.

Cada mes a partir de septiembre del 2019 realizaremos un seminario gratuito al mes así que te recomendamos que te subscríbete a nuestro canal.

Aprende los conceptos básicos del diseño UX

Me alegra que te interese este artículo. Si interesa aprender diseño de experiencia de usuario, te animo a que te apuntes a nuestro curso básico online.  Más información haz clic en la imagen inferior.

Referencias

Muchas gracias por llegar hasta aquí, aquí te dejo las referencias de las que hablo en el artículo.

Artículo de DanielaHow to Cook Wireframes Sketches

Cuentas de Instagram que te recomiendo seguirKrisztina Szerovay (@sketchingforux) * Instagram @ux_ui_wireframes * Instagram photos and videosCreate beautiful flow charts (@wireflow) * Fotos y videos de Instagram
Web Designer Kassandra (@heyimkass) * Instagram photos and videos

Universidad IcesiInformation Architecture Icesi (@ia.icesi) * Instagram photos and videos

El hilo de los diseñadores francesesLaurent Gallen on LinkedIn: «UX MOBILE Quand des étudiants colombiens propose un zoning interactif…LG Design UX UI