Diseñar para la web es diseñar para la incertidumbre

La web comparte materiales superficiales con el diseño gráfico — composición, tipografía, color — pero las reglas del juego son diferentes. El papel es predecible: sabes el tamaño, controlas la impresión, el resultado es el mismo para cualquier lector. La web no funciona así.

Estas son las particularidades del medio que más cambian la forma de diseñar para él.

El lienzo no tiene medidas fijas

En diseño gráfico, la página tiene unas dimensiones. En web, el mismo contenido se va a ver en una pantalla de 320px y en una de 3840px. En un monitor panorámico y en un móvil en vertical. Con el texto al 100% y con el texto al 200% porque el usuario tiene baja visión.

Diseñar una sola versión estática y esperar que "se adapte" no es diseño responsive — es ignorar el medio. Un buen diseño web no es una imagen fija: es un sistema de reglas que define cómo se comporta el contenido en diferentes contextos. Qué pasa cuando hay más texto del previsto. Qué pasa cuando una línea se parte. Qué pasa cuando no hay imagen.

Los diseños más fáciles de implementar son los que vienen con estas preguntas ya respondidas.

El color no es lo que parece

En impresión, los colores se calibran con Pantone y se comprueban en pruebas de imprenta. El resultado final es predecible.

En web, cada monitor muestra los colores de forma diferente. Un MacBook Pro con pantalla P3 no muestra lo mismo que un monitor de oficina con sRGB básico. Un móvil OLED con saturación alta muestra colores completamente distintos a un LCD de gama baja. El mismo código hexadecimal produce naranjas distintos según la pantalla.

La solución no es intentar controlar lo incontrolable. Es diseñar con suficiente contraste y robustez para que el diseño funcione en cualquier pantalla, no solo en la del diseñador.

La accesibilidad cambia las reglas del color y el tamaño

El texto gris claro sobre fondo blanco puede ser elegante en pantalla, pero es ilegible para alguien con agudeza visual reducida. Un botón de 24px de alto es difícil de pulsar con el dedo en móvil. Una navegación que depende del hover no funciona en pantalla táctil.

Las pautas WCAG establecen requisitos concretos: contraste mínimo de 4.5:1 para texto normal, áreas de toque de al menos 44px, navegación por teclado funcional. En muchos contextos son también obligación legal.

La ventaja de conocerlas desde el inicio del diseño es que no hace falta corregir nada después. Un sistema de colores pensado para el contraste y una tipografía de tamaño suficiente funcionan mejor para todos los usuarios, no solo para los que tienen alguna limitación.

La tipografía en pantalla

En impresión puedes usar la tipografía que quieras sin coste de rendimiento. En web, cada fuente es un archivo que el navegador descarga. Cinco familias tipográficas con cuatro pesos cada una son veinte archivos — más de 1MB de tipografía antes de mostrar una sola letra.

Además, el renderizado varía entre sistemas operativos. La misma fuente se ve diferente en Windows, macOS y Linux: el hinting, el antialiasing y el subpixel rendering son distintos en cada plataforma. Es algo a tener en cuenta, no algo que se pueda controlar al píxel.

Diseñar dentro del medio

Los mejores diseños web que he implementado tienen algo en común: entienden las limitaciones del medio y diseñan dentro de ellas, no a pesar de ellas.

• Entregan sistemas, no imágenes fijas
• Diseñan para el peor caso, no solo para el mejor
• Conocen las pautas de accesibilidad y las aplican desde el principio
• Limitan la paleta tipográfica a lo esencial
• Dejan margen para que sea el contenido real, no el de relleno, el que dicte las proporciones

Diseñar para web es diseñar para la incertidumbre. Y eso requiere una mentalidad diferente a la del diseño gráfico tradicional. No mejor ni peor — diferente.