Aplicativo Anatel Comparador - Manual de estilo gráfico App UX/UI by Nayla Gomes

Manual de Estilo Grรกfico App UX/UI

SUMÁRIO SUMÁRIO 2

TIPOGRAFIA 9

INTRODUÇÃO 3

TÍTULOS E PARÁGRAFOS 10

CORES 4 GRID DE CORES 5 CORES 6 BACKGROUND 6

ICONOGRAFIA 7 LOGOMARCA – ÍCONES 8

GRID 15 CAMPOS DE FORMULÁRIO 16 MODAL 20 MENU 23

Manual de estilo gráfico | Aplicativos Anatel

INTRODUÇÃO Este Guia de Estilo Gráfico tem como objetivo a padronização dos aplicativos da Anatel, a fim de manter a coesão na identidade visual e na usabilidade do aplicativo. Para isso, foram descritos, nas páginas a seguir, padrões de botão, cor, tipografia, iconografia, input de dados, entre outros.

Manual de estilo gráfico | Aplicativos Anatel

CORES

OP1

Tons de azul

OP3

Tons de amarelo

OP5

Tons de verde

As cores para os aplicativos seguem uma variação cromática baseada no logo da Anatel, com tons de azul, amarelo e verde. Para a criação de novos aplicativos, deve-se consultar qual das cores ao lado não está em uso, a fim de evitar a repetição de layout.

4 OP2

exemplos de aplicação da grid de cores

OP4

OP6

CORES

Manual de estilo gráfico | Aplicativos Anatel

GRID DE CORES Para composição dos layouts, deve-se usar a grid abaixo. Ou seja, todo aplicativo terá cinco cores a serem utilizadas: background, destaques, botões/ícones, textos e modais. Os tons variam de acordo com o contraste entre os títulos, textos e cor de fundo, preservando a legibilidade e a coesão na identidade visual.

5 OP1

OP2

OP3

OP4

OP5

BACKGROUND

#004F9F

#4A89EB

#F7DC00

#FFFF64

#00803B

#06C88C

DESTAQUES

#FFE400

#046BB2

#1C8829

#FFE300

#184EAD

BOTÕES/ÍCONES

#003870

#046BB2

#B99A00

#BCB53D

#0D5B21

#04895C

TEXTOS

#FFFFFF

#797979

#FFFFFF

MODAIS

#7399C0

#96B9EE

#F6E678

#F7F7A9

#74B691

#77DCBB

OP6

grid completa de cores

CORES

Manual de estilo gráfico | Aplicativos Anatel

BACKGROUND O fundo dos aplicativos deve seguir uma composição gráfica de 3 círculos sobrepostos sobre um fundo gradiente, seguindo as cores base do aplicativo. O gradiente deve formar um leve brilho lateral, guiando a navegação de maneira gradual e, dessa forma, transmitindo a sensação de etapas.

gradiente cor background 20%

1º círculo

2º círculo

3º círculo

Manual de estilo gráfico | Aplicativos Anatel

ICONOGRAFIA Os ícones devem seguir uma linha gráfica minimalista, na qual o reconhecimento do objeto ou serviço desejado acontece com o mínimo de linhas possível. Caso não seja encontrado um ícone na biblioteca proposta, este deve ser desenhado respeitando a espessura da linha no tamanho de 2 pixels. A coloração dos ícones deve obedecer a grid de cores, levando em consideração a cor selecionada para o seu background e sempre utilizando duas cores, “ícones” e “detalhes”.

ICONOGRAFIA

Manual de estilo gráfico | Aplicativos Anatel

LOGOMARCA – ÍCONES Os aplicativos da Anatel deverão ser disponibilizados nos sistemas operacionais iOS e Android, com os ícones nos tamanhos 1024x1024 e 512x512 pixels, respectivamente. As cores e os símbolos dos ícones dos aplicativos devem seguir todos os padrões estabelecidos neste manual, como a grid de cores e a iconografia. O logotipo “Anatel” deve permanecer no canto superior esquerdo em todos os ícones, assim como a sobreposição dos círculos procedente, também, dessa posição (mais destaque à marca). O fio do símbolo possui 10 pixels de espessura (referente ao tamanho 512x512 pixels dos ícones) e deve ter apenas duas cores: branca e a cor destaque de maior contraste com o background. Localizado no canto inferior direito, o símbolo deve ultrapassar as margens de sangramento inferior e lateral direito.

