Projeto focado na construção de um elemento de interface para pagamento com cartão, explorando decisões visuais e de interação
Contexto
Exploração de decisões de UI para um componente de pagamento, considerando estados de interação, hierarquia visual e acessibilidade no contexto de checkout, com foco em consistência e reutilização dentro de um design system.
Objetivo
Criar um componente de botão funcional e reutilizável, capaz de manter coerência visual e comportamento consistente em diferentes contextos de interface.
Processo
Iniciei com uma análise visual da identidade da Square, observando hierarquias de cor e tipografia. Em seguida, defini os estados do botão em default, hover e disabled, garantindo contraste utilizando as cores da marca.
Realizei testes de consistência para verificar legibilidade e verificar se as cores atendiam aos padrões de acessibilidade utilizando o site de checagem de contraste, proporções e harmonia com os demais elementos do layout. Por fim, documentei os tokens de cor e tipografia, estabelecendo uma base que poderia evoluir para um futuro design system.
Resultados
O estudo resultou em um componente de botão escalável e consistente, que equilibra clareza, contraste e estética minimalista. O processo me ajudou a fortalecer minha atenção aos detalhes e consolidar práticas de UI Design aplicáveis em sistemas maiores.
Aprendizados
Aprendi a importância de documentar decisões visuais e de pensar cada componente como parte de um sistema, não apenas um elemento isolado. Além disso, o exercício reforçou a relevância da acessibilidade e do contraste na criação de interfaces inclusivas.
Styleguide
