manual de identidade visual dos sites do governo do paraná

M A N U A L D E I D E N T I D A D E V I S U A L

D O S S I T E S D O G O V E R N O D O PA R A N Á

1. Introdução

2. Estrutura

2.1. Topo

2.2. Corpo

2.3. Coluna Esquerda

2.4. Coluna Direita

2.5. Rodapé

3. Categorias de Sites

3.1. Portal do Governo

3.2. Secretarias e Órgãos

3.3. Vinculadas e Departamentos

3.4. Autarquias, Sociedades de Economia Mista, Empresas

Públicas e Descentralizadas

3.5. Sites Temáticos e Programas de Governo

3.46. Órgãos Extra Poder Executivo (Legislativo, Judiciário e

Sociedade Civil)

4. Elementos Padrões

4.1. Menu

4.2. Notícias

4.3. Destaques

Índice

M A N U A L D E I D E N T I D A D E V I S U A L D O S S I T E S D O G O V E R N O D O PA R A N Á

03

04

05

05

06

08

10

16

21

24

24

24

24

04

04

04

04

04

1. Introdução A elaboração deste material visa o cumprimento do Decreto

Estadual nº447/2009 que estabelece regras, diretrizes

e responsabilidades aos órgãos e entidades da Administração

Direta e Indireta do Poder Executivo do Paraná,

que prestam serviços diretamente à cidadania, através

da internet.

Este manual tem por objetivo normatizar o processo de criação

de sites através de definições do uso da identidade visual

a partir de estratégias de comunicação definidas pela Secretaria

da Comunicação Social e implementadas pela Companhia

de Informática do Paraná - CELEPAR. Dessa forma, apresenta

instruções a serem seguidas para o desenvolvimento de sites

do Governo do Estado.

Os sites mantidos pela CELEPAR atendem a padrões

de acessibilidade e usabilidade estabelecidos pelo Governo

Federal, e ainda, devido a seu específico sistema gerenciador

de conteúdos utilizado para web, garantem a independência

dos órgãos quanto a administração dos seus temas.

O design é objetivo, utiliza uma paleta de cores neutra, a fim

de valorizar o Brasão do Estado e o conteúdo exposto.

A padronização visual proporciona uma linguagem única

que identifica e integra os sites governamentais do Paraná.

M A N U A L D E I D E N T I D A D E V I S U A L D O S S I T E S D O G O V E R N O D O PA R A N Á 03

Os sites devem obrigatoriamente conter um cabeçalho de 998px de largura,

sendo possível adaptar cores ou imagens na tela de fundo excedente a esta

largura que alcance largura até 1440px.

Tanto a página inicial quanto as internas possuem as áreas topo, corpo se

necessário, coluna esquerda, coluna direita e rodapé de acordo com a

descrição a seguir.

2.1. Topo

Área superior do site que deve obrigatoriamente conter o brasão do Estado, a

barra de acessibilidade, a pesquisa por palavra-chave, o nome da Secretaria,

órgão ou título específico, conforme a categoria do site. Se imprescindível, é

possível a aplicação de menu.

2.2. Corpo

Área central do site destinada a notícias ou conteúdos.

2.3. Coluna Esquerda

Área lateral esquerda destinada a menus, links para redes sociais e quando

necessário, a destaques. No caso de sites com página inicial de duas colunas

inclui notícias, conteúdos e outros itens, podendo a largura da coluna ser

variável.

2.4. Coluna Direita

Área lateral direita destinada a destaques, agendas, vídeos, entre outros

diferenciais, e quando necessário, a menus. No caso de sites com página inicial

de duas colunas inclui notícias, conteúdos e outros itens, podendo a largura

da coluna ser variável.

2.5. Rodapé

Área inferior do site destinada a divulgar informações sobre o órgão como:

nome, endereço físico, telefones e localização por mapa, conforme a categoria

do site.

2. Estrutura


1440px

998px

Topo

Rodapé

Colunas

3.1. Portal do Governo


3. Categorias de SitesO Portal do Governo contém elementos que acompanham padrões de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:

Topo

Largura: 998px

Altura: 121px

Brasão do Estado: 192x80px

Barra de acessibilidade: 998x34px

Pesquisa por palavra-chave

