MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA

Transcrição

1 MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA

2

3 Índice 1. Introdução Elementos Padronizados 2.1. Topo 2.2. Rodapé 2.3. Menu 2.4. Cores e Fontes 2.5. Títulos 2.6. Banners Categorias de Sites 3.1. Secretarias e Órgãos 3.2. Órgãos Subordinados ao Governo - OSG 3.3. Sites Institucionais de Órgãos e Entidades 3.4. Sites Temáticos Portal do Governo 22

4

5 1. Introdução A elaboração deste material visa estabelecer regras, diretrizes e responsabilidades aos órgãos e entidades da Administração Direta e Indireta do Poder Executivo do Estado da Bahia, 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 - SECOM e implementadas pelos órgãos do Estado. Dessa forma, apresenta instruções a serem seguidas para o desenvolvimento de sites do Governo. Os sites devem atender 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, garantir 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 a logomarca do Governo e o conteúdo exposto. A padronização visual proporciona uma linguagem única que identifica e integra os sites governamentais da Bahia. MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA 03

6 2. Elementos Padronizados O formato de apresentação do Portal do Governo do Estado cria diretrizes de interface para a distribuição e arranjo dos elementos gráficos, serviços, informações e define para os sites modelos oficiais como: topo, rodapé, menu, cores, fontes, títulos e banners, que seguem padrões preestabelecidos de layout, aplicação e medidas conforme as seguintes descrições: 2.1. Topo Largura: 998px Altura: 265px Imagem background em linha que enfatiza o uso da cor vermelha da logomarca do Governo do Estado Barra de links institucionais: 596x29px Links para versões em outro idioma, tamanho de texto e contraste de tela Para sites das categorias Secretarias e Órgãos ou Órgãos Subordinados ao Governo a logomarca do Governo aparecerá acima da faixa azul com título do site em formato 172x68px Para sites da categoria Sites Institucionais de Órgãos e Entidades a logomarca do Governo aparecerá abaixo da faixa azul com título do site em formato 79x21px Para sites da categoria Sites Temáticos a logomarca do Governo aparecerá acima da faixa com a imagem de cabeçalho com título do site em formato 79x21px Banner fixo ou rotativo: 728x90px Link para Acesso à informação Pesquisa por palavra-chave Barra azul com imagem background contendo assunto, título e imagem ilustrativa do site Para o assunto do site: fonte Myriad Pro, 24px, Semibold, cor #FFFFFF Para a sigla da Secretaria: fonte Myriad Pro, 20px, Semibold, cor #FFFFFF Para o nome da Secretaria: fonte Myriad Pro, 16px, cor #FFFFFF 2.2. Rodapé Largura 998px para inclusão de informações Largura 100% para imagem background que enfatiza o uso das cores da logomarca do Governo do Estado, vermelho e azul. Alinhamento à esquerda contendo: Espaço para logomarcas institucionais de acordo com a categoria do site Nome do órgão ou entidade, endereço físico, telefones, localização por mapa Se houver, licença de utilização de conteúdos e versão mobile. Alinhamento à direita contendo: Links para Portal do Governo, Ouvidoria Geral, Acesso à Informação 04 MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA

7 Topo Imagem background Logomarca do Governo 998px Barra de links institucionais Idiomas Tamanho texto e contraste Banner Barra azul Assunto e título do site Imagem ilustrativa Acesso à informação e Busca Sites Institucionais de Órgãos e Entidades Logomarca do Governo Logomarca do Governo Sites Temáticos Rodapé 998px Imagem background Logomarcas institucionais Nome, endereço físico, telefones, localização por mapa, licença de utilização de conteúdos e versão mobile Links institucionais Programas do Governo Lista de Secretarias 05

8 2.3. Menu Menu Superior Barra azul de links institucionais fundo degradê da cor #0084CF para #00549C Fonte: Arial, 11px, cor #D8EBF6 efeito hover cor #FFFFFF Menu Lateral Largura: 186px Cor #00478D Fonte: Arial, 12px, cor #CDDFF2 Efeito hover cor #00366C Submenu cor #3681CA Border-bottom: 1px solid, cor #2E69A Cores e Fontes Corpo Fonte: Arial, 12px, cor #333 Links Cor #0071B4 Título h1: Arial,18px, cor #EC MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA

