¿Qué es el diseño de retícula?

Si alguna vez has intentado diseñar un sitio web o una aplicación sin una retícula, sabrás por qué es importante el proceso de diseñar la retícula. Sin retículas, ¿cómo podéis visualizar tu equipo y tú lo que estáis intentando hacer? ¿Cómo organizáis los flujos de usuario y determináis qué contenido va en cada pantalla?

«Resulta frustrante cuando la gente solo hace comentarios sobre la parte visual, cuando lo que realmente necesitas es feedback de alto nivel como: "¿Es esto lo más importante?"» dice Tom Lowry, director de Promoción en Figma. Un excelente diseño de productos y sitios web comienza con un diseño de retículas inteligente. Sigue leyendo para dominar cada etapa del diseño de retículas con los consejos pro y las herramientas de Figma.

¿Qué es una retícula?

Las retículas son planos básicos que ayudan a los equipos a alinearse según los requisitos, haciendo que las conversaciones sobre diseño UX mantengan el foco y sean constructivas. Piensa en tu retícula como el esqueleto de tu aplicación, sitio web u otro producto final. Tu retícula muestra al equipo de diseño y a los stakeholders los esquemas básicos de las páginas web, componentes y funciones esenciales, incluyendo:

• Las disposiciones de la pantalla
• Las barras de navegación
• Los componentes del diseño de UX e IU
• Los elementos interactivos

En las primeras etapas del diseño, las retículas de baja fidelidad utilizan un texto «lorem ipsum» y cajas simples como marcadores para imágenes y vídeos. 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 limpio y una retícula sencilla también les da a los diseñadores IU/UX un espacio para iterar. Pueden recopilar feedback inicial de las pruebas de usuario sobre los elementos principales de la UX/IU, sin distraer a los usuarios con detalles de diseño visual. Así, los equipos de diseño prueban diferentes conceptos, flujos de usuario y plantillas mientras trabajan para lograr la experiencia de usuario definitiva.

3 tipos de diseños de retícula

Las posibilidades del diseño UX pueden parecer infinitas, pero la mayoría de los diseños de retícula se dividen en tres niveles básicos de fidelidad. Puedes trabajar con los tres tipos de diseños de retícula en el proceso hacia tu producto final.

1. Las retículas de baja fidelidad son retículas básicas que se centran en la disposición, la navegación y la arquitectura de la información. Muestran cómo se verá la interfaz, ilustrando los flujos de usuario con elementos clave de diseño de la IU. Los bocetos en la pizarra pueden ser útiles en las primeras etapas de diseño de la retícula, aunque no siempre son fáciles de compartir, guardar o modificar. Con la herramienta de diseño de retícula online de Figma, puedes crear, compartir e iterar rápidamente retículas de baja fidelidad.
2. Las retículas de fidelidad media ayudan a los diseñadores a iterar y dar forma al diseño final. Los equipos de diseño pueden añadir anotaciones y contenido mientras prueban diferentes enfoques para los flujos de usuario y los elementos de diseño de la IU, delineando la funcionalidad principal y las interacciones clave. Esto permite a los equipos acordar el marco de diseño final de la retícula antes de añadir componentes de diseño visual.
3. Las retículas de alta fidelidad se parecen a las primeras maquetas de productos, con elementos de diseño interactivos y visuales, pero sin la funcionalidad de los prototipos de baja fidelidad. En este punto del proceso de diseño, quizá quieras añadir elementos de marca como fuentes, colores y logotipos. De esta manera, puedes capturar el aspecto y la sensación del producto final para las pruebas de usuario.

Cuándo omitir las etapas de la retícula

Muchos equipos de diseño dan por hecho que deben comenzar con una retícula de baja fidelidad y evolucionar desde ahí. Esto tiene sentido cuando estás explorando nuevos conceptos de producto, para que puedas alinear los componentes clave, iterar y luego añadir detalles de diseño visual más adelante. Pero según Tom, hay razones para pasar directamente al diseño de retícula de alta fidelidad.

«Si tenéis un sistema de diseño establecido y el diseño que vais a explorar es similar a otros que ya existen, las conversaciones probablemente no se desviarán demasiado por los detalles del diseño visual», explica Tom. «En estos casos, explorar una idea de diseño con mayor fidelidad puede ser igual de rápido y de efectivo».

Las 7 mejores prácticas en el diseño de retículas

Una retícula eficaz puede ser tan simple como un boceto en una servilleta o tan compleja como una maqueta de producto estática. Al aplicar estas mejores prácticas en el diseño de retículas, podrás alinear las instrucciones con tu equipo más rápido y avanzar con el mejor enfoque posible.

1. Identifica tus objetivos de diseño.

Antes de empezar a esbozar o a ajustar plantillas de retícula, define tus objetivos de diseño. Considera las necesidades de los usuarios y qué acciones deseas que realicen para satisfacerlas. Quizás puedas ayudar al usuario a resolver un problema si compra un producto útil o si se suscribe a un boletín educativo. Por eso, mejor alinea a tu equipo de diseño con ese objetivo, para que tus diseños de retícula hagan avanzar esa causa.

2. Elige el tamaño correcto para tu retícula.

Tus retículas deben adecuarse al tamaño de la pantalla que usará tu público objetivo. Por supuesto, un sitio web o una aplicación se verá diferente en un ordenador portátil que en un dispositivo móvil. Teniendo esto en cuenta, los tamaños estándar de retículas para los distintos tipos de pantallas son los siguientes:

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

3. Haz que el diseño de tu retícula sea simple.