Menu superior

Coluna Esquerda

Prioriza a utilização de notícias, vídeos, áudios e busca de serviços.

Coluna Direita

Prioriza a utilização de serviços online mais acessados, destaques, links para Secretarias e Órgãos, assuntos mais buscados e links para redes sociais

Destaque maior: 195x196px

Rodapé

Largura: 998px

Mantém a largura do site, com o texto de informações alinhado a esquerda e as logomarcas de rodapé alinhadas a direita. O fundo se extende por toda largura da tela.

1440px

998px

121px

Rodapé

Colunas

998px

3. Categorias de Sites 3.2. Secretarias e Órgãos

Os sites desta categoria contém elementos que acompanham padrões de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:

TopoLargura: 998pxAltura: 121pxBrasão do Estado: 192x80pxBarra de acessibilidade: 998x34pxPesquisa por palavra-chaveMenu superior: opcionalNome da Secretaria:

CorpoLargura: 556pxA página inicial pode apresentar uma ou duas colunas com notícias. Se necessário poderá incluir outros diferenciais.A página interna permite excluir a coluna direita aumentando a área de exposição do conteúdo.

Coluna EsquerdaLargura: 228px

Prioriza a utilização de menus e links de redes sociais. Destaques, vídeos, áudios e outros diferenciais somente quando necessário.

Coluna DireitaLargura: 214pxPrioriza a utilização de destaques. Menus, vídeos, áudios, links de redes sociais e outros diferenciais somente quando necessário.Destaque maior: 195x196pxDestaque menor: 195x66px

Rodapé

Largura: 998px

Mantém a largura do site, com o texto de informações alinhado a esquerda e as logomarcas de rodapé alinhadas a direita. O fundo ocupa toda largura da tela. É possível incluir um segundo rodapé acima deste de informações contendo logomarcas que precisem de destaque.

1440px

228px 214px

66px

Página Inicial

Página Interna

998px

556px

195px

196px

121px

195px


Para as palavras que compõem o restante do título da SecretariaFonte: Frutiger 57 CnTamanho: 25Cor: #333333

Para a palavra “Secretaria”Fonte: Frutiger 55 RomanTamanho: 15Cor: #046A3B

Utiliza para texto: Fonte: ArialTamanho: 12Cor: #333333

Utiliza para o título: Fonte: ArialTamanho: 18Cor: #046A3B998px

07M A N U A L D E I D E N T I D A D E V I S U A L D O S S I T E S D O G O V E R N O D O PA R A N Á

3.2. Secretarias e Órgãos

1440px

228px 214px

66px

Logomarcas em destaque

998px

998px

556px

195px

196px

121px

195px

1440px

228px 214px

66px

Rodapé

998px

556px

195px

195px

196px

196px

121px

195px

1440px

228px 214px

66px

998px

Menu superior

Vídeos

Áudios

Redes Sociais

Assuntos maisbuscados

556px

121px

195px

195px

196px


Outros exemplos:

998px

998px998px

3. Categorias de Sites 3.3. Vinculadas e Departamentos

Os sites desta categoria contém elementos que acompanham padrões de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:

TopoLargura: 998pxAltura: 121pxBrasão do Estado: 192x80pxBarra de acessibilidade: 998x34pxPesquisa por palavra-chaveMenu superior: opcionalNome da Secretaria:


Coluna EsquerdaLargura: 228pxPermite a aplicação da logomarca da instituição acima do menu respeitando 100% de largura da medida 228px. Prioriza a utilização de menus e links de redes sociais. Destaques, vídeos, áudios e outros diferenciais somente quando necessário.


RodapéLargura: 998px


1440px

100%

Logomarca

228px 214px

66px

Página Inicial

998px

556px

195px

196px

121px

195px





Utiliza para o título: Fonte: ArialTamanho: 18Cor: #046A3B

Página Interna

998px

09M A N U A L D E I D E N T I D A D E V I S U A L D O S S I T E S D O G O V E R N O D O PA R A N Á

3.3. Vinculadas e Departamentos

1440px

228px 214px

66px

998px

556px

121px

195px

1440px

228px 214px

66px

Rodapé

998px

556px

195px

196px

121px

195px

1440px

