Projeto conceptual: negócio fictício

Primeiro o preço, depois a marcação por WhatsApp

O Estudio Cirera é um estúdio de cabeleireiro e beleza fictício em Valência, Espanha, inventado para mostrar como trabalhamos. A sua página inicial, em espanhol e inglês, responde a “quanto vai custar?” e transforma a resposta num pedido de marcação enviado por WhatsApp.

Setor
Cabeleireiros e barbearias
Localização
Valência, Espanha
Objetivo principal
Pedidos de marcação por WhatsApp
Idiomas
ES / EN

Abre o site de demonstração. É um negócio fictício, por isso os formulários e os botões não contactam ninguém.

O briefing

Quatro profissionais e uma pergunta: quanto custa?

O Estudio Cirera é um estúdio inventado no bairro de Ruzafa, em Valência: a Marta, fundadora e colorista, a Nadia para cabelo encaracolado e noivas, o Álex para cortes de precisão e a Inés para unhas e maquilhagem. No nosso briefing imaginário, a maioria dos novos clientes encontra-os no Google Maps e depois manda um WhatsApp a perguntar quanto custa um balayage, com quem deve marcar e quando há uma vaga. Responder rouba tempo de cadeira, e os clientes de coloração desaparecem muitas vezes quando ouvem “depende”. O site tinha de responder a essas três perguntas na própria página, em espanhol e inglês, e transformar as respostas num pedido de marcação claro, sem o salão ter de comprar um novo programa de marcações.

Para quem é a página

Pessoas em Valência à procura de uma colorista, de um corte para cabelo encaracolado ou de um penteado de noiva, quase sempre no telemóvel depois de encontrarem o salão no Google Maps. Algumas são recém-chegadas ou visitantes que leem inglês com mais facilidade do que espanhol.

Anatomia da página

Anatomia de uma página de salão que enche a agenda

Esta demo é a página inicial de um site maior, em espanhol e inglês. Aqui está ela, do topo do ecrã do telemóvel para baixo.

Estudio Cirera — Projeto conceptual: negócio fictício
  1. Título, uma foto com preço e a próxima vaga

    “Cabelo que se move consigo.” aparece ao lado de uma foto com uma legenda que indica o serviço, a profissional, o tempo e o preço: balayage mel e corte em camadas, Marta, 4 h, 190 €. Por baixo dos dois botões, uma linha em tempo real diz se o estúdio está aberto, na hora de Valência, e um cartão mostra o próximo corte disponível, por exemplo “Hoje às 09:30 com a Nadia”. Um toque nele abre a marcação no último passo, com o serviço, a profissional, o dia e a hora já escolhidos.

  2. Quatro promessas e depois o menu completo

    Uma faixa escura com quatro promessas: preço fixo combinado antes de começar, teste de alergia grátis 48 horas antes da primeira coloração, dez dias para voltar e fazer um retoque grátis, e opções veganas. Depois, o menu: 25 serviços em 6 grupos, cada um com o preço, a duração e o seu próprio link “Marcar”. No telemóvel, os grupos são separadores; no computador ficam lado a lado, em três colunas.

  3. A carta de cores

    Escolha o seu cabelo de hoje (4 opções) e um de 6 tons, do chocolate ao pérola. O resultado indica o serviço de que precisa, o tempo na cadeira, quantas sessões, um preço “a partir de”, a manutenção e quem o faz. “Marcar esta cor” leva essa escolha para a marcação, e uma consulta grátis está à distância de um botão.

  4. Antes e depois, e a secção de noivas

    Duas fotos que arrasta para comparar, cada uma com o serviço, a profissional, o tempo e o preço. Segue-se uma secção de noivas com quatro preços, de uma prova a 75 € a um pacote de 320 € com cabelo e maquilhagem.

  5. Cartões das profissionais

    Quatro pessoas, cada uma com foto, uma frase curta sobre si, aquilo em que é melhor e um link “Marcar com…” que a escolhe na marcação. No telemóvel, os cartões ficam numa fila que se desliza para o lado.

  6. A marcação em cinco passos

    Serviço, profissional, dia, hora e, por fim, nome e telemóvel. Um talão ao lado soma a escolha, a duração e o preço, e diz que as alterações são grátis até 24 horas antes. O último passo escreve uma mensagem de WhatsApp para o estúdio e mostra-lhe uma pré-visualização.

  7. Avaliações de exemplo, vales de oferta, visita e perguntas

    Três avaliações claramente identificadas como conteúdo de exemplo, um criador de vales de oferta com pré-visualização do cartão em tempo real, a morada e o horário com o dia de hoje destacado, oito respostas curtas e um último “Guardamos-lhe uma cadeira?” com botões para marcar e para WhatsApp.

