Manual | Identidade Visual Digital 02/2021

MANUAL | IDENTIDADE VISUAL DIGITAL

Atualizado em fevereiro de 2021

Comunicação Visual para Web

|

Governo do Estado de São Paulo

1

Introdução Comunicação Visual para Web

|

Governo do Estado de São Paulo

2

INTRODUÇÃO Ol@!

Desenvolvido a partir da nova identidade visual do Governo do Estado de São Paulo, este Manual Web apresenta materiais específicos para produtos digitais – sites, newsletters, redes sociais e vídeos, entre outros produtos de comunicação eletrônica.

Visualmente, este manual é leve e condizente com um ambiente web que se transforma rapidamente.

Buscamos oferecer soluções que facilitem o trabalho dos profissionais de comunicação e desenvolvimento na aplicação dos elementos, ao mesmo tempo garantindo a melhor usabilidade para o cidadão infoconectado. Afinal, nosso objetivo principal é facilitar a vida de quem busca informações e serviços nas propriedades digitais do Governo.

Assim, além deste documento para consulta e orientação, oferecemos não apenas os arquivos em imagem para download, como também os códigos HTML dos elementos.

Qualquer dúvida, contem com a gente. Bom trabalho!

Secretaria Especial de Comunicação Governo do Estado de São Paulo

Comunicação Visual para Web

|

Governo do Estado de São Paulo

3

ÍNDICE Tipografia 5 Cores 7 Cabeçalho, Topo e Rodapé

9

Redes Sociais

39

Vinhetas para edição de vídeo

47

Comunicação Visual para Web

|

Governo do Estado de São Paulo

4

Tipografia Comunicação Visual para Web

|

Governo do Estado de São Paulo

5

Tipografia

As fontes a serem usadas em todos os textos de apoio são a Montserrat, Noto Serif, Verdana e Lato.

Foram eleitas estas famílias por serem limpas, versáteis e legíveis tanto em corpos grandes, como em corpos pequenos. A fonte Passion One é utilizada em situações especiais, onde se fizer necessário o uso de uma segunda tipologia, para destaques, títulos ou outras ocasiões especiais. Todas as fontes são livres e licenciadas e estão disponíveis em: https://fonts.google.com/

Verdana

Montserrat

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789?!&$%@ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789?!&$%@

Noto Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789?!&$%@

Lato

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789?!&$%@

Passion One

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789?!&$%@ Comunicação Visual para Web

|

Governo do Estado de São Paulo

6

Cores Comunicação Visual para Web

|

Governo do Estado de São Paulo

7

Cores

Foram escolhidas 6 cores primárias para a comunicação digital do Governo do Estado de São Paulo. Elas tem como objetivo gerar reconhecimento da marca. As cores secundárias são cores de suporte, com um papel mais funcional, ainda que importante para criar uma harmonia com a padronização visual.

#1B213B

#14396C

#0C509D

#5297D0

Comunicação Visual para Web

#191716

|

Governo do Estado de São Paulo

#FFFDFC

8

Cabeçalho, Topo e Rodapé

Comunicação Visual para Web

|

Governo do Estado de São Paulo

9

Cabeçalhos e topo

Contemplando a grande variedade de situações encontradas na prática nas propriedades digitais do Governo, sugerimos três modelos de headers para aplicação:

01

01) O cabeçalho das Secretarias.

saopaulo.sp.gov.br

02) O topo simplificado, apenas

Comunicação

Cidadão SP

com os elementos essenciais.

Nas próximas páginas será detalhado o uso desses itens e as recomendações de aplicação.

saopaulo.sp.gov.br

02

Cidadão SP

Comunicação saopaulo.sp.gov.br

Cidadão SP

saopaulo.sp.gov.br

saopaulo.sp.gov.br

Cidadão SP

Comunicação saopaulo.sp.gov.br

Cidadão SP

saopaulo.sp.gov.br

saopaulo.sp.gov.br

Altura de “O” de PAULO

Largura de “O” de PAULO

Cidadão SP

Comunicação saopaulo.sp.gov.br

Cidadão SP

saopaulo.sp.gov.br

saopaulo.sp.gov.br Cidadão SP Consulte o Manual de Identidade Visual para mais

informações sobre a margem de segurança em torno Comunicação

