Post on 23-Jun-2020
Comunicação Visual para Web | Governo do Estado de São Paulo 1
Comunicação Visual Digital
Comunicação Visual para Web | Governo do Estado de São Paulo 2
INTRODUÇÃO
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
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
Comunicação Visual para Web | Governo do Estado de São Paulo 5
Tipografi a
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.
Comunicação Visual para Web | Governo do Estado de São Paulo 7
Cores
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
%
Comunicação Visual para Web | Governo do Estado de São Paulo 9
Cabeçalho, Topo e
Rodapé
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
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
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.
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
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.
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
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
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
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
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
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
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.
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
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.
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
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.
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.
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:
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:
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:
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:
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
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.
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
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.
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.
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
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.
Comunicação Visual para Web | Governo do Estado de São Paulo 38
AplicaçãoFavicon
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
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
Comunicação Visual para Web | Governo do Estado de São Paulo 41
Redes Sociais
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
YouTube
Comunicação Visual para Web | Governo do Estado de São Paulo 43
Vinhetas para edição de
vídeo
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.
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
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.
Comunicação Visual para Web | Governo do Estado de São Paulo 47