Qué es crear wireframes

Si alguna vez has intentado diseñar un sitio web o una aplicación sin un wireframe, entenderás por qué es importante el proceso de crear wireframes. Sin wireframes, ¿cómo pueden tú y tu equipo visualizar lo que intentan hacer? ¿Cómo organizas los flujos de usuario o determinas qué contenido va en cada pantalla?

“Es frustrante si las personas hacen comentarios sobre los aspectos visuales cuando lo que realmente necesitas es feedback de alto nivel, como ¿Es esto lo más importante?”, dice Tom Lowry, director de Promoción de Figma. El diseño excelente de productos y sitios comienza con un diseño inteligente de wireframes. Sigue leyendo para dominar cada etapa de creación de wireframes con los consejos profesionales y las herramientas de Figma.

¿Qué es un wireframe?

Los wireframes son esquemas básicos que ayudan a los equipos a alinear los requisitos, lo que da lugar a conversaciones de diseño UX más dirigidas y provechosas. Considera tu wireframe como la estructura básica de tu aplicación, sitio web u otro producto final. Tu wireframe muestra al equipo de diseño y a los stakeholders los esquemas básicos de páginas web, componentes y características esenciales, que incluyen lo siguiente:

• Disposiciones de pantalla
• Barras de navegación
• Componentes del diseño de UX y UI
• Elementos interactivos

En las primeras etapas del diseño, los wireframes de baja fidelidad usan texto lorem ipsum y cuadros simples como marcadores de posición para imágenes y videos. Esto ayuda al equipo de diseño, a los redactores y a otros miembros del equipo a centrarse en la funcionalidad básica para alinearse en la dirección correcta.

Comenzar con un diseño de wireframe limpio y minimalista también proporciona a los diseñadores UI/UX la posibilidad de iterar. Pueden recopilar feedback temprano de las pruebas de usuario sobre los elementos principales de UX/UI, sin distraer a los usuarios con detalles del diseño visual. Los equipos de diseño prueban diferentes conceptos, flujos de usuario y plantillas mientras trabajan para lograr la mejor experiencia de usuario.

Tres tipos de diseños de wireframe

Las posibilidades del diseño UX pueden parecer infinitas, pero la mayoría de los diseños de wireframe se clasifican en tres niveles básicos de fidelidad. Puedes trabajar con los tres tipos de diseño de wireframe hasta llegar a tu producto final.

1. Los wireframes de baja fidelidad son wireframes básicos enfocados en la disposición, la navegación y la arquitectura de la información. Muestran cómo se verá la interfaz, ya que ilustran los flujos de usuario con elementos clave de diseño UI. Los bocetos físicos en la pizarra pueden ser útiles en las primeras etapas de creación de wireframes, aunque no siempre son fáciles de compartir, guardar o modificar. Con la herramienta de creación de wireframes en línea de Figma, puedes crear, compartir e iterar con rapidez wireframes de baja fidelidad.
2. Los wireframes de fidelidad media ayudan a los diseñadores a iterar y dar forma al diseño final. Los equipos de diseño pueden agregar anotaciones y contenido mientras prueban diferentes enfoques para los flujos de usuario y los elementos de diseño UI, al delinear la funcionalidad principal y las interacciones clave. Esto permite que los equipos se decidan por el marco de diseño de wireframe final antes de agregar componentes de diseño visual.
3. Los wireframes de alta fidelidad se asemejan a las primeras maquetas de productos, con elementos de diseño interactivos y visuales, pero carecen de la funcionalidad de los prototipos de baja fidelidad. En este punto del proceso de diseño, podrías querer agregar elementos de marca como tipografías, colores y logotipos. De esta manera, puedes captar el aspecto y la experiencia del producto final para las pruebas de usuario.

Cuándo se deben omitir las etapas de wireframe

Muchos equipos de diseño asumen que deben comenzar con un wireframe de baja fidelidad y desarrollarlo desde allí. Eso tiene sentido cuando estás explorando nuevos conceptos de productos, para que puedas alinearte en componentes clave, iterar y luego agregar detalles de diseño visual más adelante. Pero, según Tom, hay razones para pasar directamente al diseño de wireframes de alta fidelidad.

