O documento apresenta as diretrizes para a padronização da identidade visual dos portais digitais do governo federal brasileiro, incluindo a composição da estrutura padrão dos portais, elementos como cabeçalho, rodapé e cores, além de exemplos de layouts e componentes visuais.

1. Identidade Digital
de Governo

2.  Tânia Andrea
●
Cientista da Computação
● Pós em Software Livre e
Ger. de Projetos
● Coordenadora de projetos
no Grupo TV1 – Secom/PR
● Consultora externa
● Diretora na APyB
● Big Kahuna 2013 – PloneConf/PythonBrasil[9]
● Mãe de um casal lindo :)
Sobre mim

3. Introdução
● Planejamento de comunicação digital com o Sicom – diagnóstico
com 18 órgãos
● Projeto Tangram desenvolvido pela Ditec
● Cartilha do modelo de acessibilidade de governo eletrônico (e-
MAG)
● Avaliação de acessibilidade do portal da Secretaria de Direitos
Humanos
● Solução portal padrão desenvolvida pelo Serpro

4. Introdução
Por que padronizar?
A escolha dos menus é feita
com base nos principais
temas ou assuntos do
ministério ou secretaria. Aliado
a uma linguagem multimídia
de fácil atendimento, o portal
torna-se acessível a todos os
brasileiros.

5. Introdução
Por que padronizar?
A padronização de elementos
como cabeçalho, campo de
busca, menu principal e
demais atributos ajudam a
identificar o portal como
propriedade digital do governo
federal gerando credibilidade.

6. Introdução
Por que padronizar?
É dever do ministério ou
secretaria cumprir o Decreto
de Lei no 5.296, de 2004, que
torna obrigatória a
implementação dos critérios
de acessibilidade em portais
para atender as pessoas com
deficiência através das
normas do Modelo de
Acessibilidade de Governo
Eletrônico (e-MAG).

7. Introdução
Por que padronizar?
A infraestrutura criada para o
portal de um ministério pode
ser replicada em outros
órgãos, reduzindo custos e
otimizando evoluções de TI.

8. Novo Padrão

11. Portal
Composição da estrutura padrão
2

12. Barra de Governo

13. Barra de governo
Estrutura padrão (nova barra)

14. Cabeçalho

15. Cabeçalho
Estrutura padrão
• Identificação do órgão: é o nome escrito por extenso e nunca haverá um logo.
Menu de atalhos de teclado: devem constar os atalhos indicados pelo e-MAG.
Menu de acessibilidade e menu de idiomas: idiomas (se tiver), mapa do site e
outros.
Busca: será o buscador de conteúdos publicados naquele portal.
Redes sociais: área para incluir todos os ícones de redes sociais que o órgão
possui.
Barra de serviços: contato do órgão, sistemas, área de imprensa e outros.
2
51

16. Área de destaques

17. Área de destaques
Barra de destaque
• A barra de destaque abriga links para assuntos importantes do
órgão, geralmente campanhas ou grandes eventos. Deve ser
aplicada nas especificações sugeridas para não ser confundido com
um menu.

18. Área de destaques
Banner de destaque
• O banner de destaque é um elemento que pode ser incluído de
acordo com a necessidade de exposição de uma campanha.

19. Coluna de menus

20. Coluna de menus
Estrutura padrão

21. Rodapé

22. Rodapé
Estrutura padrão
• O rodapé deve ser composto pelo primeiro nível do menu principal,
barra de serviços, redes sociais, idiomas e mapa do site para
atender aos critérios de acessibilidade. Adicionalmente, devem
constar no rodapé a marca do Governo Federal e do Acesso à
Informação.

23. Miolo

24. Exemplos de miolos:
● Portal Brasil
● Portal SECOM
● página interna

25. Landing pages
Área para
apresentação de temas
específicos do órgão
(campanhas, planos e
programas vigentes). A
landing page permite
maior liberdade de
inserção de conteúdo pois
elimina a coluna de
menus à esquerda.

26. Sites temáticos
Sites temáticos permitem
trabalhar navegações e
layouts diferenciados.
Geralmente são grandes
planos ou programas
interministeriais que fogem da
alçada de um único órgão.

27. Identidade Visual

28. Grid
• É a estrutura por trás dos layouts
formada por colunas que, quando
agrupadas, imprimem forma ao
esquema modular proposto para o
conteúdo. Além disso, estabelece
o espaçamento entre elementos,
fundamental para guiar a leitura
do visitante entre os conteúdos.
• A base do grid é um esquema de
24 colunas. As 4 colunas da
direita formam o espaço ocupado
pelos menus de navegação. A
partir da sexta coluna há a
variação modular dos formatos do
miolo.

29. Tipografia
Estrutura padrão
Open Sans: http://www.google.com/webfonts/specimen/Open+Sans
• Open Sans é a fonte principal do projeto gráfico.
Ela é usada nas seguintes ocasiões:
– Nome do portal (órgão, programa, ministério, etc)
– Informações do cabeçalho
– Menus e itens de menus
– Títulos de módulos
– Textos de apoio à navegação

30. Tipografia
Estrutura padrão
• Arial é a fonte de apoio.
Ela é usada nas seguintes ocasiões:
– Chamadas de notícias ou conteúdos
institucionais
– Textos corridos, sejam conteúdos noticiosos ou
institucionais.
Arial é disponibilizada por todos os sistemas operacionais existentes no mercado.

31. Cores
Referências
Bandeiras dos Estados
Brasileiros
Escudos e Brasões
Nacionais

32. Cores
Estrutura padrão – Paleta Estendida

34. Elementos visuais
Estrutura padrão
Os elementos
visuais desenvolvidos
dão suporte ao
conteúdo e são parte
importante da
identidade dos sites.
Foram criadas caixas
com cantos
arredondados, linhas
divisórias para blocos
de notícias, assuntos e
menus, assim como
ícones de apoio à
navegação e
identificação de tipos
de conteúdo.

35. Identidade Digital
de Governo

36.  Tânia Andrea
● www.taniaandrea.com
●
taniaa.moreira@gmail.com
● tania@ploneconf.org
●
@taniaandrea_com
 PloneGov-BR
● www.softwarelivre.gov.br/plone
● https://github.com/plonegovbr/
Contatos