A Distinta Garage é bar, hamburgueria e palco de rock na Freguesia do Ó. O site precisava responder em segundos três perguntas, o que tem hoje, o que tem para comer e como reservar, sem perder a alma de garagem da casa. Neste texto eu conto as etapas: a escuta, a mensagem, a ordem das seções pensada pelo caminho de quem visita, o cardápio que dá fome, as bandas que dá para ouvir antes do show, a votação do público e os testes no celular.
Site de bar costuma cair em um de dois erros. Ou é um cartão de visitas bonito que não responde nada, ou é uma vitrine lotada em que a informação importante se perde no meio de tudo. A Distinta Garage merecia outra coisa: um site que pensasse como o cliente da casa e falasse como a casa fala.
A Distinta é bar, hamburgueria e palco de rock na Freguesia do Ó, Zona Norte de São Paulo, com um pé forte na cultura da moto. Tem show ao vivo, burger artesanal, festa de aniversário, churrasqueira e uma comunidade de bandas que passa pelo palco. O trabalho foi transformar tudo isso num caminho simples para quem chega.
Primeiro a escuta, depois a tela
Antes de desenhar qualquer coisa, a pergunta foi: quem entra nesse site e o que essa pessoa quer resolver? A resposta guiou todo o resto. A maioria quer saber o que tem hoje, quanto custa comer e beber e como garantir uma mesa. Uma parte vem pela primeira vez e quer entender que lugar é esse. Outra é de banda, querendo tocar. E existe o fã, que quer acompanhar a cena.
Comunicação estratégica começa aqui: não no que a marca quer dizer, mas no que o público precisa ouvir para tomar uma decisão. Por isso a abertura do site tem uma frase só, “Rock alto, burger quente.”, e logo abaixo os dois caminhos que mais importam: ver os próximos shows e abrir o cardápio.
A mensagem: falar como a garagem fala
O tom foi definido junto com a estrutura. A Distinta não é um restaurante temático, é uma garagem de verdade, e o texto tinha que soar assim: direto, com humor e com as palavras de quem anda de moto e vive de rock. “Encosta a moto aqui” no contato, “Escolha sua máquina” no cardápio, “Noites que fizeram barulho” na galeria.
Entre uma seção e outra entram frases públicas de grandes nomes do rock, sempre com a fonte indicada. Elas fazem o papel de respiro e reforçam a atmosfera sem precisar de mais texto institucional. E os hambúrgueres já tinham nomes de motos no cardápio da casa, como Bonneville, Sidecar e Fatboy, então o site só precisou assumir essa linguagem com orgulho.
A ordem das seções é uma decisão de UX
Com o conteúdo quase pronto, fizemos um teste simples e revelador: navegar pelo site no lugar de seis tipos de visitante. Quem quer saber o show de hoje, quem vem comer, quem vem pela primeira vez, quem quer fazer uma festa, a banda que quer tocar e o fã. O problema apareceu na hora: o cardápio estava na 13ª seção, atrás de rádio, karaokê e jogo. Quem só queria saber o preço do burger precisava atravessar meio site.
A nova ordem segue o caminho da decisão. Primeiro a agenda, porque é o motivo de sair de casa. Depois o cardápio, com preço à vista. Em seguida a casa, as avaliações e a galeria, para quem nunca veio ganhar confiança. Aí as festas e reservas, depois a cena das bandas, a parte de diversão, o zine e, por fim, o contato. O menu do topo segue exatamente a mesma sequência, e o botão de WhatsApp fica sempre à mão.
- Agenda: o que tem hoje e nas próximas semanas.
- Cardápio: o que comer e quanto custa.
- A casa, avaliações e galeria: confiança para quem chega pela primeira vez.
- Festas e churrasqueira: aniversário e reservas juntos.
- Bandas, votação e “Quer tocar?”: a comunidade do palco.
- Karaokê, rádio, playlist e jogo: diversão para quem quer ficar.
- Zine, manifesto e moto: leitura e cultura.
- Contato: endereço, horários e WhatsApp.
Um cardápio que dá fome antes de dar trabalho
Cardápio em PDF ou em foto de folha impressa é um clássico dos sites de bar, e um clássico ruim: no celular, ninguém lê. A solução foi dividir o cardápio em duas camadas. A primeira é uma vitrine que apresenta cada hambúrguer como uma moto da garagem, em foto grande, com a frase do cardápio, os ingredientes, o preço em destaque e o peso da carne apresentado como “motor”. Ela troca sozinha, pausa quando a pessoa interage e tem miniaturas para escolher.
É isso que a Cores & Sons organiza na prática. Quero fazer isso na minha empresa →
A segunda camada é o cardápio completo da casa, apresentado como um livro que abre conforme a página rola, com fogo de churrasqueira ao fundo. Quem quer decidir rápido fica na vitrine. Quem quer ver tudo folheia o livro ou abre o cardápio digital. As duas necessidades são atendidas sem que uma atrapalhe a outra.
Conhecer a banda antes do show
Agenda de casa de show costuma ser uma lista de nomes, e nome de banda que a pessoa não conhece não convence ninguém a sair de casa. No site da Distinta, cada banda da agenda abre um release no estilo de zine, com foto, formação, influências, redes e o próximo show na casa. E tem um disco de vinil: com um clique, ele sai da capa, gira e toca um trecho da banda.
É um detalhe de interface, mas resolve um problema de comunicação real: transforma um nome desconhecido em uma experiência de dez segundos. E só um disco toca por vez no site inteiro. Se outro começa, o anterior para, porque experiência boa também é saber não fazer barulho demais.
Do visitante ao participante
Um site de casa de show pode ser só informativo ou pode criar motivo para a pessoa voltar. Criamos a votação “Vote que volta!”: o público escolhe qual banda deve voltar ao palco, e as mais votadas entram na agenda do mês seguinte. Um voto por pessoa, com a opção de desfazer, regras claras na tela e um link de compartilhamento para cada banda. Assim a própria banda mobiliza o público dela, e o site da casa ganha visitas de gente nova.
Para as bandas que querem tocar, existe um caminho próprio: um formulário profissional de envio de material, com release, set list, rider técnico, mapa de palco, fotos, vídeos e links. A casa recebe tudo organizado e a banda sente que está falando com um lugar sério. É comunicação estratégica nos dois sentidos: com quem consome e com quem produz a programação.
Celular primeiro, sempre testado
A decisão de sair para um bar quase sempre acontece no celular, muitas vezes no caminho. Por isso cada seção foi desenhada e testada primeiro na tela pequena, e só depois no computador. A galeria, que antes ocupava uma parede de fotos, virou um carrossel de arrastar com o dedo: mostra o clima da casa sem obrigar ninguém a rolar por metros de imagens.
Os testes também pegam o que o olho não vê. A trilha sonora do site, por exemplo, não tocava em alguns celulares porque esperava um tipo de toque que o navegador não aceita para liberar som. Foi corrigida para começar no primeiro toque e testada em iPhone, Android, tablet e computador. E o som respeita quem está navegando: dá para desligar com um botão, a música baixa quando outra começa e a escolha fica salva.
O que fica desse projeto
Olhando de longe, o método é simples. Escutar antes de desenhar. Definir a mensagem junto com a estrutura. Ordenar as seções pelo caminho de quem decide, e não pelo organograma da empresa. Usar interação só onde ela resolve alguma coisa, como ouvir a banda, votar ou escolher o burger. E testar no aparelho em que as pessoas realmente usam o site.
Um site bem feito não é o que tem mais efeitos. É o que faz a pessoa certa encontrar o que precisa e ainda sentir vontade de estar lá. Se o seu negócio precisa de um site que trabalhe a favor dele, é exatamente esse tipo de projeto que eu gosto de conduzir na Cores & Sons.
Leia também
Quer organizar a comunicação da sua empresa?
É o que fazemos: estratégia, conteúdo, audiovisual e IA num fluxo só, com uma linha visual consistente. Conte pra gente o momento da sua marca e desenhamos o caminho.