Identidade Digital Padrão de Governo

Presidência da República

• Secretaria de Comunicação – SECOM

• Diretoria de Tecnologia – DITEC

Ministério do Planejamento

• Secretaria de Logística e Tecnologia da Informação – SLTI

Serviço Federal de Processamento de Dados - SERPRO

Participantes do Projeto

• 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

Insumos para o projeto

Introdução Por que padronizar?

Foco no cidadão

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ção Por que padronizar?

Fácil identificação,

maior visibilidade

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ção Por que padronizar?

Acessibilidade

É dever do ministério ou secretaria cumprir o Decreto de Lei nº 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).

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

Introdução Por que padronizar?

Economicidade

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

Conteúdo Arquitetura de

Informação Identidade

Visual

3 5

1

4

Portal Composição da estrutura padrão

• Barra de governo

• Cabeçalho do site

• Coluna de menus

• Rodapé

• Miolo

2

3

5

1

4

2

Barra de Governo

• Portal Brasil: Acesso ao Portal Brasil, responsável por divulgar serviços e informações através

de linguagem acessível ao cidadão os temas dos ministérios e órgãos do governo.

• Atuação: Opção para o público (cidadão, gestor, imprensa, etc) com acesso direto às áreas de

interesse da população ou ao ministério desejado e secretarias vinculadas.

• Busca integrada: plataforma de busca do Google específico para os órgãos do Governo

• Manutenção eficiente: Permite adicionar e editar informações e links na barra uma única

vez para replicação em todos os órgãos governamentais.

• Mensuração estatística: Possibilidade de rastreamento dos hábitos de navegação dos

usuários em todos os órgãos governamentais com uma única fonte.

Barra de governo Estrutura padrão

2 1

2

3

1

4

3

5

Cabeçalho

Cabeçalho Estrutura padrão

• Identificação do órgão: é o nome do ministério 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 opções

de idiomas, mapa do site, aplicação de contraste e outras opções de auxílio técnico à navegação.

• Busca: será sempre o buscador de conteúdos publicados naquele portal.

• Redes sociais: área reservada para incluir todos os ícones de redes sociais que aquele órgão possui.

• Barra de serviços: formada por páginas de serviços como “Fale com o Ministério/Secretaria”,

acesso a áreas logadas e sistemas, central de imprensa e outros.

2

3

5

1

4

6

2 3

5 1 4

6

Área de destaques

Á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 acima para não ser confundido com um menu.

Á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.

Coluna de menus

• Menu principal: são os principais temas tratados por aquele ministério ou secretaria. A divisão deve levar em consideração os assuntos mais relevantes, e não a divisão interna do órgão.

• Menu sobre o ministério/secretaria: são os conteúdos institucionais sobre aquele órgão.

• Central de conteúdo: são filtros rápidos para acesso a páginas com tipos de conteúdo específico

• Menus de apoio à navegação: são apresentações de conteúdos em diferentes formatos funcionando como atalhos ou filtros e que apoiam a navegação do usuário.

Coluna de menus Estrutura padrão

2

3

1

4

1 4

2

3

4

1

Portal Brasil Portal SECOM

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, de Acesso à Informação e W3C.

Miolo

O miolo é composto por módulos de informações localizados nesta área específica do layout. Exemplos:

Detalhe do miolo do Portal Brasil

Detalhe do miolo do Portal SECOM

Detalhe do miolo de uma página interna

2

3

1

Módulo de TV Estrutura padrão

Disponibiliza um conjunto variado de vídeos numa única área, formando assim o conceito de um canal de TV. É possível destacar transmissões ao vivo, vídeos relevantes e acessar todo o arquivo.

Módulo de rádio Estrutura padrão

Concentra materiais de áudio, como programas formatados, notícias, entre outros. Como o módulo de TV, funciona também como um canal. Além dos últimos áudios, é possível acessar todos os anteriores.

Módulo de chamadas Estrutura padrão

Apresentação de informações com foto ou sem foto, sobre um mesmo tema. Pode variar de tamanho, de acordo com a quantidade de temas que deseja destacar.

Módulo de destaque especial Estrutura padrão

Notícias e informações sobre campanhas ou temas especiais, com acompanhamento opcional de um banner do lado direito. Esse módulo ocupa as três colunas do miolo.

Módulo de TV interativa Estrutura padrão

Reúne numa única área interativa a possibilidade de divulgação de até 4 banners. O usuário poderá acessar cada banner clicando nos botões. Ao passar o mouse, o usuário pode visualizar uma imagem em miniatura do respectivo banner.

Módulo de agenda Estrutura padrão

Quadro que apresenta apontamentos previamente agendados pelo órgão para um dia, semana ou mês. É possível também acessar eventos passados.

Módulo de banner Estrutura padrão

Quadro no formato de uma imagem, como pontos de acesso a outras áreas do site ou seções externas de outros portais.

Página de texto e notícia Estrutura padrão

Quadro que apresenta as notícias em ordem cronológica e permite a inclusão de thumbnails. Por ele, é possível também acessar a página de todas as notícias.

Página de texto e notícia Estrutura padrão

Detalhe da página de uma notícia com exibição na íntegra do seu conteúdo. É possível inserir fotos, vídeos, áudios e infográficos. Este formato possui também módulos com algumas funcionalidades, como olho, compartilhamento nas redes sociais, impressão e download.

Módulo de assuntos relacionados Estrutura padrão

Conjuntos de chamadas para conteúdos que têm relação com o texto da página em questão.

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. Juntamente com cores, tipografia e elementos visuais, garantem a uniformidade das páginas estabelecendo uma identidade forte para todos os portais.

• É 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.

Tipografia Estrutura padrão

• 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

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

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.

Cores Estrutura padrão

• Para o Portal Brasil, são utilizadas como base as cores da Bandeira Nacional e algumas de suas variações, além do cinza, que serve como cor de apoio para demarcação de áreas dentro dos módulos.

• Para cada assunto foi estipulada uma cor, para reforçar a identificação de cada módulo de notícias.

• Um estudo mais aprofundado será feito para a determinar a biblioteca cromática de cada ministério e órgão.

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.

Identidade Digital Padrão de Governo