01 / SAÚDE / FONOAUDIOLOGIA
Franco Vocal Health↗
DESIGN MEETS
CARE & CONNECTION
CARE & CONNECTION
Clareza, acolhimento e uma experiência que aproxima pessoas do cuidado com a voz.
React / TypeScript / Vite ENGINEERING × CREATIVE DEVELOPMENTSÃO PAULO, BRASIL / 23°33′ S
A experiência
ganha forma.CONECTANDO AS IDEIAS
ganha forma.CONECTANDO AS IDEIAS
ENGINEERINGDIGITALEXPERIENCES.
01 / SELECTED WORKIdeias que ganham
Ideias que ganham
presença.(03)
Do primeiro contato ao último detalhe.
Projetos diferentes, novos universos.
A mesma atenção à experiência.
02 / EDUCAÇÃO / MÚSICA
IMCL↗
DESIGN MEETS
RHYTHM & EXPRESSION
RHYTHM & EXPRESSION
Uma experiência editorial que traduz a energia da música em descoberta e conexão.
React / TypeScript / GSAP03 / INTERIORES / GESSO & ILUMINAÇÃO
Gesso Renato↗
DESIGN MEETS
FORM & LIGHT
FORM & LIGHT
Uma experiência arquitetônica que transforma gesso, textura e iluminação em descoberta interativa.
React / TypeScript / Three.jsDA INTENÇÃO À EXPERIÊNCIA / CASE IMCLComo seu projeto
Como seu projeto
ganha forma.
Um objetivo vira direção.
A direção vira uma experiência.
Acompanhe essa construção.
Descoberta
Antes da tela, a intenção.
Na IMCL, o ponto de partida é aproximar quem quer aprender música da escola e de uma aula experimental. A experiência precisa tornar esse próximo passo claro.
Direção visual
A ideia encontra seu ritmo.
Tipografia de presença, vermelho expressivo e fotografia conectam a identidade da escola à energia da música. Hierarquia e espaço dão ritmo à leitura.
Desenvolvimento
Cada parte passa a responder.
A composição vira uma interface: instrumentos para explorar, detalhes dos cursos e uma seleção que acompanha o contato para a aula experimental.
Entrega
Pronto para encontrar pessoas.
A mesma identidade ganha proporções para desktop e celular. A apresentação da escola, os cursos e o convite para a primeira aula compõem a experiência final.
IMCL / ANATOMIA DE UMA EXPERIÊNCIA01 — 04
Uma escola. Diferentes ritmos. Um convite para começar.
Etapas ilustrativas reconstruídas a partir do projeto. A tela final é uma captura real da IMCL.
O processo se adapta ao seu projeto.
A atenção aos detalhes acompanha cada etapa.
✳ARQUITETURA SÓLIDA.
LIBERDADE PARA CRIAR.
LIBERDADE PARA CRIAR.
A experiência começa na superfície.
A qualidade vai muito além dela.
Sou Flávio Luiz Costa. Há mais de 10 anos, conecto arquitetura de soluções e desenvolvimento de software para transformar ideias em experiências digitais.
Da interface à infraestrutura, trabalho com uma visão de ponta a ponta. Combino atuação hands-on e liderança técnica para construir soluções que fazem sentido — por dentro e por fora.
Mais de 10 anos em tecnologiaANOS EM TECNOLOGIA
4 setores: saúde, finanças, energia e educaçãoSAÚDE · FINANÇAS
ENERGIA · EDUCAÇÃO
ENERGIA · EDUCAÇÃO
Equipes de até 6 profissionais que já lidereiPROFISSIONAIS EM EQUIPES
QUE JÁ LIDEREI
QUE JÁ LIDEREI
03 / UI & UX — DESIGNED AROUND PEOPLE
Bonito é o começo.Intuitivo é o que fica.
Entre o que uma pessoa precisa e o que uma interface oferece, cada detalhe conta.
INTERFACE STUDY / 001
01 — CONTEÚDO02 — INTENÇÃO03 — AÇÃO
CLAREZA EM CADA CAMADA.ESTUDO CONCEITUAL
O QUE GUIA A EXPERIÊNCIADesign e desenvolvimento na mesma conversa.
Da composição ao comportamento.
Menos esforço. Mais direção.
Hierarquia visual, conteúdo e navegação organizados para que cada pessoa entenda onde está e qual é o próximo passo.
Da composição ao comportamento.
DO FORMAL AO INFORMAL01 / ESSÊNCIA CORPORATIVA
CLAREZA É UMA FORMA DE SOFISTICAÇÃO.
Clareza na forma.Presença emcada detalhe.
Para empresas que valorizam uma comunicação objetiva, uma identidade sóbria e uma experiência que transmite segurança desde o primeiro contato.
Uma presença à altura da sua empresa ↗01
Hierarquia clara
O essencial aparece primeiro.
02
Elegância discreta
Espaço para a marca respirar.
03
Interação precisa
Cada resposta tem uma função.
O rigor fica.
A expressão muda.
02 / LIBERDADE CRIATIVAMESMA ENGENHARIA. OUTRA ATITUDE.
ORIGINALPOR CONSTRUÇÃO.↗
feito para sair do óbvio ↘
SAIA DALINHA.
PRESENÇA DIGITAL COM VOZ PRÓPRIA.
Para marcas que querem experimentar, provocar e ser lembradas. Energia urbana, composição livre e movimento com intenção.
Ruptura / Personalidade que ocupa espaço.Leve a ideia para o laboratório ↗
DUAS LINGUAGENS. O MESMO CUIDADO.
A personalidade é da sua marca.
A precisão está em como ela ganha vida.
EXPLORAÇÃO VISUAL / FORMA & FREQUÊNCIAIR PARA O LABORATÓRIO ↓
CÓDIGO QUE VOCÊ SENTE.
Além da forma.
Uma presença.
Infinitas maneiras de perceber.
TUDO COMEÇA
COM PRESENÇA.
ROLE PARA TRANSFORMAR ↓Luz e superfície. O primeiro encontro com uma ideia.
A forma muda. A identidade permanece.
INTERACTION LAB / DESIGN IN PRACTICEUma ideia.
Uma ideia.
Outras possibilidades.
Explore três direções para a mesma experiência. Ajuste as decisões, compare com a base e descubra o que combina com o seu projeto.
O QUE ESSA ESCOLHA MUDA
Conversar sobre essa direção ↗Suas escolhas acompanham a mensagem no WhatsApp.Mensagem e imagem em diálogo.
O espaço generoso dá mais destaque à ideia principal. A escala monumental reforça a primeira impressão.
DIVULGUE SEU PRODUTO / PRODUCT SPOTLIGHT
Seu produto.Impossível ignorar.
Uma vitrine que desperta curiosidade.
Uma experiência que transforma
atenção em vontade de conhecer.
Volume Hoodie. Produto 01 / 03
01 / DIREÇÃO DE ARTE
Do catálogo ao desejo.
Luz, cor e composição contam uma história antes da primeira palavra.
02 / INTERAÇÃO
Um convite para explorar.
Movimento, profundidade e detalhes aproximam as pessoas do produto.
03 / INTENÇÃO
A sua próxima campanha.
Uma experiência pensada para apresentar, encantar e abrir uma conversa.
04 / ARCHITECTURE & TECHNOLOGYO que você vê.
O que você vê.
Tudo o que sustenta.
Uma experiência fluida começa com decisões que nem sempre aparecem na tela.
SYSTEM VIEW / EXPLODEDSELECIONE UMA CAMADA PARA EXPLORAR
EXPERIENCE LAYER01 / 04
Interface
Componentes com responsabilidades claras, estados previsíveis e uma experiência consistente entre dispositivos.
Explore o caminho de uma interação.
DEMONSTRAÇÃO CONCEITUAL · SEM REQUISIÇÕES EXTERNAS↳
A stack acompanha o problema.
Cada tecnologia tem uma responsabilidade.
RESPONSABILIDADES CLARAS✳EVOLUÇÃO CONTÍNUA✳QUALIDADE DE PONTA A PONTA
05 / ANALYTICS & CONVERSION
Cada clique contauma história.
Eu ajudo a transformar sinais de comportamento em decisões: entender quem chega, o que desperta interesse e onde melhorar o caminho até o contato.
LEITURA DE UMA JORNADADADOS ILUSTRATIVOS
VISITA → CONTATO ENVIADO6,0%
60 envios confirmados
em 1.000 visitas da amostra.
Simulação de um funil sequencial. Números fictícios para explorar a análise.
DO SINAL À DECISÃO03 / 03
Onde a intenção encontra atrito?
Comparo início e conclusão do contato para localizar perdas. Depois, priorizo hipóteses de melhoria no formulário, na mensagem e na chamada para ação.
O QUE A AMOSTRA SUGERE
A visão geral mostra onde a jornada perde continuidade. Separar os públicos ajuda a descobrir quais experiências merecem atenção primeiro.
UMA PERGUNTA MELHOR
O esforço para entrar em contato faz sentido para esse momento?
CENÁRIO INICIALf/
Preencha seus dados.Use o botão acima para visualizar uma possível melhoria.
01 / OBSERVAR
Medir o que importa.
Defino objetivos e eventos de navegação, interesse e contato. Uma base para acompanhar a jornada além do número de visitas.
02 / INTERPRETAR
Encontrar os padrões.
Comparo canais, campanhas e dispositivos para localizar fricções e priorizar oportunidades de captação.
03 / EVOLUIR
Testar. Aprender. Melhorar.
Transformo hipóteses em ajustes de conteúdo e interface. Conecto os envios ao CRM para acompanhar também a qualidade dos contatos.
Seu site pode fazer mais do que ser visto.
Pode ajudar você a decidir melhor.
06 / WHAT I BRING
Criatividadena interface.Engenharia em tudo.
Um repertório completo para construir
o que o seu projeto precisa.
DA IDEIA À EXPERIÊNCIA.EXPLORE AS POSSIBILIDADES ↙
01Creative web development
Experiências que conectam direção de arte, interação e engenharia.
ReactTypeScriptMotionWebGL
02Premium landing pages
Narrativas claras, identidade própria e caminhos simples até o contato.
Design responsivoAcessibilidadePerformance
03Frontend engineering
Interfaces consistentes, componentes reutilizáveis e atenção ao que acontece em cada dispositivo.
ReactAngularJavaScriptHTMLCSS
04Software architecture
Da visão do sistema aos detalhes que sustentam sua evolução.
Cloud nativeSistemas distribuídosMicroserviços
05Digital product engineering
Atuação hands-on, da arquitetura à implementação e à entrega.
Node.jsNestJSAzureGCPDockerKubernetes
06Integrations & automation
Sistemas e ferramentas trabalhando em conjunto, com menos atrito.
APIs RESTMCPAgentic AICI/CD
CRIAR COM LIBERDADE.CONSTRUIR COM PRECISÃO.
07 / NEXT CHAPTER VAMOS CONSTRUIR O PRÓXIMO.
Tem um projeto em mente?
LET’S MAKEIT MATTER.↗
Uma boa conversa é o começo
de uma grande experiência.LinkedIn ↗
de uma grande experiência.LinkedIn ↗