Un diseño que funciona en cada pantalla.

Hace más de siete años que trabajo de los dos lados del diseño: construyendo sitios a partir de archivos de Figma de otros diseñadores y diseñando sitios e interfaces yo mismo. Construir diseños ajenos me enseñó dónde se rompe un layout entre Figma y el navegador. Diseñar los míos me enseñó por qué se toma cada una de esas decisiones, y cuánto cuesta cuando se toma mal.

Qué te da un proyecto de diseño web

• Maquetas para teléfono, tablet y escritorio, no un diseño de escritorio con el resto librado a la imaginación.
• Dos o tres direcciones al principio, para elegir entre opciones reales y no aprobar la única que te mostraron.
• Un prototipo navegable para probar el recorrido en tu propio teléfono antes de construir nada.
• Rondas de cambios, cada una con su razonamiento por escrito, hasta que el diseño haga lo que tiene que hacer.
• Un archivo de Figma pensado para durar: componentes, estilos de color y tipografía y reglas de espaciado que cualquier desarrollador, o yo, puede convertir en un sitio sin adivinar.

Las buenas prácticas que sigo, y las que evito

Algunas decisiones quedan bien en una maqueta y juegan en contra de quien usa el sitio. Diseño teniendo en cuenta estas:

• Una acción principal por pantalla, visible sin tener que buscarla.
• Texto de 16 píxeles o más, con contraste suficiente para leer al sol (WCAG AA como mínimo).
• Zonas táctiles del tamaño de un pulgar, con espacio para no tocar el enlace equivocado.
• Formularios que piden solo lo que vas a usar. Cada campo de más cuesta envíos.
• Contenido real en las maquetas, porque un título que en alemán ocupa cuatro líneas rompe un layout pensado para una línea de texto de relleno.

Y evito lo que los estudios de usabilidad muestran una y otra vez que no funciona: carruseles en la portada, donde pocos llegan a ver la segunda imagen; texto gris sobre fondo gris; ventanas emergentes antes de que el visitante haya leído algo; cursores personalizados y efectos de scroll que le quitan el control a quien navega.

Cómo se comporta un diseño en distintas pantallas

Un layout no se diseña en tres tamaños y listo. El texto se reacomoda, las imágenes se recortan, la navegación se queda sin lugar, y los peores problemas aparecen en los anchos entre un corte y otro. Reviso cada página desde un teléfono chico hasta un monitor ancho, con palabras largas, palabras cortas e imágenes reales, y resuelvo los cambios en Figma, donde son baratos, en lugar de descubrirlos en el navegador, donde no lo son.

Usabilidad y conversión, no solo apariencia

Un diseño está terminado cuando los visitantes pueden hacer lo que vinieron a hacer. Eso significa menús con las palabras de tus clientes y no con nombres internos, un próximo paso claro en cada página, tranquilidad justo donde la gente duda (reseñas junto al formulario, precios antes del botón de contacto) y páginas de aterrizaje sin distracciones que alejen al visitante de lo único que quieres que haga.

Tests A/B: que decidan los números

Cuando dos direcciones parecen correctas, pueden decidir los visitantes:

1. Una pregunta basada en datos reales: por ejemplo, por qué la mayoría se va de la página de precios sin hacer clic.
2. Dos versiones en Figma que la responden de forma distinta: otro orden, otra disposición, otra llamada a la acción.
3. Las dos versiones construidas, con el tráfico repartido por una herramienta de testing como Webflow Optimize o VWO, o por el propio código del sitio, y medido en Google Analytics.
4. El tiempo necesario para estar seguros. Un test que se corta en la primera diferencia suele elegir mal al ganador.
5. La versión ganadora publicada, y el resultado anotado para la próxima decisión.

Mi aclaración honesta: los tests A/B necesitan tráfico. Con unos cientos de visitas al mes, un test puede durar meses sin una respuesta clara. En ese caso, ver a cinco personas reales usar el diseño te dice más, y eso es lo que te voy a recomendar.