Guia de Estilo e Identidade Visual
Histórico de Revisão
| Data | Versão | Modificação | Autor |
|---|---|---|---|
| 14/09/2022 | 0.3 | Paleta de cores e Footer | Júlio César |
| 05/09/2022 | 0.3 | Componentes adicionais | Kallyne M. Passos |
| 25/08/2022 | 0.3 | Legendas, descrições e componentes | Kallyne M. Passos |
| 20/08/2022 | 0.2 | Estruturação do Guia | Kallyne M. Passos |
| 08/08/2022 | 0.1 | Criação da versão inicial do documento | Leonardo S. Aguiar |
1. Introdução
Para que possa ser entregue consistência na identidade visual do projeto aqui apresentado, este Guia visa estabelecer um padrão de desenvolvimento para aplicação, de forma a documentar estilos, fontes, cores, dentre outros aspectos visuais.
2. Detalhamento e Justificativas
2.1. Nome da aplicação
O nome da aplicação veio das palavras de maior importância na formação do conceito inicial de desenvolvimento: criar uma ferramenta que ranqueia pokémons.
Assim foram mescladas as palavras "Pokémon" e "Ranking" para criar PokeRanking, nome relacionado com o objetivo do projeto.
2.2. Fontes
As principais fontes utilizadas no projeto são:
- Inter (Link para download.)
Família tipográfica open-source desenhada para o uso em telas de computadores, com foco em legibilidade, utilizada nos menus, filtros e rodapé do site.
- Press Start 2P (Link para download.)
Fonte bitmap base para o display de pokémons e seus status, que remete a jogos retrô.
### Instalação Para instalar as fontes em máquina local, baixe o arquivo desejado, descompacte-o e o instale conforme o instalador do sistema operacional, na pasta Fonts.
### Utilização no projeto: Antes de alterar o HTML e o CSS, é necessária a adição da pasta contendo a fonte no repositório local do projeto.
Incluindo no HTML
No <head>, adicione:
<link href="caminho_da_fonte*" rel="stylesheet">
- Caminho em texto da pasta onde foi realizada a instalação da fonte. Ex: "C:\Users\usuario1\Fonts\Inter-3.19\Inter Desktop"
Incluindo no CSS
Coloca-se no css, para a utilização da fonte:
font-family: 'Inter';
font-style: normal;
font-family: 'Press Start 2P';
font-style: normal;
2.3 Logo
 |
|---|
A logo foi desenhada de maneira a transmitir a essência da aplicação, contendo seu nome por extenso e a imagem do pokemón Lugia, que leva junto consigo uma pokébola "vitoriosa", em representação da ideia de estar no topo dos rankings gerados, ou seja, de ser o pokémon mais forte entre os demais, conforme suas características e status.
2.3.1 Variação
Para melhor adaptação visual e configuração de contrastes na página, a logotipo é primariamente exibida na sua variação branca. Entretanto, também conta com a versão vermelha, vista no README e em documentações.
 |
|---|
3. Paleta de cores
 |
|---|
A paleta de cores foi desenvolvida de forma com que seu estilo remetesse ao original Pokémon mas também adicionasse a própria identidade do projeto, destoando de aplicativos similares. A ferramenta coolors foi utilizada para sua criação.
As cores #63337A (Eminence) e #3B9D8B (Persian Green) aparecem no fundo de páginas e cartões de detalhes, enquanto #2E3F7C (Dark Cornflower Blue) é referência no menu e rodapé, ao passo que #41BC52 (Dark Pastel Green) e #C63838 (Madder Lake) são cores de acento, vísiveis nos filtros e na descrição de status de cada Pokémon. As cores bases são utilizadas também com gradientes, e as tipografias seguem a tonalidade #F5F5F5 (Whitesmoke), cor secundária no projeto.
3.1 Acessibilidade
Foram realizados testes de contraste, que obtiveram resultados satisfatórios, e testes de daltonismo, que garantiram distinção entre cores e tonalidades para oito variações da perturbação visual.
3.2 Adicionais
Dado em conta que cada tipo de Pokémon requer uma representação visual diferente, indicando sua maior fonte de poder, também são utilizados no fundo da aplicação as cores referência:
 |
|---|
Para que não ocorra disturbância visual ou quebra de identidade, as cores apresentadas são exibidas com contraste e opacidade reduzidas.
4. Componentes
4.1. Botões
4.2. Ícones
 |
|---|
4.3. Navbar
 |
|---|
4.4. Footer
 |
|---|