identidade digital padrão de governo · página de texto e notícia estrutura padrão quadro que...
TRANSCRIPT
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