Manual | Identidade Visual Digital 02/2021 by Governo do Estado de São Paulo

MANUAL | IDENTIDADE VISUAL DIGITAL

Atualizado em fevereiro de 2021

Comunicação Visual para Web

Governo do Estado de São Paulo

Introdução Comunicação Visual para Web

Governo do Estado de São Paulo

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

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

Redes Sociais

Vinhetas para edição de vídeo

Comunicação Visual para Web

Governo do Estado de São Paulo

Tipografia Comunicação Visual para Web

Governo do Estado de São Paulo

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

Cores Comunicação Visual para Web

Governo do Estado de São Paulo

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

Cabeçalho, Topo e Rodapé

Comunicação Visual para Web

Governo do Estado de São Paulo

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) 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

Cidadão SP

Comunicação saopaulo.sp.gov.br

Cidadão SP

saopaulo.sp.gov.br

Cidadão SP

Comunicação saopaulo.sp.gov.br

Cidadão SP

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

Cidadão SP

Comunicação saopaulo.sp.gov.br

Comunicação Visual para Web Cidadão SP

saopaulo.sp.gov.br

Cidadão SP

Governo do Estado de São Paulo

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

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

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

30px

Comunicação

80px

Comunicação Visual para Web

saopaulo.sp.gov.br Cidadão SP

Governo do Estado de São Paulo

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

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

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

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

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

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

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

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

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

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

Comunicação Visual para Web

Governo do Estado de São Paulo

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

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

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

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

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

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

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

Arquivos para download e códigos HTML Rodapé

Comunicação Visual para Web

Governo do Estado de São Paulo

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

Itens

Rodapé

Ouvidoria

Links

Ouvidoria

Transparência

SIC

Logotipo Governo de SP

Comunicação Visual para Web

Governo do Estado de São Paulo

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

Aplicação Favicon

Comunicação Visual para Web

Governo do Estado de São Paulo

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

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

Redes Sociais Comunicação Visual para Web

Governo do Estado de São Paulo

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

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

Comunicação Visual para Web

Governo do Estado de São Paulo

Assinatura Secretarias

ssp

Comunicação Visual para Web

Governo do Estado de São Paulo

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

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

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

Exemplos

Comunicação Visual para Web

Governo do Estado de São Paulo

Exemplos

Comunicação Visual para Web

Governo do Estado de São Paulo

Vinhetas para edição de vídeo

Comunicação Visual para Web

Governo do Estado de São Paulo

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

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

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

Comunicação Visual para Web

Governo do Estado de São Paulo

Manual | Identidade Visual Digital 02/2021

Articles inside

Cores

Redes Sociais