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 P A R A N Á

(1)

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 P A R A N Á

(2)

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

03

04

05

06

08

10

16

21

24

04

(3)

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

(4)

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

(5)

3.1. Portal do Governo

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 P A R A N Á 05

3. Categorias de Sites

O 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

(6)

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:

Topo

Brasão do Estado: 192x80px Barra de acessibilidade: 998x34px Pesquisa por palavra-chave Menu superior: opcional Nome da Secretaria:

Corpo

Largura: 556px

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 excluir a coluna direita aumentando a área de exposição do conteúdo.

Coluna Esquerda

Largura: 228px

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

Coluna Direita

Largura: 214px

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

Destaque maior: 195x196px Destaque 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 Secretaria Fonte: Frutiger 57 Cn

Tamanho: 25 Cor: #333333 Para a palavra “Secretaria”

Fonte: Frutiger 55 Roman Tamanho: 15

Cor: #046A3B

Utiliza para texto: Fonte: Arial Tamanho: 12 Cor: #333333 Utiliza para o título:

Fonte: Arial Tamanho: 18 Cor: #046A3B

(7)

07 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 P A 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 mais buscados 556px 121px 195px 195px 196px 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 P A R A N Á Outros exemplos: 998px 998px 998px

(8)

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:

Topo

Corpo

Largura: 556px

Coluna Esquerda

Largura: 228px

Permite a aplicação da logomarca da instituição acima do menu respeitando 100% de largura da medida 228px.

Coluna Direita

Largura: 214px

Rodapé

Largura: 998px

1440px 100% Logomarca 228px 214px 66px Página Inicial 998px 556px 195px 196px 121px 195px

Cor: #046A3B

Página Interna 998px

(9)

09 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 P A 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 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 P A R A N Á Outros exemplos: Logomarca Logomarca 998px 998px 998px

(10)

3. Categorias de Sites

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

Topo

Largura: 998px

Altura 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: 135x50px Barra de acessibilidade: 998x34px Pesquisa por palavra-chave Menu superior: opcional

Se necessário, nome da Secretaria:

Corpo

Largura: 556px

Coluna Esquerda

Largura: 228px

Coluna Direita

Largura: 214px

Destaque maior: 195x196px Destaque menor: 195x66px 1440px 228px 214px 66px Página Inicial 998px 556px 195px 196px 60px 112px 195px

Cor: #046A3B

3.4. Autarquias, Sociedades de Economia

Mista, Empresas Públicas e Descentralizadas

Áudios

(11)

1440px 228px 214px Menu Superior 66px 998px 556px 195px 196px 60px 112px 195px

1º FORMATO - Outro exemplo:

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

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 P A R A N Á 11 Destaques Vídeos Áudios Redes Sociais Consulta Protocolo Página Interna

Rodapé

Largura: 998px

(12)

3. Categorias de Sites

2º FORMATO

Topo

Largura: 998px

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

Corpo

Largura: 556px

Coluna Esquerda

Largura: 228px

Coluna Direita

Largura: 214px

Rodapé

Largura: 998px

1440px 228px 214px 66px Página Inicial 998px 556px 195px 196px 60px 72px 195px

Cor: #046A3B

3.4. Autarquias, Sociedades de Economia

Mista, Empresas Públicas e Descentralizadas

Procurados

Redes Sociais

Previsão do Tempo

(13)

1440px 228px 214px 66px 998px 556px 195px 196px 60px 72px 195px

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

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 P A R A N Á 13 Página Interna

(14)

3. Categorias de Sites

3º FORMATO

Topo

Largura: 998px

Altura da 1ª barra: 60px para a barra com a aplicação do Brasão do Estado, barra de acessibilidade e pesquisa por palavra-chave

Sem aplicação da 2ª barra, podendo a logomarca ou nome da instituição ficar acima do menu.

Corpo

Largura: 556px

Coluna Esquerda

Largura: 228px

Coluna Direita

Largura: 214px

Rodapé

Largura: 998px

1440px 228px 214px 66px Página Inicial 998px 556px 195px 196px 60px Logomarca 195px

Cor: #046A3B

3.4. Autarquias, Sociedades de Economia

Mista, Empresas Públicas e Descentralizadas

Vídeos

(15)

1440px 228px 214px 66px 998px 556px 195px 196px 60px Logomarca 195px

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

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 P A R A N Á 15 Página Interna

(16)

3. Categorias de Sites

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

Topo

Opçã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: 998px

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.

Corpo

Largura: 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 Direita

Largura: variável

Permite formatos variados para a utilização de menus, links de redes sociais, destaques, vídeos, áudios e outros diferenciais.

Cor: #046A3B

(17)

Outros exemplos:

3.5. Sites Temáticos e Programas de Governo

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 P A R A N Á 17 Página Interna 1440px Página Inicial 998px 60px

Rodapé

Largura: 998px

(18)

Outros exemplos:

3.5. Sites Temáticos e Programas de Governo

1440px 998px 60px

Página Interna 998px

(19)

Outros exemplos:

3.5. Sites Temáticos e Programas de Governo

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 P A R A N Á 19 1440px

998px 121px

(20)

Outros exemplos:

3.5. Sites Temáticos e Programas de Governo

1440px 998px 121px

(21)

3. Categorias de Sites

1440px Página Inicial 998px 28px 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 P A R A N Á

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:

Topo

Largura: 998px

Barra de acessibilidade: 998x28px

Corpo

Largura: 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 Direita

Largura: variável

Permite formatos variados para a utilização de menus, links de redes sociais, destaques, vídeos, áudios e outros diferenciais.

Rodapé

Largura: 998px

21 Página Interna

(22)

1440px Página Inicial

998px 28px

Outros exemplos:

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

(23)

1440px Página Inicial 998px 28px 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 P A R A N Á 23 Outros exemplos:

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

(24)

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

Menu Superior

Utilizado 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 Lateral Largura: 186px

Fundo degradê: da cor #EBECF1 para #FFFFFF Fonte: Arial

Tamanho: 12 Cor: #333333

4.2. Notícias

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

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

Destaque Maior Largura:195px Altura:196px Destaque Menor Largura: 195px Altura: 66px Menu Superior

Menu abas coloridas

Menu abas em degradê

186px Notícias 195px 195px Menu Lateral Destaques 66px 196px Outras notícias: Título Fonte: Arial Tamanho: 12 Cor: #333333 Em negrito Corpo Texto Fonte: Arial Tamanho: 12 Cor: #333333 Notícias em destaque: Título Fonte: Arial Tamanho: 18 Cor: #333333 Corpo Texto Fonte: Arial Tamanho: 12 Cor: #333333

(25)