Cultura do espaço → linguagem visual
Letras expressivas e texturas levam as referências de rua do estúdio para a página. A escolha tem relação com o artista e com o ambiente apresentado.
UX/UI DESIGN / LANDING PAGE
BRONKS
TATTOO.
Landing page para apresentar
o artista e orientar o agendamento.
Como a visita ao Bronks Tattoo orientou uma landing page que apresenta o artista, valoriza suas tatuagens e aproxima o visitante do agendamento.
EXPLORE O CASE ↓
01 / CONTEXTOO desafio: apresentar o estúdio
O desafio: apresentar o estúdio
e facilitar o primeiro contato.
O desafio era levar a identidade do Bronks Tattoo para uma página em que o visitante pudesse conhecer o artista, explorar estilos e encontrar como agendar.
O estúdio reúne referências de grafite, hip hop e cinema. Meu ponto de partida foi entender como esse repertório poderia aparecer na interface, enquanto a página apresentava as informações necessárias para quem ainda não conhecia o trabalho de Eduardo.
Atuei na pesquisa de referências, na visita ao espaço, na direção visual e no desenho da landing page. Organizei a apresentação em torno de três necessidades: reconhecer a personalidade do estúdio, visualizar os trabalhos e acessar o contato.
- PROJETO
- Bronks Tattoo
Estúdio de tatuagem - MEU PAPEL
- Pesquisa de referências,
direção visual e UX/UI - ESCOPO
- Landing page
e sistema visual - OBJETIVO
- Apresentar o estúdio
e facilitar o agendamento
MINHA CONTRIBUIÇÃO
Conectei a pesquisa no espaço físico à direção visual e à arquitetura da página: o trabalho do artista apresenta a oferta, os estilos apoiam a escolha e as chamadas conduzem ao contato.
02 / PESQUISA E IMERSÃOVisita ao estúdio e benchmark
Visita ao estúdio e benchmark
para definir a direção visual.
Visitei o espaço e conversei com Eduardo, conhecido como Bronks. A decoração e a trajetória do artista se tornaram referências para o conceito visual.
Eduardo mostrou detalhes da decoração: grafite, pixação, filmes antigos e action figures. Sua relação com o rap e a cultura hip hop ajudou a contextualizar esses elementos. A visita deu uma origem concreta à linguagem urbana usada no projeto.
Em paralelo, comparei referências visuais de sites de estúdios internacionais. Observei o uso de fundos escuros, fotografias em destaque e títulos expressivos. Essa análise serviu de repertório para a composição; a identidade do Bronks veio da imersão no próprio espaço.
Fotografia → apresentação do trabalho
A base escura dá continuidade à atmosfera do projeto. Fotografias do processo e das tatuagens mostram o trabalho ao longo da navegação.
03 / DIREÇÃO VISUALTipografia, cor e contraste
Tipografia, cor e contraste
com funções definidas.
Dividi a linguagem visual em duas funções: títulos com presença para expressar a marca e textos de apoio para organizar a leitura.
Angel Rhapsody aproxima os títulos das letras presentes no repertório urbano do estúdio. Montserrat sustenta os parágrafos, a navegação e as informações práticas, criando uma hierarquia entre o nome da marca e o conteúdo que o visitante precisa consultar.
O acento quente #F2A053 aparece nos botões e em detalhes tipográficos sobre a base escura. Cinzas e branco organizam os níveis de informação; rosa claro e vermelho completam a paleta explorada no projeto.
H1
Angel bold 90 px
H2
Angel rhapsody regular 68 px
H3
Angel rhapsody regular 60 px
H4
Angel rhapsody regular 60 px
Body strong
Montserrat Bold 24 px
Body
Montserrat medium 24 px
Body 2
Montserrat medium 18 px
Caption
Montserrat semi bold 18 px
EXPERIMENTE A TIPOGRAFIA
Arte que dura.
Angel Rhapsody / títulos Montserrat / textos de apoio
ACENTO#F2A053
ROSA CLARO#FFDBD3
VERMELHO#CA1C2A
BASE NEUTRA#504F4F
04 / SOLUÇÃOTrês decisões para conectar
Três decisões para conectar
portfólio, informação e contato.
01 / PRIMEIRO CONTATOAbertura com o artista
Abertura com o artista
e acesso ao agendamento.
Coloquei uma fotografia do tatuador em ação na abertura, junto ao nome do estúdio. A imagem apresenta o processo de trabalho; o título estabelece a identidade, e o botão de agendamento oferece uma ação imediata.
Para quem precisa conhecer melhor o espaço antes de decidir, a navegação dá acesso às seções Sobre, Serviços e Contato. A abertura atende tanto à exploração quanto a quem já chega querendo agendar.
DECISÃO CENTRAL
Dar presença ao trabalho do artista e tornar o agendamento visível desde a abertura.
02 / ESTILOS E TRABALHOSEstilos e trabalhos
Estilos e trabalhos
junto à chamada de contato.
Reuni fotografias de tatuagens orientais, old school e realistas em um mesmo bloco. As imagens apresentam diferenças entre os estilos e mostram a variedade de trabalhos disponível na proposta.
A chamada para reservar um Flash Tattoo fica ao lado dessa seleção. A decisão foi aproximar a demonstração do trabalho da possibilidade de entrar em contato, mantendo imagem, descrição e ação no mesmo contexto.
DECISÃO CENTRAL
Usar os trabalhos como ponto de partida para explorar estilos e entrar em contato.
03 / INFORMAÇÕES E CONTATOFAQ e informações práticas
FAQ e informações práticas
para planejar uma visita.
Agrupei perguntas sobre agendamento, personalização e preço em uma seção própria. O desenho usa perguntas recolhidas, para permitir uma visão geral dos assuntos e abrir espaço para consultar cada resposta.
No fechamento, reuni os canais de contato, os horários e um mapa. Esses elementos completam a apresentação com informações práticas para planejar uma visita e conversar sobre a sessão.
DECISÃO CENTRAL
Reunir dúvidas e informações práticas no fim da jornada, com acesso ao contato.
A EXPERIÊNCIA COMPLETA
A landing page completa.
A landing page inteira: abertura, história do artista, estilos de tatuagem, equipe, clientes, perguntas frequentes e contato.
05 / REFLEXÃOIdentidade do estúdio aplicada
Identidade do estúdio aplicada
a uma jornada de agendamento.
A proposta reúne apresentação do artista, seleção de trabalhos, FAQ e contato em uma landing page. O agendamento aparece desde a abertura e volta junto aos estilos de tatuagem.
A principal contribuição da imersão foi conectar as escolhas visuais a referências do próprio estúdio. Tipografia, textura e fotografia passaram a ter uma origem comum, em vez de depender apenas dos sites usados como inspiração.
A próxima etapa é testar a identificação dos estilos, o acesso ao agendamento e a localização das informações práticas. A entrega documentada é a proposta de interface; o efeito sobre agendamentos ainda precisa ser medido.
- Explorar os estilos
Encontrar um estilo de tatuagem e explicar quais informações ajudam a decidir.
- Iniciar o contato
Localizar a ação de agendamento e entender qual seria o próximo passo.
- Planejar uma visita
Encontrar localização, horários e canais de contato do estúdio.
APRENDIZADO DO PROJETO
A visita ao estúdio transformou referências culturais em critérios de design: o que destacar, como apresentar o artista e qual linguagem levar para a tela.
Jorge Yasuo / Product Designer
Case original no Behance ↗