GUIA DE ESTILO

O guia de estilo 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. Guias de estilo servem de ferramenta de comunicação entre os membros da equipe de design e também com a equipe de desenvolvimento. É 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.

O guia de estilo dedicado ao projeto Gama Boyle Lab foi desenvolvido a partir da Identidade Visual do projeto e o protótipo de alta-fidelidade.

Ao acessar o site, o usuário se depara com a tela inicial que contém um quadro, onde é preciso identificar-se como aluno, professor ou técnico. Logo depois, o usuário é direcionado à tela de login e cadastro. Em seguida, é apresentado um menu de funcionalidades disponíveis para o usuário. Para o perfil de aluno, está disponível os expermimentos a serem realizados. Já para o professor e o técnico, além dos mesmos experimentos disponíveis, existem outras funcionalidades à disposição.

Existe uma característica que diferencia cada um dos perfis da aplicação: o perfil de aluno tem o fundo azul claro; o de professor possui o fundo azul escuro; e o perfil de técnico detem o fundo verde. Já as telas que são comuns aos três perfis possuem o fundo de cor branca.

Na maior parte das telas, é apresentado uma barra superior com: a logo do projeto; um botão que direciona para o perfil do usuário; uma barra de pesquisa; e um botão de logout, que encaminha o usuário para a tela de login.

As telas iniciais - de identificação, login e cadastro - seguem um padrão bem igual, com a barra superior contendo apenas a logo e área de interação fica no centro da tela.

A tela principal possui vários itens de interação. Na barra superior há a logo, o botão que direciona para o perfil de usuário, uma barra de pesquisa e botão de Logout. Essa tarefa varia entre os perfis de aluno, professor e técnico.

As janelas presentes na aplicação incluem: informações sobre o experimento selecionado; regulação de equipamento; tela de transmissão de experimento; listagem de alunos; e tela de confirmação de decisão. A disposição de elementos dessas janelas estão apresentados a seguir.

Em relação à tipografia, a aplicação utilizará as seguintes fontes:

Os seguintes símbolos serão utilizados na aplicação:

Estes símbolos executam, respectivamente, as seguintes funções:

A logo do projeto deverá ser usada em quase todas as telas da aplicação.

No percorrer da aplicação as seguintes cores devem ser utilizadas:

Os estilos de interação que serão utilizados são: menus, que possibilitam a navegação do usuário pelo site com uma linguagem natural que indica o que o usuário pode fazer; e WIMP (window, icon, menu, pointing device) que é a utilização de ícones, menus e ações com o mouse.

Como citado anteriormente, o estilo de utilização de menus será o predominante na aplicação. Dessa forma o usuário seleciona no menu a funcionalidade que deseja e é guiad até a finalização da tarefa.

Não há nenhum de acelerador ou tecla de atalho na aplicação.

As telas de login e cadastro exigem preenchimento de campos. No caso de cadastro, serão solicitados: nome, matrícula, turma, senha e confirmação de senha. Já na tela de login, serão exigidos matrícula ou usuário e a senha cadastrada.

Não existe opção de seleção nos preenchimentos de campos, apenas caixas de texto.

Após todos os campos preenchidos corretamente, basta o usuário clicar no botão "entrar" (no caso de login) ou "cadastrar" (em caso de cadastro).

A linguagem utilizada na aplicação deve ser bem simples e de fácil entendimento, contendo termos ligados à Química Experimental.

A aplicação deve possuir um padrão em quase todas as telas, com uma barra superior contendo a Logo e alguns botões. A excessão será as telas de transmissão de experimento, que não devem possuir barra superior, apenas a tela de transmissão, chat e alguns botões.

Nos casos que necessitam algum tipo de confirmação, o sistema informará o usuário com algum aviso na tela do site, solicitando a confirmação da decisão.