¿Qué es un wireframe? + Cómo crear uno

Read in English. (Leer en inglés.)

Un wireframe es una representación visual de lo que los usuarios verán y con lo que interactuarán cuando lleguen a un sitio web, página web o aplicación móvil. El propósito de un wireframe es visualizar un concepto de experiencia de usuario (UX) antes de codificar un sitio web o aplicación.

Piensa en un wireframe como un boceto digital, una maqueta o un prototipo que muestra la posición de cada elemento dentro de una interfaz de usuario, incluyendo texto, botones, imágenes, videos y menús. Un wireframe también puede incluir información sobre cómo debe funcionar el sitio o la aplicación.

Los wireframes generalmente se clasifican en términos de fidelidad, o qué tan cerca se parecen al sitio, página o aplicación en la que finalmente se convertirán. Aquí hay algunas distinciones: 

• Los wireframes de baja fidelidad son las maquetas más básicas y aproximadas de un sitio, página o aplicación, que muestran cómo se colocarán todos los elementos en la pantalla. Por lo general, incluyen elementos como texto genérico y marcadores de posición para imágenes, encabezados, menús y botones.

• Los wireframes de fidelidad media incluyen más detalles que los de baja fidelidad. Los detalles pueden incluir un espaciado más preciso entre elementos, titulares reales y elementos de diseño adicionales.

• Los wireframes de alta fidelidad son más realistas en apariencia que los de baja y media fidelidad y se parecen más a los sitios o aplicaciones que representan. Un wireframe de alta fidelidad puede incluir detalles visuales como fuente, colores e imágenes.

¿Quién usa wireframes?

El wireframing es un proceso que las personas en una variedad de roles pueden usar para dar vida a las ideas. Ya sea que te interesen los wireframes para proyectos profesionales o personales, puede ser útil investigar posibles trayectorias profesionales y obtener inspiración de cómo las empresas usan wireframes para enfrentar los desafíos del mundo real. A continuación, algunos títulos de trabajo que puedes encontrar en tu investigación de wireframes y algunas de sus funciones principales:

• Los diseñadores de UX y UI realizan investigaciones sobre cómo los usuarios interactúan con aplicaciones y sitios web para diseñar experiencias digitales atractivas. 

• Un diseñador gráfico crea conceptos visuales, incluyendo los diseños de sitios web en algunos casos, para comunicar ideas a las audiencias. 

• Un diseñador web determina cómo se mostrará un sitio web a los usuarios, incluyendo los colores, las fuentes, las imágenes, el diseño general y la estética que impulsan las experiencias de los usuarios. 

• Un diseñador de aplicaciones determina la apariencia de una aplicación móvil, incluyendo los elementos visuales, cómo se organizan y la funcionalidad de la aplicación.

Además de los roles anteriores, también puedes descubrir que los dueños de negocios, artistas, diseñadores creativos, autónomos, educadores y aficionados usan wireframes para visualizar las experiencias del usuario. Por ejemplo, un fabricante de joyas que crea un sitio web de comercio electrónico para vender joyas y un maestro que crea una aplicación en la que los estudiantes acceden a las tareas pueden usar wireframes para intercambiar ideas.

Beneficios del wireframe

Los wireframes pueden ser una forma útil de iniciar el proceso de creación de un sitio web o una aplicación móvil. A medida que te aventuras en wireframing, considera estos beneficios:  

• Puedes explorar un concepto inicial sin tomar decisiones sobre las fuentes, colores u otras características de diseño del producto terminado.

• Puedes explorar la estética, la arquitectura de la información y la funcionalidad sin escribir ningún código. 

• Los colaboradores y las partes interesadas pueden ofrecer comentarios sobre el wireframe antes de que se finalicen las características.

• Un wireframe puede ser fácil y económico de crear y puede reducir el ensayo y error y el gasto de crear el producto terminado. 

Software de wireframe

Una variedad de programas de software de wireframes están disponibles para crear una representación visual de tu sitio web, página web o aplicación móvil. Hemos revisado cinco programas de software en la tabla a continuación y enumeramos el costo, las características y las puntuaciones en Capterra*, un sitio donde los usuarios revisan y descubren software.

*Los puntajes de software en Capterra se basan en una combinación de factores, como las opiniones de los usuarios, la funcionalidad del software, las características ofrecidas, la facilidad de uso, el servicio al cliente y otros criterios relevantes.

¿Qué hace que un wireframe sea exitoso?

Si bien puedes construir wireframes con diferentes niveles de fidelidad, utilizando diferentes softwares, asegurarte de que tu wireframe tenga las siguientes cualidades puede facilitar el desarrollo de tu producto terminado.

1. Sencillez

Tu wireframe debe centrarse en los componentes más importantes de tu concepto de sitio web o aplicación: los elementos que vas a incluir en la página, dónde aparecerán y cómo los usuarios interactuarán con ellos. Un wireframe de alta fidelidad puede incluir fuentes, colores o imágenes reales. Deberás mantener el wireframe libre de desorden y sobrecarga de información para que los colaboradores lo puedan interpretar con facilidad.

2. Descripciones claras de la usabilidad