Os outros aplicativos da Anatel devem estar representados por um link no menu, a fim de ampliar a divulgação e interligar a navegação entre os apps.

Manual de estilo gráfico | Aplicativos Anatel

TIPOGRAFIA Todo o conteúdo dos aplicativos da Anatel devem estar aplicados na fonte Fira Sans. Os tipos dessa fonte visam cobrir as necessidades de legibilidade para uma grande variedade de aparelhos que variam em qualidade de tela e renderização. Não possui serifas e tem muitas variações de peso, permitindo que a hierarquia de informações fique mais nítida no conteúdo.

Fira Sans

Fira Sans Condensed

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

TIPOGRAFIA

Manual de estilo gráfico | Aplicativos Anatel

TÍTULOS E PARÁGRAFOS Para manter a hierarquia no conteúdo, é preciso seguir a ordem dos títulos e parágrafos, com suas diferentes funções e pesos. »» Perguntas e respostas

TÍTULO 1

Fira Sans Extra Condensed bold Caixa alta, 24 px Alinhamento à esquerda

Título 2

Fira Sans Extra Condensed bold Caixa alta/baixa, 24 px Alinhamento à esquerda

Título 3

Fira Sans Extra Condensed regular Caixa alta/baixa, 22 px Alinhamento à esquerda/centralizado

Título 4 (informação) Fira Sans Extra Condensed light Caixa baixa, 19 px Cor #FFFFFF, opacidade 50%

TIPOGRAFIA

Manual de estilo gráfico | Aplicativos Anatel

TÍTULOS E PARÁGRAFOS »» Navegação

Título 1

Fira Sans regular Caixa alta/baixa, 25 px

Título 2 Fira Sans regular, cor destaque Caixa alta/baixa, 20 px

Título 3

Fira Sans Extra Condensed regular Caixa alta/baixa, 22 px

TIPOGRAFIA

Manual de estilo gráfico | Aplicativos Anatel

TÍTULOS E PARÁGRAFOS »» Tabelas

TÍTULO 1

Fira Sans Extra Condensed bold Caixa alta, 24 px Alinhamento centralizado

Título 2 Fira Sans Extra Condensed light Caixa alta/baixa, 24 px Alinhamento à esquerda e à direita

TIPOGRAFIA

Manual de estilo gráfico | Aplicativos Anatel

TÍTULOS E PARÁGRAFOS »» Modal

TÍTULO 1

Título 2

Caixa alta, 24 px

Caixa alta/baixa da frase, 24 px

Alinhamento centralizado

Fira Sans Extra Condensed bold

TÍTULO 3

Fira Sans Extra Condensed bold Caixa alta, 22 px Justificado à esquerda

Parágrafo 1

Fira Sans Extra Condensed light Caixa alta/baixa, 22 px Justificado à esquerda

Fira Sans Extra Condensed light 13

TIPOGRAFIA

Manual de estilo gráfico | Aplicativos Anatel

TÍTULOS E PARÁGRAFOS »» Modal

Título 1

Fira Sans Extra Condensed bold

Título 2

Fira Sans Extra Condensed light

Caixa alta/baixa da frase, 24 px

Alinhamento centralizado

Título 3 (links)

Fira Sans Extra Condensed light Caixa alta/baixa da frase, 24 px Alinhamento centralizado

Manual de estilo gráfico | Aplicativos Anatel

GRID A grid é formada por 12 colunas, com espaçamento (gutter) e margens laterais de 30 pixels. Também é dividida em linhas de 30 pixels que separam todos os elementos em harmonia.

margem 30 px

gutter 30 px

margem 30 px

menu, navegação e identificação 211 px

linhas 30 px

15 conteúdo ajustável

botões de ação 118 px

Manual de estilo gráfico | Aplicativos Anatel

CAMPOS DE FORMULÁRIO Este capítulo aborda os estilos gráficos dos seguintes controles: »» botões de ação »» radio button »» checkbox

switch button (ativo) 3 colunas e 1 linha (30 px) Fira Sans light, 20 px

»» slider »» combo box »» switch button

radio button 30 x 30 px, 1 px de espessura Fira Sans extra condensed light, 24 px

»» text field

checkbox list 30 x 30 px, 1 px de espessura Fira Sans extra condensed light, 24 px

