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

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

Comunicação Visual Digital


INTRODUÇÃO


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


Tipografi a 5

Cores 7

Cabeçalho, Topo e Rodapé 9

Redes Sociais 41

Vinhetas para edição de vídeo 43

ÍNDICE


Tipografi a


Verdana Regular

Verdana Bold

Verdana Itálico

Verdana Bold Itálico

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.


Cores


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

%


Cabeçalho, Topo e

Rodapé


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


Comunicação


Comunicação


Comunicação


Comunicação


Comunicação


Comunicação


saopaulo.sp.gov.br Cidadão SP







01

02

03


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


BUSCARSP NOTÍCIAS

SP NOTÍCIAS




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.


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


Comunicação


Comunicação


Comunicação


Comunicação



AplicaçãoCabeçalho das Secretarias

O exemplo ao lado ilustra a

página inicial de uma secretaria.


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


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


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


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.


AdministraçãoPenitenciária


Agricultura eAbastecimento


Casa Civil


Casa Militar eDefesa Civil




Comunicação


Cultura eEconomia Criativa


DesenvolvimentoEconômico


DesenvolvimentoRegional


DesenvolvimentoSocial




Direitos da Pessoacom Deficiência


Educação


Esportes


Fazenda ePlanejamento


Governo




Habitação


Infraestrutura eMeio Ambiente


Justiça


Logística eTransportes


ProcuradoriaGeral do Estado




RelaçõesInternacionais


Saúde


Segurança Pública


TransporteMetropolitanos


Turismo


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.


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






AplicaçãoTopo básico

O exemplo ao lado ilustra a

página inicial de uma secretaria.


Medidas e gridsTopo básico




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



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



códigos HTMLTopo básico








conforme cada caso.


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.


ItensComuns

Comunicação


saopaulo.sp.gov.br BUSCARSP NOTÍCIAS

SP NOTÍCIAS




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


Redes Socias

Links

AssinaturaGoverno

do Estadosaopaulo.sp.gov.br

Legenda:


Itens Cabeçalho completo

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

SP NOTÍCIAS




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


Legenda:


ItensCabeçalho das

Secretarias Comunicação


Comunicação

Assinaturasde Secretarias

LogotipoGoverno de SP

ComunicaçãoComunicaçãoComunicação

Legenda:


Itens Topo básico


BotãoCidadão SP Cidadão SP

Legenda:


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




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.


Medidas e gridsRodapé




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






códigos HTMLRodapé








conforme cada caso.


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.


Itens Rodapé

Ouvidoria | Transparência | SICLinks

LogotipoGoverno de SP



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.


AplicaçãoFavicon


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


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


Redes Sociais


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


Vinhetas para edição de

vídeo


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.


Logotipo Horizontal

Vinhetas para ediçãode vídeo

A vinheta sobre o logotipo

horizontal deve ser considerada

a de uso principal


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.

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

Documents

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