Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O...

47
Comunicação Visual Digital

Transcript of Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O...

Page 1: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 1

Comunicação Visual Digital

Page 2: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 2

INTRODUÇÃO

Page 3: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 3

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çãoGoverno do Estado de São Paulo

Page 4: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 4

Tipografi a 5

Cores 7

Cabeçalho, Topo e Rodapé 9

Redes Sociais 41

Vinhetas para edição de vídeo 43

ÍNDICE

Page 5: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 5

Tipografi a

Page 6: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 6

Verdana Regular

Verdana Bold

Verdana Itálico

Verdana Bold Itálico

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789?!&$%@

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789?!&$%@

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789?!&$%@

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789?!&$%@

Tipografia Manteremos a Verdana como

fonte tipográfica oficial da

comunicação digital do Governo.

Gratuita e presente na maioria

dos sistemas operacionais, ela

deve ser utilizada sempre que

possível em todos os elementos

da comunicação digital.

Page 7: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 7

Cores

Page 8: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 8

Cores O azul é a cor principal da

comunicação digital do Governo

de São Paulo, havendo como

opção o preto e o cinza 88%.

Aqui, referenciamos o código

hexadecimal como padrão

de cor da web e mais dois

formatos de composição de

cores digitais, RGB e HSL.

R G B

3 78 162

HEX

HSL212, 96%, 32%

#034ea2A

zul

R G B

35 31 32

HEX

HSL345, 6%, 13%

#231f20

Pre

to

R G B

70 69 71

HEX

HSL270, 1%, 27%

#464547

88

%

Page 9: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 9

Cabeçalho, Topo e

Rodapé

Page 10: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 10

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 completo do

Portal do Governo.

02) O cabeçalho das Secretarias.

03) O topo simplificado, apenas

com os elementos essenciais.

Nas próximas páginas será

detalhado o uso desses três itens

e as recomendações de aplicação.

saopaulo.sp.gov.br

Cidadão SPsaopaulo.sp.gov.br

BUSCARSP NOTÍCIAS

SP NOTÍCIAS

CONHEÇA SP AÇÕES DO GOVERNO ÓRGÃOS E ENTIDADES FALE CONOSCO

ÚLTIMAS NOTÍCIAS + MULTIMÍDIA ESPECIAIS SALA DE IMPRENSA BLOG DA SECOM CAMPANHAS EXPEDIENTE

Comunicação

Cidadão SPsaopaulo.sp.gov.br

Comunicação

Cidadão SPsaopaulo.sp.gov.br

Comunicação

Cidadão SPsaopaulo.sp.gov.br

Comunicação

Cidadão SPsaopaulo.sp.gov.br

Comunicação

Cidadão SPsaopaulo.sp.gov.br

Comunicação

Cidadão SPsaopaulo.sp.gov.br

Comunicação

Cidadão SPsaopaulo.sp.gov.br

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

saopaulo.sp.gov.br Cidadão SP

saopaulo.sp.gov.br Cidadão SP

01

02

03

Page 11: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 11

Cabeçalho completo

do Portal do Governo

O cabeçalho do Portal do

Governo tem menu, submenu e

campo de busca integrados, além

de links e botões obrigatórios

em sua parte superior: Portal

Cidadão.SP, redes sociais e

botões de acessibilidade.

saopaulo.sp.gov.br

Cidadão SPsaopaulo.sp.gov.br

BUSCARSP NOTÍCIAS

SP NOTÍCIAS

CONHEÇA SP AÇÕES DO GOVERNO ÓRGÃOS E ENTIDADES FALE CONOSCO

ÚLTIMAS NOTÍCIAS + MULTIMÍDIA ESPECIAIS SALA DE IMPRENSA BLOG DA SECOM CAMPANHAS EXPEDIENTE

Page 12: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 12

AplicaçãoCabeçalho completo do

Portal do Governo

Os exemplos ilustram a

página inicial e uma página

interna do Portal do Governo

do Estado de São Paulo com o

cabeçalho aplicado.

Page 13: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 13

Cabeçalho das Secretarias

Mais simplificado do que o do

Portal do Governo, o cabeçalho

das Secretarias foi pensado

para interferir o mínimo

possível na construção da

maior parte dos sites atuais,

possibilitando a manutenção de

menus e submenus existentes.

Seu elemento mais marcante é

a nomenclatura da Secretaria

no canto esquerdo, sobre

detalhe em azul, preto ou cinza

88%, além de logotipo do

Governo à direita.

Links para o Portal do Governo,

Cidadão.SP, redes sociais

do Governo e botões de

acessibilidade estão mantidos

em sua parte superior.

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

Cidadão SPsaopaulo.sp.gov.br

Comunicação

Cidadão SPsaopaulo.sp.gov.br

Comunicação

Cidadão SPsaopaulo.sp.gov.br

Comunicação

Cidadão SPsaopaulo.sp.gov.br

Comunicação

Cidadão SPsaopaulo.sp.gov.br

Page 14: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 14

AplicaçãoCabeçalho das Secretarias

O exemplo ao lado ilustra a

