Identidade Digital Padro de Governo

Participantes do Projeto
Presidncia da Repblica Secretaria de Comunicao SECOM Diretoria de Tecnologia DITEC

Ministrio do Planejamento Secretaria de Logstica e Tecnologia da Informao SLTI

Servio Federal de Processamento de Dados - SERPRO

Insumos para o projeto

Planejamento de comunicao digital com o SICOM diagnstico com 18 rgos Projeto Tangram desenvolvido pela DITEC

Cartilha do modelo de acessibilidade de governo eletrnico (e-MAG)

Avaliao de acessibilidade do portal da Secretaria de Direitos Humanos Soluo portal padro desenvolvida pelo SERPRO

Introduo
Por que padronizar?

Foco no cidado

A escolha dos menus feita com base nos principais temas ou assuntos do ministrio ou secretaria. Aliado a uma linguagem multimdia de fcil atendimento, o portal torna-se acessvel a todos os brasileiros.

Introduo
Por que padronizar?

Fcil identificao, maior visibilidade

A padronizao de elementos como cabealho, campo de busca, menu principal e demais atributos ajudam a identificar o portal como propriedade digital do governo federal gerando credibilidade.

Introduo
Por que padronizar?

Acessibilidade

dever do ministrio ou secretaria cumprir o Decreto de Lei n 5.296, de 2004, que torna obrigatria a implementao dos critrios de acessibilidade em portais para atender as pessoas com deficincia atravs das normas do Modelo de Acessibilidade de Governo Eletrnico (e-MAG).

http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG

Introduo
Por que padronizar?

Economicidade

A infraestrutura criada para o portal de um ministrio pode ser replicada em outros rgos, reduzindo custos e otimizando evolues de TI.

Novo Padro

Contedo

Arquitetura de Informao

Identidade Visual

1 2

Portal
Composio da estrutura padro

1 3 5 2 3 4 5 4

Barra de governo Cabealho do site Coluna de menus

Rodap
Miolo

Barra de Governo

Barra de governo
Estrutura padro
1 2 3

1 2 3 4 5

Portal Brasil: Acesso ao Portal Brasil, responsvel por divulgar servios e informaes atravs
de linguagem acessvel ao cidado os temas dos ministrios e rgos do governo.

Atuao: Opo para o pblico (cidado, gestor, imprensa, etc) com acesso direto s reas de
interesse da populao ou ao ministrio desejado e secretarias vinculadas.

Busca integrada: plataforma de busca do Google especfico para os rgos do Governo Manuteno eficiente: Permite adicionar e editar informaes e links na barra uma nica
vez para replicao em todos os rgos governamentais.

Mensurao estatstica: Possibilidade de rastreamento dos hbitos de navegao dos

usurios em todos os rgos governamentais com uma nica fonte.

Cabealho

Cabealho
Estrutura padro
2 1

3 4
5

6
1
2

Identificao do rgo: o nome do ministrio ou da secretaria. Deve ser sempre escrito por
extenso com tipografia padronizada e nunca haver um logo.

Menu de atalhos de teclado: devem constar todos os atalhos indicados pelo e-MAG. Menu de acessibilidade e menu de idiomas: nesta rea devem aparecer as eventuais opes
de idiomas, mapa do site, aplicao de contraste e outras opes de auxlio tcnico navegao.

3
4 5

Busca: ser sempre o buscador de contedos publicados naquele portal. Redes sociais: rea reservada para incluir todos os cones de redes sociais que aquele rgo possui. Barra de servios: formada por pginas de servios como Fale com o Ministrio/Secretaria,
acesso a reas logadas e sistemas, central de imprensa e outros.

rea de destaques

rea de destaques
Barra de destaque

A barra de destaque abriga links para assuntos importantes do rgo, geralmente campanhas ou grandes eventos. Deve ser aplicada nas especificaes sugeridas acima para no ser confundido com um menu.

rea de destaques
Banner de destaque

O banner de destaque um elemento que pode ser includo de acordo com a necessidade de exposio de uma campanha.

Coluna de menus

Portal Brasil

Portal SECOM

4
1

Coluna de menus
Estrutura padro
1 Menu principal: so os principais temas tratados por aquele ministrio ou secretaria. A diviso deve levar em considerao os assuntos mais relevantes, e no a diviso interna do rgo. Menu sobre o ministrio/secretaria: so os contedos institucionais sobre aquele rgo.

3
3 4

Central de contedo: so filtros rpidos para acesso a pginas com tipos de contedo especfico
Menus de apoio navegao: so apresentaes de contedos em diferentes formatos funcionando como atalhos ou filtros e que apoiam a navegao do usurio.

Rodap

Rodap
Estrutura padro

O rodap deve ser composto pelo primeiro nvel do menu principal, barra de servios, redes sociais, idiomas e mapa do site para atender aos critrios de acessibilidade. Adicionalmente, devem constar no rodap a marca do Governo Federal, de Acesso Informao e W3C.

