Quinta pasada: la letra chica.
Diez detalles finos ya puestos en las diez páginas: la selección de texto con el color de la marca, el anillo de foco para quien navega con el teclado, los precios con números de ancho fijo, los formularios con la letra del sitio, el subrayado fino, los títulos sin palabras huérfanas, las anclas sin quedar tapadas, la barra de scroll reservada, el respeto a quien pidió menos movimiento y la letra pareja.
Se ven uno por uno, con ejemplo en vivo: detalle-fino.pages.dev
Cuarta pasada: el corrector y el borde propio de cada molde.
El corrector automático ya arregló solo el contraste: de 35 fallas quedan 1, y esa es una de los vínculos que quedaron en pausa. El promedio de los diez moldes pasó de 59 a 91 sobre 100.
Y cada molde tiene su propio gesto en el borde de la caja de producto, elegido por su paleta: filete que sube, barrido de luz, marco corrido, esquinas de visor, trazo de pincel, muestra de color, cinta de obra, góndola, reglilla y estante. Se ven acá: bordes-moldes.pages.dev
El revisor actualizado, con las notas nuevas: auditor-moldes.pages.dev
Actualización del 30/10, de madrugada.
Saqué el halo que giraba por el borde, el brillo interno y la textura de papel. Eran demasiado: ensuciaban las esquinas y se comían la foto del producto. El borde ahora es una línea de 1 píxel, sólida y pareja.
También apareció el culpable de fondo: había un segundo juego de estilos viejo metido en cada página, que pintaba el borde transparente. Ahí estaba el deshilachado. Ya no está.
Los botones de WhatsApp ahora llevan el símbolo real, nítido. Y hay un revisor automático que puntúa los diez moldes: auditor-moldes.pages.dev
Qué estaba mal y cómo quedó.
Las tarjetas estaban hechas con una línea de un píxel pintada encima de un fondo medio transparente. Es como pintar con acuarela sobre un papel mojado: el color de abajo traspasa y el borde se ve sucio.
Antes
- El borde era translúcido y dejaba ver lo de atrás.
- Las esquinas tenían un vidrio esmerilado que las desenfocaba.
- Al pasar el mouse la caja crecía y el filo se pixelaba.
Ahora
- El filo es una capa sólida por dentro: se ve parejo siempre.
- Sin vidrio esmerilado en las tarjetas: esquinas limpias.
- El mouse levanta la caja 3 milímetros, no la estira.
Segunda vuelta: seis efectos y un error mío que arreglé.
En la primera pasada metí la pata con los botones. El reflejo estaba escrito de una forma que le tapaba el color a todos los botones. Ya está corregido: ahora el botón se aclara apenas un 6% y baja un milímetro cuando lo apretás. Se siente como un botón de verdad, no como una calcomanía.
Todo lo demás que ves acá está escrito a mano, sin instalar nada. Cada página pesa lo mismo que antes y no depende de ninguna librería de terceros.
1. El filo de la caja, en dos capas
El borde ya no es una línea medio transparente. Son dos capas: un filo de color sólido por dentro y un brillo fino en el canto de arriba. Es como el canto de una mesada de granito: tiene un filo recto y una luz que lo hace ver grueso. Las esquinas quedan limpias porque el color no deja pasar nada de atrás.
2. Hilo de luz que gira por el contorno
Cuando el mouse pasa por encima de una tarjeta, un hilo del color de la marca recorre el borde. Está hecho con un degradado que gira y una máscara que lo recorta: no engorda la caja ni corre nada de lugar. Pasá el mouse despacio por las cajas de producto.
3. Luz que sigue al puntero
En las páginas oscuras hay un foco suave del color de la marca que acompaña al mouse. Es como mover una linterna sobre una pared: ilumina, no tapa. Funciona solo con mouse, no en celular.
4. Barra de progreso de lectura
Arriba de todo hay una línea finísima que se llena a medida que bajás. Sirve para saber cuánto falta sin mirar la barra del costado. Tiene el color de cada rubro.
5. Textura de papel
Un grano finísimo encima de todo. No se ve, se siente: le saca el aire de pantalla lisa a los degradados. Pesa 0 KB porque el navegador lo dibuja solo.
6. Detalles que no se ven pero se notan
Las fotos respiran con un zoom lentísimo al pasar el mouse (se agranda la foto, nunca la caja). Las viñetas de las listas toman el color de la marca. El encabezado gana una sombra recién cuando bajás. La barra de desplazamiento es del color de la casa. Los números de precio no bailan cuando cambian. Y si el teléfono está configurado para quitar movimiento, todo se apaga solo.
Los diez, uno por uno.
Abrí cada uno y fijate en lo que te digo. Si alguno no te gusta, lo vuelvo a tocar: cada molde es independiente.
Comercio multirrubro
Pasarela de fotos con zoom lento y leyendas que rotan. Acá el foco de luz que sigue al mouse está apagado a propósito: la página es clara y el papel manda.
Qué mirar: Pasá el mouse por las obras. Después bajá y mirá la barra fina de arriba.
molde-multirrubro-v2.pages.dev
Abrir el molde →Ferretería y herramienta
Amarillo y grafito. La calculadora es el corazón de la página.
Qué mirar: Usá la calculadora y fijate cómo se hunden los botones al apretarlos.
molde-ferreteria-herramientas.pages.dev
Abrir el molde →Concesionaria ruta
La más cinematográfica: fondo petróleo y brasa. Acá sí hay foco de luz que acompaña al mouse.
Qué mirar: Movés el mouse por el hero y la luz se corre. Después mirá las tarjetas de sede.
concesionaria-ruta.pages.dev
Abrir el molde →Concesionaria vidriera
Clara, con tipografía de diario. Verde profundo.
Qué mirar: Pasá el mouse por las unidades: la foto se agranda despacio, la caja se levanta 3 milímetros.
concesionaria-vidriera.pages.dev
Abrir el molde →Concesionaria central
La más filosa: negro y lima ácido.
Qué mirar: Pasá el mouse por los autos. El halo lima girando por el borde es el efecto más fuerte del set.
concesionaria-central.pages.dev
Abrir el molde →Pinturería lienzo
Verde y hueso. Calculadora de litros.
Qué mirar: Mirá las viñetas de las listas: ahora son verdes. Y el botón de cotizar.
pintureria-lienzo.pages.dev
Abrir el molde →Pinturería paleta
Terracota. Probador de color interactivo.
Qué mirar: Elegí un color y mirá cómo cambia la pared de la tarjeta.
pintureria-paleta.pages.dev
Abrir el molde →Pinturería brocha
Negro y amarillo. Venta a pintores, con cuenta corriente.
Qué mirar: Acá el halo amarillo sobre negro es donde más se nota el borde limpio.
pintureria-brocha.pages.dev
Abrir el molde →Home center CASA FIRME
La más grande: 13 tarjetas de producto, filtros y cuentas regresivas.
Qué mirar: Pasá el mouse por las ofertas, una por una, y compará con la versión vieja que viste ayer.
modelo-home-center.pages.dev
Abrir el molde →Ferretería con calculadora
Azul acero y naranja. Calcula material por m² y arma el pedido por WhatsApp.
Qué mirar: Poné un ancho y un alto y tocá calcular. Mirá cómo se asientan los números del resultado.
molde-ferreteria-calculadora.pages.dev
Abrir el molde →Qué mirar, en tres pruebas.
Prueba 1. Abrí cualquier molde y pasá el mouse por una caja de producto. El borde tiene que quedar parejo y aparecer un hilo de luz girando. Si ves el borde tembloroso o manchado, ese molde está mal.
Prueba 2. Mirá una esquina de cerca, agrandando con los dedos en el teléfono. Antes se veía un halo gris. Ahora tiene que ser una curva limpia.
Prueba 3. Tocá el botón principal. Tiene que barrerse un reflejo y el texto tiene que seguir legible.