9 Menu Superior Menu Lateral 186px Cores e Fontes 09

10 2.5. Títulos Tags de Cabeçalho h1: Arial, 18px, cor #Ec1213 h2: Arial, 15px, cor #00478D h3: Arial, 14px, cor #333 h4: Arial, 12px, cor #555 h5: Arial, 12px, cor #999 Títulos Manchetes Fonte: Arial, 15px, bold, cor #FFF Fonte: Arial, 12px, cor #CDDFF2 Fonte: Arial, 11px, cor #333 Títulos Notícias Fonte: Arial, 11px, cor #EC1213 Fonte: Arial, 12px, cor #666 Fonte: Arial, 15px, bold, cor #00478D Títulos Notícias Destaques Fonte: Arial, 18px, cor #666 Border-top: 4px solid, cor #EB1213 Títulos em Abas Background: -moz-linear-gradient (center top, #0095D3 5%, #004E96 100%) Border-color: #0095D3 Fonte: Arial, 14px, cor #FFF Background: -moz-linear-gradient (center top, #FFFFFF 5%, #EEEEEE 100%) Border-color: #CCC Fonte: Arial, 14px, cor #999 Títulos Vermelhos Imagem PNG: fonte 20px, Myriad Pro, cor #EB1213 Border-bottom: 1px solid, cor #EB MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA

11 Títulos Manchetes Títulos Notícias Títulos Notícias Destaques Títulos em Abas Títulos Vermelhos 11

12 2.6. Banners Banners divulgação - Topo 728x90px Banners laterais 195x196px 195x60px Banners divulgação central 512x249px Banners para Destaques Texto 187x72px 12 MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA

13 Exemplos 728x90px 195x196px 195x60px 512x249px 187x72px 13

14 3. Categorias de Sites 3.1. Secretarias e Órgãos Os sites desta categoria pertencem a Administração Direta do Governo e 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: 219px Logomarca do Governo: 172x68px Barra de links institucionais: 596x29px Links para versões em outro idioma, tamanho de texto e contraste de tela Banner rotativo: 728x90px Link para Acesso à informação Pesquisa por palavra-chave Barra azul com assunto e título do site Para o assunto do site: fonte 24px, Myriad Pro, Semibold, cor #FFFFFF Para a sigla da Secretaria: fonte 20px, Myriad Pro, Semibold, cor #FFFFFF Para o nome da Secretaria: fonte 16px, Myriad Pro, cor #FFFFFF Coluna Central Largura: 512px A página inicial pode apresentar uma ou duas colunas com notícias. Se necessário poderá incluir outros diferenciais. Coluna Esquerda Largura: 220px Prioriza a utilização de menus. Destaques, vídeos, áudios e outros diferenciais somente quando necessário. Coluna Direita Largura: 205px Prioriza a utilização de banners, destaques e links de redes sociais. Menus, vídeos, áudios e outros diferenciais somente quando necessário. Rodapé Largura: 998px Mantém a largura do site, com as logomarcas institucionais, nome do órgão ou entidade, endereço físico, telefones, localização por mapa e licença de utilização de conteúdos alinhados à esquerda. E os links para Portal do Governo, Ouvidoria Geral, Acesso à Informação, Programas de Governo e lista de Secretarias alinhados à direita. O fundo em imagem se extende por toda largura da tela. Página Interna A página interna permite excluir a coluna direita aumentando a área de exposição do conteúdo. 14 MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA

15 100% 998px Topo Manchetes Redes Sociais Mídias Menu Notícias Destaques Áudios Destaques Texto Corpo Página Interna Banners Facebook Rodapé 15