Comienza tu retícula utilizando colores en escala de grises, limitando las fuentes y reemplazando los gráficos con cuadros. Asegúrate de que tu plano cumpla con los requisitos del usuario en el nivel más básico. Si te centras en detalles como errores ortográficos o esquemas de color, podrías pasar por alto un defecto en la experiencia de usuario. Para los diseños simples en etapas tempranas, puede que sea suficiente con las vistas previas truncadas o las tarjetas. Sin embargo, para interfaces ricas en contenido, Tom recomienda utilizar contenido real en lugar de texto de marcador del tipo «lorem ipsum». «Cuando empiezas 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. «Por eso, querrás usar el contenido real».

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

Las retículas no deben causar distracción ni confusión. Los componentes similares deben tener el mismo aspecto en todas las retículas, para que sean fáciles de comprender, iterar y programar con código. De hecho, si hay alguna ligera variación entre dos componentes relacionados, los diferentes diseños pueden generar incertidumbre para los desarrolladores en todas las páginas e iteraciones.

5. Haz que la navegación resulte obvia.

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

6. No le tomes demasiado cariño a tu retícula.

Incluso una retícula de alta fidelidad sigue siendo un borrador que necesita cambios para convertirse en un producto final. Una vez que tu equipo de diseño finalice el diseño de la retícula, es momento de colaborar con los desarrolladores y otros miembros del equipo para aportarle funcionalidad.

7. Aprovecha las herramientas de diseño de retículas.

A los equipos de diseño les hacen falta retículas que puedan compartir, guardar y convertir en maquetas online. El kit de retículas 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 retículas personalizadas y de alta fidelidad.

La lista de verificación en el diseño de retículas

El proceso de diseñar la retícula 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? Una vez que puedas tachar estas acciones de tu lista de tareas pendientes del diseño, tu retícula estará lista para crear maquetas y prototipos de mayor fidelidad.

Una vez que hayas completado tu retícula, revisa el alcance inicial de tu trabajo. Ahora que has hecho el esquema de tu producto final, quizá ya puedas afinar tu estimación. Aunque sea solo un boceto con marcadores de posición, tu retícula debe mostrar:

• Qué pantallas son imprescindibles para cumplir con las necesidades de los usuarios
• El flujo de usuario a través de embudos de conversión
• Las consideraciones de usabilidad, incluidas la navegación y la organización
• Los objetivos principales y los flujos de usuario para cada pantalla
• Los elementos clave de diseño de la IU, junto con el contenido y las funciones interactivas de cada pantalla
• Cómo se integran los componentes de diseño para crear plantillas de pantalla

Cuando tu equipo de diseño inicie el proceso de diseño, es posible que no sepas con exactitud cómo debería funcionar o qué aspecto debería tener tu producto final. Los principiantes pueden sentirse tentados a saltarse el diseño de la retícula y apoyarse en modelos existentes para los diseños, pero eso puede resultar en una experiencia de usuario poco inspiradora y poco útil. Las retículas centran 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. «La retícula os ofrece una visión temprana del proyecto, antes de que hayáis invertido mucho tiempo en pulir algo», dice Tom. «Siempre que podáis alinear a más personas de la organización desde el principio, os ahorraréis tiempo después».

Es probable que tu producto final tenga un aspecto muy diferente al de la retícula inicial, ¡y eso es algo positivo! Diseñar la retícula te ofrece la libertad de experimentar, realizar cambios, probar nuevos conceptos y asumir riesgos. Creando el esqueleto, 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 tendrá un mejor aspecto y sensación gracias al proceso de prueba y error que realizas al diseñar la retícula.

Las retículas priorizan la usabilidad, centrando la atención creativa en elementos que son esenciales para la experiencia de usuario, incluyendo:

• Los flujos de usuario y escenarios
• Las correcciones de diseño de UX para posibles puntos débiles
• La funcionalidad de navegación y guiado
• La jerarquía de información incorporada en las plantillas de pantallas

Cómo saber cuándo has clavado tu retícula

Evaluar el éxito de las retículas es complicado sin datos cuantitativos, pero Tom dice que hay varias métricas cualitativas que se pueden aplicar. Recomienda realizar pruebas de usuario moderadas para comprobar si los usuarios pueden seguir la experiencia de usuario sin instrucciones, en lugar de que «acaben tropezándose o no sepan qué es lo próximo que tienen que hacer».

Otra señal de éxito de la retícula es la alineación con los stakeholders. «Si al salir de una sesión creativa sientes que has recibido el tipo de feedback que querías y que puedes avanzar hacia los siguientes pasos con confianza, entonces yo diría que tu retícula ha sido todo un éxito», dice Tom.

Pero si los stakeholders se centran en detalles menores o consideraciones estéticas en lugar de las necesidades básicas del usuario, dice que «eso podría ser una indicación de que deberías reducir la fidelidad de la retícula. Elimina parte de ese acabado en los artefactos que estás compartiendo, hasta que recibas el feedback que necesitas».

Crea y personaliza diseños de retícula con Figma

Los equipos necesitan las retículas para conectarse y hacer brainstorming sobre el diseño UX/UI, y el kit de retículas de Figma te ayuda a empezar con ellas. Puedes validar ideas y acelerar los flujos de trabajo de diseño en la plataforma de diseñocolaborativa de Figma, así como iniciar proyectos de diseño web con el kit gratuito de diseño de retículas para sitios web de Figma.

Para obtener más información e inspiración, Tom recomienda conectarse con la Comunidad de Figma. «Nuestra Comunidad comparte una gran cantidad de ideas de retículas y plantillas de IU», afirma.