Identidade Digitalde Governo
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
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
IntroduçãoPor 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.
IntroduçãoPor 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.
IntroduçãoPor 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).
IntroduçãoPor 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.
Novo Padrão
PortalComposição da estrutura padrão
2
Barra de Governo
Barra de governo
Estrutura padrão (nova barra)
Cabeçalho
CabeçalhoEstrutura 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
Área de destaques
Área de destaquesBarra 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.
Área de destaquesBanner de destaque
• O banner de destaque é um elemento que pode ser incluído de acordo com a necessidade de exposição de uma campanha.
Coluna de menus
Coluna de menusEstrutura padrão
Rodapé
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.
Miolo
Exemplos de miolos:● Portal Brasil● Portal SECOM● página interna
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.
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.
Identidade Visual
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.
TipografiaEstrutura 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
TipografiaEstrutura 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.
CoresReferências
Bandeiras dos Estados Brasileiros
Escudos e Brasões Nacionais
CoresEstrutura padrão – Paleta Estendida
Elementos visuaisEstrutura 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.
Identidade Digitalde Governo
Tânia Andrea
● www.taniaandrea.com
● @taniaandrea_com
PloneGov-BR
● www.softwarelivre.gov.br/plone
● https://github.com/plonegovbr/
Contatos
