Post on 02-Jan-2020
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. Rodapé
3. Categorias de Sites
3.1. Portal do Governo
3.2. Secretarias
3.3. Agência de Notícias
3.4. Estrutura Governamental
Í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
09
12
16
04
04
04
1. Introdução
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
A elaboração deste material visa ao cumprimento da Lei Federal 13.460/2017, que estabelece normas básicas para participação, proteção e defesa dos direitos do cidadão a ser atendidos direta ou indiretamente pela administração pública e à necessidade da publicação de Carta de Serviços ao Usuário.
Baseia-se também no Decreto Estadual nº 4.477/2009 e Resolução CGE nº 009/2019, 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 ao cidadão pela internet.
Considera ainda o contido no Capítulo III do Decreto nº 9.360/2018, que, ao tratar de Governo Digital, estabelece a obrigatoriedade de facilitação, simplificação e transparência na prestação de serviços públicos ao cidadão. Assim, o portal centraliza informações e serviços oferecidos pelo Governo do Estado.
Este manual normatiza a criação de sites, com identidade visual determinada pela Secretaria da Comunicação Social e implementada pela Companhia de Tecnologia da Informação e Comunicação do Paraná - Celepar.
Os sites mantidos pela Celepar atendem a padrões de acessibilidade e usabilidade estabelecidos pelo Governo Federal. O sistema gerenciador de conteúdos e a base de serviços garantem a independência dos órgãos quanto à administração dos seus temas.
A identidade visual estabelece linguagem única para integrar os sites governamentais do Estado e facilitar o reconhecimento das páginas oficiais. Utiliza paleta de cores relacionada a cada instituição, a fim de valorizar sua identidade, o conteúdo e a forma de efetivação dos serviços.
No layout-padrão dos sites definido para o Governo Digital, as páginas devem
obrigatoriamente compor-se de barras horizontais que posicionem os
conteúdos de acordo com as áreas específicas para cada categoria de site.
É possível adaptar características como cores, botões de ação ou imagens,
desde que atendam à padronização dos elementos estabelecida neste manual.
Utiliza-se o princípio de design responsivo para a construção dos sites,
considerando as principais plataformas de visualização de conteúdos. A
largura padrão para desktop é de 1170px e abriga todo o conjunto de
informações das páginas. Porém, as barras que possuem cores ou imagens de
fundo podem expandir-se alcançando 100% da área da tela.
Tanto a página inicial quanto as internas possuem as áreas topo, corpo e
rodapé de acordo com a descrição a seguir.
2.1. Topo
A área superior do site poderá apresentar links de Acessibilidade, de Pessoas
Desaparecidas, Saiba Mais Sobre o Estado, para o Portal da Transparência,
para o Meu Governo e para redes sociais. As áreas de busca, da marca do
Governo do Estado do Paraná ou logomarca da instituição e o nome da
Secretaria, órgão ou título específico, deverão estar destacados. É possível
incluir mais uma barra para a aplicação de menu.
2.2. Corpo
A área central do site é destinada a menu de serviços, notícias, banners,
vídeos, áudios e, quando necessário, outros conteúdos. Para a apresentação
de notícias ou mais informações referentes às redes sociais, utilizam-se
colunas.
2.3. Rodapé
A área inferior do site é destinada a divulgar links para o Mapa do Site, a
Ouvidoria e a Transparência. Apresenta ainda, a marca do Governo do Estado
do Paraná e as informações sobre o órgão, como nome, endereço físico,
telefones, horário de atendimento e localização por mapa.
2. Estrutura
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 Á 04
Topo
Rodapé
Corpo
100%1170
O portal do Governo Digital contém elementos que acompanham padrões de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:
TopoA barra superior contém os links de Acessibilidade, de Acesso à Informação, Pessoas Desaparecidas e sobre o Governo do ParanáÁrea utilizada: 1170x35pxBackground: #F7F7F7
A barra com imagem de fundo apresenta a marca do Governo do Estado do Paraná, o título do Governo Digital, o slogan, o botão Meu Governo, o campo de busca e links dos serviços mais buscadosÁrea utilizada: 1170x387pxMarca: 130x56pxBusca: 540x50pxBackground: imagem
Corpo
Barra destinada a notícias
Barra destinada à divisão de assuntos: 1170x316pxFonte: Proxima nova rgTamanho: 1.4emCor: #565658
3.1. Portal do Governo Digital
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 Á
3. Categorias de Sites
387
35
Corpo
TextoFonte: Proxima nova rgTamanho: 1.6emCor: #FFFFFF
Título: em letra maiúsculaFonte: Proxima nova boldTamanho: 1.8emCor: #FFFFFFBackground: #00B958
Links AcessibilidadeFonte: Proxima nova rgTamanho: 0.786emCor: #555555Link hover: #068833Ícones: Font awesomeTamanho: 23x23px
05
Rodapé
1170
100%
Links Acesso à Informação, Pessoas Desaparecidas e Governo do ParanáFonte: Proxima nova boldTamanho: 0.857emCores: #888888 e #068833Link hover: #068833
Título Informações para vocêFonte: Proxima nova boldTamanho: 2emCor: #FFFFFFBackground: #00B958
Botão Meu GovernoFonte: Proxima nova boldTamanho: 0.875emCor: #FFFFFFBackground: #00B958
Título Governo DigitalFonte: Proxima nova boldTamanho: 2.8emCor: #FFFFFF
SloganFonte: Proxima nova rgTamanho: 0.643emCor: #FFFFFF
Mais buscadasFonte: Proxima nova rgTamanho: 1.4emCor: #00B958 e #FFFFFF
Botão destaqueFonte: Proxima nova boldTamanho: 0.875emCor: #FFFFFFBackground: #FF8001Background hover: #FFA60B
RodapéContém a marca do Governo do Estado do Paraná, a logomarca da Celepar, o texto de endereço alinhado à esquerda e localização por mapaLargura: 1170pxFonte: Proxima nova rgTamanho: 1.4emCor: #666666Background: #F7F7F7
3.1. Portal do Governo Digital
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 Á 06
387
35
Corpo
Rodapé
1170
100%
3.1. P do Governo Digitalágina de Serviços
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 Á
Observando os princípios elencados na Carta de Serviços do Governo Federal, a página de serviços do Governo foi formatada para responder às seguintes questões: o que é o serviço, quem pode solicitá-lo, como solicitá-lo, onde solicitá-lo, a previsão do prazo, o custo e a legislação pertinente.
Os elementos que a compõe acompanham padrões de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:
TopoA barra superior contém os links de Acessibilidade, de Acesso à Informação, Pessoas Desaparecidas e sobre o Governo do ParanáÁrea utilizada: 1170x35pxBackground: #F7F7F7
Barra com a marca do Governo do Estado do Paraná, o título do Governo Digital, o slogan, o campo de busca, o botão Meu Governo e links dos serviços mais buscadosÁrea utilizada: 1170x122pxBandeira: 104x74pxBusca: 228x40pxBackground: linear-gradient #324345 #686868
122
35
Título do serviço
Títulos do texto
825 253
07
Botão Meu GovernoFonte: Montserrat boldTamanho: 0.875emCor: #FFFFFFBackground: #00B858
Título Governo DigitalFonte: Montserrat boldTamanho: 2.8emCor: #FFFFFF
SloganFonte: Proxima nova rgTamanho: 0.643emCor: #FFFFFF
Mais buscadasFonte: Proxima nova rgTamanho: 1.4emCor: #00B858 e #FFFFFF
Links AcessibilidadeFonte: Proxima nova rgTamanho: 0.786emCor: #555555Link hover: #068833Ícones: Font awesomeTamanho: 23x23px
1170
100%
Links Acesso à Informação, Pessoas Desaparecidas e Governo do ParanáFonte: Proxima nova boldTamanho: 0.857emCores: #888888 e #068833Link hover: #068833
CorpoA coluna esquerda prioriza os conteúdos como o que é, como realizar o serviço, prazo e legislaçãoLargura: 825px
A coluna direita apresenta forma de atendimento, quanto custa, serviços relacionados e lista de outros links referentes ao serviçoLargura: 253px
RodapéContém a marca do Governo do Estado do Paraná, a logomarca da Celepar, o texto de endereço alinhado à esquerda e localização por mapaLargura: 1170pxFonte: Proxima nova rgTamanho: 1.4emCor: #666666Background: #F7F7F7
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 Á
Títulos do textoFonte: Proxima nova rgTamanho: 1.2emCor: #212529
TextoFonte: Proxima nova rgTamanho: 1.4emCor: #212529 Link: #007bffLink hover: #0056b3
08
BreadcrumbFonte: Proxima nova rgTamanho: 1emCor: #999
Título do serviçoFonte: Proxima nova boldTamanho: 2.143emCor: #00B858
Títulos do textoFonte: Proxima nova boldTamanho: 1.429emCor: #212529
TextoFonte: Proxima nova rgTamanho: 1.4emCor: #212529 Link: #007bffLink hover: #0056b3
Links referentes ao serviçoFonte: Montserrat semibold regularTamanho: 1emCor: #3aae4f
Botão de açãoFonte: Montserrat semibold regularTamanho: 14pxCor: #FFFFFFBackground: linear-gradient #61ca64 #2eac58
3.1. Página de Serviços do Governo Digital
122
35
Título do serviço
Títulos do texto
825 253
1170
100%
Página Inicial
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 Á
100%1170
120
35
45
75
Notícia Destaque
Notícia em Linha Notícia em Coluna
Agenda Executiva
Agenda
3.2. Secretarias 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:
TopoA barra superior contém os links de Acessibilidade, de Acesso à Informação, Pessoas Desaparecidas e sobre o Governo do ParanáÁrea utilizada: 1170x35pxBackground: #F7F7F7
Barra para serviços do Governo Digital: 1170x75pxFonte: Proxima nova boldTamanho: 1.5emBackground: #009B54
CorpoA página inicial apresenta barras com conteúdos como notícias, banners, vídeos, áudios, calendário ou outras informações, que podem ser distribuídas em até quatro colunasLargura: 1170px
50
250
390
Barra com menu: 1170x45pxFonte: Proxima nova boldTamanho: 1emCor: #FFFFFFBackground: #0072bbBackground hover: #00AEEF
Barra com a marca do Governo do Estado do Paraná, título da instituição, campo de busca e links para redes sociais: 1170x120pxMarca do Governo: 80x100pxFonte título: Proxima nova boldTamanho: .85emCor: #555555Busca: 373x40pxÍcones redes sociais: 38x38px
Links AcessibilidadeFonte: Proxima nova rgTamanho: 0.786emCor: #555555Link hover: #068833Ícones: Font awesomeTamanho: 23x23px
Botão Encontre Aqui: 160x40pxFonte: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #FFFFFF 20%
Botão Meu Governo: 160x40pxFonte: Proxima nova rgTamanho: 0.875emCor: #3F8033Background: #FFFFFF
Notícia destaque: pode ser com título abaixo ou sobre a foto, em 3 ou 4 colunasFonte título sobre a foto: Proxima nova boldTamanho: 1.286emCor: #FFFFFFFonte título caixa-alta: Proxima nova rgTamanho: 1.45emCor: #00AEEFFonte texto notícia: Proxima nova rgTamanho: 0.875emCor: #333333
Agenda ExecutivaFonte título caixa-alta: Proxima nova boldTamanho: 1.714emCor: #333333Borda esquerda: 5px #00AEEF Fonte mês: Proxima nova boldTamanho: 0.875emCor: #FFFFFFFonte texto notícia: Proxima nova rgTamanho: 0.875emCor: #333333
Destaques
Links Acesso à Informação, Pessoas Desaparecidas e Governo do ParanáFonte: Proxima nova boldTamanho: 0.857emCores: #888888 e #068833Link hover: #068833
09
Barra de Destaques: 1170px
Barra de Agenda: 1170px
RodapéLargura: px1170
Notícia em linha: pode ser com ou sem fotoFotos: 165x123pxFonte título notícia: Proxima nova boldTamanho: 1.125emCor: #333333Fonte texto notícia: Proxima nova rgTamanho: 0.875emCor: #333333
Barra com links para Mapa do Site, Ouvidoria e Transparência: 1170x50pxBackground: #0072BC 90%Botão borda: 1px solid #FFFFFF 20%Fonte: Proxima nova boldTamanho: 0.857emCor: #FFFFFFHover: #333333Background hover: #FFFFFFÍcones: 20x20px
Notícia em colunaFonte título assunto: Proxima nova rgTamanho: 0.875emCor: #00AEEFFonte título notícia: Proxima nova rgTamanho: 0.875emCor: #333333
Botão Mais Notícias: 116x34pxFonte: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #00AEEF
10
3.2. Secretarias
Barra com a marca do Governo do Estado do Paraná, logomarca da Celepar, título da secretaria, endereço, contato, horários de atendimento e localização por mapa alinhados à esquerda.Largura: 1170pxFonte: Proxima nova bold e rgTamanho: 1.2em e 0.875emCor: #FFFFFFBackground: #0072BCÍcones de redes sociais alinhados à direita: 38x38px
Destaques rotativos: altura 250pxFonte títulos: Proxima nova boldTamanho: 1.500emCor: #FFFFFFDestaques estáticos: altura 390pxFonte títulos: Proxima nova boldTamanho: 1.500emCor: #FFFFFFFoto:570x390px
Fonte títulos: Proxima nova boldTamanho: 1.714emCor: #00AEEFFonte data: Proxima nova boldTamanho: 3.214emCor: #FFFFFFFonte texto: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #005388
Fonte texto: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #0072BC
Botão Saiba Mais: 119x34pxFonte: Proxima nova rgTamanho: 1.000emCor: #FFFFFFBackground: #00AEEF
Botão Ver Agenda: 169x34pxFonte: Proxima nova rgTamanho: 1.000emCor: #FFFFFFBackground: #00AEEF
Página Inicial
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 Á
100%1170
120
35
45
75
Notícia Destaque
Notícia em Linha Notícia em Coluna
Agenda Executiva
Agenda
50
250
390
Destaques
Página InternaLargura de 1170pxBorda esquerda: 6px #00AEEFFonte título assunto: Proxima nova boldTamanho: .378emCor: #00AEEFFonte título: Proxima nova boldTamanho: 1.924emCor: #666666Fonte texto: Proxima nova rgTamanho: 1.143emCor: #666666Link: #00AEEF Link hover: #0072BC
11M 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 Á
50
120
35
45
75
3.2. Secretarias
Página Interna
100%1170
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 Á
3.3. Agência de Notícias O site da Agência de Notícias contém elementos que acompanham padrões de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:
TopoA barra superior contém os links de Acessibilidade, Acesso à Informação, Pessoas Desaparecidas e sobre o Governo do ParanáÁrea utilizada: 1170x35pxBackground: #F7F7F7
CorpoA página inicial apresenta duas colunas que distribuem notícias, vídeos, áudios ou outras informaçõesLargura: 1170px
Coluna EsquerdaPrioriza a utilização de notícias. Outros diferenciais somente quando necessárioLargura: 750px
Notícia manchete ou banner: 750x500Fonte: Proxima nova rgTamanho título assunto: 1.000emTamanho título notícia: 2.500emCor: #FFFFFFBorda esquerda: 6px #00AEEF
100%1170
120
35
45
Aviso de Pauta
750 360
500
581
513
12
1º Bloco Notícias
Áudios
2º Bloco Notícias
Rodapé
Notícias por Região
Fotos e Vídeos
Notícia Manchete
Notícia Destaque
Notícias
Barra com menu: 1170x45pxFonte: Proxima nova boldTamanho: 1emCor: #FFFFFFBackground: #30575CBackground hover: #44AD4BÍcones: Font awesome
Barra com a marca do Governo do Estado do Paraná, título da instituição, campo de busca e links para redes sociais: 1170x120pxMarca do Governo: 140x60pxFonte título: Proxima nova boldTamanho: 1.714emCor: #3F8033Busca: 310x40pxÍcones redes sociais: 38x38px
Links AcessibilidadeFonte: Proxima nova rgTamanho: 0.786emCor: #555555Link hover: #068833Ícones: Font awesomeTamanho: 23x23px
Links Acesso à Informação, Pessoas Desaparecidas e Governo do ParanáFonte: Proxima nova boldTamanho: 0.857emCores: #888888 e #068833Link hover: #068833
Coluna DireitaPrioriza a utilização de vídeos, áudios, notícias e outros diferenciais, quando necessárioLargura: 360px
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 Á 13
1º Bloco notícias: largura 750px e ordenado em 3 colunasFotos: 241x160pxFonte título assunto: Proxima nova boldTamanho: 1.250emCor: #FFFFFFBackground: #00aeefFonte título notícia: Proxima nova boldTamanho: 1.000emCor: #324345Fonte texto notícia: Proxima nova rgTamanho: 0.750emCor: #324345Fonte data: Proxima nova rgTamanho: 0.688emCor: #FFFFFF
Notícia destaque: largura 750Fotos: 295x196pxFonte título assunto: Proxima nova rgTamanho: 0.833emCor: #00aeefFonte título notícia: Proxima nova boldTamanho: 1.250emCor: #324345
Notícias em listaFonte título assunto: Proxima nova rgTamanho: 0.813emCor: #00aeefFonte título notícia: Proxima nova boldTamanho: 0.750emCor: #324345Fonte data: Proxima nova rgTamanho: 0.688emCor: #999999Fonte Mais Notícias: Proxima nova rgTamanho: 0.688emCor: #00aeefLink hover: #324345Fonte links editorias: Proxima nova boldTamanho: 1.000emCor: #545454Link hover: #44ad4bFonte link Todas as Editorias: Proxima nova boldTamanho: 0.750emCor: #44ad4bBackground: #ebeddf
Fonte texto notícia: Proxima nova rgTamanho: 1.000emCor: #324345Ícones: Font awesomeTamanho: 21x20pxCor: #00aeef
Fonte título notícia: Proxima nova boldTamanho: 1.250emCor: #324345Fonte título assunto: Proxima nova rgTamanho: 0.813emCor: #FFFFFFBackground: #00aeef
Ícones: Font awesomeTamanho: 21x20pxCor: #00aeef
3.3. Agência de Notícias
Fonte título Rádio: Proxima nova boldTamanho: 2.000emCor: #00aeefFonte áudios: Proxima nova boldTamanho: 1.250em e 0.813emCor: #324345Borda esquerda: 6px #00aeef
Fonte título Aviso de Pauta: Proxima nova boldTamanho: 1.125emCor: #00aeefFonte título pauta: Proxima nova boldTamanho: 0.750emCor: #324345Borda esquerda: 6px #00aeef
100%1170
120
35
45
Aviso de Pauta
750 360
500
581
513
1º Bloco Notícias
Áudios
2º Bloco Notícias
Rodapé
Notícias por Região
Fotos e Vídeos
Notícia Manchete
Notícia Destaque
Notícias
Barra com fotos e vídeos: 1170x581px
Barra com notícias por região: 1170x513px
Barra com 2º bloco de notícias: largura 750px e ordenado em quatro colunas
RodapéLargura: px1170
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 Á 14
3.3. Agência de NotíciasFonte título Assista: Proxima nova boldTamanho: 2.000emCor: #00aeefVídeo destaque: 652x367pxVídeos sequenciais: 76x57pxLink texto: Proxima nova rgTamanho: 0.688emCor: #a8a8a8Borda esquerda: 6px #00aeefBackground: #324345
Fonte título Curitiba: OswaldTamanho: 5.000emFonte título Na sua Região: Proxima nova boldTamanho: 1.375emFonte título e Região Metropolitana: Proxima nova rgTamanho: 1.000emCor: #FFFFFF
Fonte título assunto: Proxima nova boldTamanho: 0.625emCor: #FFFFFFBackground: #00aeefFonte título notícia: Proxima nova boldTamanho: 0.938emCor: #324345Hover: #00aeef
Fonte título Fotos do Dia: Proxima nova boldTamanho: 2.000emCor: #00aeefFotos: 133x75pxLink texto: Proxima nova rgTamanho: 0.750emCor: #a8a8a8Background: #324345
Fonte link Alterar: Proxima nova rgTamanho: 0.813emCor: #FFFF00Background: imagem
Fonte data: Proxima nova rgTamanho: 0.688emCor: #999999Fotos: largura 280pxBorda esquerda: 6px #00aeefFonte link Arquivo de notícias: Proxima nova rgTamanho: 0.875emCor: #068833Hover: #324345
À esquerda, título Agência de Notícias Fonte: Proxima nova boldTamanho: 1.750emCor: #FFFFFFFonte links: Proxima nova rgTamanho: 0.750em Cor: #FFFFFFÍcones de redes sociais: 38x38pxÀ direita, a marca do Governo do Estado do Paraná e logomarca da CeleparÀ esquerda, endereço, contato e localização por mapaFonte: Proxima nova rgTamanho: 0.688emCor: #FFFFFFHover: #00aeefText-decoration-line: #44ad4b
Barra com links para editorias, notícias por região, áudios e newsletterFonte títulos: Proxima nova boldTamanho: 1.000emCor: #FFFFFFÍcones: 20x20px #00aeefFonte links editorias, regiões e rádio: Proxima nova rgTamanho: 0.750em e 0.688emCor: #FFFFFF rgba(255,255,255,0.5)Hover: #FFFFFFBackground: #324345
100%1170
120
35
45
Aviso de Pauta
750 360
500
581
513
1º Bloco Notícias
Áudios
2º Bloco Notícias
Rodapé
Notícias por Região
Fotos e Vídeos
Notícia Manchete
Notícia Destaque
Notícias
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 Á 15
3.3. Agência de Notícias100%1170
Página InternaA página interna permite duas colunas distribuindo links e a área de exposição do conteúdoLargura: 1170pxFonte título: Proxima nova boldTamanho: 2.250emCor: #324345Borda esquerda: 6px #00aeef
Coluna EsquerdaFonte texto esquerda: Proxima nova boldTamanho: 1.063emCor: #00aeefFonte link Compartilhar: Proxima nova rgTamanho: 0.813emCor: #FFFFFFBackground: #3367a1Ícones de redes sociais: 38x38pxFonte link Confira áudio: Proxima nova rgTamanho: 0.875emCor: #44ad4bBackground: #FFFFFFCor hover: #FFFFFFBackground hover: #44ad4bFonte texto: Proxima nova rgTamanho: 0.875em e 0.813emCor: #324345 e #8c8c8cFonte link Mais notícias: Proxima nova rgTamanho: 0.875emCor: #324345Borda esquerda: 6px #ebeddfBackground hover: #ebeddf
Coluna DireitaFonte título: Proxima nova boldTamanho: 2.250emCor: #324345Borda esquerda: 6px #00aeef
Fonte texto: Proxima nova rgTamanho: 1.063emCor: #324345Link: #068833Link hover: #00aeefouLink: #337ab7Link hover: #324345
Links Acesso à Informação, Pessoas Desaparecidas e Governo do ParanáFonte: Proxima nova boldTamanho: 0.857emCores: #888888 e #068833Link hover: #068833
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 Á
3.4. Estrutura Governamental Esta categoria atende aos sites das Vinculadas, Departamentos, Autarquias, Sociedades de Economia Mista, Empresas Públicas, Descentralizadas, Programas de Governo e Órgãos Extra Poder Executivo (Legislativo, Judiciário e Sociedade Civil). Apresenta elementos que acompanham padrões de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:
TopoA barra superior contém os links de Acessibilidade, de Acesso à Informação, Pessoas Desaparecidas e sobre o Governo do ParanáÁrea utilizada: 1170x35pxBackground: #F7F7F7
Barra para serviços do Governo Digital: 1170x75pxFonte: Proxima nova boldTamanho: 1.5emCor: #FFFFFFBackground: alterado conforme cores características da instituição
CorpoA página inicial apresenta barras com conteúdos como notícias, banners, vídeos, áudios, calendário ou outras informações, que podem ser distribuídos em até quatro colunasLargura: 1170px
250
390
Localização
Rodapé
Redes Sociais
Vídeos
Destaques
Notícias
Agenda
120
35
45
350
75
100%1170
Barra com menu: 1170x45pxFonte: Proxima nova boldTamanho: 1emCor: #FFFFFFBackground: alterado conforme cores características da instituiçãoBackground hover: alterado conforme cores características da instituição
Barra com a logomarca da instituição, campo de busca e links para redes sociais: 1170x120pxNo caso de subsites, é possível incluir mais de uma logomarcaFonte título: Proxima nova boldTamanho: 1.714emCor: #333333Busca: 373x40pxÍcones redes sociais: 38x38px
Botão Encontre Aqui: 160x40pxFonte: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #FFFFFF 20%
Botão Meu Governo: 160x40pxFonte: Proxima nova boldTamanho: 0.875emCor: alterada conforme as cores características da instituiçãoBackground: #FFFFFF
16
Links AcessibilidadeFonte: Proxima nova rgTamanho: 0.786emCor: #555555Link hover: #068833Ícones: Font awesomeTamanho: 23x23px
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 Á
3.4. Estrutura Governamental Barra de Notícias - pode ser dividida em até quatro colunas e incluir editais ou outros avisos: largura 1170px
Barra de Destaques: 1170px
Barra de Agenda: 1170px
Barra de Vídeos: 1170px
17
Fonte título assunto: Proxima nova boldTamanho: 1.714emCor: #333333Fonte títulos: Proxima nova boldTamanho: 1.285emCor: #FFFFFFBorda esquerda: 6px - cor alterada conforme cores características da instituição
Fonte título assunto: Proxima nova boldTamanho: 1.285emCor: #333333Fonte texto: Proxima nova rgTamanho: 0.875emCor: #333333Borda esquerda: 6px - cor alterada conforme cores características da instituição
Botão Mais Notícias: 116x34pxFonte: Proxima nova boldTamanho: 1.000emCor: #FFFFFFBackground: alterado conforme cores características da instituição
Destaques rotativos: altura 250pxFonte títulos: Proxima nova boldTamanho: 1.500emCor: #FFFFFFDestaques estáticos: altura 390pxFonte títulos: Proxima nova boldTamanho: 1.500emCor: #FFFFFFFoto:570x390pxFonte texto: Proxima nova rgTamanho: 0.875emCor: #FFFFFF
Fonte títulos: Proxima nova boldTamanho: 1.714emCor: alterado conforme cores características da instituiçãoFonte data: Proxima nova boldTamanho: 3.214emCor: #FFFFFFFonte texto: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: alterado conforme cores características da instituição
Botão Saiba Mais: 119x34pxFonte: Proxima nova rgTamanho: 1.000emCor: #FFFFFFBackground: alterado conforme cores características da instituição
Botão Ver Agenda: 169x34pxFonte: Proxima nova rgTamanho: 1.000emCor: #FFFFFFBackground: alterado conforme cores características da instituição
Fonte título Assista: Proxima nova boldTamanho: 2.000emCor: alterada conforme cores características da instituiçãoVídeo destaque: 746x418pxVídeos sequenciais: 75x57pxLink texto: Proxima nova rgTamanho: 0.750emCor: #333333Borda esquerda: 6px - cor alterada conforme cores características da instituição
250
390
Localização
Rodapé
Redes Sociais
Vídeos
Destaques
Notícias
Agenda
120
35
45
350
75
100%1170
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 Á
3.4. Estrutura Governamental Barra de Localização: largura 1170pxFonte título Localize: Proxima nova boldTamanho: 2.5emCor: #333333Background: 1903x 70px #000000Fonte texto: Proxima nova rgTamanho: 0.875emCor: #555555 e #FFFFFFMapa: 1903x483px
Barra de Redes Sociais - pode ser dividida em até quatro colunas: 1170pxFonte título assunto: Proxima nova boldTamanho: 1.714emCor: #333333Fonte título mídia: Proxima nova boldTamanho: 1.714emCor: #FFFFFFÍcones: Font awesomeTamanho: 16x46pxBackground: #474747Fonte texto: Proxima nova rgTamanho: 1.285emCor: #333333Link hover: #00aeef
Rodapé
18
Barra com links para Mapa do Site, Ouvidoria e Transparência: 1170x50pxBackground: alterado conforme cores características da instituiçãoBotão borda: 1px solid #FFFFFF 20%Fonte: Proxima nova boldTamanho: 0.857emCor: #FFFFFFHover: #333333Background hover: #FFFFFFÍcones: 20x20px
Barra com a marca do Governo do Estado do Paraná, se necessário título da secretaria, logomarca da Celepar, endereço, contato, horários de atendimento e localização por mapa alinhados à esquerdaLargura: 1170pxFonte: Proxima nova boldTamanho: 1.2em e 0.875emCor: #FFFFFFBackground: alterado conforme cores características da instituiçãoÍcones de redes sociais alinhados à direita: 38x38px
250
390
Localização
Rodapé
Redes Sociais
Vídeos
Destaques
Notícias
Agenda
120
35
45
350
75
100%1170
3.4. Estrutura Governamental Página InternaA página interna permite excluir a coluna direita, aumentando a área de exposição do conteúdoLargura: 1170pxFonte título: Proxima nova boldTamanho: 1.924emCor: #666666Borda esquerda: 6px - cor alterada conforme cores características da instituiçãoFonte subtítulo: Proxima nova rgTamanho: 1.714emCor: #333333Fonte texto: Proxima nova rgTamanho: 1.143emCor: #333333Link: #337ab7Link hover: #23527c
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 Á 19
1170100%
3.4. Estrutura Governamental Exemplos
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 Á 20
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 Á 21
3.4. Estrutura Governamental Exemplos
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 Á 22
3.4. Estrutura Governamental Exemplos
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 Á 23
3.4. Estrutura Governamental Exemplos