do logotipo do Governo do Estado de São Paulo saopaulo.sp.gov.br

Cidadão SP

saopaulo.sp.gov.br

saopaulo.sp.gov.br

Cidadão SP

Comunicação saopaulo.sp.gov.br

Comunicação Visual para Web Cidadão SP

saopaulo.sp.gov.br

saopaulo.sp.gov.br

Cidadão SP

|

Governo do Estado de São Paulo

10

Cabeçalho das Secretarias

O cabeçalho das Secretarias foi pensado para interferir o

saopaulo.sp.gov.br

Cidadão SP

Comunicação

mínimo possível na construção da maior parte dos sites atuais, possibilitando a manutenção de menus e submenus existentes.

saopaulo.sp.gov.br

Cidadão SP

Comunicação

Seu elemento mais marcante é a nomenclatura da Secretaria no canto esquerdo, sobre detalhe em azul, preto ou cinza

saopaulo.sp.gov.br

Cidadão SP

Comunicação

88%, além de logotipo do Governo à direita.

saopaulo.sp.gov.br

Links para o Portal do Governo,

Comunicação

Cidadão SP

Cidadão.SP, redes sociais do Governo e botões de acessibilidade estão mantidos em sua parte superior.

saopaulo.sp.gov.br

Cidadão SP

Comunicação

Oferecemos também uma opção 70% transparente para site e hotsite em fundo escuro.

O último padrão é um modelo em contraste para garantir acessibilidade a pessoas com deficiência visual que precisam deste recurso.

Comunicação Visual para Web

|

Governo do Estado de São Paulo

11

saopaulo.sp.gov.br

Cidadão SP

Cultura e Economia Criativa

Aplicação

Cabeçalho das Secretarias

O exemplo ao lado ilustra a página inicial de uma secretaria.

Ouvidoria

Comunicação Visual para Web

|

|

Transparência

|

SIC

Governo do Estado de São Paulo

12

Medidas e grids

Cabeçalho das Secretarias

Os grids e medidas ajudam o designer e o desenvolvedor na elaboração das versões responsivas dos sítios eletrônicos.

Desktop - (992px - 1200 px) - 12 colunas

A versão desktop tem 12 colunas;

15px

para tablets são oito colunas e

max width - 1200px

30px

para celulares quatro colunas. saopaulo.sp.gov.br

95px

Cidadão SP

Comunicação

Tablets - (769px - 991px) - 8 colunas 15px

30px

saopaulo.sp.gov.br

95px

Cidadão SP

Comunicação

Celular - (<576px - 768px) - 4 colunas 15px

80px

full width

full width

30px

Comunicação

Comunicação

80px

Comunicação Visual para Web

|

saopaulo.sp.gov.br Cidadão SP

Governo do Estado de São Paulo

13

Assinaturas

Cabeçalho das Secretarias

Aqui seguem os cabeçalhos com assinaturas de todas as Secretarias. A cor azul serve como exemplificação; a Pasta pode escolher também a versão em preto ou cinza 88%, disponível para download nos

saopaulo.sp.gov.br

Cidadão SP

Administração Penitenciária

anexos deste manual.

saopaulo.sp.gov.br

Cidadão SP

Agricultura e Abastecimento

saopaulo.sp.gov.br

Cidadão SP

Casa Civil

saopaulo.sp.gov.br

Cidadão SP

Casa Militar e Defesa Civil

Comunicação Visual para Web

|

Governo do Estado de São Paulo

14

saopaulo.sp.gov.br

Cidadão SP

Comunicação

Assinaturas

Cabeçalho das Secretarias saopaulo.sp.gov.br

Cidadão SP

Cultura e Economia Criativa

saopaulo.sp.gov.br

Cidadão SP

Desenvolvimento Econômico

saopaulo.sp.gov.br

Cidadão SP

Desenvolvimento Regional

saopaulo.sp.gov.br

Cidadão SP

Desenvolvimento Social

Comunicação Visual para Web

|

Governo do Estado de São Paulo

15

saopaulo.sp.gov.br

Cidadão SP

Direitos da Pessoa com Deficiência

Assinaturas

Cabeçalho das Secretarias saopaulo.sp.gov.br

Cidadão SP

Educação

saopaulo.sp.gov.br

Cidadão SP

Esportes

saopaulo.sp.gov.br

Cidadão SP

