Experimento
1 / 4
Problema, solución y resultado.
El problema
El cliente necesitaba una presencia digital que reflejara el nivel premium de su trabajo como tatuador, con una forma real de recibir cotizaciones sin depender de DMs en Instagram ni llamadas telefónicas.
La solución
Se desarrolló un sitio de una sola página HTML con dos vistas: una landing pública con portafolio por estilos, Flash Shop interactivo y un cotizador en 5 pasos y un panel de artista privado con PIN de acceso para gestionar cotizaciones entrantes, agenda semanal y estadísticas del estudio. La comunicación entre vistas se resuelve con localStorage como puente de datos.
El resultado
- Landing pública completa con hero, portafolio, servicios, flash shop, testimonios, precios y cotizador
- Panel de artista con 4 módulos: cotizaciones, agenda, estadísticas y configuración
- Sistema de cotización en 5 pasos con estimación instantánea y resumen antes de enviar
- Flash Shop. Arquitectura sin backend: todo corre en el navegador con localStorage como base de datos (por ahora ya que es prototipo)
Qué demuestra
- Diseño orientado a la identidad de marca.
- Desarrollo de interfaces complejas en vanilla JS sin frameworks
- Arquitectura de datos client-side con localStorage como puente entre vistas
- UX/UI con cursor personalizado, animaciones reveal y mosaico responsive
- Capacidad de construir un producto completo end-to-end para un cliente real
Qué hace cada módulo.
Landing pública
Hero con video de fondo, estadísticas animadas, call-to-action y navegación sticky.
Portafolio por estilos
Mosaico CSS filtrable con 8 piezas organizadas en 6 categorías: Blackwork, Realismo, Fine Line, Geométrico, Traditional, Acuarela.
Flash Shop
Mini e-commerce por estilos con 12 diseños, estados disponible/vendido, precio y sistema de reserva integrado al cotizador.
Cotizador (5 pasos)
Flujo guiado: selección de estilo → medidas y zona del cuerpo → descripción del concepto → referencias visuales → datos de contacto. Genera resumen instantáneo.
Panel de artista
Vista privada con acceso por PIN. Módulos de cotizaciones entrantes (con filtros y exportación CSV), agenda semanal, estadísticas del estudio y configuración.
Cómo se construyó.
Definición de arquitectura
Se planteó un sistema de dos vistas dentro de un único archivo HTML, usando localStorage como puente de datos entre la vista pública y el panel de artista. Sin backend ni framework.
Diseño del sistema visual
Se construyó un sistema de tokens CSS (variables) basado en la identidad del cliente: fondo #080808, acento rojo #ff003c, tipografía mixta display/cuerpo/mono. Cursor personalizado, animaciones con IntersectionObserver.
Desarrollo de módulos
Se implementaron los módulos de forma iterativa: primero la landing (hero, about, galería, servicios), luego el Flash Shop con tabs por estilo, después el wizard de cotización en 5 pasos, y finalmente el panel de artista.
Iteración de contraste y UX
Se realizaron múltiples revisiones de contraste para cumplir AA, correcciones de legibilidad en labels, fixes de navegación mobile y limpieza de datos de prueba.
Tecnologías usadas.
Mejoras futuras planeadas.
Backend real con Firebase o Supabase
Reemplazar localStorage por una base de datos en la nube para sincronizar cotizaciones entre dispositivos y acceder al panel desde cualquier lugar.
Notificaciones WhatsApp automáticas
Integrar la API de WhatsApp Business para enviar confirmación al cliente y alerta al artista cuando llega una cotización nueva.
Autenticación segura del panel
Reemplazar el PIN simple por un sistema de login con JWT para proteger el panel de artista de manera real.
Galería dinámica desde CMS
Conectar el portafolio a un CMS headless o panel propio para que el artista pueda agregar piezas sin tocar código.
¿Quieres ver más detalles de este proyecto?
Puedo ampliar cada caso con documentación, capturas adicionales, repositorio, decisiones técnicas y mejoras futuras. Escríbeme y conversamos.