Identidade Digital de Governo

So5re mim

Tnia Andrea

Cientista da Computao Ps em Software Livre e Ger. de Projetos Coordenadora de projetos no Grupo TV1 Se!om"P# Consu$tora e%terna &iretora na AP'( (i) *a+una ,-1. P$oneConf"P't+on(rasi$/01 2e de um !asa$ $indo 34

6ntroduo

P$anejamento de !omuni!ao di)ita$ !om o Si!om !om 17 r)os

dia)nsti!o

Projeto Tan)ram desenvo$vido pe$a &ite! Carti$+a do mode$o de a!essi5i$idade de )overno e$etr8ni!o 9e: 2AG4

Ava$iao de a!essi5i$idade do porta$ da Se!retaria de &ireitos ;umanos

So$uo porta$ padro desenvo$vida pe$o Serpro

6ntroduo
Por <ue padroni=ar>

A es!o$+a dos menus ? feita !om 5ase nos prin!ipais temas ou assuntos do minist?rio ou se!retaria. A$iado a uma $in)ua)em mu$tim@dia de fA!i$ atendimentoB o porta$ torna:se a!ess@ve$ a todos os 5rasi$eiros.

6ntroduo
Por <ue padroni=ar>

A padroni=ao de e$ementos !omo !a5ea$+oB !ampo de 5us!aB menu prin!ipa$ e demais atri5utos ajudam a identifi!ar o porta$ !omo propriedade di)ita$ do )overno federa$ )erando !redi5i$idade.

6ntroduo
Por <ue padroni=ar>

C dever do minist?rio ou se!retaria !umprir o &e!reto de Lei no D.,0EB de ,--FB <ue torna o5ri)atria a imp$ementao dos !rit?rios de a!essi5i$idade em portais para atender as pessoas !om defi!iGn!ia atrav?s das normas do 2ode$o de A!essi5i$idade de Governo H$etr8ni!o 9e:2AG4.

6ntroduo
Por <ue padroni=ar>

A infraestrutura !riada para o porta$ de um minist?rio pode ser rep$i!ada em outros r)osB redu=indo !ustos e otimi=ando evo$uIes de T6.

Jovo Padro

Porta$
Composio da estrutura padro

(arra de Governo

(arra de )overno
Hstrutura padro 9nova 5arra4

Ca5ea$+o

Ca5ea$+o
Hstrutura padro
2 5

Identificao do rgo: ? o nome es!rito por e%tenso e nun!a +averA um $o)o. Menu de atalhos de teclado: devem !onstar os ata$+os indi!ados pe$o e:2AG. Menu de acessibilidade e menu de idiomas: idiomas 9se tiver4B mapa do site e
outros.

Busca: serA o 5us!ador de !onteLdos pu5$i!ados na<ue$e porta$. Redes sociais: Area para in!$uir todos os @!ones de redes so!iais <ue o r)o
possui.

Barra de servios: !ontato do r)oB sistemasB Area de imprensa e outros.

Mrea de desta<ues

Mrea de desta<ues
(arra de desta<ue

A 5arra de desta<ue a5ri)a $inNs para assuntos importantes do r)oB )era$mente !ampan+as ou )randes eventos. &eve ser ap$i!ada nas espe!ifi!aIes su)eridas para no ser !onfundido !om um menu.

Mrea de desta<ues
(anner de desta<ue

O 5anner de desta<ue ? um e$emento <ue pode ser in!$u@do de a!ordo !om a ne!essidade de e%posio de uma !ampan+a.

Co$una de menus

Co$una de menus
Hstrutura padro

#odap?

#odap?
Hstrutura padro

O rodap? deve ser !omposto pe$o primeiro n@ve$ do menu prin!ipa$B 5arra de serviosB redes so!iaisB idiomas e mapa do site para atender aos !rit?rios de a!essi5i$idade. Adi!iona$menteB devem !onstar no rodap? a mar!a do Governo Pedera$ e do A!esso Q 6nformao.

2io$o

H%emp$os de mio$os3 Porta$ (rasi$ Porta$ SHCO2 pA)ina interna

Landin) pa)es
Mrea para apresentao de temas espe!@fi!os do r)o 9!ampan+asB p$anos e pro)ramas vi)entes4. A $andin) pa)e permite maior $i5erdade de insero de !onteLdo pois e$imina a !o$una de menus Q es<uerda.

Sites temAti!os
Sites temAti!os permitem tra5a$+ar nave)aIes e $a'outs diferen!iados.

Gera$mente so )randes p$anos ou pro)ramas interministeriais <ue fo)em da a$ada de um Lni!o r)o.

6dentidade Visua$

Grid
K C a estrutura por trAs dos $a'outs formada por !o$unas <ueB <uando a)rupadasB imprimem forma ao es<uema modu$ar proposto para o !onteLdo. A$?m dissoB esta5e$e!e o espaamento entre e$ementosB fundamenta$ para )uiar a $eitura do visitante entre os !onteLdos. A 5ase do )rid ? um es<uema de ,F !o$unas. As F !o$unas da direita formam o espao o!upado pe$os menus de nave)ao. A partir da se%ta !o$una +A a variao modu$ar dos formatos do mio$o.

Tipo)rafia
Hstrutura padro

Open Sans ? a fonte prin!ipa$ do projeto )rAfi!o. H$a ? usada nas se)uintes o!asiIes3
Jome do porta$ 9r)oB pro)ramaB minist?rioB et!4 6nformaIes do !a5ea$+o 2enus e itens de menus T@tu$os de mdu$os Te%tos de apoio Q nave)ao
Open Sans3 +ttp3""www.)oo)$e.!om"we5fonts"spe!imen"OpenRSans

Tipo)rafia
Hstrutura padro

K Aria$ ? a fonte de apoio. H$a ? usada nas se)uintes o!asiIes3

C+amadas de not@!ias ou !onteLdos institu!ionais Te%tos !orridosB sejam !onteLdos noti!iosos ou institu!ionais.

Aria$ ? disponi5i$i=ada por todos os sistemas opera!ionais e%istentes no mer!ado.

Cores
#eferGn!ias

(andeiras dos Hstados (rasi$eiros

Hs!udos e (rasIes Ja!ionais

Cores
Hstrutura padro Pa$eta Hstendida

H$ementos visuais
Hstrutura padro Os e$ementos visuais desenvo$vidos do suporte ao !onteLdo e so parte importante da identidade dos sites. Poram !riadas !ai%as !om !antos arredondadosB $in+as divisrias para 5$o!os de not@!iasB assuntos e menusB assim !omo @!ones de apoio Q nave)ao e identifi!ao de tipos de !onteLdo.

Identidade Digital de Governo

Contatos

Tnia Andrea

www.taniaandrea.!om taniaa.moreiraS)mai$.!om taniaSp$one!onf.or) StaniaandreaT!om

P$oneGov:(#

www.software$ivre.)ov.5r"p$one +ttps3"")it+u5.!om"p$one)ov5r"