Destripado · easy.com.ar
Qué tiene adentro la home de la ferretería más grande del país, medido bloque por bloque, y cómo se traduce en una página que sí podemos armar en un día.
La home de Easy no es una página: es una tira de 15 vidrieras puestas una atrás de la otra para que el visitante baje sin pensar.
Lo medí directo sobre la página publicada. Estos son los números reales, no estimados:
Motor: VTEX, una plataforma de tiendas grandes. Se lee en el código: 10.288 menciones.
Peso del esqueleto: 2,6 MB solo de la parte fija. Y todavía no bajó una sola foto de producto.
Carruseles: 21 tiras que se deslizan solas o con el dedo.
Bloques: 44 contenedores, 90 imágenes de campaña.
Letra: Montserrat, con textos de 13 a 14 píxeles.
Las góndolas de productos están vacías en el archivo. No hay un solo precio escrito ahí. Los productos y los precios llegan después, pedidos a la base de datos, y cambian según la sucursal que elige el visitante.
Conclusión: la parte "tienda" no se copia. Lo que sí se copia —y es el 90% del valor— es el orden y el ritmo de los bloques.
Este es el esqueleto exacto, en el orden en que aparece en pantalla.
Barra fina de arriba
Seis links chicos: Código de ética, CencoPay, Club Easy, Club Easy Pro, Venta Empresa, Contacto. Sirve para sacar de la vista lo que no vende.
Encabezado
Logo, buscador grande al centro, ubicación, mi cuenta y carrito. La ubicación aparece como ventana emergente: "Ayudanos a localizarte".
Banner principal
Ocho placas que rotan, ancho completo. Una sola placa pesa 247 KB. Es lo primero que se ve y define si el sitio parece caro.
Fila de tres beneficios
Cuotas, retiro en tienda, envío. Tres columnas iguales (33,3% cada una). Contesta las tres dudas que frenan la compra.
Franja de app
Una tira angosta invitando a bajar la aplicación. Es publicidad propia, no ayuda al visitante.
Banner de campaña
"Solo por 48 hs: 15% en Muebles y Parrillas". Una sola promesa, con fecha. La urgencia es el truco más viejo y el que mejor funciona.
Dos banners al medio
Dos placas lado a lado, mismo tamaño. Dividen la atención en dos en vez de una.
Categorías destacadas
Ocho tarjetas con foto y nombre: Muebles, Electro, Herramientas, Baños y Cocinas, Construcción y Maderas, Pisos, Jardín y Aire Libre, Aberturas. Es el índice del sitio.
Otra campaña
"Hasta 30% para renovar tus Muebles y Sillones". Repite la fórmula: una foto grande, un número, una promesa.
Tres campañas en fila
Tres placas del mismo ancho. Acá el visitante ya eligió un rumbo y se le ofrecen tres puertas.
Góndola "Imperdibles Easy"
Carrusel de productos con foto, marca, precio y cuotas. Acá empieza la parte que necesita base de datos.
Góndola de construcción
"Ofertas para tus proyectos de Construcción y más". Otra tira de productos, apuntada a un rubro puntual.
Marcas
Logos de marcas conocidas. Prestan confianza sin gastar una palabra.
"No te lo pierdas"
Cuatro cuadros: Club de beneficios, Pedí tu tarjeta, Servicios e instalaciones, Productos sostenibles. Es el lugar donde venden lo que no es un producto.
Pie
Fila de accesos (Promociones, Hacelo Easy, Medios de pago, Servicios de instalaciones, Locales) y después legales, redes y contacto.
Todo esto lo saqué del archivo de estilos, no a ojo.
| #363F45 | Gris carbón. El color base de todo: barras, textos fuertes, pie. |
| #ed2424 | Rojo Easy. Solo para el precio, el descuento y el botón de comprar. |
| #473d38 | Marrón grafito. Los títulos de sección, en 24 px y peso 600. |
| #f2eded | Gris rosado clarito. Fondo de bloques, para separar sin poner líneas. |
| #f25529 | Naranja. Acento chico, para una etiqueta o un número. |
| 32 px | El aire entre un bloque grande y el siguiente. Siempre el mismo: eso es lo que hace que se vea ordenado. |
| 24 px / peso 600 | Los títulos de sección. |
| 13 a 14 px | El texto común. Muy chico, y a propósito: entra más en pantalla. |
| 8 a 12 px | Las esquinas redondeadas de las tarjetas y botones. |
| Montserrat | La tipografía. Es libre y gratuita (licencia abierta), así que se puede usar. |
Easy usa letra de 13 y 14 píxeles porque vende a gente joven con la vista bien. Nuestra regla es 20 píxeles o más.
Mismo esqueleto, letra más grande. Los 32 px de aire pasan a 48, los títulos de 24 pasan a 34. El sitio se ve más generoso y se lee sin esfuerzo. Ese cambio es justamente lo que lo hace ver premium.
Necesitan una base de datos con miles de artículos, precios por sucursal y stock. Un cliente de una sola sucursal no la tiene, y armarla no vale la pena para una web de presentación.
Es una tienda que cobra. Nosotros hacemos una web que muestra y lleva al WhatsApp. El carrito se reemplaza por un botón verde.
Son de ellos. Se toman como referencia de encuadre y de proporción, y después se usan las fotos del cliente o se generan.
2,6 MB de esqueleto y 247 KB por banner es demasiado para una web de barrio. Nuestro techo: la primera pantalla entera, con foto, no pasa de 2,5 MB.
Así se traduce el plano de Easy en una página de una sola tirada, para una ferretería o un corralón.
| Bloque nuestro | Sale de | Qué hace |
|---|---|---|
| 1. Encabezado | Bloques 1 y 2 | Logo, teléfono a un toque y botón de WhatsApp. |
| 2. Portada | Bloque 3 | Una sola foto grande con la frase que dice qué hace el negocio. Sin carrusel: un carrusel que rota se lo pierde el 70%. |
| 3. Tres beneficios | Bloque 4 | Envío, horario y forma de pago. Tres columnas. |
| 4. Seis rubros | Bloque 8 | Las seis familias de productos, con foto. En vez de 8, seis: es lo que entra sin scrollear de más. |
| 5. Productos destacados | Bloques 11 y 12 | Seis a ocho productos con foto, nombre y precio. Escritos a mano en la página, sin base de datos. |
| 6. Trabajos hechos | Bloque 10 | Tres fotos de obras o clientes. Es lo que Easy no puede mostrar: la cara del barrio. |
| 7. Confianza | Bloques 13 y 14 | Marcas que vende, años en el rubro, medios de pago. |
| 8. Cierre y pie | Bloques 6, 9 y 15 | Un último llamado con la dirección, el mapa y el horario, más el pie con los legales. |
Un carrusel de ocho banners no vende ocho veces más: cansa. Una foto buena con una frase clara vende más que ocho que rotan.
Esto es lo que hay que juntar antes de escribir una línea. Si falta algo, queda el hueco marcado.
| Pieza | Medida | Cuántas |
|---|---|---|
| Foto de portada | 1600 × 900 px, horizontal, comprimida | 1 |
| Fotos de rubro | 800 × 600 px | 6 |
| Fotos de producto | 800 × 800 px, fondo parejo | 6 a 8 |
| Fotos de trabajos | 900 × 700 px | 3 |
| Logo | SVG o PNG con fondo transparente | 1 |
| Logos de marcas que vende | PNG transparente | 4 a 8 |
| Texto de cada rubro | Una línea de 8 palabras | 6 |
| Datos de contacto | Teléfono, WhatsApp, dirección, horario | 1 juego |
Cinco detalles chicos que hacen que una página de barrio parezca de marca grande.
1. Un solo color de acento. Un rojo, y ese rojo solo aparece en el precio y en el botón. Si el naranja, el azul y el verde compiten, no gana ninguno.
2. Aire de sobra. 48 píxeles entre bloques. Lo que está apretado se ve barato; lo que respira se ve caro.
3. Foto que entra despacio. Cada bloque aparece con un movimiento suave al llegar, de abajo hacia arriba, de 600 milisegundos. Cuesta 40 KB de código y cambia la sensación entera.
4. El teléfono siempre a un toque. Arriba, en medio y abajo. Nunca hay que buscar cómo llamar.
5. Letra grande. 20 píxeles mínimo, 34 en los títulos. Se lee desde el celular con el brazo estirado, que es como lo va a leer el 80% de la gente.
Ya tengo el plano. Falta el cliente.
Con el nombre de una ferretería, corralón o cliente real, armo la primera web completa con este molde: la ficha, el inventario de lo que falta, la página armada, la revisión y la publicación.
Y si querés ver el molde funcionando hoy mismo, decime un nombre inventado y lo armo igual con fotos de relleno, para que veas cómo queda antes de gastar tiempo en conseguir fotos de verdad.
Quedó anotado como regla de oro para todas las conversaciones: ya puedo crear y editar archivos en tu computadora. Así que de acá en adelante, cuando haya que tocar un archivo de un proyecto, lo hago yo. No te lo pido a vos.