botões de ação 4 colunas e duas linhas (60 px) Fira Sans extra condensed light, 24 px

CAMPOS DE FORMULÁRIO

Manual de estilo gráfico | Aplicativos Anatel

»» Botões de ação

›› 4 colunas e duas linhas (largura e altura variáveis)

Fira Sans Extra Condensed light, 24 px

»» radio button Fira Sans Extra Condensed bold, 24 px Fira Sans Extra Condensed light, 24 px ›› Apenas uma opção pode ser selecionada ›› 30 x 30 px, 1 px de espessura do fio ›› Limite máximo de 5 opções distribuídas lado a lado ›› Espaçamento de 30 px entre o título e os itens (vertical)

»» checkbox

Fira Sans Extra Condensed light, 24 px ›› 30 x 30 px (tamanho mínimo), 1 px de espessura do fio ›› Fira Sans Extra Condensed light, 24 px ›› Lista sem limite de opções, com scroll ›› Espaçamento de 30 px entre os itens

CAMPOS DE FORMULÁRIO

Manual de estilo gráfico | Aplicativos Anatel

»» slider Fira Sans Extra Condensed light, 20 px

Fira Sans Extra Condensed regular, 22 px ›› Deve ocupar toda a área de conteúdo de forma longitudinal ›› Pode ser deslizado entre os valores ou clicado em - ou + ›› O valor é indicado acima do botão slider na cor destaque ›› Altura de 1 linha (30 px - tamanho mínimo)

Fira Sans Extra Condensed light, 19 px Cor #FFFFFF, opacidade 50%

»» combo box ›› Altura mínima: 2 linhas (60 px) ›› Conteúdo interno na cor destaque ›› Fio com espessura de 1,5 px ›› Abre conforme padrão de cada Sistema Operacional Fira Sans Extra Condensed bold, 24 px, cor destaque Select box em destaque (campo obrigatório não preenchido)

Fira Sans Extra Condensed regular, 24 px Cor destaque Combo box/Number field ›› Largura variável do combo box: tamanho mínimo de 3 colunas (123 px) Fira Sans Extra Condensed light, 24 px, cor destaque

CAMPOS DE FORMULÁRIO

Manual de estilo gráfico | Aplicativos Anatel

»» switch button Fira Sans Extra Condensed bold, 24 px Switch inativo Switch ativo Fira Sans Extra Condensed bold, 24 px

›› Tamanho mínimo: 3 colunas (123 px) x 1 linha (30 px) ›› Fira Sans light, 20 px

»» text field ›› Altura: 2 linhas (60 px) ›› Conteúdo na cor destaque ›› Fio com espessura de 1,5 px

»» number field ›› A ltura variável do number field: tamanho mínimo de 1 linha (30 px) ›› Conteúdo na cor destaque Number field/Combo box ›› Largura variável do number field: tamanho mínimo de 103 px Fira Sans Extra Condensed light, 24 px, cor destaque

Manual de estilo gráfico | Aplicativos Anatel

MODAL Todas as notificações pop-up (flash message) devem vir sobrepostas ao conteúdo, de forma centralizada, com uma camada na cor preta de 50% em opacidade, no modo de mesclagem Multiplicação (Adobe Photoshop). O tamanho da janela varia conforme o conteúdo da mensagem, e pode atingir um limite máximo de 538x960 px. »» Mensagem - erro »» Mensagem - sucesso »» Mensagem - ajuda »» Mensagem - remover oferta »» Mensagem - Erro de oferta »» Mensagem - voltar para a Home

MODAL

Manual de estilo gráfico | Aplicativos Anatel

»» Mensagem - erro

»» Mensagem - sucesso

»» Mensagem - ajuda

MODAL

Manual de estilo gráfico | Aplicativos Anatel

»» Mensagem - remover oferta

»» Mensagem - Erro de oferta

»» Mensagem - voltar para a Home

Manual de estilo gráfico | Aplicativos Anatel

MENU O menu fica localizado na lateral superior esquerda, e, quando acionado, ele desliza para a direita, deslocando o conteúdo da página durante a animação.

2 linhas (60 px)

Os ítens ficam dispostos na vertical, com o ícone correspondente acima. O menu possui 386 px de largura e ocupa toda a altura da tela.

1 linha (30 px)

386 px

2 linhas (60 px) 51 px

51 px