Afinador & Metrônomo
Projetei e construí um afinador cromático e um metrônomo que se instalam na tela de início do celular, do sitemap ao app publicado.
- Papel
- Product Designer · design e desenvolvimento
- Duração
- out/2026
- Plataforma
- PWA (iOS e Android)
- Equipe
- Projeto pessoal
Telas do app
Capturas do app publicado, rodando no tamanho de um iPhone.
Afinador
A nota fica no centro e muda de cor conforme a afinação; o desvio em cents aparece em número, em texto e na régua.
Afinado 
Grave 
Agudo 
Ouvindo
Metrônomo
BPM no centro, tempos tocáveis para acentuar ou silenciar, compasso, subdivisão e tap tempo.
Tocando 
Digitar BPM 
Compasso 
Tap tempo
Primeiro uso
Instruções de instalação para cada sistema e o pedido de microfone explicado antes da permissão.
Instalação 
Permissão do microfone
Ajustes
Calibração do Lá, notação, tela acesa, aparência e idioma.
Ajustes 
Calibração do Lá
Desafio
Eu queria entender, na prática, o caminho inteiro de um app: da estrutura e do design system até o código publicado. Escolhi uma ferramenta que eu mesmo uso para estudar música: um afinador com metrônomo.
O afinador precisa ser lido de relance, com o instrumento nas mãos e o celular longe. E, por ser um app web, ele depende do microfone do navegador, que no iPhone, com o app salvo na tela de início, parava de captar som sem avisar.
Solução
Conduzi tudo: sitemap, design system e telas no Figma, desenvolvimento em React e publicação.
Do sitemap ao design system
Comecei pelo sitemap e por um design system no Figma, com tokens de cor e tipografia e 17 componentes. As mesmas variáveis viraram o CSS do app.
Leitura de relance
Coloquei a nota grande dentro de um orbe que muda de cor: verde-azulado quando afinado, âmbar quando grave, coral quando agudo. O estado também aparece em texto e na régua de cents, nunca só pela cor.
Metrônomo preciso
Agendei as batidas pelo relógio de áudio, e não por timers da página, para o tempo não oscilar. Cada tempo pode ser acentuado ou silenciado com um toque, e o tap tempo calcula o BPM a partir da música.
Feito para o celular
Pedi o microfone uma vez por sessão e criei uma verificação que reinicia a captação quando o iPhone a interrompe. A instalação tem passos próprios para iOS e Android, e o app segue o idioma do aparelho, em português ou inglês.
Resultado
Publiquei o app, que se instala na tela de início do iPhone e do Android e abre em tela cheia, como um app nativo. O projeto me deu a visão completa do processo, da decisão de design ao comportamento do áudio em cada sistema.
- seções: afinador, metrônomo e ajustes
- 3
- componentes no Figma
- 17
- idiomas (português e inglês)
- 2
- sistemas (iOS e Android)
- 2