Proyecto conceptual: negocio ficticio

Primero el precio, después la cita por WhatsApp

Estudio Cirera es un estudio ficticio de peluquería y estética en Valencia, inventado para enseñar cómo trabajamos. Su página de inicio, en español e inglés, responde a “¿cuánto me va a costar?” y convierte la respuesta en una solicitud de cita enviada por WhatsApp.

Sector
Peluquerías y barberías
Ubicación
Valencia, España
Objetivo principal
Solicitudes de cita por WhatsApp
Idiomas
ES / EN

Abre la web de demostración. Es un negocio ficticio, así que los formularios y botones no contactan con nadie.

El encargo

Cuatro estilistas y una pregunta: ¿cuánto cuesta?

Estudio Cirera es un estudio inventado en el barrio de Ruzafa, en Valencia: Marta, la fundadora y colorista; Nadia, para rizos y novias; Álex, para cortes precisos, e Inés, para uñas y maquillaje. En el encargo que imaginamos, la mayoría de los clientes nuevos encuentran el estudio en Google Maps y luego mandan un WhatsApp para preguntar cuánto cuesta un balayage, con quién deberían ir y cuándo hay un hueco libre. Contestar quita tiempo de sillón, y quienes buscan un cambio de color a menudo dejan de responder en cuanto oyen “depende”. La web tenía que responder a esas tres preguntas en la propia página, en español e inglés, y convertir las respuestas en una solicitud de cita clara sin que el salón tuviera que comprar un programa de reservas nuevo.

Para quién es la página

Gente de Valencia que busca colorista, un corte para pelo rizado o un peinado de novia, casi siempre desde el móvil tras encontrar el salón en Google Maps. Algunos son recién llegados o visitantes que leen inglés con más facilidad que español.

Anatomía de la página

Anatomía de una web de peluquería que consigue citas

Esta demo es la página de inicio de una web más grande, en español e inglés. Aquí la tienes desde lo alto de la pantalla del móvil hacia abajo.

Estudio Cirera — Proyecto conceptual: negocio ficticio
  1. Titular, una foto con precio y el próximo hueco libre

    “Pelo que se mueve contigo.” aparece junto a una foto con un pie que indica el servicio, la estilista, el tiempo y el precio: balayage miel y corte en capas, Marta, 4 h, 190 €. Bajo los dos botones, una línea en directo dice si el estudio está abierto, en hora de Valencia, y una tarjeta muestra el próximo corte libre, por ejemplo “Hoy a las 09:30 con Nadia”. Un toque en ella abre la reserva en el último paso, con el servicio, la estilista, el día y la hora ya elegidos.

  2. Cuatro promesas y, después, la carta completa

    Una franja oscura con cuatro promesas: precio cerrado antes de empezar, prueba de alergia gratis 48 horas antes del primer color, diez días para pedir un retoque gratis y opciones veganas. Luego, la carta: 25 servicios en 6 grupos, cada uno con su precio, lo que tarda y su propio enlace “Reservar”. En el móvil los grupos son pestañas; en el ordenador van uno al lado de otro en tres columnas.

  3. El selector de color

    Elige tu pelo de hoy (4 opciones) y uno de 6 tonos, del chocolate al perla. El resultado te dice el servicio que necesitas, el tiempo en el sillón, cuántas sesiones, un precio “desde”, el mantenimiento y quién lo hace. “Reservar este color” lleva esa elección a la reserva, y una consulta gratis está a un botón.

  4. Antes y después, y novias

    Dos fotos que arrastras para comparar, cada una con el servicio, la estilista, el tiempo y lo que costó. Sigue una sección de novias con cuatro precios, desde una prueba de 75 € hasta un paquete de 320 € con peinado y maquillaje.

  5. Fichas de estilistas

    Cuatro personas, cada una con su foto, una frase breve sobre ella, en qué es mejor y un enlace “Reservar con…” que la elige en la reserva. En el móvil, las fichas van en una fila que se desliza de lado.

  6. La reserva en cinco pasos

    Servicio, estilista, día, hora y, por último, nombre y móvil. Un ticket al lado suma lo elegido, la duración y el precio, y aclara que los cambios son gratis hasta 24 horas antes. El último paso escribe un mensaje de WhatsApp al estudio y te enseña cómo queda.

  7. Reseñas de ejemplo, tarjetas regalo, visita y preguntas

    Tres reseñas marcadas claramente como contenido de muestra, un creador de tarjetas regalo que muestra la tarjeta en directo, la dirección y el horario con el día de hoy resaltado, ocho respuestas breves y un último “¿Te guardamos un sillón?” con botones para reservar y para WhatsApp.

