ColecciónServilletas, pinturas, maderas…
Una categoría o colección con el producto real como protagonista, y un sticker con un dato real de la tienda: «más de 800 modelos».
Proyecto · Pinta y Punto
Pinta y Punto: de banners sueltos a una vitrina.
La tienda pasó de banners sueltos, cada uno con su propio estilo, a un sistema de marca con productos reales, una home pensada primero para el celular y destinos que funcionan.
- Tiendapintaypunto.cl
- Qué hicimosHome, banners y lineamiento de marca
4 min de lecturaPor el equipo de Kreativa
5 → 0Secciones vacías en la home
3Carruseles de productos con stock y precio
De a 2Mosaicos en celular: la mitad de scroll
4Tipos de banner con una sola estructura
Home · escritorio
Lo primero que se ve
Desliza para comparar la home de escritorio antes y después.
Antes
- Carrusel de 3 banners que rotaban, cada uno con colores, tipografías y botones distintos.
- El botón «MÁS INFO» estaba dibujado en la imagen: no tenía link.
- Fotos de taller recortadas en rombos; ningún producto de la tienda.
Después
- Un solo mensaje fijo, con un botón que lleva a su categoría.
- Productos reales: la Lámpara Vintage de MDF en crudo y terminada (antes → después).
- Debajo, 6 mosaicos con el mismo sistema visual.
«Antes»: recreación de la home al 5 de octubre de 2026 con sus imágenes originales. «Después»: captura del sitio en vivo.
Home · celular
Donde compra la mayoría
- El carrusel no se veía en celular: arriba quedaba un espacio en blanco.
- Los 6 mosaicos de a uno: unos 1.500 px de scroll antes de llegar a un producto.
- Ningún producto con precio en toda la home.
- Hero propio para celular (cuadrado), con botón.
- Mosaicos de a 2: la mitad de scroll.
- 3 carruseles automáticos con precio: Lo más vendido, Recién llegados y Ofertas.
«Antes»: recreación con las imágenes originales y las medidas del 5 de octubre de 2026. «Después»: captura en vivo.
Home completa
De banners sueltos a una vitrina
Recorre la home de punta a punta, en escritorio y en celular, tal como estaba y tal como quedó.
Antes
Después
Desliza dentro de cada pantalla para recorrer la home
Antes
- Carrusel (solo en escritorio), 6 mosaicos y el mapa, con 5 secciones vacías intercaladas.
Después
- Hero fijo, 6 mosaicos, 3 carruseles de productos que se actualizan solos con stock y precios, y el mapa. Sin secciones vacías.
Banners
Los mismos temas, una sola marca
Talleres, servilletas y marca: los mismos temas de siempre, ahora con la misma paleta (fucsia, vino y crema), tres tipografías fijas, el producto real como protagonista y el botón siempre en el mismo lugar.
Talleres
AntesDespués
Servilletas
AntesDespués
Marca
AntesDespués
Lineamiento de banners
El sistema «Pincelada y Punto»
El nombre ya trae el sistema: la pincelada destaca la palabra que importa y el punto enmarca los productos. Todo sobre papel crema, cálido y hecho a mano, como la tienda.
Regla de oro. Siempre productos reales de Pinta y Punto: fotos del catálogo o piezas hechas en el taller, nunca imágenes de stock ni generadas. Quien mira el banner tiene que poder encontrar exactamente eso en la tienda.
Color
Fucsia Pinta
#E1115CTitular y botones. OFERTA del logo.Vino
#5C0A2CTextos y pincelada. Reemplaza al negro.Crema
#FFF5EFFondo papel. Siempre la base.Rubor
#FCDDE3El punto gigante detrás de los productos.Coral
#F4675BDetalles: puntos sueltos.Amarillo
#FFC845Solo ofertas. Si no hay descuento, no aparece.Modo evento (Cyber, Black)Fondo
#2A0A4APunto #43166FTitular y botón #FFD23FPincelada #8D4BFFTipografía
Talleres
Fraunces BlackEl titular: una palabra, en fucsia.creativos
Mr DafoeLa palabra emocional, en crema sobre la pincelada vino. Una sola por banner.VER TALLERES →
MontserratTodo lo demás: bajada, botón y etiquetas.Cuatro tipos de banner, una sola estructura
Cambia el contenido y el tipo de imagen; no cambia el orden: texto a la izquierda en el mismo lugar, productos a la derecha sobre el punto y botón fucsia abajo. Así el carrusel se lee como una sola marca.
ExperienciaTalleres
Fotos reales de piezas hechas en clases, dentro de puntos. Los beneficios van como chips cortos con ícono, máximo 3.
MarcaTransforma tus ideas en arte
Antes → después con la misma pieza: la Lámpara Vintage de MDF en crudo y ya terminada. Muestra lo que se puede hacer con lo que vende la tienda.
OfertaCyber, Black Friday…
Modo evento: la misma estructura en morado y amarillo, para que se note que hay ofertas. Al terminar el evento, se vuelve a la paleta normal.
Sí
- Productos reales de la tienda, siempre.
- Un mensaje por banner: dos temas son dos banners.
- Máximo 12 palabras fuera del botón (y hasta 3 chips).
- Botón con verbo y qué: «Ver servilletas», «Ver talleres».
- Cifras solo si son reales y comprobables.
Evitar
- Texto encima de fotos.
- Collage de fotos cuadradas con fondo blanco.
- Dos tipografías script en la misma pieza.
- Negro puro (se usa vino) y amarillo sin oferta.
Mosaicos de categorías
Más claros, con producto real
Antes
- 5 colores de botón distintos, fondos de stock y textos sobre fotos.
- Dos mosaicos de madera láser (Nuevos productos y Corte láser).
Después
- Formato cuadrado: 3 por fila en escritorio y 2 en celular.
- Talleres suma su lugar; Navidad queda como mosaico de temporada.
Todos los productos que aparecen están en el catálogo de pintaypunto.cl.
Resumen
Qué cambió
Marca
AntesCada banner con sus colores, tipografías y botones.
DespuésSistema «Pincelada y Punto»: 6 colores, 3 tipografías, 4 tipos de banner y un lineamiento escrito.
Producto real
AntesFotos de ambiente y de stock.
DespuésSiempre productos de la tienda, recortados limpios, y piezas reales del taller.
Celular
AntesSin banner principal, espacio en blanco arriba y mosaicos de a uno.
DespuésHero propio, mosaicos de a 2 y productos con precio en la home.
Links y destinos
AntesBanners sin link; «Ofertas» era una página demo rota y «/shop/» mostraba 0 productos.
DespuésCada imagen lleva a su categoría; Ofertas lista los productos en oferta; «Ver todo» va a la tienda real.
Campañas
AntesCada fecha se resolvía con piezas nuevas desde cero.
DespuésMismo diseño con tema por campaña: Cyber y Black en morado y amarillo, Navidad en rojo y verde.
Mantenimiento
AntesCarrusel con 3 imágenes fijas y secciones vacías.
DespuésCarruseles automáticos (más vendidos, novedades y ofertas) que se actualizan solos con el stock y los precios.