Guia de Estilo
1. Introdução
Um guia de estilo se trata de um registro das principais decisões de design tomadas, de forma que elas não se percam, isto é, sejam efetivamente incorporadas no produto final. É importante que as decisões de design possam ser facilmente consultadas e reutilizadas nas discussões sobre extensões ou versões futuras do produto. Deste modo, este documento reune os princípios e as diretrizes adotados pelo site Skoob.
1.1. Objetivo
Tem como objetivo servir de ferramenta de comunicação entre os membros da equipe de design e também com a equipe de desenvolvimento na construção do produto final. Além disso, também é utilizado na implementação de fases intermediárias, como a prototipação.
1.2. Organização e Conteúdo
O guia de estilo seguirá a estrutura comum adotada por Mayhew, na seguinte organização:
- Introdução
- Objetivo
- Organização e Conteúdo
- Público-alvo
- Como Utilizar e Manter o Guia de Estilo
- Resultados de Análise
- Descrição do Ambiente de Trabalho do Usuário
- Elementos de Interface
- Disposição Espacial e Grid
- Janelas
- Tipografia
- Cores
- Elementos de Interação
- Estilos de Interação
- Seleção de Estilos
- Aceleradores (teclas de atalho)
- Elementos de Ação
- Preenchimento de Campos
- Seleção
- Ativação
- Vocabulário e Padrões
- Terminologia
- Sequência de Diálogos
1.3. Público-alvo
Este guia de estilo tem como público-alvo, principalmente, os desenvolvedores do sistema, para fins de implementação, bem como o dono do produto, com o objetivo de validação da identidade visual e disposição do site.
1.4. Como Utilizar e Manter o Guia de Estilo
Deve ser usado de forma que envolva todos do público-alvo e certifique de que eles conheçam detalhes e itens comuns. Para fins de manutenção, com a necessidade de correção ou alteração no guia de estilo, ele deverá ser modificado de modo a permanecer atualizado para com o sistema e se manter a fonte primária da estilização da aplicação. É relevante sempre incluir a data de atualização do guia de estilo.
2. Resultados de Análise
2.1. Descrição do Ambiente de Trabalho do Usuário
O usuário precisa que o ambiente seja minimalista e que, principalmente, com boa disposição dos elementos para que se tenha um bom entendimento dos textos. Além disso, é importante que os livros estejam sempre em destaque e em boa visualização para o usuário, a fim de gerar interesses e novas recomendações de leitura.
3. Elementos de Interface
3.1. Disposição Espacial e Grid
O site possui um loyout em que os elementos são divididos em sessões e estes são centralizados na página. A Figura 1 a seguir demonstra a disposição dos elementos da página principal e inicial do sistema.
3.2. Janelas
São diversas as janelas contidas no site, porém, pode-se destacar as principais, como a página inicial, a página específica de um livro e também a página de perfil do usuário. As páginas citadas podem ser visualizadas na Figura 2, Figura 3 e Figura 4 abaixo.
3.3. Tipografia
O site utiliza apenas Arial (Figura 5) como família de fonte, variando seus pesos entre normal e negrito e seus tamanhos entre 12px, 14px e 17px, a depender do contexto do texto na interface.
3.4. Cores
A Figura 6 apresenta a paleta de cores utilizada na aplicação, sendo a cor #0087BF a cor principal da identidade visual, já a cor #2D6998 é utilizada como alternativa para compor junto à cor principal. As cores #F2F7FB e #F1F1F1 são cores neutras para contrastes e detalhes. Além disso, a cor #333333 é utilizada nos textos. Por fim, a cor branca (#FFFFFF) é quem compõe o fundo do site.
4. Elementos de Interação
4.1. Estilos de Interação
As interações do usuário com o site são realizadas através de hiperlinks ou botões contendo elementos tipográficos.
4.2. Seleção de Estilos
A escolha do estilo foi pensada para que a interface se mantenha simples e objetiva, além de padronizar as interações com o sistema.
4.3. Aceleradores (teclas de atalho)
Não foram encontradas teclas de atalho.
5. Elementos de Ação
5.1. Preenchimento de Campos
O usuário precisa preencher manualmente os campos de preenchimento, de acordo com suas necessidades e objetivos dentro do sistema. A barra de pesquisa e caixa de texto dentro do perfil são exemplos de campos preenchidos por digitação.
5.2. Seleção
O site contém alguns elementos de seleção. Exemplos disso são as avaliações que o usuário pode dar para os livros e até mesmo as opções do "Explorar".
5.3. Ativação
Gerados por hyperlinks ou botões de ação.
6. Vocabulário e Padrões
6.1. Terminologia
As terminologias são as comumente usadas em sinópses ou resumos de filmes e livros, além de também ser composto por vocabulários e expressões normalmente utilizados em redes sociais.
6.2. Sequência de Diálogos
O site contém, principalmente, feedbacks de confirmação de ação.
Referências
BARBOSA, Simone; SILVA, Bruno. Interação Humano-Computador. 1ª Edição. Elsevier, 2010.
Histórico de versão
| Versão | Data | Descrição | Autor | Revisor |
|---|---|---|---|---|
| 1.0 | 11/12/2022 | Desenvolvimento do guia de estilo | Lucas Lopes, Wildemberg Sales | João Pedro |