Guia de Estilo

Ao utilizar as cores, deve-se primeiro dar preferência ao verde, mas caso não seja possível, pode-se recorrer ao laranja, amarelo e azul, nessa ordem, conforme descrito no gráfico 1.

Grafico Cores Primárias

Gráfico 1: Proporção de importância das cores primárias

As cores corporativas primárias também são: verde, azul, amarelo e laranja, porém em um diferente tom, conforme mostrado na figura 5. As cores secundárias podem ser usadas para complementar as cores primárias.

Cores Secundárias

Figura 5: Cores Secundárias

Ao utilizar as cores, deve-se seguir a mesma ordem de prioridade que as cores primárias: verde, laranja, amarelo e azul, nessa ordem. Podemos observar isso no gráfico 2.

Grafico Cores Secundarias

Gráfico 2: Proporção de importância das cores secundárias

Pode-se observar na figura 6 as seis cores verdes coorporativas, que podem ser utilizadas para complementar as cores primárias e secundárias. A ordem de prioridade deve ser obedecida conforme descrito no gráfico 3.

Paleta de Verdes

Figura 6: Paleta de Verdes

Grafico Verdes

Gráfico 3: Proporção de importância das cores verde

Tipografia

A definição de uma tipografia é uma parte essencial do design de um produto pois a escolha de uma fonte influencia diretamente na interpretação da mensagem sendo comunicada pelo produto e marca. Como a interpretação de uma fonte é subjetiva e pode transmitir diferentes emoções, é necessário que ela se relacione diretamente com o teor das mensagens e outros elementos gráficos do design.

Sendo assim, a tipografia Trebuchet Regular (figura 7) será utilizada em todos os textos do site e a fonte Trebuchet Bold (figura 8) será utilizada em títulos. Essas fontes foram escolhidas pois são as recomendadas para utilização em sites na web de acordo com o documento de Elementos Básicos (Página 66).

Fonte Trebuchet Regular

Figura 7: fonte Trebuchet Regular

Fonte: Fontsgeek

Fonte Trebuchet Bold

Figura 8: fonte Trebuchet Bold

Fonte: Fontsgeek

Botões e ícones

Ao criar botões ou inserir ícones durante o processo de design, é importante que o usuário saiba exatamente o que irá acontecer caso interaja com os mesmos. Se o contexto em que esses elementos estão inseridos não é consistente, é possível que isso cause confusão no usuário e leve o usuário ao erro.

Analisando o site da NeoEnergia Brasília, podemos observar três formas de interação nas páginas, a primeira são botões com linhas retas (figuras 13 e 14), a segunda são botões mais arredondados com texto ou ícones em sua composição (figuras 9, 10, 11 e 12), e a terceira são textos com links acompanhados de ícones, indicando redirecionamento para uma outra página (figuras 15 e 16).

Figura 9: botão de acesso à Agência Virtual

Figura 10: botão "Saiba mais"

Figura 11: botão "Conheça outros canais"

Figura 12: botões de acesso às redes sociais

Figura 13: botão de atualização de cadastro

Figura 14: botão retangular de acesso à Agência Virtual

Figura 15: link de acesso ao cartão CNPJ

Figura 16: links de acesso às tarifas de energia

Análise de estilo

Logo

Ao analisar o site da Agência Virtual da NeoEnergia, considerando as boas práticas de aplicação do logotipo conforme o Manual da Marca citado anteriormente, pode-se perceber uma violação na área de proteção mínima. Isso acontece na página inicial, conforme a figura 17, em que pode-se observar que o logotipo ultrapassa a área do menu.

Análise Logo

Figura 17: Página Inicial da Agência Virtual Neoenergia

Fonte: https://agenciavirtual.neoenergiabrasilia.com.br

Também podemos observar o mesmo comportamento nas páginas de serviço: o logotipo ultrapassa o menu, se sobrepondo a outros elementos da página, conforme mostra a figura 18.

Análise Logo

Figura 18: Página de Serviços da Agência Virtual Neoenergia

Fonte: https://agenciavirtual.neoenergiabrasilia.com.br/Servicos

Cores

Ao analisar as cores, pode-se perceber várias violações ao manual de cores descrito anteriormente. Na página inicial as cores predominantes são Azul e Laranja. O azul utilizado não é o que foi especificado na paleta de cores da marca. Apesar do laranja estar no tom correto, ele deveria aparecer na tela apenas quando não fosse possível utilizar o verde, regra a qual não é seguida, pois o verde não aparece em nenhum momento na página inicial, a não ser na logo. Pode-se perceber isso nas figuras 19, 20 e 21. Também podemos observar nas imagens 20 e 21 que foi utilizado a cor cinza, porém ela não foi especificada nas paletas de cores da marca.

Print da home

Figura 19: print da home do site Agência Virtual da Neoenergia

Print da home

Figura 20: print da home do site Agência Virtual da Neoenergia

Print da home

Figura 21: print da home do site Agência Virtual da Neoenergia

Nas páginas de serviços pode-se perceber os mesmos problemas de predominância da cor azul e ausência do verde principal, conforme ilustra a figura 22.

Print da página de serviços

Figura 22: print da página de serviços do site Agência Virtual da Neoenergia

Tipografia

Como pode ser verificado na figura 23, a tipografia que está sendo utilizada no site da Agência Virtual da NeoEnergia Brasília é a Roboto, tanto nos textos do site quanto nos títulos. Dessa forma, será necessário mudar a fonte dos textos para Trebuchet Regular e a dos títulos para Trebuchet Bold a fim de seguir o guia de estilo definido anteriormente.

Print do site

Figura 23: print do site Agência Virtual da Neoenergia

Botões e ícones

Podemos obervar algumas diferenças entre os botões do site da NeoEnergia Brasilia com o site Agencia Virtual NeoEnergia. Além das cores, como foi citado anteriormente, percebe-se que os botões da Agência Virtual (figuras 24, 25 e 26) são quase todos retangulares, retos e sem ícones em sua composição.

Figura 24: botões de acesso à conta da agência

Figura 25: botão "Serviços expressos"

Figura 26: botão "fechar"

Já nos ícones a diferença é maior, como vemos na figura 27, os ícones são bem maiores e são acompanhados de um texto com um link para o serviço desejado. No site da Agência o acesso às redes sociais da empresa se apresenta por ícones interativos (figura 28), já no site da NeoEnergia esse mesmo acesso se dá por botões circulares com ícones dentro.

Figura 27: ícones e links de serviços

Figura 28: ícones/botões de acesso às redes sociais da Agência Virtual