Apepê Design System

O apepê é um aplicativo criado para simplificar a vida de quem mora em condomínios. Com uma interface intuitiva e moderna, ele torna mais fácil o gerenciamento do dia a dia, como o recebimento de encomendas, a reserva de áreas comuns e o controle de acesso. Além disso, o app conta com uma rede integrada de parceiros, permitindo que moradores solicitem serviços e comprem produtos diretamente pela plataforma, tudo em um só lugar.

Princípios

1 - Engajamento e função social, não somente “app por app”

Acessibilidade acima de tudo, lembre-se que não sabemos quem usará o apepê, portanto, ao criar componentes e interfaces atente-se se estes atendem os requisitos mínimos de acessibilidade. O design deve engajar, atrair a atenção dos usuários e ser visualmente agradável aos olhos de quem vê.

2 - Beleza é usabilidade

Os usuários tendem a achar um design bonito ter melhor usabilidade, portanto, ao criar componentes e interfaces verifique se são viáveis de serem implementados, se estão agradáveis não somente aos seus olhos mas aos olhos dos usuários. Ou seja, antes de implementar, teste com os usuários.

3 - Linguagem direta e informal

Ser direto é mostrar aos usuários o que está acontecendo sem rodeios ou linguagem rebuscada. Use uma linguagem coloquial, nada de “tecniquês”. Mas ser direto não significa deixar de dar informações, deixe o usuário informado do que está acontecendo, detalhe os erros para que ele possa superá-los sozinho.

4 - Bom humor e informalidade

Evite palavras ou frases negativas, evite dizer que um problema ocorreu por falha do usuário. Use frases positivas, incentive o usuário a tentar de novo, use emojis 😉 .
Ao invés de: “Ocorreu um erro, não foi possível realizar o pagamento” Use: “Ops, tivemos um problema de comunicação! Por favor, tente fazer o pagamento novamente.”

5 - Simplicidade e facilidade

Telas bonitas, simples e fáceis de usar. - Menos é mais - .

6 - Material V3

Os componentes devem ser criados seguindo os padrões do Material Design V3 ou V2 caso o componente ainda não tenha sido migrado para o V3.

Tipografia & Cores

Tom de voz

O Tom de voz, define como o apepê irá se comunicar com os usuários. Trata a parte conversacional do aplicativo, como textos de botões, mensagens de alerta, títulos, cabeçalhos, notificações, feedbacks, modais e cards. O Tom de voz também deve ser utilizado para a elaboração de campanhas de publicidade, em redes sociais e site.

Grid

O grid é responsável por organizar e posicionar os elementos na tela. No Apepê, o layout foi pensado para se adaptar perfeitamente a três diferentes tamanhos de dispositivos: desktop, tablet e mobile, garantindo uma experiência consistente e fluida em qualquer tela.

Principais telas