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 Á

Transcrição

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 Índice 1. Introdução 2. Estrutura 2.1. Topo 2.2. Corpo 2.3. Coluna Esquerda 2.4. Coluna Direita 2.5. Rodapé 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 Órgãos Extra Poder Executivo (Legislativo, Judiciário e Sociedade Civil) Elementos Padrões 4.1. Menu 4.2. Notícias 4.3. Destaques 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 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 P A R A N Á 03

4 2. Estrutura Topo Os sites devem obrigatoriamente conter um cabeçalho de de largura, sendo possível adaptar cores ou imagens na tela de fundo excedente a esta largura que alcance largura até. 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 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 Corpo Área central do site destinada a notícias ou conteúdos. Colunas 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 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 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. Rodapé 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 Á 04

5 3. Categorias de Sites 121px 3.1. Portal do Governo 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: 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: 195x Colunas Rodapé Largura: 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. Rodapé 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

6 3. Categorias de Sites 3.2. Secretarias e Órgãos Página Inicial 121px 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 Largura: Altura: 121px Brasão do Estado: 192x80px Barra de acessibilidade: 998x34px Pesquisa por palavra-chave Menu superior: opcional Nome da Secretaria: Para a palavra Secretaria Fonte: Frutiger 55 Roman Tamanho: 15 Cor: #046A3B Para as palavras que compõem o restante do título da Secretaria Fonte: Frutiger 57 Cn Tamanho: 25 Corpo Largura: 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. Utiliza para o título: Tamanho: 18 Cor: #046A3B Utiliza para texto: Tamanho: 12 Página Interna Coluna Esquerda Largura: 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: Prioriza a utilização de destaques. Menus, vídeos, áudios, links de redes sociais e outros diferenciais somente quando necessário. Destaque maior: 195x Destaque menor: 195x Rodapé Largura: 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. 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 Á 06

7 3.2. Secretarias e Órgãos Outros exemplos: 121px Menu superior 121px Vídeos Áudios Logomarcas em destaque Redes Sociais Assuntos mais buscados 121px Rodapé 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 Á 07

8 3. Categorias de Sites 3.3. Vinculadas e Departamentos Página Inicial 121px Logomarca 100% 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 Largura: Altura: 121px Brasão do Estado: 192x80px Barra de acessibilidade: 998x34px Pesquisa por palavra-chave Menu superior: opcional Nome da Secretaria: Para a palavra Secretaria Fonte: Frutiger 55 Roman Tamanho: 15 Cor: #046A3B Para as palavras que compõem o restante do título da Secretaria Fonte: Frutiger 57 Cn Tamanho: 21 Corpo Largura: 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. Utiliza para o título: Tamanho: 18 Cor: #046A3B Utiliza para texto: Tamanho: 12 Página Interna Coluna Esquerda Largura: Permite a aplicação da logomarca da instituição acima do menu respeitando 100% de largura da medida. 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: Prioriza a utilização de destaques. Menus, vídeos, áudios, links de redes sociais e outros diferenciais somente quando necessário. Destaque maior: 195x Destaque menor: 195x Rodapé Largura: 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. 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 Á 08

9 3.3. Vinculadas e Departamentos Outros exemplos: 121px 121px Logomarca Logomarca Redes Sociais 121px Rodapé 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 Á 09

10 3. Categorias de Sites 3.4. Autarquias, Sociedades de Economia Mista, Empresas Públicas e Descentralizadas Página Inicial 60px 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 112px Topo Largura: 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: Fonte: Frutiger 55 Roman Tamanho: 14 Cor: #046A3B Áudios Corpo Largura: 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. Utiliza para o título: Tamanho: 18 Cor: #046A3B Utiliza para texto: Tamanho: 12 Coluna Esquerda Largura: 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: Prioriza a utilização de destaques. Menus, vídeos, áudios, links de redes sociais e outros diferenciais somente quando necessário. Destaque maior: 195x Destaque menor: 195x 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 Á 10

11 3.4. Autarquias, Sociedades de Economia Mista, Empresas Públicas e Descentralizadas 1º FORMATO - Outro exemplo: 60px 112px Menu Superior Rodapé Largura: 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. Vídeos Destaques Áudios Redes Sociais Página Interna Consulta Protocolo 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