O que traz chamadas e marcações

Cinco decisões que transformam visitas em marcações

Todos os preços estão na página

Os 25 serviços mostram preço e duração. Os preços de coloração dizem “a partir de”, e uma nota explica que o cabelo muito comprido ou grosso custa mais 10–20 €, combinado antes de começar. Até as fotos do topo e do antes e depois têm preços. Ninguém tem de mandar uma mensagem só para saber quanto custa alguma coisa.

Uma carta de cores em vez de “depende”

A coloração é onde as pessoas mais hesitam, porque não conseguem adivinhar o preço. Dois toques transformam “castanho-claro, quero mel” num balayage pintado à mão: 3 h 30 min, 1 sessão, a partir de 145 € e um gloss a cada 10–12 semanas. É sempre apresentado como preço indicativo, fixado numa consulta grátis.

Cada link “Marcar” preenche a marcação

As linhas do menu escolhem o serviço, os cartões escolhem a profissional, o resultado da carta de cores escolhe as duas coisas e o cartão da próxima vaga escolhe o serviço, a profissional, o dia e a hora. Quem visita chega ao passo certo, sem ter de recomeçar.

A marcação acaba no WhatsApp, não num formulário

No nosso briefing imaginário, o salão já aceita marcações por WhatsApp. Por isso, o processo recolhe o serviço, a profissional, o dia e a hora e escreve a mensagem pelo cliente. O salão recebe pedidos arrumados e completos, sem software novo. Na demo só vê uma pré-visualização: nada é enviado.

No telemóvel, um toque leva-o em frente

Escolher um serviço, uma profissional, um dia ou uma hora passa logo ao passo seguinte, e o passo da profissional é saltado quando só uma pessoa faz esse serviço. A barra inferior (Ligar, WhatsApp, Marcar) sai do caminho enquanto escreve ou usa a marcação, para nunca tapar os botões.

Resultados medidos

  • 91Desempenho
  • 100Acessibilidade
  • 100Boas práticas

Google Lighthouse, telemóvel, 4G simulado, medido a 19 de setembro de 2026. O SEO não é avaliado: as demos conceptuais estão escondidas do Google de propósito (noindex), o que o Lighthouse conta contra elas. Faça o teste na demo online.

Notas técnicas

  • HTML, CSS e JavaScript escritos à mão, sem framework: 86 KB de CSS e JavaScript antes da compressão, 22 KB com gzip. Sem rastreio e sem cookies, e nada do que se escreve nos formulários sai do navegador.
  • Fotos em AVIF com alternativas em WebP e JPEG, em dois ou três tamanhos cada. Só a foto do topo carrega logo; as restantes carregam à medida que desce na página. Todas as fotos foram geradas por IA.
  • Cormorant, uma serifa elegante, para os títulos e os preços, e Archivo para o texto. Ambas alojadas no próprio site (três ficheiros, cerca de 160 KB), sem pedidos ao Google Fonts.
  • Verde-cipreste e pêssego suave, com o laranja da flor de laranjeira, o azahar de Valência, como cor de destaque. O laranja só é usado sobre verde-escuro, onde o contraste é de 6,2:1.
  • Acessibilidade: os separadores do menu e os comparadores antes e depois funcionam com o teclado, os erros dos formulários aparecem em palavras simples ao lado de cada campo, os botões principais têm 52 px de altura e as animações desligam-se para quem ativa o movimento reduzido.
  • Pacote Local Plus (até 12 páginas em 2 idiomas): esta demo mostra só a página inicial, em espanhol e inglês. O Local Plus inclui marcações online, normalmente ligando a aplicação de marcações que o salão já usa; a carta de cores, o processo de marcação por WhatsApp e o criador de vales são extras personalizados, além do pacote.
Paleta
Tipos de letra
Cormorant + Archivo

O pacote que representa

Local Plus

Este conceito é o tipo de site que recebe com o Local Plus: 2490 £ pela criação e depois a partir de 39 £/mês de manutenção. Os extras interativos, como calculadoras e simuladores, são orçamentados à parte.

Sites por setor: Cabeleireiros e barbearias →

Pré-visualização grátis

Quer um site assim para o seu salão ou barbearia?

Fale-nos do seu salão e desenhamos primeiro a sua página inicial, grátis e sem cartão. Só paga se quiser avançar.

  • Sem cartão
  • O domínio em seu nome
  • Cancele a manutenção quando quiser após 3 meses