Stix Fidelidade
Interface • Design System
Overview
A Stix possui 3 principais contatos digitais com clientes. Um aplicativo próprio para iOS e Android, um website e aplicativos que são instalados nos aplicativos dos parceiros (embedded apps). O Design System baseado em React / React Native foi construído para administrar todos os componentes de design da empresa e manter a consistência da experiência do usuário.
Minha função
Eu, como designer, construi todo o guia visual digital da marca e direcionei as equipes de desenvolvimento em cada etapa da construção: desde a fundação até os componentes maiores e fluxos inteiros para apps e site da Stix. Participei ativamente da estratégia da implementação, dos testes de QA e de todo manual de utilização e principais adaptações para o código.
Cores da marca
A marca Stix possui 6 cores (e variações) com alto nível de complexidade para hierarquia e contraste. Nos ambientes digitais, os hexadecimais foram adaptados para melhor legibilidade e constraste entre elas. De maneira geral, a cor branca predomina nos ambientes digitais deixando que a ilustrações assimilem o papel "colorido" da marca. O azul e o índigo foram selecionados para compor hierarquia da informação nos fluxos para apps e sites.
Status de interface
Além das cores da marca, a interface utiliza como elemento de feedback (mas não somente) as cores já convencionadas para tal.
Cinzas
Os tons de cinza auxiliam na construção da hierarquia textual da informação e para algumas composições com background. A marca não utiliza 100% Black e prioriza um mínimo de contraste de cinza para acessibilidade.
Contraste
As cores podem ser combinadas seguindo as regras da WCAG. Na Stix é priorizado o nível AAA, o AA pode ser utilizado com cautela em casos específicos.
Tipografia
A versatilidade da fonte permite compor com pesos que vão do light ao black. Ela é utilizada no site, nos apps e nas comunicações de marketing digital e físicas da marca.
Ícones
Pela facilidade de atualização e administração quanto ao desenvolvimento, utilizamos a biblioteca de ícones FontAwesome. Utilizada como fonte diretamente no código da interface.
Status de botões e CTAs
Status de formulários
Cards de produtos
Shall we talk?
Let's just chat 🤓
Say Hi! by e-mail, WhatsApp or Telegram
hello@ttgonzalez.com
+55 11 9 84433008