Fazenda e Planejamento

saopaulo.sp.gov.br

Cidadão SP

Governo

Comunicação Visual para Web

|

Governo do Estado de São Paulo

16

saopaulo.sp.gov.br

Cidadão SP

Habitação

Assinaturas

Cabeçalho das Secretarias saopaulo.sp.gov.br

Cidadão SP

Infraestrutura e Meio Ambiente

saopaulo.sp.gov.br

Cidadão SP

Justiça e Cidadania

saopaulo.sp.gov.br

Cidadão SP

Logística e Transportes

saopaulo.sp.gov.br

Cidadão SP

Procuradoria Geral do Estado

saopaulo.sp.gov.br

Cidadão SP

Projetos, Orçamento e Gestão

Comunicação Visual para Web

|

Governo do Estado de São Paulo

17

saopaulo.sp.gov.br

Cidadão SP

Relações Internacionais

Assinaturas

Cabeçalho das Secretarias saopaulo.sp.gov.br

Cidadão SP

Saúde

saopaulo.sp.gov.br

Cidadão SP

Secretaria Particular

saopaulo.sp.gov.br

Cidadão SP

Segurança Pública

saopaulo.sp.gov.br

Cidadão SP

Transportes Metropolitanos

saopaulo.sp.gov.br

Cidadão SP

Turismo

Comunicação Visual para Web

|

Governo do Estado de São Paulo

18

Arquivos para download e códigos HTML

Cabeçalho das Secretarias

O site da Secretaria Especial de Comunicação disponibiliza, na mesma página em que você encontrou este manual, os arquivos de imagem abertos e/ou códigos HTML para aplicação dos elementos conforme cada caso.

No código HTML do cabeçalho das Secretarias, estará assinalado o espaço para inserção do nome da Pasta.

Comunicação Visual para Web

|

Governo do Estado de São Paulo

19

Topo básico

O topo básico é uma alternativa para empresas, órgãos da administração indireta e equipamentos públicos que têm identidade visual própria. Deve ser aplicado acima de todos os demais elementos do site e em toda a largura da tela.

saopaulo.sp.gov.br

Cidadão SP

saopaulo.sp.gov.br

Cidadão SP

saopaulo.sp.gov.br

Cidadão SP

saopaulo.sp.gov.br

Cidadão SP

saopaulo.sp.gov.br

Cidadão SP

Comunicação Visual para Web

|

Governo do Estado de São Paulo

20

saopaulo.sp.gov.br

Aplicação Topo básico

Cidadão SP

O exemplo ao lado ilustra a página inicial do Metrô.

Ouvidoria

Comunicação Visual para Web

|

|

Transparência

|

SIC

Governo do Estado de São Paulo

21

Medidas e grids Topo básico

Os grids e medidas ajudam o designer e o desenvolvedor na elaboração das versões responsivas dos sítios eletrônicos.

A versão desktop tem 12 colunas; para tablets são oito colunas e

full width

Desktop - (>=992px) - 12 colunas

para celulares quatro colunas.

15px

60px

30px

saopaulo.sp.gov.br

Cidadão SP

Tablets - (769px - 991px) - 8 colunas 15px

60px

full width

30px

saopaulo.sp.gov.br

Cidadão SP

Celular - (<576px - 768px) - 4 colunas 15px

60px

full width

30px

saopaulo.sp.gov.br

saopaulo.sp.gov.br 60px

Comunicação Visual para Web

|

Cidadão SP

Governo do Estado de São Paulo

22

Arquivos para download e códigos HTML Topo básico

O site da Secretaria Especial de Comunicação disponibiliza, na mesma página em que você encontrou este manual, os arquivos de imagem abertos e/ou códigos HTML para aplicação dos elementos conforme cada caso.

Comunicação Visual para Web

|

Governo do Estado de São Paulo

23

Composição

Os cabeçalhos e topo simplificado são compostos de vários elementos independentes, aplicados conforme as especificações deste manual. Para apoiar o trabalho do designer e do programador que vão aplicálos, apresentamos aqui os seus itens.

Comunicação Visual para Web

|

Governo do Estado de São Paulo

24

saopaulo.sp.gov.br

Cidadão SP

Comunicação

Itens

Comuns

saopaulo.sp.gov.br

Cidadão SP

