23
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 LD 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. Topo
2. Estrutura
1. Introdução
3.4. Estrutura Governamental
3.3. Agência de Notícias
3.2. Secretarias
3.1. Portal Paraná Inteligência Artificial - PiÁ
3. Categorias de Sites
2.3. Rodapé
2.2. Corpo
Índice 03
04
05
05
08
11
15
04
04
04
M A N UA L D E I D E N T I D A D E V I S UA 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
03
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.
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.
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.
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.
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.
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.
M A N UA L D E I D E N T I D A D E V I S UA L D O S S I T E S D O G O V E R N O D O PA R A N Á
A área inferior do site é destinada a divulgar links para o Mapa do Site, o
Denuncie Corrupção, a Ouvidoria e a Transparência. Apresenta ainda, links
para redes sociais, 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.3. Rodapé
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.2. Corpo
A área superior do site poderá apresentar links de Acessibilidade, do Portal
da Transparência, de Pessoas Desaparecidas e sobre o Governo do Paraná.
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 banners de destaque e mais
uma barra para a aplicação de menu.
2.1. Topo
Tanto a página inicial quanto as internas possuem as áreas topo, corpo e
rodapé de acordo com a descrição a seguir.
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.
É possível adaptar características como cores, botões de ação ou imagens,
desde que atendam à padronização dos elementos estabelecida neste
manual.
No layout-padrão dos sites definido para o Governo, 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.
2. Estrutura
04
Topo
Rodapé
Corpo
100%1170
M A N UA L D E I D E N T I D A D E V I S UA L D O S S I T E S D O G O V E R N O D O PA R A N Á
Topo
CorpoEssa área possui uma imagem de fundo e apresenta a marca do PIÁ, do Governo do Estado do Paraná, os links Sobre, Guia de Serviços, Informe seu CPF, o slogan, o campo de busca e links dos serviços mais buscados
Background: #F7F7F7 Área utilizada: 1170x35px
A barra superior contém os links de Acessibilidade, do Portal da Transparência, de Pessoas Desaparecidas e sobre o Governo do Paraná
O portal do PIÁ contém elementos que acompanham padrões de layout, aplicação de fontes, cores e medidas conforme as seguintes descrições:
3.1. Portal Paraná Inteligência Artificial - PIÁ3. Categorias de Sites
Topo
Corpo
Tamanho: 23x23px
Link hover: #068833Cor: #555555Tamanho: 0.786em
Ícones: Font awesome
Links AcessibilidadeFonte: Proxima nova rg
05
Rodapé
1170100%
Links Portal da Transparência, Pessoas Desaparecidas e Governo do ParanáFonte: Proxima nova boldTamanho: 0.857emCores: #888888 e #068833Link hover: #068833
RodapéContém links para Denuncie Corrupção, Ouvidoria, Transparência, a marca do Governo do Estado do Paraná, a marca da Celepar, o texto de endereço e localização por mapaLargura: 1170px
Tamanho: 1.4emCor: #666666Background: #F7F7F7
Fonte: Proxima nova rg
SloganFonte: Proxima nova rgTamanho: 3.6emCor: #FFFFFF
Mais buscadasFonte: Proxima nova rgTamanho: 1.4emCor: #00B958 e #FFFFFF
Área utilizada: 1170x976pxMarca do PIÁ: 170x55pxMarca do Governo: 89x39pxBusca: 446x70pxBackground: imagem
Links Sobre, Guia de Serviços e Informe seu CPFFonte: Proxima nova rgTamanho: 1.250emCor: #FFFFFF
M A N UA L D E I D E N T I D A D E V I S UA 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.1. Página de Serviços do Paraná Inteligência Artificial - PIÁ 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, do Portal da Transparência, de Pessoas Desaparecidas e sobre o Governo do ParanáÁrea utilizada: 1170x35pxBackground: #F7F7F7
164
35
Título do serviço
Títulos do texto
208
06
Mais buscadasFonte: Proxima nova rgTamanho: 1.2emCor: #00B858 e #FFFFFF
1170100%
Rodapé
Links AcessibilidadeFonte: Proxima nova rgTamanho: 0.786emCor: #555555Link hover: #068833Ícones: Font awesomeTamanho: 23x23px
Links Portal da Transparência, Pessoas Desaparecidas e Governo do ParanáFonte: Proxima nova boldTamanho: 0.857emCores: #888888 e #068833Link hover: #068833
Área utilizada: 1170x164pxMarca do PIÁ: 170x50pxMarca do Governo: 89x39pxBusca: 226x40pxBackground: imagem
Links Sobre, Guia de Serviços e Informe seu CPFFonte: Proxima nova rgTamanho: 1.000emCor: #FFFFFF
CorpoA coluna esquerda prioriza os conteúdos como o que é, como realizar o serviço, prazo e legislaçãoLargura: 825px
BreadcrumbFonte: Proxima nova rgTamanho: 1emCor: #999999
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
Barra com a marca do PIÁ, marca do Governo do Estado do Paraná, o campo de busca, os links Sobre, Guia de Serviços, Informe seu CPF e links dos serviços mais buscados
825
M A N UA L D E I D E N T I D A D E V I S UA 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.1. Página de Serviços do Paraná Inteligência Artificial - PIÁ
164
35
825 208
07
1170100%
Rodapé
A coluna direita apresenta forma de atendimento, quanto custa, serviços relacionados e lista de outros links referentes ao serviçoLargura: 253px
Títulos do textoFonte: Proxima nova rgTamanho: 1.2emCor: #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
RodapéContém links para Denuncie Corrupção, Ouvidoria, Transparência, a marca do Governo do Estado do Paraná, a marca da Celepar, o texto de endereço e localização por mapaLargura: 1170pxFonte: Proxima nova rgTamanho: 1.4emCor: #666666Background: #F7F7F7
Título do serviço
Títulos do texto
M A N UA L D E I D E N T I D A D E V I S UA L D O S S I T E S D O G O V E R N O D O PA R A N Á
Página Inicial100%1170
120
35
45
75
350
Notícia Destaque
Notícia em Linha Agenda Executiva
Redes Sociais
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, do Portal da Transparência, de Pessoas Desaparecidas e sobre o Governo do ParanáÁrea utilizada: 1170x35pxBackground: #F7F7F7
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
47
600
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 do PIÁ: 1170x120pxMarca do Governo: 80x100pxFonte título: Proxima nova boldTamanho: .7emCor: #555555Busca: 487x80pxÍcones redes sociais: 38x38px
Links AcessibilidadeFonte: Proxima nova rgTamanho: 0.786emCor: #555555Link hover: #068833Ícones: Font awesomeTamanho: 23x23px
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
Tamanho: 1.714emCor: #333333Borda esquerda: 5px #00AEEF Fonte mês: Proxima nova boldTamanho: 0.875emCor: #FFFFFFFonte texto notícia: Proxima nova rgTamanho: 0.875emCor: #333333
Agenda ExecutivaFonte título: Proxima nova bold
Destaques
08
Links Portal da Transparência, Pessoas Desaparecidas e Governo do ParanáFonte: Proxima nova boldTamanho: 0.857emCores: #888888 e #068833Link hover: #068833
Vídeos, áudios ououtros conteúdos
M A N UA L D E I D E N T I D A D E V I S UA L D O S S I T E S D O G O V E R N O D O PA R A N Á
Botões: altura 40pxFonte: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #FFFFFF 20%
Barra Serviços para você: 1170x75pxFonte: Proxima nova boldTamanho: 1.5emCor: #FFFFFFBackground: #009B54
RodapéLargura: px1170
Notícia em linha: pode ser com ou sem fotoFotos: 165x123pxFonte editoria: Proxima nova rgTamanho: 0.875emCor: #00AEEFFonte 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, Denuncie Corrupção, Ouvidoria e Transparência Institucional: 1170x50pxBackground: #0072BC 90%Botão borda: 1px solid #FFFFFFFonte: 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: #333333Botão Mais Notícias: 116x34pxFonte: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #00AEEF
09
3.2. Secretarias
Barra com a marca do Governo do Estado do Paraná: 150x65pxTí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: #0072BCAlinhados à direita: Ícones de redes sociais: 38x38pxMarca da Celepar: 123x20px
Barra de Destaques rotativos: 1170x600pxFonte títulos: Proxima nova boldTamanho: 1.500emCor: #FFFFFFFoto menor: 277x230pxFonte títulos: Proxima nova boldTamanho: 1.500emCor: #FFFFFFFoto maior: 570x370px
Fonte texto: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #0072BCBotão de açãoFonte: Proxima nova rgTamanho: 1.000emCor: #FFFFFFBackground: #00AEEF
Barra de vídeos, áudios, redes sociais e outros conteúdos: 1170pxFonte título: Proxima nova boldTamanho: 1.500emBorda esquerda: 6px cor #00AEEF Vídeo destaque: 730x430pxVídeos sequenciais: 144x120pxFotos: 136x98px
Fonte áudios: Proxima nova rgTamanho: 0.875emCor: #333333Ícones: Font awesomeFonte título redes sociais: Proxima nova boldTamanho: 1.143emCor: #FFFFFF
Página Inicial100%1170
120
35
45
75
350
Notícia Destaque
Notícia em Linha Agenda Executiva
Redes Sociais
47
600
Destaques
Vídeos, áudios ououtros conteúdos
M A N UA L D E I D E N T I D A D E V I S UA L D O S S I T E S D O G O V E R N O D O PA R A N Á
Página InternaLargura de 1170pxBorda esquerda: 6px #00AEEFFonte título editoria: Proxima nova boldTamanho: .378emCor: #00AEEFFonte título: Proxima nova boldTamanho: 1.924emCor: #666666Fonte texto: Proxima nova rgTamanho: 1.143emCor: #666666Link: #00AEEF Link hover: #0072BC
10
50
120
35
45
75
3.2. SecretariasPágina Interna
100%1170
M A N UA L D E I D E N T I D A D E V I S UA 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, do Governo do Paraná e da Transparência.Á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
100%1170
120
35
45
725 345
483
709
11
Bloco de Notícias
Rodapé
Fotos e Vídeos
Notícia Manchete
Notícia Destaque
Áudios
Notícias
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.500emCor: #139F49Busca: 262x40pxÍcones redes sociais: 38x38px
Links Governo do Paraná e TransparênciaFonte: Proxima nova boldTamanho: 0.688emCores: #068833Imagem: logo transparência 131x35px
Barra com menu: 1170x45pxFonte: Proxima nova boldTamanho: 1emCor: #FFFFFFBackground: #30575CBackground hover: #44AD4BÍcones: Font awesomeLinha de avisosFonte: Proxima nova rgTamanho: 0.938emCor: #324345 Ícone: Font awesome #00AEEF
Links AcessibilidadeFonte: Proxima nova rgTamanho: 0.625emCor: #838383 e #0C668CLink hover: #068833Ícones: Font awesomeTamanho: 24x24px
Notícia destaque: largura 725pxFotos: 326x217pxFonte título assunto: Proxima nova rgTamanho: 0.833emCor: #00AEEFFonte título notícia: Proxima nova boldTamanho: 1.250emCor: #324345
Notícia manchete ou banner: 725x483pxFonte: Proxima nova rgTamanho título assunto: 1.000emTamanho título notícia: 2.500emCor: #FFFFFFBorda esquerda: 6px #00AEEF
Fonte texto notícia: Proxima nova rgTamanho: 1.000emCor: #324345Ícones: Font awesomeTamanho: 21x20pxCor: #00AEEF
Página Inicial
M A N UA L D E I D E N T I D A D E V I S UA L D O S S I T E S D O G O V E R N O D O PA R A N Á
Coluna DireitaPrioriza a utilização de áudios, notícias e outros diferenciais, quando necessárioLargura: 360px
12
Bloco notícias: largura 725px 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ícias em listaFonte título assunto: Proxima nova rgTamanho: 0.813emCor: 00AEEF#Fonte 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 editorias: Proxima nova boldTamanho: 1.000emCor: #545454Link hover: #44AD4BFonte Todas as Editorias: Proxima nova boldTamanho: 0.750emCor: #44AD4BBackground: #EBEDDF
Foto notícia: 345x230pxFonte 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: #000AEEFFonte áudios: Proxima nova boldTamanho: 1.250em e 0.813emCor: #324345Borda esquerda: 6px #00AEEF
Barra com fotos e vídeos: 1170x709pxFonte título Assista: Proxima nova boldTamanho: 2.000emCor: #00AEEFVídeo destaque: 652x365pxVídeos sequenciais: 76x57pxLink texto: Proxima nova rgTamanho: 0.688emCor: #A8A8A8Borda esquerda: 6px #00AEEFBackground: #324345
Fonte título Fotos do Dia: Proxima nova boldTamanho: 2.000emCor: #00AEEFFotos: 133x75pxLink texto: Proxima nova rgTamanho: 0.750emCor: #A8A8A8Background: #324345
100%1170
120
35
45
725 345
483
709
Bloco de Notícias
Rodapé
Fotos e Vídeos
Notícia Manchete
Notícia Destaque
Áudios
Notícias
Página Inicial
M A N UA L D E I D E N T I D A D E V I S UA L D O S S I T E S D O G O V E R N O D O PA R A N Á
RodapéLargura: px1170
13
3.3. Agência de NotíciasFonte 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
Barra com links para editorias, notícias por região, áudios e newsletterFonte títulos: Proxima nova boldTamanho: 1.000emCor: #FFFFFFÍcones: 20x20px #00AEEF
À direitaMarca do Governo do Estado do Paraná: 150x65pxMarca da Celepar: 182x50pxFonte órgão, endereço, contato e localização por mapa: Proxima nova rgTamanho: 0.688emCor: #FFFFFFHover: #00AEEFText-decoration-line: #44AD4BBackground: #324345
À esquerdaFonte título Agência de Notícias: Proxima nova boldTamanho: 1.750emCor: #FFFFFFFonte links: Proxima nova rgTamanho: 0.750em Cor: #FFFFFFÍcones de redes sociais: 38x38pxBackground: #324345
100%1170
120
35
45
725 345
483
709
Bloco de Notícias
Rodapé
Fotos e Vídeos
Notícia Manchete
Notícia Destaque
Áudios
Notícias
Página Inicial
M A N UA L D E I D E N T I D A D E V I S UA 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í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
Página Interna
M A N UA L D E I D E N T I D A D E V I S UA L D O S S I T E S D O G O V E R N O D O PA R A N Á
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, do Portal da Transparência, de Pessoas Desaparecidas e sobre o Governo do ParanáÁrea utilizada: 1170x35pxBackground: #F7F7F7
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: 1170pxBarra de Notícias - pode ser dividida em até quatro colunas e incluir editais ou outros avisos: largura 1170px
3.4. Estrutura Governamental
Barra com menu: 1170x45pxFonte: Proxima nova boldTamanho: 1emCor: #FFFFFFBackground: cor característica da instituiçãoBackground hover: cor característica da instituição
Barra com a logomarca da instituição e campo de busca do PIÁ: 1170x120pxNo caso de subsites, é possível incluir mais de uma logomarcaFonte título: Proxima nova boldTamanho: .7emCor: #333333Busca: 487x80px
Botões: altura 40pxFonte: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #FFFFFF 20%
15
Links AcessibilidadeFonte: Proxima nova rgTamanho: 0.786emCor: #555555Link hover: #068833Ícones: Font awesomeTamanho: 23x23px
M A N UA L D E I D E N T I D A D E V I S UA L D O S S I T E S D O G O V E R N O D O PA R A N Á
230
380
Localização
Rodapé
Redes Sociais
Vídeos e Fotos
Destaques
Notícias
Agenda
120
35
45
350
75
100%1170
Página Inicial
Fonte título: Proxima nova boldTamanho: 1.714emCor: #333333Fonte título notícia: Proxima nova boldTamanho: 1.285emCor: #FFFFFFBorda esquerda: 6px cor característica da instituiçãoBotão Mais Notícias: 116x34pxFonte: Proxima nova boldTamanho: 1.000emCor: #FFFFFFBackground: cor característica da instituição
Agenda ExecutivaFonte título: Proxima nova boldTamanho: 1.714emCor: #333333Borda esquerda: 5px cor característica da instituiçãoFonte mês: Proxima nova boldTamanho: 0.875emCor: #FFFFFFFonte texto notícia: Proxima nova rgTamanho: 0.875emCor: #333333
Barra Serviços para você: 1170x75pxFonte: Proxima nova boldTamanho: 1.5emCor: #FFFFFFBackground: cor característica da instituição
Link hover: #068833
Links Acesso à Informação, Pessoas Desaparecidas e Governo do ParanáFonte: Proxima nova boldTamanho: 0.857emCores: #888888 e #068833
3.4. Estrutura Governamental
16
Barra de Localização: largura 1170pxFonte título: Proxima nova boldTamanho: 2.5emCor: #333333Background: 1903x70px cor característica do layoutFonte texto: Proxima nova rgTamanho: 0.875emCor: #555555 e #FFFFFFMapa: 1903x483px
Barra de destaques rotativos: 1170x600pxFonte títulos: Proxima nova boldTamanho: 1.500emCor: #FFFFFFFoto menor: 277x230pxFonte títulos: Proxima nova boldTamanho: 1.500emCor: #FFFFFFFoto:570x390px
Barra de Agenda: 1170pxFonte título: Proxima nova boldTamanho: 1.714emCor: característica do layoutFonte data: Proxima nova boldTamanho: 3.214emCor: #FFFFFFFonte texto: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: cor característica do layoutBotão: altura 34pxFonte: Proxima nova rgTamanho: 1.000emCor: #FFFFFFBackground: cor característica do layout
Fonte texto: Proxima nova rgTamanho: 0.875emCor: #FFFFFFBackground: #0072BCBotão de açãoFonte: Proxima nova rgTamanho: 1.000emCor: #FFFFFFBackground: cor característica do layout
Barra de Vídeos e Fotos: 1170pxFonte título: Proxima nova boldTamanho: 1.714emCor: #333333Borda esquerda: 6px - cor característica do layoutVídeo destaque: 746x418pxVídeos sequenciais: 75x57pxLink texto: Proxima nova rgTamanho: .857emCor: #FFFFFFFotos: 170x122px
Barra de Redes Sociais - pode ser dividida em até quatro colunas: 1170pxFonte título: Proxima nova boldTamanho: 1.714emCor: #333333Fonte título mídia: Proxima nova boldTamanho: 1.714emCor: #FFFFFFÍcones: Font awesomeTamanho: 16x46pxBackground: cor característica do layout
M A N UA L D E I D E N T I D A D E V I S UA L D O S S I T E S D O G O V E R N O D O PA R A N Á
230
380
Localização
Rodapé
Redes Sociais
Vídeos e Fotos
Destaques
Notícias
Agenda
120
35
45
350
75
100%1170
Página Inicial
RodapéLargura: 1170pxBarra com links para Mapa do Site, Denuncie Corrupção, Ouvidoria e Transparência Institucional: 1170x50pxBackground: cor característica do layoutBotão borda: 1px solid #FFFFFF Fonte: Proxima nova boldTamanho: 0.857emCor: #FFFFFFHover: #333333Background hover: #FFFFFFÍcones: 20x20px
Barra com a marca do Governo do Estado do Paraná: 150x65pxTítulo da secretaria, endereço, contato, horários de atendimento e localização por mapa alinhados à esquerda.Largura: 1170pxFonte: Proxima nova boldTamanho: 1.2em e 0.875emCor: #FFFFFFBackground: cor característica do layoutAlinhados à direita: Ícones de redes sociais: 38x38pxMarca da Celepar: 123x20px
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: cor alterada conforme cores características da instituiçãoLink hover: cor alterada conforme cores características da instituição
17
1170100%
M A N UA L D E I D E N T I D A D E V I S UA L D O S S I T E S D O G O V E R N O D O PA R A N Á
18
3.4. Estrutura Governamental - Exemplos
M A N UA L D E I D E N T I D A D E V I S UA L D O S S I T E S D O G O V E R N O D O PA R A N Á
19M A N UA L D E I D E N T I D A D E V I S UA 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 - Exemplos
20M A N UA L D E I D E N T I D A D E V I S UA 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 - Exemplos
21M A N UA L D E I D E N T I D A D E V I S UA 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 - Exemplos
22M A N UA L D E I D E N T I D A D E V I S UA 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 - Exemplos