Por qué consigue llamadas y reservas

Cinco decisiones pensadas para conseguir citas

Todos los precios, en la página

Los 25 servicios muestran precio y duración. Los precios de color dicen “desde”, y una nota explica que el pelo muy largo o muy grueso cuesta entre 10 y 20 € más, acordados antes de empezar. Hasta las fotos del principio y las de antes y después llevan precio. Nadie tiene que mandar un mensaje solo para saber cuánto cuesta algo.

Un selector de color en vez de “depende”

El color es donde más duda la gente, porque no puede adivinar el precio. Dos toques convierten “castaño claro, quiero miel” en un balayage pintado a mano: 3 h 30 min, 1 sesión, desde 145 € y un baño de brillo cada 10–12 semanas. Siempre se muestra como precio orientativo, que se cierra en una consulta gratis.

Cada enlace “Reservar” rellena la reserva

Las filas de la carta eligen el servicio, las fichas eligen a la persona, el resultado de color elige las dos cosas, y la tarjeta del próximo hueco elige servicio, estilista, día y hora. Quien visita la web llega al paso correcto en lugar de empezar de cero.

La reserva acaba en WhatsApp, no en un formulario

En el encargo que imaginamos, el salón ya da citas por WhatsApp. Así que el proceso recoge servicio, estilista, día y hora, y escribe el mensaje por el cliente. El salón recibe solicitudes ordenadas y completas sin programas nuevos. En la demo solo ves una vista previa: no se envía nada.

En el móvil, un toque te hace avanzar

Al elegir servicio, estilista, día u hora pasas directamente al siguiente paso, y el paso de estilista se salta cuando solo una persona hace ese servicio. La barra inferior (Llamar, WhatsApp, Reservar) se aparta mientras escribes o usas la reserva, así que nunca tapa los botones.

Puntuaciones medidas

  • 91Rendimiento
  • 100Accesibilidad
  • 100Buenas prácticas

Google Lighthouse, móvil, 4G simulado, medido el 19 de septiembre de 2026. El SEO no se puntúa: las demos conceptuales están ocultas a Google a propósito (noindex), y Lighthouse lo cuenta en su contra. Compruébalo tú en la demo.

Notas técnicas

  • HTML, CSS y JavaScript escritos a mano, sin framework: 86 KB de CSS y JavaScript sin comprimir, 22 KB con gzip. Sin seguimiento y sin cookies, y nada de lo que escribes en los formularios sale del navegador.
  • Fotos en AVIF con alternativas en WebP y JPEG, en dos o tres tamaños cada una. Solo la foto principal se carga de inmediato; las demás se cargan a medida que bajas. Todas las fotos están generadas con IA.
  • Cormorant, una serif elegante, para títulos y precios, y Archivo para el texto. Las dos están alojadas en el propio servidor (tres archivos, unos 160 KB), sin llamadas a Google Fonts.
  • Verde ciprés y melocotón suave, con el naranja de la flor de azahar valenciana como color de acento. El naranja solo se usa sobre verde oscuro, donde su contraste es de 6,2:1.
  • Accesibilidad: las pestañas de la carta y los comparadores de antes y después funcionan con teclado, los errores del formulario aparecen en palabras sencillas junto a cada campo, los botones principales miden 52 px de alto y las animaciones se desactivan para quien activa el movimiento reducido.
  • Paquete Local Plus (hasta 12 páginas en 2 idiomas): esta demo muestra solo la página de inicio, en español e inglés. Local Plus incluye reservas online, normalmente enlazando la app de reservas que el salón ya usa; el selector de color, la reserva por WhatsApp y el creador de tarjetas regalo son extras a medida que se suman.
Paleta
Tipografías
Cormorant + Archivo

El paquete que representa

Local Plus

Este concepto es el tipo de web que tienes con Local Plus: 2.490 £ de creación y después desde 39 £/mes de mantenimiento. Los extras interactivos, como calculadoras y presupuestos al instante, se presupuestan aparte.

Páginas web por sector: Peluquerías y barberías →

Vista previa gratis

¿Quieres una web así para tu peluquería o barbería?

Cuéntanos cómo es tu salón y primero diseñamos tu página de inicio, gratis y sin tarjeta. Solo pagas si decides seguir adelante.

  • Sin tarjeta
  • Tu dominio a tu nombre
  • Cancela el mantenimiento cuando quieras tras 3 meses