Superfície
Marca, tipografia e movimento dão personalidade à experiência e ajudam o visitante a se orientar.
Como funciona
Quatro camadas por trás de cada entrega.
Conectamos identidade, interface, dados e implantação ao trabalho que a empresa precisa realizar. As decisões de cada camada orientam a seguinte, do primeiro desenho ao uso no dia a dia.
Em um estudo com 179 grandes empresas de capital aberto, o uso de dados nas decisões foi associado a produtividade 5 a 6% acima do esperado para os demais investimentos (Brynjolfsson, Hitt e Kim, 2011). Na Miranda Faria, isso orienta uma prática: definir critérios, acompanhar os dados e testar o que melhora a operação.
Leia a pesquisaSistema
Arquitetura da interface, estados, rotas e controles organizados em torno das tarefas que o cliente precisa realizar.
Dados
Como as informações são guardadas, relacionadas e calculadas para que a equipe trabalhe a partir dos mesmos registros.
Fundação
Hospedagem, publicação e titularidade fazem parte da entrega. Acessos e documentação apoiam a continuidade do uso pelo cliente.
Ferramentas
As ferramentas por trás do projeto.
- React / Vite: interface e aplicação
- Tailwind CSS: consistência visual entre as telas
- Node.js / Python: automação e integrações
- Figma: design de identidade e interface
- Ferramentas de pesquisa e desenvolvimento com revisão
- APIs REST: integração entre os sistemas da empresa
Ao vivo, agora
Explore como ainterface responde.
Os exemplos abaixo funcionam no seu navegador. Explore como o movimento responde à interação e como uma carga maior afeta o tempo entre os quadros.
01Campo vetorialPartículas respondem ao movimento do cursor em tempo real. O exemplo mostra como uma interface pode reconhecer uma ação por meio do movimento.Passe o cursor sobre o campo.
02Curvas de movimentoCompare três maneiras de começar e terminar um movimento. Passe pelo painel para observar as curvas e perceber como o tempo muda a sensação de uma interação.Arraste por cima pra ler o tempo.
03Tempo de quadroO painel acompanha o intervalo entre quadros no seu navegador. Pressione e arraste para adicionar trabalho; solte para observar a recuperação. O resultado varia conforme o aparelho e as outras tarefas em execução.Pressione e arraste para comparar a resposta sob carga.
Sobre IA
Ferramentas com revisão eresponsabilidade.
Usamos IA para apoiar pesquisa, programação e estudos visuais. Arquitetura, conteúdo e interface passam por revisão antes da entrega. Quando uma imagem é um estudo gerado, sua origem é identificada.