identidade digital padrão de governo · página de texto e notícia estrutura padrão quadro que...
TRANSCRIPT
![Page 1: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/1.jpg)
Identidade Digital Padrão de Governo
![Page 2: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/2.jpg)
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
![Page 3: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/3.jpg)
• 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
![Page 4: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/4.jpg)
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.
![Page 5: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/5.jpg)
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.
![Page 6: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/6.jpg)
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
![Page 7: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/7.jpg)
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.
![Page 8: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/8.jpg)
Novo Padrão
![Page 9: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/9.jpg)
![Page 10: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/10.jpg)
![Page 11: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/11.jpg)
Conteúdo Arquitetura de
Informação Identidade
Visual
![Page 12: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/12.jpg)
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
![Page 13: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/13.jpg)
Barra de Governo
![Page 14: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/14.jpg)
• 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
![Page 15: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/15.jpg)
Cabeçalho
![Page 16: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/16.jpg)
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
![Page 17: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/17.jpg)
Área de destaques
![Page 18: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/18.jpg)
Á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.
![Page 19: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/19.jpg)
Á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.
![Page 20: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/20.jpg)
Coluna de menus
![Page 21: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/21.jpg)
• 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
![Page 22: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/22.jpg)
Rodapé
![Page 23: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/23.jpg)
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.
![Page 24: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/24.jpg)
Miolo
![Page 25: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/25.jpg)
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
![Page 26: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/26.jpg)
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.
![Page 27: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/27.jpg)
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.
![Page 28: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/28.jpg)
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.
![Page 29: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/29.jpg)
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.
![Page 30: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/30.jpg)
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.
![Page 31: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/31.jpg)
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.
![Page 32: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/32.jpg)
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.
![Page 33: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/33.jpg)
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.
![Page 34: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/34.jpg)
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.
![Page 35: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/35.jpg)
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.
![Page 36: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/36.jpg)
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.
![Page 37: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/37.jpg)
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.
![Page 38: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/38.jpg)
Identidade Visual
![Page 39: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/39.jpg)
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.
![Page 40: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/40.jpg)
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
![Page 41: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/41.jpg)
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.
![Page 42: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/42.jpg)
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.
![Page 43: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/43.jpg)
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.
![Page 44: Identidade Digital Padrão de Governo · 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](https://reader031.vdocuments.site/reader031/viewer/2022022712/5c083aa909d3f2603b8bfc28/html5/thumbnails/44.jpg)
Identidade Digital Padrão de Governo