Pular para conteúdo

Guia de Estilo

Introdução

Este documento estabelece as diretrizes de estilo para o desenvolvimento e manutenção do site MOJ Naquadah. O objetivo é garantir consistência visual, clareza e uma experiência de usuário intuitiva e agradável, alinhando as decisões de design e desenvolvimento com as melhores práticas de usabilidade. Este guia será utilizado por toda a equipe do projeto da disciplina de Interação Humano-Computador e serve como referência para análise, melhoria e aprimoramento da plataforma.

Objetivo

O objetivo deste guia de estilo é fornecer um conjunto claro de diretrizes e padrões visuais e funcionais que ajudem a criar uma interface coesa e de fácil utilização. Por meio dessas orientações, espera-se:

  • Uniformidade Visual: garantir que todos os elementos e páginas da plataforma tenham uma aparência consistente.
  • Acessibilidade: promover o acesso equitativo a todos os usuários, independentemente de suas habilidades ou dispositivos utilizados.
  • Melhoria Contínua: servir como base para identificar pontos de melhoria, mesmo sem implementação de mudanças imediatas.
  • Eficiência na Comunicação: facilitar o alinhamento e estabelecer critérios objetivos e alinhados às metas do projeto.

Além disso, este guia se propõe a documentar as boas práticas observadas no sistema e identificar oportunidades de ajustes para atender às expectativas dos usuários.

Metodologia

A metodologia para a construção deste guia de estilo baseou-se em uma abordagem sistemática e orientada pela análise do sistema atual, incluindo:

  1. Estudo do Sistema: mapeamento das características visuais e funcionais do MOJ Naquadah, observando seus componentes, fluxos de navegação e interação.
  2. Princípios de IHC: aplicação de fundamentos teóricos da disciplina para avaliar os elementos da interface, levando em conta critérios como:
  3. Visibilidade do estado do sistema.
  4. Compatibilidade entre o sistema e o mundo real.
  5. Flexibilidade e eficiência de uso.
  6. Design minimalista e intuitivo.
  7. Análise Comparativa: comparação com padrões consagrados de design.
  8. Feedback do Usuário: consideração de insights coletados com base em interações reais de usuários no sistema.
  9. Estruturação do Documento: categorização das diretrizes para fácil consulta e entendimento pela equipe.

Esta metodologia visa documentar as melhores práticas observadas e propor recomendações para tornar o sistema mais eficiente e agradável ao usuário, respeitando as limitações do escopo atual.

Manual - Guia de Estilo

Conteúdo e Organização do Guia de Estilo

  • Seção 1: Identidade Visual - Detalha os elementos visuais principais do sistema.
  • Seção 2: Componentes da Interface - Define padrões para botões, tabelas, menus e outros elementos.
  • Seção 3: Boas Práticas de Usabilidade - Inclui recomendações gerais para desenvolvimento e manutenção do sistema.
  • Seção 4: Histórico de Versões - Documento vivo, registrando revisões e atualizações do guia.

Público-alvo

Este guia é voltado para desenvolvedores, designers e stakeholders do projeto MOJ Naquadah que estejam envolvidos na criação, manutenção ou avaliação da interface do sistema.

Como Utilizar o Guia

  • Consultas Rápidas: Use as seções específicas para referências rápidas a elementos visuais e componentes.
  • Planejamento: Aplique as diretrizes ao iniciar novos projetos ou funcionalidades para garantir consistência.
  • Manutenção: Consulte o guia ao realizar atualizações para preservar a integridade visual e funcional do sistema.

Como Manter o Guia

O guia deve refletir necessidades, tendências e feedback dos usuários. Todas as alterações devem ser documentadas no Histórico de Versões.

Elementos de Interface

1. Identidade Visual

Paleta de Cores

  • Primárias:
  • Preto (#000000): Cabeçalho e rodapé.
  • Branco (#FFFFFF): Fundo principal e texto de destaque.
  • Secundárias:
  • Cinza claro (#F2F2F2): Fundo de blocos de conteúdo.

Tipografia

  • Fonte principal: Arial.
  • Títulos: Negrito, cor preta.
  • Textos: Regular, cor preta.
  • Links: Azul sublinhado no estado padrão, sem sublinhado ao passar o mouse (hover).

Logotipo

  • O logotipo "CD-MOJ" deve ser posicionado no topo esquerdo.

2. Componentes da Interface

Botões

  • Estilo Padrão.
  • Estados:
  • Hover.
  • Clicado.
  • Posição: Menu lateral fixo na esquerda.
  • Estilo:
  • Links: Texto preto (#000000).
  • Fundo: Branco (#FFFFFF).
  • Ícones e indicadores.
  • Tamanho da Fonte: 14px, regular.

Blocos de Destaque

  • Cada bloco no topo deve seguir as seguintes diretrizes:
  • Cor do Fundo:
    • Azul claro (#CFE2F3).
    • Vermelho (#990000).
    • Amarelo (#FFCC00).
  • Fonte: Arial, negrito, 16px.
  • Ícones: Alinhados à esquerda.

Tabelas

  • Cabeçalho da Tabela:
  • Fundo cinza claro (#F2F2F2).
  • Texto em negrito, tamanho 14px, cor preta (#000000).
  • Linhas Alternadas:
  • Fundo branco (#FFFFFF) e cinza (#F9F9F9).
  • Links na Tabela.

Conclusão

Este guia de estilo fornece uma base para o desenvolvimento de uma interface padronizada e eficiente focando no CD-MOJ, garantindo que as diretrizes sejam aplicadas de forma consistente. A colaboração contínua será essencial para manter o guia relevante e alinhado às expectativas.

Referências Bibliográficas

Histórico de Versões

Tabela 1 - Histórico de versões.

Versão Descrição Autor(es) Data Revisor(es) Data de revisão
1.0 Criação do documento Jéssica Eveline, Marcelo Adrian 02/12/2024 Ruan Carvalho 03/12/2024