228px 214px

66px

998px

Redes Sociais

556px

121px

195px


Outros exemplos:

LogomarcaLogomarca

998px

998px

998px


Os sites desta categoria se apresentam em 3 formatos. Contém elementos que acompanham padrões de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:

1º FORMATO

TopoLargura: 998pxAltura da 1ª barra: 60px para a barra com a aplicação do Brasão do Estado, barra de acessibilidade e pesquisa por palavra-chave.Altura da 2ª barra: 112px para a barra com a aplicação de cor de fundo ou imagem, podendo a logomarca da instituição ultrapassar a esta altura conforme sua adaptação.Brasão do Estado: 135x50pxBarra de acessibilidade: 998x34pxPesquisa por palavra-chaveMenu superior: opcionalSe necessário, nome da Secretaria:


Coluna EsquerdaLargura: 228pxPrioriza a utilização de menus e links de redes sociais. Destaques, vídeos, áudios e outros diferenciais somente quando necessário.


1440px

228px 214px

66px

Página Inicial

998px

556px

195px

196px

60px

112px

195px


Fonte: Frutiger 55 RomanTamanho: 14Cor: #046A3B



10

3.4. Autarquias, Sociedades de Economia Mista, Empresas Públicas e Descentralizadas

Áudios

998px

1440px

228px 214px

Menu Superior

66px

998px

556px

195px

196px

60px

112px

195px

1º FORMATO - Outro exemplo:



Destaques

Vídeos

Áudios

Redes Sociais

Consulta Protocolo

Página Interna

RodapéLargura: 998pxMantém a largura do site, com o texto de informações alinhado a esquerda e as logomarcas de rodapé alinhadas a direita. O fundo ocupa toda largura da tela. É possível incluir um segundo rodapé acima deste de informações contendo logomarcas que precisem de destaque.

998px


2º FORMATO

TopoLargura: 998pxAltura da 1ª barra: 60px para a barra com a aplicação do Brasão do Estado, barra de acessibilidade e pesquisa por palavra-chaveAltura da 2ª barra: 72px para a barra com a aplicação de cor de fundo ou imagem, podendo a logomarca da instituição ultrapassar a esta altura conforme sua adaptação.Brasão do Estado: 135x50pxBarra de acessibilidade: 998x34pxPesquisa por palavra-chaveMenu superior: opcionalSe necessário, nome da Secretaria:






1440px

228px

214px

66px

Página Inicial

998px

556px

195px

196px

60px

72px

195px






Procurados

Redes Sociais

Previsão doTempo

12

998px

1440px

228px 214px

66px

998px

556px

195px

196px

60px

72px

195px




Página Interna

998px


3º FORMATO

TopoLargura: 998pxAltura da 1ª barra: 60px para a barra com a aplicação do Brasão do Estado, barra de acessibilidade e pesquisa por palavra-chaveSem aplicação da 2ª barra, podendo a logomarca ou nome da instituição ficar acima do menu.Brasão do Estado: 135x50pxBarra de acessibilidade: 998x34pxPesquisa por palavra-chaveMenu superior: opcionalSe necessário, nome da Secretaria:






1440px

228px 214px

66px

Página Inicial

998px

556px

195px

196px

60px

Logomarca

195px





14


Vídeos

998px

1440px

228px 214px

66px

998px

556px

195px

196px

60px

Logomarca

195px




Página Interna

998px


1440px

Página Inicial

998px

60px


3.5. Sites Temáticos

Os sites desta categoria, devido a importância de seu caráter temático, permitem liberdade em design e na aplicação de fontes e cores. Entretanto, apesar da livre aplicação do layout, deve-se utilizar no topo a barra com a aplicação do Brasão do Estado, barra de acessibilidade e pesquisa por palavra-chave. E ainda, as características de alinhamento do rodapé.

TopoOpção de barra com altura 60px: barra com a aplicação do Brasão do Estado, barra de acessibilidade e pesquisa por palavra-chave.Largura: 998pxBrasão do Estado: 135x50pxBarra de acessibilidade: 998x34pxPesquisa por palavra-chaveMenu superior: opcionalSe necessário, nome da Secretaria:

