Backpet — Style Guide

Esse artigo é parte do case “Backpet — Ajudando tutores de pet e vererinários com UX”

Tipografia

A tipografia utilizada é a Montserrat, uma tipografia com uma boa legibilidade (distinção entre uma letra e outra) e leiturabilidade (a facilidade de leitura em texto corrido).

A Montserrat possui uma diversidade de pesos em sua família tipográfica que facilita a hierarquização entre os textos.

A tipografia é conhecida e pode ser encontrada no Google Fonts, isso ajuda a manter a facilitando para a equipe de desenvolvimento o uso

Para promover uma leitura confortável, o espaçamento das entrelinhas foi calculado com base no tamanho da tipografia, sendo, 120% para texto display (títulos) e 150% e para texto corrido.

Cores

As definição das cores utilizadas no app foram baseadas no contexto em que os usuários se encontram.

A cor primária é o Verde Tiffany que remete a saúde, segurança e esperança. A cor secundária é o Azul Cerúleo e transmite a sensação de calma, confiança e seriedade, além disso, ela possui uma boa acessibilidade para pessoas com daltonismo. Para os títulos e textos corridos foi criada uma escala de cores neutras, abrangendo as cores de ponta-a-ponta, ou seja, do preto ao branco. E para o background um mix entre as cor primária e secundária na tonalidade cinco de ambas as cores.

As cores Amarela, Vermelha e Verde foram escolhidas para serem usadas nas validações dos formulários e nas caixas de alerta.

A criação da escala das cores foi desenvolvida no site hihayk. A partir da cor principal foram adicionadas mais seis tonalidades de cores, sendo, duas mais escuras com acréscimo de 35% de sombra e 25% de saturação, e quatro mais claras com acréscimo de 80% de brilho e 25% de saturação e 0% de ângulo de matiz em ambas tonalidades.

Para as cores neutras foi utilizada uma configuração específica. Para as cores escuras, foi acrescentada 60% de sombra e 25% de saturação, e para as mais claras acréscimo de 100% de brilho e 25% de saturação, chegando assim ao branco puro.

Ícones

A escolha dos ícones exigiu um estudo e uma cautela a cerca de pessoas com baixa visão, por isso foi utilizado ícones preenchidos ao invés de ícones vazados.

Pensando em usabilidade, seguimos a segunda heurística de Nielsen, padrão de correspondência entre o sistema e o mundo real, deixando a interface mais intuitiva e fácil de usar.

Para formar o grupo de ícones utilizados no Backpet, foram utilizados ícones do Material Design Icons, Font Awesome e ícone de autoria própria.

Componentes

Foi criada uma biblioteca de componentes com o propósito de manter a consistência e padrões do app (quarta heurística de Nielsen) e facilitar na criação das telas e possíveis ajustes.

Os elementos do formulário foram projetados pensando na acessibilidade. Os inputs, select e botões possuem uma altura de 56px que está dentro do padrão recomendado. A maioria das plataformas recomendam uma área clicável de no mínimo 48px, já a Apple a recomendação é de 44px.

Logotipo

O logotipo Backpet é originado de dois termos: Backpack que significa mochila e Pet que significa bicho de estimação.

A ideia foi a associar o app à mochila de primeiros socorros, quando usada, está junto ao corpo, referenciando ao app estar sempre no bolso dos tutores.

A tipografia usada foi a Baloo 2, uma tipografia não-serifada e com bordas arredondadas que dá a impressão de uma tipografia desenhada.

As cores do logo foram baseadas na raça Welsh Corgi Pembronke, uma raça de cães nativa do País de Gales.

Um fato curioso sobre a bandeira do País de Gales: Ela possui as cores do nosso app (Verde, Vermelho e Branco).