página inicial de uma secretaria.

Page 15: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 15

Medidas e gridsCabeç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.

A versão desktop tem 12 colunas;

para tablets são oito colunas e

para celulares quatro colunas.

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

95px

15px 30px

95px

80px

80px

Celular - (<576px - 768px) - 4 colunas full width

15px 30px

Comunicação ComunicaçãoComunicaçãoComunicação ComunicaçãoComunicação

Tablets - (769px - 991px) - 8 colunas full width

15px 30px

Comunicação

Cidadão SPsaopaulo.sp.gov.br

Comunicação

saopaulo.sp.gov.br

Comunicação

saopaulo.sp.gov.br

Comunicação

Cidadão SPsaopaulo.sp.gov.br Cidadão SPCidadão SP

Comunicação

Cidadão SPsaopaulo.sp.gov.br

Comunicação

saopaulo.sp.gov.br

Comunicação

saopaulo.sp.gov.br

Comunicação

Cidadão SPsaopaulo.sp.gov.br Cidadão SPCidadão SP

max width - 1200px

Cidadão SP

saopaulo.sp.gov.br

Page 16: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 16

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

anexos deste manual.

Cidadão SPsaopaulo.sp.gov.br

AdministraçãoPenitenciária

Cidadão SPsaopaulo.sp.gov.br

Agricultura eAbastecimento

Cidadão SPsaopaulo.sp.gov.br

Casa Civil

Cidadão SPsaopaulo.sp.gov.br

Casa Militar eDefesa Civil

Page 17: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 17

Assinaturas Cabeçalho das Secretarias

Cidadão SPsaopaulo.sp.gov.br

Comunicação

Cidadão SPsaopaulo.sp.gov.br

Cultura eEconomia Criativa

Cidadão SPsaopaulo.sp.gov.br

DesenvolvimentoEconômico

Cidadão SPsaopaulo.sp.gov.br

DesenvolvimentoRegional

Cidadão SPsaopaulo.sp.gov.br

DesenvolvimentoSocial

Page 18: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 18

Assinaturas Cabeçalho das Secretarias

Cidadão SPsaopaulo.sp.gov.br

Direitos da Pessoacom Deficiência

Cidadão SPsaopaulo.sp.gov.br

Educação

Cidadão SPsaopaulo.sp.gov.br

Esportes

Cidadão SPsaopaulo.sp.gov.br

Fazenda ePlanejamento

Cidadão SPsaopaulo.sp.gov.br

Governo

Page 19: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 19

Assinaturas Cabeçalho das Secretarias

Cidadão SPsaopaulo.sp.gov.br

Habitação

Cidadão SPsaopaulo.sp.gov.br

Infraestrutura eMeio Ambiente

Cidadão SPsaopaulo.sp.gov.br

Justiça

Cidadão SPsaopaulo.sp.gov.br

Logística eTransportes

Cidadão SPsaopaulo.sp.gov.br

ProcuradoriaGeral do Estado

Page 20: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 20

Assinaturas Cabeçalho das Secretarias

Cidadão SPsaopaulo.sp.gov.br

RelaçõesInternacionais

Cidadão SPsaopaulo.sp.gov.br

Saúde

Cidadão SPsaopaulo.sp.gov.br

Segurança Pública

Cidadão SPsaopaulo.sp.gov.br

TransporteMetropolitanos

Cidadão SPsaopaulo.sp.gov.br

Turismo

Page 21: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 21

Arquivos para download e

códigos HTMLCabeç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.

Page 22: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 22

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

Page 23: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 23

AplicaçãoTopo básico

O exemplo ao lado ilustra a

página inicial de uma secretaria.

Page 24: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 24

Medidas e gridsTopo 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

para celulares quatro colunas.Desktop - (>=992px) - 12 colunas full width

Tablets - (769px - 991px) - 8 colunas full width

Celular - (<576px - 768px) - 4 colunas full width

60px

60px

60px

60px

saopaulo.sp.gov.br Cidadão SP

saopaulo.sp.gov.br Cidadão SP

15px 30px

15px 30px

15px 30px

saopaulo.sp.gov.br saopaulo.sp.gov.br

Cidadão SP

saopaulo.sp.gov.brsaopaulo.sp.gov.brsaopaulo.sp.gov.brsaopaulo.sp.gov.br Cidadão SP

saopaulo.sp.gov.brsaopaulo.sp.gov.brsaopaulo.sp.gov.brsaopaulo.sp.gov.brsaopaulo.sp.gov.br Cidadão SP

saopaulo.sp.gov.brsaopaulo.sp.gov.brsaopaulo.sp.gov.brsaopaulo.sp.gov.br saopaulo.sp.gov.br

Cidadão SP

saopaulo.sp.gov.brsaopaulo.sp.gov.brsaopaulo.sp.gov.br

Page 25: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 25

Arquivos para download e

códigos HTMLTopo 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.

Page 26: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 26

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.

Page 27: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 27

ItensComuns

Comunicação

Cidadão SPsaopaulo.sp.gov.br