“Si tienes un sistema de diseño establecido y el diseño que exploras es similar a otros que ya existen, es probable que las conversaciones no se desvíen demasiado por los detalles del diseño visual”, explica Tom. “En estos casos, explorar una idea de diseño con mayor fidelidad puede ser tan rápido y efectivo como antes”.

Siete mejores prácticas en el diseño de wireframes

Un wireframe eficaz puede ser tan simple como un boceto en una servilleta o tan complejo como una maqueta estática de producto. Al aplicar estas mejores prácticas en el diseño de wireframes, puedes coordinar las direcciones con tu equipo más rápido y avanzar con el mejor enfoque.

1. Identifica tus metas de diseño.

Antes de comenzar a esbozar o experimentar con plantillas de wireframe, define tus objetivos de diseño. Considera las necesidades de los usuarios y las acciones que deseas que realicen para lograrlas. Tal vez puedas ayudar al usuario a resolver un problema comprando un producto útil o invitándolo a suscribirse a un boletín educativo. Alinea a tu equipo de diseño con este objetivo, para que tus diseños de wireframe promuevan esa causa.

2. Elige el tamaño correcto para tu wireframe.

Tus wireframes deben coincidir con el tamaño de la pantalla que usará tu público objetivo. Naturalmente, un sitio web o una aplicación se verá diferente en una computadora portátil que en un dispositivo móvil. Con esto en mente, los tamaños estándar de wireframe para los tipos de pantalla son los siguientes:

• Móvil: 393 píxeles de ancho por 852 píxeles de alto
• Tableta de 11”: 834 píxeles de ancho por 1194 píxeles de alto
• Escritorio: 1440 píxeles de ancho por 1024 píxeles de alto

3. Mantén simple el diseño de tu wireframe.

Comienza tu wireframe usando colores en escala de grises, limitando las fuentes y sustituyendo los gráficos por cuadros. Asegúrate de que su plano cumpla con los requisitos del usuario en el nivel más básico. Si te concentras en detalles como errores ortográficos o esquemas de color, podrías pasar por alto un defecto en la experiencia del usuario. Para diseños simples en etapas iniciales, las tarjetas o las vistas previas truncadas pueden ser suficientes. Sin embargo, para interfaces repletas de contenido, Tom recomienda usar contenido real en lugar de texto de marcador de posición “lorem ipsum”. “Cuando comienzas a aplicar la arquitectura de la información en una interfaz de usuario, enumerar los elementos del menú 1-2-3-4 no resulta muy útil”, explica. “Entonces deseas usar contenido real”.

4. Mantén la consistencia del diseño.

Los wireframes no deberían causar distracción ni confusión. Los componentes similares deben tener el mismo aspecto en todos los wireframes, para que sean fáciles de comprender, iterar y codificar. Incluso si hay una ligera variación entre dos componentes relacionados, diferentes diseños pueden generar incertidumbre para los desarrolladores a lo largo de las páginas e iteraciones.

5. Haz que la navegación sea obvia.

Tus flujos de usuario deben ser fluidos e intuitivos. A medida que aplicas la arquitectura de la información a tu wireframe, considera dónde podrías necesitar apoyarla con señales de navegación y orientación. Si los usuarios deben consultar un mapa de sitio, su navegación y arquitectura de la información necesitan mejorar.

6. No te apegues demasiado a tu wireframe.

Incluso un wireframe de alta fidelidad sigue siendo un borrador que requiere modificaciones para transformarse en un producto final. Una vez que el equipo de diseño finalice el diseño del wireframe, es momento de colaborar con los desarrolladores y otros miembros del equipo creativo para añadir funcionalidad.

7. Aprovecha las herramientas para crear wireframes.

Los equipos de diseño necesitan wireframes que puedan compartir, guardar y convertir en maquetas en línea. El kit de wireframes de Figma incluye herramientas de diseño de arrastrar y soltar que facilitan tanto a los principiantes como a los profesionales del diseño la creación de wireframes personalizados de alta fidelidad.

Lista de verificación de diseño de wireframe