Legenda: Botões de Acessibilidade

Aumentar Fonte

Diminuir Fonte

Contraste

Comunicar erro

Redes Socias Facebook

Links

Assinatura Governo do Estado

Twitter

saopaulo.sp.gov.br

Instagram

Flickr

You Tube

Issu

LikedIn

Cidadão SP

saopaulo.sp.gov.br

Comunicação Visual para Web

|

Governo do Estado de São Paulo

25

Itens

Cabeçalho das Secretarias

saopaulo.sp.gov.br

Cidadão SP

Comunicação

Legenda: Assinaturas de Secretarias

Comunicação Comunicação

Logotipo Governo de SP

Comunicação Visual para Web

|

Governo do Estado de São Paulo

26

Itens

Topo básico saopaulo.sp.gov.br

Cidadão SP

Legenda: Botão Cidadão SP

Cidadão SP

Comunicação Visual para Web

|

Governo do Estado de São Paulo

27

Rodapé

No rodapé, em padrão único, foram incluídos links obrigatórios para os canais de contato do cidadão com o Governo, tais como o Portal da Transparência, o Serviço de Informação ao Cidadão (SIC) e o sistema de Ouvidorias.

Ouvidoria

|

Transparência

|

SIC

Ouvidoria

|

Transparência

|

SIC

Ouvidoria

|

Transparência

|

SIC

Ouvidoria

Comunicação Visual para Web

|

|

Governo do Estado de São Paulo

Transparência

|

SIC

28

saopaulo.sp.gov.br

Aplicação Rodapé

Cidadão SP

O exemplo ao lado (01), já possui um rodapé próprio. Neste saopaulo.sp.gov.br

caso, ele é mantido, e o rodapé

Cidadão SP

Cultura e Economia Criativa

do Governo aplicado abaixo.

Já no segundo exemplo (02), o rodapé segue sua aplicação normal.

Ouvidoria

|

Transparência

|

SIC

Ouvidoria

Comunicação Visual para Web

|

Governo do Estado de São Paulo

|

Transparência

|

SIC

29

Medidas e grids Rodapé

Os grids e medidas ajudam o designer e o desenvolvedor na elaboração das versões responsivas dos sítios eletrônicos. A versão desktop tem 12 colunas; para tablets

Desktop - (>=1200 px) - 12 colunas

são oito colunas e para

15px

full width

30px

celulares quatro colunas.

90px

Ouvidoria

Tablets - (>=768 px) - 8 colunas 15px

|

SIC

full width

Ouvidoria

|

Transparência

Celular - (<576 px) - 4 colunas

70px

Transparência

30px

90px

15px

|

|

SIC

full width

30px

Ouvidoria

|

Transparência

|

SIC

Comunicação Visual para Web

|

Governo do Estado de São Paulo

30

Arquivos para download e códigos HTML Rodapé

O site da Secretaria Especial de Comunicação disponibiliza, na mesma página em que você encontrou este manual, os arquivos de imagem abertos e/ou códigos HTML para aplicação dos elementos conforme cada caso.

Comunicação Visual para Web

|

Governo do Estado de São Paulo

31

Composição

O rodapé é composto de vários elementos independentes, aplicados conforme as especificações deste manual. Para apoiar o trabalho do designer e do programador que vão aplicálos, apresentamos aqui os seus itens.

Comunicação Visual para Web

|

Governo do Estado de São Paulo

32

Itens

Rodapé

Ouvidoria

Links

Ouvidoria

|

Transparência

|

|

Transparência

|

SIC

SIC

Logotipo Governo de SP

Comunicação Visual para Web

|

Governo do Estado de São Paulo

33

Favicon

Um favicon é um item que aparece nas guias do navegador, dispositivos iOS, Android, Windows 10 e todos os demais. Cada um possui suas próprias dimensões de tamanho e formato de arquivo.

Ele também é exibido em dispositivos mobile, para identificar o site no menu de favoritos ou em atalho da tela inicial.

O Governo do Estado de São Paulo terá um favicon único para todas as suas propriedades digitais.

Comunicação Visual para Web

|

Governo do Estado de São Paulo

34

Aplicação Favicon

Comunicação Visual para Web

|

Governo do Estado de São Paulo

35

Topo e rodapé para newsletter e informativos

