Guia de Identidade Digital para Sites CPS – 1
Guia de Identidade Digital para Sites CPS
2021
GOVERNO DO ESTADO DE SÃO PAULO
GovernadorJoão Doria
Vice-GovernadorRodrigo Garcia
Secretária de Desenvolvimento EconômicoPatricia Ellen
ASSESSORIA DE COMUNICAÇÃO (ASSCOM)
CoordenaçãoDirce Helena Salles
Assessoria de Imprensa e TextosCristiane Santos, Fabio Berlinga, Ana Claudia Silva (estagiária) e Giusti Comunicação
DesignersAna Carmen La Regina, Diego Santos,Fernando França, Marta Almeida e Victor Akio
Núcleo de InformaçõesRoberto Sungi
SecretariaRaul Albuquerque
CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA
Diretora-SuperintendenteLaura Laganá
Vice-Diretora-SuperintendenteEmilena Lorenzon Bianco
Chefe de Gabinete da SuperintendênciaArmando Natal Maurício
Coordenadora da Pós-Graduação, Extensão ePesquisa
Helena Gemignani Peterossi
Coordenador do Ensino Superior de GraduaçãoRafael Ferreira Alves
Coordenador do Ensino Médio e TécnicoAlmério Melquíades de Araújo
Coordenadora de Formação Inicial e EducaçãoContinuada
Marisa Souza
Coordenador de InfraestruturaHamilton Pacífico da Silva
Coordenadora de Gestão Administrativa eFinanceira
Ana Paula Garcia Romero
Coordenador de Recursos HumanosVicente Mellone Junior
Coordenadora da Assessoria de InovaçãoTecnológicaEmilena Lorenzon Bianco
Índice
Centro Paula Souza 4
Logotipo 5
Cores 7
Fontes 9
Iconografia 10
Espaçamento 12
Imagens 19
ElementosdaIdentidadeVisual 22
Guia de Identidade Digital para Sites CPS – 4
Centro Paula Souza
Autarquia do Governo do Estado de São Paulo vinculada à Secretaria de Desenvolvimento Econômico, o Centro Paula Souza (CPS) é responsável pelas Faculdades de Tecnologia (Fatecs) e Escolas Técnicas (Etecs) estaduais.
O Guia de Identidade Digital para Sites inclui informações relacionadas à aplicação do logotipo da instituição nos impressos e web, estabelecidas pela identidade visual do Centro Paula Souza (CPS). É importante adotar os procedimentos descritos, para alcançar os objetivos propostos. Dentre eles, fazer do logotipo do CPS uma ferramenta de uso comum, decorrente de uma padronização visual consistente, agregando valores de modernidade, confiança e qualidade.
A instituição conta com um portal principal e diversas páginas que atendem às necessidades dos setores da Administração Central. E também está representado nos sites das 223 Etecs e 73 Fatecs, distribuídas pelo Estado de São Paulo.
Com a proposta de trazer unidade a todos esses portais, a Assessoria de Comunicação (AssCom) desenvolveu esta publicação, destinada aos desenvolvedores e profissionais de tecnologias de desenvolvimento web. E estende a oferta do Guia, principalmente para consulta, a todos os interessados.
Guia de Identidade Digital para Sites CPS – 5
Logotipo
O logotipo pode ser usado nas duas versões apresentadas ao lado. Qualquer exceção, é indispensável consultar a AssCom.
HierarquiaO logo do CPS deve estar sempre no cabeçalho da página, ocupando o lugar de maior destaque no layout. Esse recurso permite que o site seja associado ao CPS pelos usuários.
Título do siteSites dedicados a departamentos da Administração Central têm o mesmo layout no cabeçalho. O nome da área vem ao lado do logo CPS.
Espaçamento e altura determinados pelo manual de identidade visual.
Guia de Identidade Digital para Sites CPS – 6
Logotipo - O que não fazer
ÎNão distorcer a proporção;
ÎNão alterar a tipografia;
ÎNão aplicar em tamanho muito pequeno ou muito grande;
ÎNão usar o logotipo somente no final da página. O lugar correto é no cabeçalho (header) da página.
Guia de Identidade Digital para Sites CPS – 7
#B20000
#931914
#005c6e
#2bb8c9
#333333
#f3f3f3
Cores
A paleta de cores digital é constituída de 3 cores principais:
VermelhoCor institucional, acompanhada de uma variação mais escura - utilizada na identificação dos cabeçalhos e principais seções do site.
AzulCor contrastante ao vermelho, utilizada nas marcações de destaque.
CinzaCor padrão dos texto e cor de fundo de caixas de destaque ou outros elementos como botões e formulários.
Este guia é direcionado ao desenvolvimentos de sites vinculados ao Centro Paula Souza, para saber saber as diretrizes no uso das cores institucionais em outros s materiais, por favor consulte o manual de identidade visual pelo site www.cps.sp.gov.br.
Guia de Identidade Digital para Sites CPS – 8
Cores
Utilize a cor azul #715362 para os textos de destaque e o cinza #333, para o texto-padrão. H1
H2
p
Hyperlinks
Botões
Centro Paula Souza
Centro Paula Souza
Centro Paula Souza
Centro Paula Souza
Guia de Identidade Digital para Sites CPS – 9
Fontes
Roboto Slab (Pesos 400 e 700)
Disponível em: https://fonts.google.com/specimen/Roboto+Slab?sidebar.open=true&selection.family=Roboto+Slab:wght@400;700Para Títulos de thumbnails ou entre parágrafos utilizar o peso 400.
Para títulos de seção utilizar o peso 700.
Roboto Condensed (Peso 300)
Disponível em: https://fonts.google.com/specimen/Roboto+Condensed?sidebar.open=true&query=roboto+&selection.family=Roboto+Condensed:wght@300Somente para uso em items do menu.
Open Sans (Pesos 400 e 700)
Disponível em: https://fonts.google.com/specimen/Open+Sans?sidebar.open=true&query=Open+sans&selection.family=Open+Sans:wght@400;700Para todo o texto do site utilizar peso 400.
Para texto em destaque e links utilizar peso 700.
Roboto Slab (400 e 700)
Roboto Condensed (300)
Open Sans (400 e 700)
Guia de Identidade Digital para Sites CPS – 10
Iconografia
Uma fonte segura, pública e gratuita é a biblioteca de ícones do Font Awesome (fontawesome.com). A galeria traz diversas opções e atende às necessidades dos sites previstos para o CPS.
Um profissional web, com acesso ao ftp do site, deve instalar um kit para que você possa ter acesso a esse recurso.
Feita a instalação, siga as instruções do site fontawesome.com para obter melhor uso dos ícones.
CoresOs ícones podem ser utilizados em qualquer uma das cores principais determinadas neste guia. Cabe ao profissional que desenvolver o site estabelecer uma relação coerente entre cor, ícone, contexto e significado.
Guia de Identidade Digital para Sites CPS – 11
Iconografia - O que não fazer
ÎNão utilize ícones de outras bibliotecas.
Guia de Identidade Digital para Sites CPS – 12
Espaçamento
Cabeçalho
Rodapé
1200pxO conteúdo do site deve ter a largura máxima de 1200px.
Sempre utilizar margens de 64px abaixo do cabeçalho e antes do rodapé.
Consulte as diretrizes de espaçamento na construção de páginas, nesta série de layouts.
64px
64px
Guia de Identidade Digital para Sites CPS – 13
Espaçamento
Cabeçalho
Rodapé
Título de posts ou páginas
Caso utilize texto e um outro elemento, deixe a parte do texto com largura de 808px.
A barra lateral ou qualquer outro elemento além do texto deve ter a largura de 328px.
Quando existir algum elemento, como uma barra lateral, utilize margem de 64px entre o texto e o elemento.
808px328px
64px
64px
64px 64px
32px
Guia de Identidade Digital para Sites CPS – 14
Cabeçalho
Imagem 808x455px
Rodapé
Título de posts ou páginas
Sed minvendae volum et vent vent ea nature por rem qui di del mossit, solo odit as dolestiis mos atum num nitiasi cusciaFaceperiae quis dolorest quis et, ommodior aspisciam endaeptiu.Faceperiae quis dolorest quis et, ommodior aspisciam endaeptiu.Pudio maio. Is eos dolorrum fugit laut lab Otas doluptate dolum aut alit ulparchil min prorepu dandunt dipis dio excercium, soluptaquias estendaecto.
Faceperiae quis dolorest quis et, ommodior aspisciam endaeptiu.Pudio maio. Is eos dolorrum fugit laut lab Otas doluptate dolum aut alit ulparchil min prorepu dandunt dipis dio excercium, soluptaquias estendaecto.
Destaque
Tag 1 Tag 1
Utilizar margens de 32px após os títulos.
Para o texto padrão, utilizar a fonte no tamanho 16px e espaço entre as linhas de 26px.
Utilizar margens de 16px entre os parágrafos.
Utilizar margens de 32px após o último parágrafo.
Espaçamento
64px
32px
32px
32px
64px 64px
64px
16px
16px
16px
Guia de Identidade Digital para Sites CPS – 15
Podcast Falatec
Imagem
Espaçamento
Os ícones devem ter a mesma altura que o título.
Títulos que vêm depois de imagens menores devem ter uma margem de 16px. Aluno de Guaianazes vence 7ª
Maratona de Programação
Guia de Identidade Digital para Sites CPS – 16
Destaques
Podcast falatec
Todas as notícias
Todas as notícias
Aluno de Guaianazes vence 7ª Maratona de Programação
Aluno de Guaianazes vence 7ª Maratona de Programação
Aluno de Guaianazes vence 7ª Maratona de Programação
Aluno de Guaianazes vence 7ª Maratona de Programação
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Leia mais
Utilize uma margem de 32px para elementos que fazem parte do mesmo bloco.
Espaçamento
Guia de Identidade Digital para Sites CPS – 17
Pesquisar
Conteúdo do site 1200px
Margem de 64px
Espaçamento
Guia de Identidade Digital para Sites CPS – 18
Espaçamento - O que não fazer
ÎNão utilize o mesmo espaço para todos os elementos. Como mostrado anteriormente, para manter uma composição que facilite a compreensão e navegação pelo site, os elementos possuem espaçamentos diferentes.
Guia de Identidade Digital para Sites CPS – 19
Preferencialmente, as imagens utilizadas no site devem ter as dimensões 1280x720 na proporção 16:9. Esse é o tamanho mais comum no momento.
Nesta dimensão, além de garantir a qualidade, é possível evitar que as imagens causem um impacto negativo no tempo de carregamento das páginas.
Vale registrar: as imagens muito pequenas vão distorcer e perder qualidade. Já as grandes são muito pesadas e demoram mais tempo para baixar. Sempre que possível, mantenha a proporção 16:9 quando utilizar imagens em outros tamanhos, como por exemplo em thumbnails para posts da home.
Imagens
Guia de Identidade Digital para Sites CPS – 20
Imagens
O site do CPS busca destacar nas ilustrações das matérias fotos de alunos em atividade acadêmica e imagens que ressaltam a tecnologia.
Algumas características que devem ser buscadas em fotografias:
- Boa iluminação.
- Diversidade de pessoas.
- Pessoas em contato com tecnologias.
Recomenda-se que sejam utilizadas imagens de domínio público ou do banco de imagens do CPS. É importante informar quem é o autor e estar atento ainda aos direitos de imagem das pessoas retratadas.
Guia de Identidade Digital para Sites CPS – 21
Imagens - O que não fazer
ÎNão distorcer imagens.
ÎNão utilizar imagens pixeladas.
Guia de Identidade Digital para Sites CPS – 22
Elementos da Identidade Visual
Ao criar novos elementos para páginas, como divisores, grupos, caixas e campos, utilize as mesmas diretrizes de cores, tipografia e espaçamentos dos elementos já existentes.
ÎCores
ÎEspaçamento
ÎTipografia
Secretaria deDesenvolvimento Econômico