Identidade Digital Padrão de Governo
Participantes do Projeto 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
Insumos para o 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
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
2 1 Portal Composição da estrutura padrão 3 5 1 Barra de governo 2 Cabeçalho do site 3 Coluna de menus 4 Rodapé 4 5 Miolo
Barra de Governo
Barra de governo Estrutura padrão 1 2 3 1 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. 2 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. 3 Busca integrada: plataforma de busca do Google específico para os órgãos do Governo 4 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. 5 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.
Cabeçalho
Cabeçalho Estrutura padrão 2 3 4 1 6 1 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. 5 2 Menu de atalhos de teclado: devem constar todos os atalhos indicados pelo e-mag. 3 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. 4 Busca: será sempre o buscador de conteúdos publicados naquele portal. 5 Redes sociais: área reservada para incluir todos os ícones de redes sociais que aquele órgão possui. 6 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.
Á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
Portal Brasil 4 Coluna de menus 1 Portal SECOM 1 Estrutura padrão 2 4 1 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. 2 Menu sobre o ministério/secretaria: são os conteúdos institucionais sobre aquele órgão. 3 3 Central de conteúdo: são filtros rápidos para acesso a páginas com tipos de conteúdo específico 4 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.
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
1 2 3 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
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