saopaulo.sp.gov.br BUSCARSP NOTÍCIAS

SP NOTÍCIAS

CONHEÇA SP AÇÕES DO GOVERNO ÓRGÃOS E ENTIDADES FALE CONOSCO

ÚLTIMAS NOTÍCIAS + MULTIMÍDIA ESPECIAIS SALA DE IMPRENSA BLOG DA SECOM CAMPANHAS EXPEDIENTE

Cidadão SPsaopaulo.sp.gov.br

saopaulo.sp.gov.br

saopaulo.sp.gov.br Cidadão SPsaopaulo.sp.gov.br

Botões deAcessibilidade Aumentar

FonteDiminuir

Fonte ContrasteComunicar

erro

Facebook Twitter Instagram Flickr You Tube Issu LikedIn

Cidadão SPsaopaulo.sp.gov.br

Redes Socias

Links

AssinaturaGoverno

do Estadosaopaulo.sp.gov.br

Legenda:

Page 28: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 28

Itens Cabeçalho completo

do Portal do Governo saopaulo.sp.gov.br BUSCARSP NOTÍCIAS

SP NOTÍCIAS

CONHEÇA SP AÇÕES DO GOVERNO ÓRGÃOS E ENTIDADES FALE CONOSCO

ÚLTIMAS NOTÍCIAS + MULTIMÍDIA ESPECIAIS SALA DE IMPRENSA BLOG DA SECOM CAMPANHAS EXPEDIENTE

Cidadão SPsaopaulo.sp.gov.br

SP NOTÍCIAS CONHEÇA SP AÇÕES DO GOVERNO ÓRGÃOS E ENTIDADES FALE CONOSCO

SP NOTÍCIAS ÚLTIMAS NOTÍCIAS + MULTIMÍDIA ESPECIAIS SALA DE IMPRENSA BLOG DA SECOM CAMPANHAS EXPEDIENTE

BUSCAR

MenuPrimário

MenuSecundário

Botãode busca

BUSCAR

SP NOTÍCIAS

SP NOTÍCIAS CONHEÇA SP AÇÕES DO GOVERNO ÓRGÃOS E ENTIDADES FALE CONOSCO

ÚLTIMAS NOTÍCIAS + MULTIMÍDIA ESPECIAIS SALA DE IMPRENSA BLOG DA SECOM CAMPANHAS EXPEDIENTE

Legenda:

Page 29: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 29

ItensCabeçalho das

Secretarias Comunicação

Cidadão SPsaopaulo.sp.gov.br

Comunicação

Assinaturasde Secretarias

LogotipoGoverno de SP

ComunicaçãoComunicaçãoComunicação

Legenda:

Page 30: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 30

Itens Topo básico

saopaulo.sp.gov.br Cidadão SP

BotãoCidadão SP Cidadão SP

Legenda:

Page 31: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 31

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 | Transparência | SIC

Page 32: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 32

AplicaçãoRodapé

O exemplo ao lado (01), já

possui um rodapé próprio. Neste

caso, ele é mantido, e o rodapé

do Governo aplicado abaixo.

Já no segundo exemplo

(02), o rodapé segue sua

aplicação normal.

Page 33: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 33

Medidas e gridsRodapé

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 para

celulares quatro colunas.

50px

Desktop - (>=1200 px) - 12 colunas full width

60px

15px 30px

60px

Tablets - (>=768 px) - 8 colunas full width

15px 30px

Celular - (<576 px) - 4 colunas full width

15px 30px

Ouvidoria | Transparência | SIC

Ouvidoria | Transparência | SIC

Ouvidoria | Transparência | SIC

Page 34: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 34

Arquivos para download e

códigos HTMLRodapé

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.

Page 35: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 35

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.

Page 36: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 36

Itens Rodapé

Ouvidoria | Transparência | SICLinks

LogotipoGoverno de SP

Ouvidoria | Transparência | SIC

Page 37: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 37

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.

Page 38: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 38

AplicaçãoFavicon

Page 39: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 39

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

Page 40: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 40

AplicaçãoTopo e rodapé para

newsletter e informativos saopaulo.sp.gov.br Direitos da Pessoa com Deficiência Topo comnome do órgão

Rodapé

Conteúdo

Page 41: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 41

Redes Sociais

Page 42: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 42

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, é

aplicado sobre fundo da cor

escolhida – azul, preto ou

cinza 88%.

AvataresFacebook

Twitter

YouTube

Instagram

LinkedIn

Page 43: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 43

Vinhetas para edição de

vídeo

Page 44: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 44

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.

Page 45: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 45

Logotipo Horizontal

Vinhetas para ediçãode vídeo

A vinheta sobre o logotipo

horizontal deve ser considerada

a de uso principal

Page 46: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 46

Logotipo Vertical

Vinhetas para ediçãode 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.

Page 47: Comunicaão Visual Digital · Comunicaão Visual para Web Governo do Estado de São Paulo 8 Cores O azul é a cor principal da comunicação digital do Governo de São Paulo, havendo

Comunicação Visual para Web | Governo do Estado de São Paulo 47