Assim como em sites e landing pages, a identidade visual do Governo aparece no cabeçalho e no rodapé de newsletters e informativos eletrônicos, conforme o exemplo ao lado.

saopaulo.sp.gov.br

Direitos da Pessoa com Deficiência

Ouvidoria

Comunicação Visual para Web

|

|

Governo do Estado de São Paulo

Transparência

|

SIC

36

Aplicação

Topo e rodapé para newsletter e informativos

saopaulo.sp.gov.br

Direitos da Pessoa com Deficiência

Topo com nome do órgão

Conteúdo

Rodapé

Ouvidoria

|

Transparência

|

SIC

Comunicação Visual para Web

|

Governo do Estado de São Paulo

37

Redes Sociais Comunicação Visual para Web

|

Governo do Estado de São Paulo

38

Avatares

Facebook Twitter

Os avatares são os ícones que identificam os perfis e páginas oficiais do Governo nas principais redes sociais. Tendo como base o detalhe da bandeira de São Paulo ao centro com a sigla SP e logo abaixo seguido do nome da secretaria escrito na fonte Lato Black.

YouTube Instagram LinkedIn

GOVERNO

HABITAÇÃO

SEGURANÇA PÚBLICA

Comunicação Visual para Web

EDUCAÇÃO

|

Governo do Estado de São Paulo

SAÚDE

39

Assinatura Facebook Twitter

A assinatura deve respeitar as proporções de respiro conforme indicadas nas imagens abaixo. A assinatura das redes sociais do Governo SP deve sempre vir acompanhada dos ícones das redes sociais seguido de /governosp.

YouTube Instagram LinkedIn Tiktok Soundcloud

/governosp

/governosp

Comunicação Visual para Web

|

Governo do Estado de São Paulo

40

Assinatura Secretarias

ssp

ssp

Comunicação Visual para Web

|

Governo do Estado de São Paulo

41

Mood Fotográfico

Evitar imagens em mosaico ou caleidoscópio. Evitar imagens épicas, focando pessoas de baixo para cima. Evitar imagens posadas ou artificiais. Valorizar imagens em posição “olho no olho”, que convidem ao diálogo. Valorizar personagens em dupla, para reforçar a idéia de parceria e diálogo.

Usar cores da paleta. Usar imagens de pessoas interagindo.

Comunicação Visual para Web

|

Governo do Estado de São Paulo

42

Mood Ilustrativo

Para o mood ilustrativo da comunicação digital do Governo do Estado de São Paulo foi escolhida a linguagem flat, priorizando sempre imagens que sigam a paleta de cores proposta anteriormente.

Atenção: o uso de ilustrações deve ser feito de forma cautelosa, de preferência em datas comemorativas e/ou quando o público-alvo permitir.

Comunicação Visual para Web

|

Governo do Estado de São Paulo

43

Iconografia

Os ícones escolhidos seguem uma linha flat moderna e simples. Ela deve ter força suficiente para comunicar uma ideia em qualquer peça. Usar, preferencialmente, as listadas abaixo.

Comunicação Visual para Web

|

Governo do Estado de São Paulo

44

Exemplos

Comunicação Visual para Web

|

Governo do Estado de São Paulo

45

Exemplos

Comunicação Visual para Web

|

Governo do Estado de São Paulo

46

Vinhetas para edição de vídeo

Comunicação Visual para Web

|

Governo do Estado de São Paulo

47

Vinhetas para edição de vídeo

A vinheta é uma versão animada dos logotipos do Governo. Podem ser utilizadas em produtos audiovisuais, tais como vídeos, animações, banners animados, infográficos animados, apresentações em movimento, dentre outros.

Comunicação Visual para Web

|

Governo do Estado de São Paulo

48

Logotipo Horizontal

Vinhetas para edição de vídeo

A vinheta sobre o logotipo horizontal deve ser considerada a de uso principal

Comunicação Visual para Web

|

Governo do Estado de São Paulo

49

Logotipo Vertical

Vinhetas para edição de vídeo

A vinheta sobre versão vertical do logotipo pode ser utilizada, alternativamente, em produtos que tenham formato vertical ou quadrado, propiciando melhor composição do produto final.

Comunicação Visual para Web

|

Governo do Estado de São Paulo

50

Comunicação Visual para Web

|

Governo do Estado de São Paulo

51