¿Qué es un wireframe?
En este artículo vamos a ver qué es un wireframe y cómo te puede ayudar en tu metodología de trabajo.
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, 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. Pero antes de seguir hablando de esto mejor te explico primero qué es un Wireframe:
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:
- Presentar la idea básica de la funcionalidad e interacción.
- Dibujar la estructura y elementos de la navegación a nivel básico.
- 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:
- ¿Cuál es el objetivo de la aplicación? ¿Para qué sirve? ¿Qué objetivo principal tiene el usuario?
- ¿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. Explica que la creación de 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.
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.
Sigue aprendiendo diseño UX con nuestro curso online
Referencias
Muchas gracias por llegar hasta aquí, aquí te dejo las referencias de las que hablo en el artículo.
Artículo de Daniela
Cuentas de Instagram que te recomiendo seguir
Universidad Icesi
El hilo de los diseñadores franceses