12 3. Categorias de Sites 3.4. Autarquias, Sociedades de Economia Mista, Empresas Públicas e Descentralizadas Página Inicial 60px 72px 2º FORMATO Topo Largura: 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. Brasão do Estado: 135x50px Barra de acessibilidade: 998x34px Pesquisa por palavra-chave Menu superior: opcional Se necessário, nome da Secretaria: Fonte: Frutiger 55 Roman Tamanho: 14 Cor: #046A3B Procurados Corpo Largura: 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. Utiliza para o título: Tamanho: 18 Cor: #046A3B Utiliza para texto: Tamanho: 12 Redes Sociais Previsão do Tempo Coluna Esquerda Largura: 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: Prioriza a utilização de destaques. Menus, vídeos, áudios, links de redes sociais e outros diferenciais somente quando necessário. Destaque maior: 195x Destaque menor: 195x 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 Á Rodapé Largura: 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. 12

13 3.4. Autarquias, Sociedades de Economia Mista, Empresas Públicas e Descentralizadas 2º FORMATO - Outro exemplo: 60px 72px Página Interna 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

14 3. Categorias de Sites 3.4. Autarquias, Sociedades de Economia Mista, Empresas Públicas e Descentralizadas Página Inicial 60px Logomarca 3º FORMATO Topo Largura: 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. Brasão do Estado: 135x50px Barra de acessibilidade: 998x34px Pesquisa por palavra-chave Menu superior: opcional Se necessário, nome da Secretaria: Fonte: Frutiger 55 Roman Tamanho: 14 Cor: #046A3B Corpo Largura: 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. Utiliza para o título: Tamanho: 18 Cor: #046A3B Utiliza para texto: Tamanho: 12 Coluna Esquerda Largura: Prioriza a utilização de menus e links de redes sociais. Destaques, vídeos, áudios e outros diferenciais somente quando necessário. Vídeos Coluna Direita Largura: Prioriza a utilização de destaques. Menus, vídeos, áudios, links de redes sociais e outros diferenciais somente quando necessário. Destaque maior: 195x Destaque menor: 195x 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 Á Rodapé Largura: 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. 14

15 3.4. Autarquias, Sociedades de Economia Mista, Empresas Públicas e Descentralizadas 3º FORMATO - Outro exemplo: 60px Logomarca Página Interna 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

16 3. Categorias de Sites Página Inicial 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 palavrachave. 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: Brasão do Estado: 135x50px Barra de acessibilidade: 998x34px Pesquisa por palavra-chave Menu superior: opcional Se necessário, nome da Secretaria: Fonte: Frutiger 55 Roman Tamanho: 14 Cor: #046A3B 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: Altura: 121px Brasão do Estado: 192x80px Barra de acessibilidade: 998x34px Pesquisa por palavra-chave Menu superior: opcional Nome da Secretaria: Para a palavra Secretaria Fonte: Frutiger 55 Roman Tamanho: 14 Cor: #046A3B Para as palavras que compõem o restante do título da Secretaria Fonte: Frutiger 57 Cn Tamanho: 25 Corpo Largura: variável, porém deve respeitar a largura máxima de. 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. 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 Á 16

17 3.5. Sites Temáticos e Programas de Governo Outros exemplos: Página Inicial 60px Rodapé Largura: 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. Página Interna 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

18 3.5. Sites Temáticos e Programas de Governo Outros exemplos: 60px Página Interna 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 Á 18

19 3.5. Sites Temáticos e Programas de Governo Outros exemplos: 121px 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

20 3.5. Sites Temáticos e Programas de Governo Outros exemplos: 121px 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 Á 20

21 3. Categorias de Sites 3.6. Órgãos Extra Poder Executivo (Legislativo, Judiciário e Sociedade Civil) Página Inicial 28px 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: Barra de acessibilidade: 998x28px Corpo Largura: variável, porém deve respeitar a largura máxima de. 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. Página Interna Rodapé Largura: 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. 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 Á 21

22 3.6. Órgãos Extra Poder Executivo (Legislativo, Judiciário e Sociedade Civil) Outros exemplos: Página Inicial 28px Página Interna 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 Á 22

23 3.6. Órgãos Extra Poder Executivo (Legislativo, Judiciário e Sociedade Civil) Outros exemplos: Página Inicial 28px Página Interna 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

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: Menu Superior Menu Lateral Menu abas coloridas Notícias Menu abas em degradê 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 # Menu Lateral Largura: 186px Fundo degradê: da cor #EBECF1 para #FFFFFF Tamanho: 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: Notícias em destaque: Título Tamanho: 18 Corpo Texto Tamanho: 12 Outras notícias: Título Tamanho: 12 Em negrito Corpo Texto Tamanho: 12 Destaques 186px 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: Altura: Destaque Menor Largura: Altura: 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 Á 24

25 e l a b o r a d o p o r : C O M P A N H I A D E I N F O R M Á T I C A D O P A R A N Á - C E L E P A 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