El proceso de crear wireframes te ayuda a planificar, construir y colaborar a lo largo de los ciclos de diseño y desarrollo, pero ¿cómo sabes cuándo has terminado? Cuando hayas podido completar estos puntos de tu lista de pendientes de creación de wireframes, tu wireframe estará listo para las maquetas y prototipos de mayor fidelidad.

Una vez que hayas terminado tu wireframe, revisa el alcance inicial de tu trabajo. Ahora que has delineado tu producto final, es posible que puedas perfeccionar tu estimación. Aunque sea solo un boceto con marcadores de posición, tu wireframe debería mostrar lo siguiente:

• Qué pantallas son esenciales para satisfacer las necesidades de los usuarios
• Flujo de usuarios a través de embudos de conversión
• Consideraciones de usabilidad, lo que incluye navegación y organización
• Objetivos principales y flujos de usuario para cada pantalla
• Elementos clave de diseño de UI, además de contenido y características interactivas en cada pantalla
• Cómo se integran los componentes de diseño para crear plantillas de pantalla

Cuando tu equipo de diseño inicia el proceso de diseño, es posible que no sepas exactamente cómo debería funcionar o verse el producto final. Los principiantes pueden sentirse tentados a omitir la creación de wireframes y depender de modelos existentes para los diseños, pero eso puede llevar a una experiencia de usuario poco inspiradora y poco útil. Los wireframes ponen la atención creativa en las necesidades del usuario y ayudan a los equipos a alinearse durante todo el proceso de diseño y desarrollo. “El wireframe proporciona a las personas una visión temprana del proyecto, antes de que hayas invertido mucho tiempo en perfeccionar algo”, dice Tom. Siempre que puedas alinear a más personas en la organización desde el principio, ahorras tiempo después.

Es probable que tu producto final se vea muy diferente del wireframe inicial, ¡y eso es algo positivo! Crear wireframes te da la libertad de experimentar, realizar cambios, probar nuevos conceptos y asumir riesgos. Con un marco fundamental establecido, puedes ajustar fácilmente los flujos de trabajo y los elementos de diseño que serían difíciles de modificar más adelante en el proceso de diseño. Tu diseño final se verá y se podrá experimentar mejor, gracias al proceso de prueba y error en la creación de wireframes.

Los wireframes priorizan la usabilidad, al enfocar la atención creativa en los elementos esenciales para la experiencia del usuario, tales como:

• Flujos de usuario y escenarios
• Soluciones de diseño UX para posibles problemas
• Funcionalidad de navegación y señalización
• Jerarquía de información incorporada en las plantillas de pantalla

Cómo saber cuándo has acertado con tu wireframe

Evaluar el éxito de los wireframes es complicado sin datos cuantitativos, pero Tom menciona que existen varias métricas cualitativas que se pueden aplicar. Recomienda realizar pruebas de usuario moderadas para verificar si los usuarios pueden navegar por la experiencia sin instrucciones, en lugar de “cometer errores o no saber cómo proceder”.

Otra señal de éxito del wireframe es la alineación con los stakeholders. “Si sales de una sesión creativa sintiendo que recibiste el tipo de feedback que deseabas, y que puedes avanzar a los siguientes pasos con confianza, entonces diría que tu wireframe fue realmente exitoso”, dice Tom.

Sin embargo, si los stakeholders se enfocan en detalles triviales o aspectos estéticos en vez de en las necesidades fundamentales del usuario, él sugiere que “eso podría indicar que deberías reducir la fidelidad del wireframe. Elimina parte del perfeccionamiento de los materiales que compartes, hasta que obtengas el feedback que necesitas”.

Crea y personaliza diseños de wireframe con Figma

Los equipos necesitan wireframes para colaborar y hacer lluvia de ideas sobre diseños UX/UI, y el kit de wireframes de Figma te ayuda a empezar. Puedes validar ideas y acelerar los flujos de trabajo de diseño en la plataforma de diseño colaborativo de Figma y, además, iniciar proyectos de diseño web con el kit gratuito para crear wireframes de sitios web de Figma.

Para obtener más insights e inspiración, Tom recomienda ponerse en contacto con la comunidad de Figma. “Nuestra comunidad comparte una gran cantidad de ideas de wireframes y plantillas de UI”, dice.