16 3.2. Órgãos Subordinados ao Governo - OSG Os sites desta categoria pertencem a órgãos subordinados diretamente ao Governador e 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: 219px Brasão do Estado da Bahia: 219x78px Barra de links institucionais: 596x29px Links para versões em outro idioma, tamanho de texto e contraste de tela Banner rotativo: 728x90px Link para Acesso à informação Pesquisa por palavra-chave Barra azul com assunto e título do site Para o assunto do site: font 24, Myriad Pro, Semibold, cor #FFFFFF Para a sigla da Secretaria: font 20, Myriad Pro, Semibold, cor #FFFFFF Para o nome da Secretaria: font 16, Myriad Pro, cor #FFFFFF Coluna Central Largura: 512px A página inicial pode apresentar uma ou duas colunas com notícias. Se necessário poderá incluir outros diferenciais. Coluna Esquerda Largura: 220px Prioriza a utilização de menus. Destaques, vídeos, áudios e outros diferenciais somente quando necessário. Coluna Direita Largura: 205px Prioriza a utilização de banners e links de redes sociais. Menus, vídeos, áudios e outros diferenciais somente quando necessário. Rodapé Largura: 998px Mantém a largura do site, com brasão do Estado da Bahia, nome, endereço físico, telefones, localização por mapa e licença de utilização de conteúdos alinhados à esquerda. E os links para Portal do Governo, Ouvidoria Geral, Acesso à Informação, Programas de Governo e lista de Secretarias alinhados à direita. O fundo em imagem se extende por toda largura da tela. Página Interna A página interna permite excluir a coluna direita aumentando a área de exposição do conteúdo. 16 MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA

17 100% 998px Topo Manchetes Menu Notícias Banners Corpo Destaques e Publicações Rodapé Página Interna 17

18 3.3. Sites Institucionais de Órgãos e Entidades Os sites desta categoria pertencem a Administração Indireta do Governo e 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: 219px Logomarca da entidade Barra de links institucionais: 596x29px Links para versões em outro idioma, tamanho de texto e contraste de tela Logomarca do Governo abaixo da faixa azul com título do site: 79x21px Banner rotativo: 728x90px Link para Acesso à informação Pesquisa por palavra-chave Barra azul com assunto e título do site Para o assunto do site: fonte 24px, Myriad Pro, Semibold, cor #FFFFFF Para a sigla da Secretaria: fonte 20px, Myriad Pro, Semibold, cor #FFFFFF Para o nome da Secretaria: fonte 16px, Myriad Pro, cor #FFFFFF Coluna Central Largura: 512px A página inicial pode apresentar uma ou duas colunas com notícias. Se necessário poderá incluir outros diferenciais. Coluna Esquerda Largura: 220px Prioriza a utilização de menus. Destaques, vídeos, áudios e outros diferenciais somente quando necessário. Coluna Direita Largura: 205px Prioriza a utilização de banners e links de redes sociais. Menus, vídeos, áudios e outros diferenciais somente quando necessário. Rodapé Largura: 998px Mantém a largura do site, com as logomarcas institucionais, nome, endereço físico, telefones, localização por mapa e licença de utilização de conteúdos alinhados à esquerda. E os links para Portal do Governo, Ouvidoria Geral, Acesso à Informação, Programas de Governo e lista de Secretarias alinhados à direita. O fundo em imagem se extende por toda largura da tela. Página Interna A página interna permite excluir a coluna direita aumentando a área de exposição do conteúdo. 18 MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA

19 100% 998px Topo Manchetes Redes Sociais Banners Menu Notícias Corpo Banners Banners divulgação central Facebook Rodapé Página Interna 19

20 3.4. Sites Temáticos Os sites desta categoria podem ser tanto da Administração Direta do Governo, como da Indireta, que tenham a necessidade de publicar a informação e serviço de forma destacada, ressaltando seu caráter temático. O diferencial é a opção de publicar no cabeçalho, ocupando toda a largura e com a altura variável, imagem fixa ou rotativa que apresente a identidade do tema. Entretanto, apesar desta livre aplicação do layout no topo, deve-se utilizar a logomarca e barra de links específicos do Governo, e também, de acessibilidade. Os elementos que acompanham os padrões de layout, aplicação de fontes, cores e medidas seguem as seguintes descrições: Topo Largura: 998px Altura: variável Logomarca do Governo Barra de links institucionais: largura variável e altura 29px Links para versões em outro idioma, tamanho de texto e contraste de tela Imagem de cabeçalho: pode ser em banner rotativo ou imagem fixa Pesquisa por palavra-chave Coluna Central Largura: 512px A página inicial pode apresentar uma ou duas colunas com notícias. Se necessário poderá incluir outros diferenciais. Coluna Esquerda Largura: 220px Prioriza a utilização de menus. Destaques, vídeos, áudios e outros diferenciais somente quando necessário. Coluna Direita Largura: 205px Prioriza a utilização de banners. Menus, vídeos, áudios e outros diferenciais somente quando necessário. Rodapé Largura: 998px Mantém a largura do site, apresentando o nome, endereço físico, telefones e localização por mapa alinhados à esquerda. E os links para Portal do Governo, Ouvidoria Geral, Acesso à Informação, Programas de Governo e lista de Secretarias alinhados à direita. O fundo em imagem se extende por toda largura da tela. Página Interna A página interna permite excluir a coluna direita aumentando a área de exposição do conteúdo. 20 MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA

21 100% 998px Topo Manchetes Menu Banners Corpo Notícias Destaques Texto Rodapé Página Interna 21

22 4. Portal do Governo O portal do Governo do Estado da Bahia utiliza predominantemente as cores da logomarca do Governo - azul e vermelho - visando reforçar o contexto de sua identidade visual. Por ser o grande centralizador de informações e serviços, estabelece as diretivas de design e sistema para os sites do Estado, subordinando a todos a seguirem os padrões de layout que criou. Contempla muitas informações e serviços que são de interesse do cidadão, portanto, muitos links se distribuem em 4 temas principais - Cidadão, Servidor, Turista e Investidor - divididos em um menu de abas com cores diferentes e que permitem rápido acesso ao assunto que se deseja selecionar. Cada tema prioriza em suas páginas o uso da cor da aba facilitando a navegação por assimilação após a substituição de telas. Os outros assuntos do portal são distribuídos em blocos ajustados a duas colunas verticais de forma que se tornem elementos visuais fáceis de serem encontrados. Os elementos que acompanham os padrões de layout, aplicação de fontes, cores e medidas seguem as seguintes descrições: Topo Largura: 998px Altura: 144px Logomarca do Governo: 172x68px Barra azul de links: 596x29px Pesquisa por palavra-chave Links para versões em outro idioma, tamanho de texto e contraste de tela Menu em abas direcionando as áreas do portal Link para Acesso à informação Coluna Esquerda Prioriza a utilização de manchetes, notícias, banners, vídeos, áudios, fotos, infográficos, divulgação de eventos, publicações e aplicativos. Coluna Direita Prioriza a utilização de manchetes, redes sociais, serviços on-line mais acessados, link para Conheça a Bahia, vídeos, informações sobre o Governador, programas de governo, transparência, links para Órgãos e Entidades. Corpo após Colunas Prioriza a utilização de links para o Facebook e um menu de rodapé para navegação no site. Rodapé Largura: 998px Mantém a largura do site, com a logomarca do órgão, nome, endereço físico, telefones, localização por mapa, licença de utilização de conteúdos e versão mobile alinhados à esquerda. E os links para Portal do Governo, Ouvidoria Geral, Acesso à Informação, site do SAC, site do Pacto pela Vida, lista de Secretarias alinhados à direita. O fundo em imagem se extende por toda largura da tela. 22 MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA

23 100% 998px Topo Manchetes Redes Sociais Notícias Serviços On-line Notícias Destaques Conheça a Bahia Banner Vídeos Corpo Mídias Informações sobre o Governador Programas e Transparência Eventos Publicações e Aplicativos Órgãos e Entidades Facebook Menu Rodapé Rodapé 23

24 Página Interna - Notícias ou Conteúdos Corpo Fonte: 12px, Arial, Helvetica, sans-serif Cor #333 Links Cor #0071B4 Tags de Cabeçalho h1: Arial, 18px, cor #EC1213 h2: Arial, 15px, cor #00478D h3: Arial, 14px, cor #333 h4: Arial, 12px, cor #555 h5: Arial, 12px, cor #999 Página Interna - Serviços Coluna Esquerda Campo de pesquisa Lista de serviços por categoria Navegação por assunto Coluna Direita Descritivo do serviço Fonte: 12, Arial, Helvetica, sans-serif Cor # MANUAL DE IDENTIDADE VISUAL DOS SITES DO GOVERNO DO ESTADO DA BAHIA

25 Página Interna - Notícias ou Conteúdos Página Interna - Serviços 25

26 elaborado por: 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 2015 Tecnologia da Informação e Comunicação do Paraná