Iterar y huir de lo genérico

Por qué todo acaba pareciéndose

Abre diez landing pages generadas por IA sin dirección: verás diez veces la misma página. Degradado violeta-azul, emoji de cohete en el título, tres tarjetas con sombras blandas, badge « AI-powered ». No es casualidad: un modelo de IA produce lo que es estadísticamente probable en sus datos de entrenamiento. Sin restricciones, converge hacia la media de todo lo que ha visto — y la media, por definición, no se parece a nada en particular.

Comprender este mecanismo cambia tu postura: lo genérico no es una fatalidad de la herramienta, es el resultado por defecto en ausencia de dirección. Todo lo que has construido en este curso — el briefing con prohibidos, el design system, las iteraciones quirúrgicas — es precisamente el conjunto de restricciones que fuerzan al modelo a salir de su media. Este último capítulo añade el piso final: la crítica exigente y la audacia asumida.

Hay también una cuestión de mercado: a medida que todo el mundo genera interfaces, el coste de lo « correcto » se desploma. Lo que se vuelve raro — y por tanto valioso — es la personalidad: un diseño que se recuerda, que se atribuye a una marca concreta. Para Studio Mango, es el argumento de venta frente a los clientes que podrían « pedírselo a la IA ellos mismos »: todo el mundo puede obtener una página correcta; pocos saben hacerla subir de nivel.

Un feedback que hace avanzar

« No está muy allá » no sirve de nada — ni a un humano, ni a una IA. El modelo no sabe qué te desagrada: va a cambiar cosas al azar, a veces estropeando lo que funcionaba. El feedback eficaz es quirúrgico: « el contraste título/fondo es demasiado débil », « el ritmo vertical es irregular entre las secciones 2 y 3 », « el CTA se pierde en medio de tres elementos que gritan tan fuerte como él ». Cuanto más preciso es el feedback, mejor es la iteración.

La estructura que funciona tiene tres tiempos, ya vista en el capítulo 3: zona (¿dónde?), problema (¿qué, en vocabulario de diseño?), dirección (¿hacia qué?). Añade un cuarto reflejo para las sesiones largas: decir también lo que hay que preservar. « La hero es perfecta, no la toques más; concéntrate en la sección de pricing » protege tus logros — sin eso, una IA que regenera puede « mejorar » lo que ya estaba validado.

La parrilla de crítica: cinco preguntas para tu maqueta

Para criticar tu propia maqueta con rigor — y no solo « por sensaciones » — pásala por el tamiz de cinco preguntas. Una: jerarquía — entrecerrando los ojos ante la página, ¿qué destaca primero, segundo, tercero? ¿Es el orden correcto respecto al objetivo (para Sereno: título, promesa, CTA)? Dos: recorrido — ¿el ojo circula con naturalidad de arriba abajo, o tropieza con elementos que se disputan la atención?

Tres: coherencia — ¿espaciados, radios, grosores siguen el sistema en todas partes, o detectas valores huérfanos? Cuatro: acento — ¿el color de acento guía hacia la acción, o está espolvoreado hasta el punto de no significar nada? Cinco: personalidad — si se tapa el logo, ¿todavía se puede adivinar la marca? Esta última pregunta es la más dura y la más importante: es la que separa lo correcto de lo memorable.

El reflejo potente: confiar esta parrilla a la propia IA. Es sorprendentemente buena crítica de sus propias producciones cuando se le da un marco de evaluación — es la autocrítica estructurada. Obtienes un diagnóstico argumentado, que confrontas con tu propia mirada antes de decidir las correcciones.

Aquí está la landing de Sereno actual [código o captura adjunta]. Critícala como un director artístico exigente, según cinco ejes:
1. Jerarquía: ¿qué ve el ojo en 1.º, 2.º, 3.º lugar? ¿Es el orden correcto para convertir hacia la prueba gratuita?
2. Recorrido: ¿dónde tropieza el ojo?
3. Coherencia: lista los valores (espaciados, radios, tamaños) que se salen del design system.
4. Acento: ¿el color de acento guía hacia la acción o está diluido?
5. Personalidad: si se tapa el logo, ¿qué distingue esta página de una plantilla?
Para cada eje: una constatación, una nota sobre 10 y UNA corrección prioritaria. No propongas todavía las correcciones, solo el diagnóstico.

Las señales de la « plantilla IA »

Aquí está la lista de control de los síntomas del resultado genérico — la que Studio Mango tiene colgada en la pared. Si tu maqueta marca varias casillas, necesita una pasada de personalidad antes de mostrarse a nadie:

• Degradados violetas o azul-rosa por todas partes, sin intención
• Emojis en los títulos para « darle vida »
• Espaciados tímidos, todo está apretado
• Sombras blandas y esquinas redondeadas genéricas, idénticas en cada tarjeta
• Tipografía por defecto (la misma sans-serif del montón de arriba abajo, ningún grosor asumido)
• Color de acento espolvoreado por todas partes en lugar de reservado para la acción
• Textos de relleno intercambiables (« Impulsa tu productividad ») que podrían vender cualquier cosa

Si tu resultado marca estas casillas, pide explícitamente audacia: decisiones tipográficas fuertes, un color de acento asumido, contrastes nítidos, generosidad de espacio. Fíjate en un punto interesante: estos síntomas son el negativo exacto de lo que has aprendido. El apretujamiento viola la escala de espaciado, el acento diluido viola el 60-30-10, la tipografía blanda viola la escala con ratio. Lo genérico no es un estilo: es la ausencia de sistema.

Las palancas de la personalidad

Salir de lo genérico no exige reinventarlo todo — basta con accionar dos o tres palancas con convicción. La primera y más potente: la tipografía. Una display asumida en los títulos (una serif con carácter, un grosor extremo, una anchura inusual) transforma una página más que cualquier otro cambio. Es la voz de la marca: Sereno con una serif cálida a 64 px ya no se parece a ninguna plantilla.

Segunda palanca: el acento disciplinado. Un solo color de acento, usado en tres sitios como máximo, crea más impacto que cinco colores por todas partes. Tercera palanca: el espacio generoso — duplicar el espacio alrededor de la hero es el medio más barato de parecer premium. Cuarta palanca: un detalle firma — una forma recurrente, un estilo de ilustración coherente, una microinteracción cuidada — que vuelve a lo largo de la página como un motivo musical. Un solo detalle firma bien mantenido vale más que cinco ideas dispersas.

El método de las dos versiones: safe vs audaz

Cuando dudes sobre el nivel de riesgo, no decidas en abstracto: pide dos versiones. Una versión « safe » — limpia, coherente, sin riesgo — y una versión « audaz » — tipografía display, acento franco, disposición menos esperada. El coste marginal es casi nulo (unos minutos de artifact), y la comparación lado a lado hace la decisión evidente, allí donde la discusión teórica daba vueltas en círculo.

Este método brilla también en la presentación al cliente: mostrar safe y audaz posiciona la conversación en « ¿hasta dónde llegamos? » en lugar de « ¿nos gusta? ». El cliente se proyecta, compara, suele elegir un punto intermedio — y se siente partícipe de la dirección. Studio Mango presentará mañana las dos: es la marca de un estudio que domina su paleta de riesgo, no de un estudio que no sabe elegir.

flowchart LR
  M["Maqueta actual"] --> CR["Crítica en 5 ejes"]
  CR --> S["Versión safe: correcciones dirigidas"]
  CR --> A["Versión audaz: tipografía + acento + espacio"]
  S --> CH["Comparación lado a lado"]
  A --> CH
  CH --> D["Decisión asumida + justificación"]

Microinteracciones y acabados

El último 5 % hace el 50 % de la impresión. Las microinteracciones — la transición suave de un hover, una aparición progresiva al hacer scroll, un campo que confirma la entrada — señalan el cuidado. La regla para Sereno: movimientos cortos (150-250 ms), suaves (curvas de aceleración naturales, nada de rebotes estridentes) y significativos (cada animación comunica algo: « puedes hacer clic », « se ha guardado bien »). Una animación decorativa que no dice nada es ruido.

Los acabados son también los detalles ingratos: los textos reales en lugar del lorem ipsum (un testimonio creíble con nombre y profesión vale más que diez « ¡Producto increíble! »), los estados vacíos y los mensajes de error, el favicon, los atributos alt de las imágenes. Pide a la IA una « pasada de acabado » explícita: « relee toda la página como un perfeccionista: transiciones que faltan, textos flojos, detalles descuidados — lista todo, y luego corrige ».

Entregar con confianza

Recapitulemos el camino recorrido: una intención planteada en un briefing (capítulo 1), un sistema de tokens coherente y accesible (capítulo 2), un prototipo iterado en bucle corto (capítulo 3), componentes limpios y accesibles (capítulo 4), y una pasada de crítica, de audacia y de acabado (este capítulo). Cuando el ritmo, la jerarquía y el acento están dominados, entregas un diseño que tiene personalidad — no una plantilla más. Es lo que Studio Mango presenta con orgullo al cliente mañana por la mañana.

Última palabra sobre la postura: la IA te ha hecho ganar la jornada entera de ejecución, pero cada decisión visible en esta página ha pasado por tu juicio. Es exactamente el buen reparto de roles — y es una competencia que gana valor: saber dirigir la máquina hacia un resultado que nunca habría producido sola. El gusto sigue siendo tuyo; la IA acelera.