identidade digital de governo usando o cms plone - fisl 2013

Identidade Digitalde Governo

Tânia Andrea

● Cientista da Computação● Pós em Software Livre e

Ger. de Projetos● Coordenadora de projetos

no Grupo TV1 – Secom/PR● Consultora externa● Diretora na APyB● Big Kahuna 2013 – PloneConf/PythonBrasil[9]● Mãe de um casal lindo :)

Sobre mim

Introdução

● 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çãoPor que padronizar?

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

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

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

IntroduçãoPor que padronizar?

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

PortalComposição da estrutura padrão

2

Barra de Governo

Barra de governo

Estrutura padrão (nova barra)

Cabeçalho

CabeçalhoEstrutura padrão

• Identificação do órgão: é o nome escrito por extenso e nunca haverá um logo.

Menu de atalhos de teclado: devem constar os atalhos indicados pelo e-MAG.

Menu de acessibilidade e menu de idiomas: idiomas (se tiver), mapa do site e

outros.

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

Redes sociais: área para incluir todos os ícones de redes sociais que o órgão

possui.

Barra de serviços: contato do órgão, sistemas, área de imprensa e outros.

2

51

Área de destaques

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

Área de destaquesBanner 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

Coluna de menusEstrutura padrão

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

Miolo

Exemplos de miolos:● Portal Brasil● Portal SECOM● página interna

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

TipografiaEstrutura padrão

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

• 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

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

CoresReferências

Bandeiras dos Estados Brasileiros

Escudos e Brasões Nacionais

CoresEstrutura padrão – Paleta Estendida

Elementos visuaisEstrutura 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 Digitalde Governo

Tânia Andrea

● www.taniaandrea.com

● taniaa.moreira@gmail.com

● tania@ploneconf.org

● @taniaandrea_com

PloneGov-BR

● www.softwarelivre.gov.br/plone

● https://github.com/plonegovbr/

Contatos