Una barbería, cinco direcciones de diseño completas: Classic, Dark, Street, Minimal y Swiss. Cambias en vivo, con un clic o una flecha del teclado, y toda la marca cambia de cara sin perder el camino a la conversión. Una demo hecha por iniciativa propia, sin cliente, para mostrar rango de dirección de arte en una sola página.
01 / EL PROBLEMA
"Muéstrame un ejemplo" es la pregunta que frena el proyecto.
Cuando un negocio local pide una landing, la conversación se atasca en el gusto. El dueño no sabe describir el estilo que quiere, y tres referencias de Pinterest no lo resuelven: cada uno imagina algo distinto. El resultado es una ronda de cambios que te ahorrarías si pudieras ver la misma página en estilos distintos, lado a lado.
Tomé una barbería ficticia, Navalha, e hice cinco direcciones de arte completas de la misma landing para resolver justo eso: acordar el gusto antes de producir.
02 / EL ENFOQUE
La misma estructura, cinco pieles.
La regla que me puse: el camino a la conversión no cambia. Hero, servicios con precio, galería, equipo, testimonios y contacto con botón de WhatsApp aparecen en los cinco estilos, en el mismo orden. Lo que cambia es la dirección de arte: tipografía, paleta, ritmo, ornamento.
Classic es sepia y serif vintage. Dark es negro y dorado, premium. Street es naranja neón, alto contraste, letra gigante. Minimal es negro sobre blanco con mucho aire. Swiss es retícula y líneas finas rojas con servicios numerados. Cinco marcas, una sola anatomía de conversión.
03 / LA CONSTRUCCIÓN
Cambio instantáneo, sin framework, una página.
Selector en vivo. Un selector fijo abajo cambia el estilo al instante, con clic o flecha. Cada dirección es una función que devuelve el HTML completo de la página; cambiar es volver a renderizar y subir al inicio. Sin recargar, sin parpadeo.
Cinco tipografías con personalidad. Fraunces para Classic, Bebas Neue para Dark y Street, una sans para Minimal, bold para Swiss. La fuente lleva la mitad de la identidad; elegí cada una para llevar el estilo a un lugar distinto.
La conversión se mantiene en todos. Un precio en cada servicio, un botón para reservar por WhatsApp y el contacto con dirección y horario aparecen en los cinco, porque cambiar de estilo nunca puede costar la conversión.
Es un solo archivo HTML con Tailwind y un poco de JS puro. Sin build, sin backend: lo abres y funciona.
04 / RESULTADO
Cinco propuestas en una pantalla, el gusto acordado en un clic.
La demo se vuelve una herramienta de venta: en lugar de enviar mockups sueltos, abro Navalha con el cliente y cambio de estilo delante de él. En segundos señala lo que le gusta, y el proyecto empieza con la dirección de arte ya decidida.
Cinco direcciones completas, seis secciones y seis servicios con precio, en una sola página que cambia de cara sin perder el camino a la conversión. Es rango de diseño demostrado en vivo, no prometido.
Estilos
5
Secciones
6
Servicios
6
Archivo
1 HTML