Miolo

O miolo composto por mdulos de informaes localizados nesta rea especfica do layout. Exemplos:

1
2 3

Detalhe do miolo do Portal Brasil Detalhe do miolo do Portal SECOM

Detalhe do miolo de uma pgina interna

Mdulo de TV
Estrutura padro Disponibiliza um conjunto variado de vdeos numa nica rea, formando assim o conceito de um canal de TV. possvel destacar transmisses ao vivo, vdeos relevantes e acessar todo o arquivo.

Mdulo de rdio
Estrutura padro Concentra materiais de udio, como programas formatados, notcias, entre outros. Como o mdulo de TV, funciona tambm como um canal. Alm dos ltimos udios, possvel acessar todos os anteriores.

Mdulo de chamadas
Estrutura padro Apresentao de informaes com foto ou sem foto, sobre um mesmo tema. Pode variar de tamanho, de acordo com a quantidade de temas que deseja destacar.

Mdulo de destaque especial

Estrutura padro Notcias e informaes sobre campanhas ou temas especiais, com acompanhamento opcional de um banner do lado direito. Esse mdulo ocupa as trs colunas do miolo.

Mdulo de TV interativa
Estrutura padro Rene numa nica rea interativa a possibilidade de divulgao de at 4 banners. O usurio poder acessar cada banner clicando nos botes. Ao passar o mouse, o usurio pode visualizar uma imagem em miniatura do respectivo banner.

Mdulo de agenda
Estrutura padro Quadro que apresenta apontamentos previamente agendados pelo rgo para um dia, semana ou ms. possvel tambm acessar eventos passados.

Mdulo de banner
Estrutura padro Quadro no formato de uma imagem, como pontos de acesso a outras reas do site ou sees externas de outros portais.

Pgina de texto e notcia

Estrutura padro Quadro que apresenta as notcias em ordem cronolgica e permite a incluso de thumbnails. Por ele, possvel tambm acessar a pgina de todas as notcias.

Pgina de texto e notcia

Estrutura padro Detalhe da pgina de uma notcia com exibio na ntegra do seu contedo. possvel inserir fotos, vdeos, udios e infogrficos. Este formato possui tambm mdulos com algumas funcionalidades, como olho, compartilhamento nas redes sociais, impresso e download.

Mdulo de assuntos relacionados

Estrutura padro Conjuntos de chamadas para contedos que tm relao com o texto da pgina em questo.

Landing pages
rea para apresentao de temas especficos do rgo (campanhas, planos e programas vigentes). A landing page permite maior liberdade de insero de contedo pois elimina a coluna de menus esquerda.

Sites temticos
Sites temticos permitem trabalhar navegaes e layouts diferenciados. Geralmente so grandes planos ou programas interministeriais que fogem da alada de um nico rgo.

Identidade Visual

Grid
a estrutura por trs dos layouts. Juntamente com cores, tipografia e elementos visuais, garantem a uniformidade das pginas estabelecendo uma identidade forte para todos os portais. formada por colunas que, quando agrupadas, imprimem forma ao esquema modular proposto para o contedo. Alm disso, estabelece o espaamento entre elementos, fundamental para guiar a leitura do visitante entre os contedos. A base do grid um esquema de 24 colunas. As 4 colunas da direita formam o espao ocupado pelos menus de navegao. A partir da sexta coluna h a variao modular dos formatos do miolo.

Tipografia
Estrutura padro

Open Sans a fonte principal do projeto grfico. Ela usada nas seguintes ocasies:
Nome do portal (rgo, programa, ministrio, etc) Informaes do cabealho Menus e itens de menus Ttulos de mdulos Textos de apoio navegao

Open Sans: http://www.google.com/webfonts/specimen/Open+Sans

Tipografia
Estrutura padro

Arial a fonte de apoio. Ela usada nas seguintes ocasies:

Chamadas de notcias ou contedos institucionais Textos corridos, sejam contedos noticiosos ou institucionais.
Arial disponibilizada por todos os sistemas operacionais existentes no mercado.

Cores
Estrutura padro

Para o Portal Brasil, so utilizadas como base as cores da Bandeira Nacional e algumas de suas variaes, alm do cinza, que serve como cor de apoio para demarcao de reas dentro dos mdulos. Para cada assunto foi estipulada uma cor, para reforar a identificao de cada mdulo de notcias. Um estudo mais aprofundado ser feito para a determinar a biblioteca cromtica de cada ministrio e rgo.

Elementos visuais
Estrutura padro Os elementos visuais desenvolvidos do suporte ao contedo e so parte importante da identidade dos sites. Foram criadas caixas com cantos arredondados, linhas divisrias para blocos de notcias, assuntos e menus, assim como cones de apoio navegao e identificao de tipos de contedo.

Identidade Digital Padro de Governo