Cualquier nota que agregues a un wireframe debe centrarse en describir cómo los usuarios interactuarán con los elementos de la página. Estas descripciones deben ser cortas y claras, por ejemplo: “El botón hace clic para pagar en una nueva ventana”. Incluye estas descripciones solo cuando la usabilidad no sea evidente en las imágenes del wireframe.

3. Estilos y símbolos reutilizables

Los estilos y símbolos reutilizables, como cuadros para imágenes y líneas horizontales para texto, pueden acelerar el proceso de creación de wireframes, mantener los wireframes consistentes y hacerlos más fáciles de interpretar.

Wireframe de sitio web vs. wireframe de aplicación móvil

Un wireframe de sitio web y un wireframe de aplicación móvil difieren en varias formas clave, incluyendo el tamaño y el diseño, cómo interactúan los usuarios con los elementos de la interfaz y cómo funcionan esos elementos. Por ejemplo, los usuarios del sitio web pueden hacer clic en los elementos de la página con el mouse o tocar los elementos con una pantalla táctil, mientras que los usuarios de aplicaciones móviles pueden tocar los elementos para usarlos.

Cómo crear un wireframe

¿Estás listo para crear tu primer wireframe o mejorar tu flujo de trabajo de wireframing existente? Sigue los pasos a continuación.

1. Escribe una breve descripción del producto final

Si estás investigando sobre wireframes, es posible que tengas una idea para un sitio web, página web o aplicación móvil a la que quieras dar vida. Considera mirar ejemplos de sitios web o aplicaciones que te guste usar o que hayas encontrado fáciles de navegar para obtener ideas para la experiencia que deseas ofrecer a tus usuarios.

Comienza escribiendo una descripción de lo que deseas crear y la experiencia que deseas que tengan los usuarios. Escribir una breve descripción y tenerla a mano puede ayudarte a visualizar la apariencia final del producto terminado.

Aquí hay un ejemplo: 

“Estoy creando un sitio web de peluquería que permite a los usuarios reservar citas con estilistas, revisar servicios y precios, leer y publicar comentarios de clientes y examinar nuestra galería de peinados, todo desde la página de inicio.”

2. Dibuja el producto final a mano

Haciendo uso de tu descripción escrita, comienza a dibujar a mano la interfaz de usuario del sitio o aplicación. Dibujar un wireframe a mano puede ser un proceso rápido y, por lo general, requiere un esfuerzo y un costo mínimos. Además, un boceto dibujado a mano puede servir como precursor para crear un wireframe digital, especialmente si vas a utilizar un software de wireframe por primera vez.

Tu boceto dibujado a mano puede incluir un área para menús de navegación, cuadros para imágenes y botones de llamados a la acción (CTA, por sus siglas en inglés) y líneas horizontales para texto y titulares. También debes tener en cuenta las dimensiones de diferentes dispositivos y pantallas. La clave aquí es no centrarte demasiado en la estética del boceto dibujado a mano, ya que puedes refinar estos detalles en una etapa posterior del proceso de wireframing y diseño. Más bien, concéntrate en el diseño general de la interfaz.

3. Selecciona el software de wireframe

Cuando estés listo para convertir tu boceto en un wireframe digital, selecciona el software de wireframe que mejor te ayude a alcanzar tus objetivos. Haciendo uso de la tabla anterior, considera el costo, las características y la facilidad de uso. Lee la documentación de soporte o realiza tutoriales sobre cómo usar los programas que más te interesan. Si tienes disponibilidad, regístrate para obtener pruebas gratuitas antes de la compra para que puedas tomar una decisión basada en la experiencia.

4. Construye tu wireframe

El siguiente paso es construir tu wireframe usando software y el boceto dibujado a mano. Puede resultarte útil mirar ejemplos de wireframes mientras construyes el tuyo. Asegúrate de incluir el diseño de todos los elementos de la página y las notas sobre cómo funcionarán los elementos, mientras excluyes el contenido real y los detalles de diseño excesivos.

5. Pide retroalimentación a los demás

Obtener retroalimentación de los demás es un paso importante en la creación de wireframes que se convierten en sitios y aplicaciones fáciles de usar. Si estás construyendo un wireframe para ayudarte a completar un proyecto personal, solicita la ayuda de personas en tu red. Si estás construyendo un wireframe para proyectos profesionales, solicita a las partes interesadas y colaboradores tu opinión.

Las preguntas que podrías hacer incluyen:

• “¿Qué tan fácil sería usar este sitio o aplicación?”

• “¿Qué tan intuitivo es el diseño?”

• “¿Hay áreas que sean confusas o desordenadas?”

• “¿Qué cambios recomiendas?”

6. Implementa los comentarios

Una vez que reúnas los comentarios, el siguiente paso es implementarlos en tu wireframe. Es posible que necesites alterar el diseño por completo, convertir un wireframe de baja o media fidelidad en uno de alta fidelidad o pasar por varias rondas de comentarios e implementación. Con un wireframe finalizado, puedes comenzar a crear tu sitio o aplicación.

Toma los primeros pasos de wireframing con Coursera

Tomar cursos en línea puede ser una excelente manera de aprender técnicas de wireframing, diseño de UX y habilidades de codificación para crear experiencias digitales que los usuarios adoren. Echa un vistazo al Certificado Profesional de Diseño UX de Google en Coursera.