guia de identidade digital para sites cps 2021...guia de identidade digital para sites cps – 5...

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


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.


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.


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.


#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.


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


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)


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.


Iconografia - O que não fazer

ÎNão utilize ícones de outras bibliotecas.


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


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


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


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


Destaques

Podcast falatec

Todas as notícias

Todas as notícias

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


Pesquisar

Conteúdo do site 1200px

Margem de 64px

Espaçamento


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.


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


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.


Imagens - O que não fazer

ÎNão distorcer imagens.

ÎNão utilizar imagens pixeladas.


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

guia de identidade digital para sites cps 2021...guia de identidade digital para sites cps – 5...

Documents