Opção de barra com altura 121px: barra com a aplicação do Brasão do Estado, barra de acessibilidade e pesquisa por palavra-chave.Largura: 998pxAltura: 121pxBrasão do Estado: 192x80pxBarra de acessibilidade: 998x34pxPesquisa por palavra-chaveMenu superior: opcionalNome da Secretaria:

CorpoLargura: variável, porém deve respeitar a largura máxima de 998px.A página inicial pode apresentar uma ou duas colunas com notícias. Se necessário poderá incluir outros diferenciais.A página interna permite seguir o layout diferenciado.

Coluna Esquerda e DireitaLargura: variávelPermite formatos variados para a utilização de menus, links de redes sociais, destaques, vídeos, áudios e outros diferenciais.




998px

Outros exemplos:



Página Interna

1440pxPágina Inicial

998px

60px



998px

Outros exemplos:



1440px998px

60px

Página Interna

998px

Outros exemplos:



1440px998px

121px

998px

Outros exemplos:



1440px998px

121px

998px



998px28px


3.6. Órgãos Extra Poder Executivo (Legislativo, Judiciário e Sociedade Civil)

Os sites desta categoria possuem autonomia para a criação do design, aplicação de fontes e cores. Porém, a CELEPAR como gestora de sites do Poder Executivo do Estado, recomenda que estes atendam critérios de acessibilidade, conforme normas do Governo Federal, a fim de permitir ao cidadão que possui necessidades especiais o acesso completo a conteúdos. Se o site estiver adaptado as normas de acessibilidade, A CELEPAR sugere a inserção da barra de acessibilidade.Para sites que a CELEPAR desenvolve nesta categoria, vide os exemplos expostos, apesar da livre aplicação de layout, utiliza as larguras padronizadas, inclui obrigatoriamente a barra de acessibilidade e as informações de rodapé conforme as seguintes descrições:

TopoLargura: 998pxBarra de acessibilidade: 998x28px

CorpoLargura: variável, porém deve respeitar a largura máxima de 998px.A página inicial pode apresentar uma ou duas colunas com notícias. Se necessário poderá incluir outros diferenciais.A página interna permite seguir o layout diferenciado.

Coluna Esquerda e DireitaLargura: variávelPermite formatos variados para a utilização de menus, links de redes sociais, destaques, vídeos, áudios e outros diferenciais.



21

Página Interna

998px


998px28px


Outros exemplos:


Página Interna


998px28px


Outros exemplos:


Página Interna

4. Elementos Padrões Os sites possuem elementos como menu, notícias e destaques que seguem padrões pré estabelecidos de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:

4.1. MenuMenu SuperiorUtilizado somente quando necessário em dois formatos: Com abas coloridas para distinguir temas do site. Com abas em fundo degradê da cor #EBECF1 para #FFFFFF e fonte cor #333333.

Menu LateralLargura: 186pxFundo degradê: da cor #EBECF1 para #FFFFFFFonte: ArialTamanho: 12Cor: #333333

4.2. NotíciasCom exceção dos sites que possuem design diferenciado e outras aplicações para notícias, como é o caso de notícias rolantes ou notícias na coluna esquerda e direita, a maioria segue as seguintes descrições:

4.3. DestaquesCom exceção dos sites que possuem design diferenciado e outras aplicações para destaques, a maioria segue as seguintes descrições:

Destaque MaiorLargura:195pxAltura:196px

Destaque MenorLargura: 195pxAltura: 66px


Menu Superior

Menu abas coloridas

Menu abas em degradê

186px

Notícias

195px 195px

Menu Lateral

Destaques

66px

196px

Outras notícias:TítuloFonte: ArialTamanho: 12Cor: #333333Em negrito

Corpo TextoFonte: ArialTamanho: 12Cor: #333333

Notícias em destaque:TítuloFonte: ArialTamanho: 18Cor: #333333

Corpo TextoFonte: ArialTamanho: 12Cor: #333333

e l a b o r a d o p o r :

C O M PA N H I A D E I N F O R M Á T I C A D O PA R A N Á - C E L E PA R

G E R Ê N C I A D E S E R V I Ç O S M U LT I M Í D I A - G S C M

2 0 1 1

Documents

manual de identidade visual dos sites do governo do paraná