O Cut & Shout é um estúdio de cabeleireiro no centro de Lisboa, com uma marca ousada e artística. Desenhámos e criámos o site: agora os clientes marcam e pagam online, leem as avaliações do Google e encontram o salão no mapa.
O que fizemosDesign e criação do site, marcações, pagamentos, avaliações Google, FAQ
Ano2026
O desafio
Um site novo
O salão queria um site novo. Pediu:
Design de um site novo, de acordo com o manual de marca
Marcações online pelo Altegio
Serviços no site que se atualizam sozinhos quando o salão os muda no Altegio
Pagamentos com Stripe
Avaliações e mapa do Google no site
Planeámos a estrutura no Figma, fizemos o design, criámos o site e depois ligámos as marcações, os pagamentos e o Google.
Como trabalhámos
Do manual de marca ao site online
Marca e referênciasPartimos do manual de marca do salão: a fonte, as cores, o monograma C&SH. Depois juntámos referências e definimos o ambiente.
Estrutura no FigmaDesenhámos os wireframes para computador e telemóvel, bloco a bloco: serviços, preços, avaliações, mapa, equipa, contactos. O salão aprovou a lógica antes do design.
Design no FigmaSobre a estrutura criámos o design completo no estilo do salão, para todos os tamanhos de ecrã.
DesenvolvimentoPassámos o design do Figma para um site real, em português e inglês.
IntegraçõesLigámos o Altegio para as marcações, o Stripe para os pagamentos e o Google Maps para o mapa e as avaliações. A lista de serviços no site atualiza-se sozinha quando o salão a muda no Altegio.
FAQ para pesquisa com IAEscrevemos um FAQ com as perguntas que os clientes fazem de verdade, para que o ChatGPT e outros assistentes de IA encontrem o salão e saibam falar dele.
Por dentro do projeto
Do manual de marca ao design
1Manual de marcaO manual de marca do salão foi o nosso ponto de partida: uma só fonte e um logótipo forte.
2MonogramaO logótipo curto C&SH, usado na versão do site para telemóvel.
3CoresAs três cores calmas da marca passaram a ser as cores do site.
4Etapa 1 no Figma: estruturaA página inicial para computador e telemóvel, bloco a bloco.
5Etapa 1 no Figma: estruturaAvaliações, mapa e formulário de contacto.
6Etapa 1 no Figma: estruturaA tabela de preços, para encontrar cada serviço e preço com facilidade.
7Etapa 2 no Figma: designO design completo para computador e telemóvel. Faça scroll dentro da imagem para ver a página toda.
8O salãoRua de São Mamede, Lisboa. Interior de MT.A, fotografia de Maria Sher.
O resultado
O que o salão ganhou
Um novo canal de clientes
O site, o Google Maps e o FAQ trabalham juntos: as pessoas encontram o Cut & Shout pelo Google e por assistentes de IA, não só pelo Instagram.
Marcações fáceis, a qualquer hora
O cliente escolhe o profissional e a hora online e paga no mesmo sítio. Sem esperar resposta por mensagem.
Um site no estilo do salão
O site usa a fonte, as cores e as fotos do salão, por isso parece o Cut & Shout e não um modelo pronto.