Manual de Identidade Visual do Governo do Estado de São Paulo
Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web •...
54
Manual de Identidade Visual Web do Governo do Estado de São Paulo Versão atualizada em Junho 2016
Transcript of Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web •...
Manual de Identidade Visual Webdo Governo do Estado de São Paulo
Versão atualizada em Junho 2016
Introdução
3Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução
Introdução
Após o desenvolvimento da Identidade Visual do
Governo do Estado de São Paulo para materiais
impressos, chegou o momento de apresentarmos
a nova Identidade Visual do Governo do Estado de
São Paulo para ambientes virtuais.
Como você pode observar, a proposta apresentada
sugere que a comunicação on-line esteja em total
sintonia com a comunicação off-line.
A ideia é que trabalhemos juntos: a sua
Secretaria e a Subsecretaria de Comunicação.
Este manual é, portanto, um facilitador das suas
tarefas. Ele surgiu para organizar as informações
e tirar suas dúvidas.
Mas sempre que necessário, entre em contato:
Índice
5
Índice
Variantes de cor 07
Elenco de cores ........................................................................................ 08
Tipologia 09
Verdana .................................................................................................. 10
Módulo I • Sites 11
Elementos ............................................................................................... 12Topo do Governo do Estado de São Paulo ..................................................... 13Rodapé do Governo do Estado de São Paulo ................................................. 14Aplicação do topo e rodapé do Governo do Estado de São Paulo ...................... 15Topo completo das secretarias e órgãos ....................................................... 16Topo básico das secretarias e órgãos ........................................................... 18Rodapé das secretarias e órgãos ................................................................. 19Especificações .......................................................................................... 20Aplicação ................................................................................................. 22
Módulo II • Informativos 26
Estrutura ................................................................................................. 27Governo do Estado de São Paulo ................................................................ 28Secretarias .............................................................................................. 29Órgãos .................................................................................................... 30Variações ................................................................................................ 31Especificações .......................................................................................... 32Aplicação ................................................................................................. 34Topo secretarias ....................................................................................... 38
Manual de Identidade Visual Web • Governo do Estado de São Paulo • Índice
6
Índice
Módulo III • Redes Sociais 42
Facebook ............................................................................................. 43Facebook do Governo do Estado de São Paulo ..............................................44Facebook das secretarias e órgãos ..............................................................45Twitter ................................................................................................. 46Twitter do Governo do Estado de São Paulo ..................................................47Twitter das secretarias e órgãos .................................................................48Youtube ................................................................................................ 49Youtube do Governo do Estado de São Paulo ................................................50Youtube das secretarias e órgãos ................................................................51
Módulo IV • Glossário 52
Manual de Identidade Visual Web • Governo do Estado de São Paulo • Índice
Variantes de cor
8Manual de Identidade Visual Web • Governo do Estado de São Paulo • Variantes de Cor
R G B
255 0 0
HEXADECIMAL
#FF0000
R G B
255 204 0
HEXADECIMAL
#FFCC00
R G B
0 0 0
HEXADECIMAL
#000000
R G B
204 204 204
HEXADECIMAL
#CCCCCC
HEXADECIMAL
#003399
R G B
0 51 153
Vermelho:A atitude. O impulso para realizar.
Amarelo:A energia. Luminosidade e atmosfera quente. Envolve, agrega, une pelo emocional.
Preto:A base.O sustentáculo,o alicerce queoferece força e estrutura.
Cinza:A imparciali-dade.A seriedade, a neutralidade, o profissiona-lismo.
Azul:O ponto deequilíbrio, a calma, pre-sença mais suave.
Elenco de cores
A identidade visual do Governo do Estado
de São Paulo no meio on-line segue alguns
padrões. Um deles é o elenco de cores em que
os elementos gráficos podem se apresentar.
Seguindo o Manual de Identidade Visual off-
line, foram definidas cinco cores para serem
usadas na web.
Tipologia
10Manual de Identidade Visual Web • Governo do Estado de São Paulo • Tipologia
Verdana
Para mantermos a unidade visual nos
nossos materiais, precisamos definir uma
fonte tipográfica que seja adotada por todos.
Elegemos a fonte Verdana como o tipo oficial
para as comunicações do Governo do Estado
de São Paulo e suas Secretarias.
A fonte Verdana oferece:
• Design limpo
• Fácil leitura
• Linhas elegantes e modernas
• Fácil composição em blocos de texto
• Leitura arejada
• É facilmente encontrada pela maioria dos
sistemas operacionais dos computadores
Sempre que possível, procure usar a fonte
Verdana na sua comunicação on-line:
portais, sites, hotsites, redes sociais, etc.
Módulo I • Sites
12Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo I • Sites
Elementos
Os portais, sites e hotsites de todas as
secretarias e órgãos da administração direta
e indireta do Governo do Estado de São Paulo
devem utilizar dois elementos fundamentais:
topo e rodapé.
Nas próximas páginas você verá como se dá
o uso desses elementos no Portal do Governo
do Estado de São Paulo. E, em seguida, as
opções de topo e rodapé para os demais sites da
administração estadual.
13Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo I • Sites
Topo do Governo do Estado de São Paulo
O topo do Portal do Governo do Estado de
São Paulo é uma área fixa que contém os
seguintes elementos: corte da bandeira,
nome do Governo do Estado de São Paulo,
barra de busca e logo do Governo do Estado
de São Paulo à direita.
Acima da área fixa, encontram-se os botões
de acessibilidade, impressão, comunicação
de erros e opções de idioma. Abaixo,
encontra-se o menu de navegação do site e
ícones das redes sociais.
14Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo I • Sites
Rodapé do Governodo Estado de São Paulo
O rodapé do Portal do Governo do Estado
de São Paulo segue a mesma cor do topo,
possui corte da bandeira à esquerda e logo
do Governo do Estado de São Paulo à direita.
15Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo I • Sites
Aplicação
O exemplo ao lado ilustra a página inicial e
uma página interna do Portal do Governo do
Estado de São Paulo.
16Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo I • Sites
Topo completo das secretarias e órgãos
Os portais, sites e hotsites das diversas
secretarias e órgãos do Governo do Estado
de São Paulo também devem basear sua
identidade em dois elementos: o topo e
rodapé.
Estes elementos devem seguir as cores
definidas no capítulo “Variantes de cor”,
sessão “Elenco de Cores”.
Portal do Governo
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria da EducaçãoGoverno do Estado de São Paulo
BuscarLinks do Governo A+ A- C
BuscarLinks do Governo A+ A- C
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria da SaúdeGoverno do Estado de São Paulo
Portal do Governo
BuscarLinks do Governo A+ A- C
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria de Desenvolvimento MetropolitanoGoverno do Estado de São Paulo
Portal do Governo
Portal do Governo
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria de Esporte, Lazer e JuventudeGoverno do Estado de São Paulo
BuscarLinks do Governo A+ A- C
BuscarLinks do Governo A+ A- C
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria da HabitaçãoGoverno do Estado de São Paulo
Portal do Governo
17Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo I • Sites
Portal do Governo
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria da EducaçãoGoverno do Estado de São Paulo
BuscarLinks do Governo A+ A- C
BuscarLinks do Governo A+ A- C
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria da SaúdeGoverno do Estado de São Paulo
Portal do Governo
BuscarLinks do Governo A+ A- C
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria de Desenvolvimento MetropolitanoGoverno do Estado de São Paulo
Portal do Governo
Portal do Governo
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria de Esporte, Lazer e JuventudeGoverno do Estado de São Paulo
BuscarLinks do Governo A+ A- C
BuscarLinks do Governo A+ A- C
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria da HabitaçãoGoverno do Estado de São Paulo
Portal do Governo
Topo completo das secretarias e órgãos
Variações de cores.
No site http://www.comunicacao.sp.gov.br/
manual-de-identidade-visual-web você
poderá baixar todas as variações de cores
do topo completo.
18Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo I • Sites
Portal do Governo | Cidadão SP | Transparência SP | Internacional SP Links do Governo
Links do GovernoPortal do Governo | Cidadão SP | Transparência SP | Internacional SP
Links do GovernoPortal do Governo | Cidadão SP | Transparência SP | Internacional SP
Links do GovernoPortal do Governo | Cidadão SP | Transparência SP | Internacional SP
Links do GovernoPortal do Governo | Cidadão SP | Transparência SP | Internacional SP
Topo Básico Órgãos
Topo básico
Caso o portal, site ou hotsite da secretaria
ou órgão já esteja pronto e não seja possível
alterar o topo (para usar uma versão
completa), sugerimos inserir o topo básico
acima da estrutura existente.
Nota:
Este topo substituirá a antiga “barra”.
No site http://www.comunicacao.sp.gov.br/manual-de-identidade-visual-web
você poderá baixar todas as variações de cores do “topo básico”.
Além disso, disponibilizamos os códigos fontes desses arquivos em:
http://www.saopaulo.sp.gov.br/barrasp/
19Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo I • Sites
Rodapé
Nos dois casos (utilização de topo completo
ou topo básico) o rodapé das páginas deve
seguir a mesma cor utilizada no topo e
acompanhar também a largura total do
site, contendo corte da bandeira e logo do
Governo do Estado de São Paulo.
Este logo funcionará também como link para
o Portal do Governo do Estado de São Paulo.
O rodapé não substitui quaisquer rodapés
que já existam em cada portal, site ou
hotsite. Ele deve ser inserido abaixo de todos
os outros elementos.
Para evitar a repetição de elementos
gráficos, não deverá haver nenhum logo do
Governo do Estado de São Paulo próximo ao
rodapé, já que ele já possui um, linkado para
o Portal do Governo do Estado de São Paulo.
No site http://www.comunicacao.sp.gov.br/manual-de-identidade-visual-web
você poderá baixar todas as variações de cores do “rodapé”.
Além disso, disponibilizamos os códigos fontes desses arquivos em:
http://www.saopaulo.sp.gov.br/barrasp/
Topo Básico Órgãos
20Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo I • Sites
Botão Campo de busca
Menu
Tarja colorida
Botões deacessibilidade
Redes sociais
Portal do Governo
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria da EducaçãoGoverno do Estado de São Paulo
BuscarLinks do Governo A+ A- C
BuscarLinks do Governo A+ A- C
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria da SaúdeGoverno do Estado de São Paulo
Portal do Governo
BuscarLinks do Governo A+ A- C
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria de Desenvolvimento MetropolitanoGoverno do Estado de São Paulo
Portal do Governo
Portal do Governo
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria de Esporte, Lazer e JuventudeGoverno do Estado de São Paulo
BuscarLinks do Governo A+ A- C
BuscarLinks do Governo A+ A- C
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Secretaria da HabitaçãoGoverno do Estado de São Paulo
Portal do Governo
Topo completoEspecificações
Tarja colorida
Largura: 960 px.
Contém o corte da bandeira e o logo da
respectiva secretaria. O texto “Governo do
Estado de São Paulo” não é editável.
Texto secretaria: 18 pt - bold - cor #000000.
Redes sociais
Largura e altura de cada ícone: 25 px.
Menu
Texto: 12 pt - bold - cor #333333.
Campo busca
Campo não editável.
Botão
Largura: 350 px. Altura: 450 px (altura fixa).
Textos: 12 pt - regular - cor #FFFFFF (para
os títulos de secretarias ou órgãos, onde há
uma separação, usar o peso bold).
Botões de acessibilidade
Usar as especificações do W3C (botões de
aumento e diminuição de fonte e contraste).
21Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo I • Sites
Topo Básico Órgãos Over
Portal do Governo | Cidadão SP | Transparência SP | Internacional SP Links do Governo
Secretarias:- Administração Penitenciária- Agricultura e Abastecimento- Casa Civil- Casa Militar- Cultura- Desenvolvimento Econômico, Ciência e Tecnologia- Desenvolvimento Metropolitano- Desenvolvimento Social- Direitos da Pessoa com Deficiência- Educação- Emprego e Relações do Trabalho- Energia- Esporte, Lazer e Juventude- Fazenda- Gestão Público- Habitação- Justiça e Defesa da Cidadania
SP NotíciasPoupatempoAcessa São PauloLicitações
Botão
Portal do Governo | Cidadão SP | Transparência SP | Internacional SP Links do Governo
Links do GovernoPortal do Governo | Cidadão SP | Transparência SP | Internacional SP
Links do GovernoPortal do Governo | Cidadão SP | Transparência SP | Internacional SP
Links do GovernoPortal do Governo | Cidadão SP | Transparência SP | Internacional SP
Links do GovernoPortal do Governo | Cidadão SP | Transparência SP | Internacional SP
Topo Básico Órgãos
Menu
Topo básico e rodapéEspecificações
Topo
Largura: ajustes de acordo com a medida
do site.
Menu
Link do “Portal do Governo”.
Texto: 14 pt - regular - cor #000000.
Botão “Links do Governo” clicado
Largura: 350 px. Altura: 450 px (altura fixa).
Textos: 12 pt - regular - cor #FFFFFF (para
os títulos de secretarias ou órgãos, onde há
uma separação, usar o peso bold).
Rodapé
Largura: ajustes de acordo com a medida
do site.
Atenção: Nenhum item deve ser retirado
das barras do topo. A ordem dos elementos
também deve ser mantida, garantindo a
unidade da comunicação.
22Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo I • Sites
Aplicação
No exemplo ao lado, é possível visualizar a
aplicação do topo completo e rodapé na cor
amarela.
Perceba que o site da Subsecretaria de
Comunicação já possui um rodapé próprio.
Ele é mantido e aplicado acima do rodapé-
padrão do Governo do Estado de São Paulo.
23Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo I • Sites
Aplicação
Ao lado, outro exemplo, ilustrando a
aplicação topo básico e rodapé em cinza.
24
Aplicação Mobile
Alguns sites do Governo do Estado de
São Paulo já estão adaptados para serem
acessados por dispositivos móveis como
celulares, tablets e etc.
Os sites “Versão Mobile” também precisam
estar padronizados visualmente.
Nesse caso, poderá ser aplicado o topo
apresentado a seguir.
25
Aplicação Mobile
Variação de cores.
Módulo II • Informativos
27Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
Estrutura
Todos os informativos, tanto do Governo do
Estado de São Paulo quanto de suas secretarias
e órgãos, contarão com uma estrutura pré-
definida, que pode ser preenchida e utilizada de
acordo com o conteúdo a ser divulgado. Este
modelo já é utilizado pelo Governo do Estado de
São Paulo, e deverá ser seguido pelas diversas
secretarias e órgãos que fazem o envio de
informativos.
Os elementos de topo e rodapé serão utilizados
de forma similar ao que já vimos anteriormente,
e há a opção de edição dos textos e imagens
presentes no corpo do informativo.
A seguir, veremos alguns exemplos de suas
aplicações em diferentes casos.
28Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
Governo do Estado de São Paulo
Assim como no Portal, o Governo do Estado
de São Paulo utiliza sempre os elementos na
cor amarela.
Topo
O topo é padrão para os informativos do
Governo do Estado de São Paulo.
Corpo
Cinco opções de estrutura estão disponíveis,
com texto, imagens e links, e podem ser usadas
de acordo com o conteúdo do informativo.
Rodapé
O rodapé deve conter corte da bandeira e
logo do Governo do Estado de São Paulo.
29Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
Secretarias
As diversas secretarias do Governo do
Estado de São Paulo poderão alterar o nome
de seus informativos para os que já estão
acostumadas a utilizar.
O arquivo do informativo está em formato
HTML, e deve ser enviado através de uma
ferramenta específica de envio múltiplo de
e-mails.
Topo
O topo é padrão na identidade visual on-line.
Corpo
Da mesma forma, quatro opções de estrutura
estão disponíveis, com texto, imagens e
links, e podem ser usadas de acordo com o
conteúdo do informativo.
Rodapé
O rodapé deve seguir a cor definida no topo
e conter corte da bandeira e logo do Governo
do Estado de São Paulo.
30Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
ÓrgãosOs diversos órgãos do Governo do Estado
de São Paulo poderão alterar o nome de
seus informativos para os que já estão
acostumados a utilizar. O arquivo do
informativo está em formato HTML, e deve
ser enviado através de uma ferramenta
específica de envio múltiplo de e-mails.
Topo
O topo é padrão na identidade visual on-line.
Tarja órgão
Esta tarja é para orgãos que já possuem um
nome para o informativo. Este espaço pode
ser usado para inserir a arte ou logotipo do
órgão.
Corpo
Da mesma forma, quatro opções de estrutura
estão disponíveis, com texto, imagens e
links, e podem ser usadas de acordo com o
conteúdo do informativo.
Rodapé
O rodapé deve seguir a cor definida no topo
e conter corte da bandeira e logo do Governo
do Estado de São Paulo.
31
Variações
As secretarias e órgãos poderão usar
qualquer uma das cores apresentadas ao
lado. Sempre respeitando a mesma cor de
topo e rodapé.
No site http://www.comunicacao.sp.gov.br/
manual-de-identidade-visual-web
você poderá baixar todas as variações de
cores do “topo para informativos”.
Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
32Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
Especificações
Para os textos, deve-se usar a fonte Verdana
em caixa alta e baixa ou somente em caixa
alta. A variação pode ocorrer no tamanho,
peso (regular, bold ou italic) e cor. Ainda
assim, alguns padrões devem ser seguidos:
Topo
Data: 10 pt - bold - cor #000000.
Título: Nome do informativo: 20 pt - bold
cor #000000.
Nome da secretaria ou órgão: 16 pt - regular
cor #000000.
Tarja órgão
Altura: 100 px.
Notícias destaque
Medidas da imagem: largura de 300 px,
altura de 191 px.
Título: 20 pt - bold - cor #FFCC00 - máximo
de 38 caracteres.
Texto: 11 pt - regular - cor #000000
máximo de 351 caracteres.
Título
Notícias destaque
Texto
Imagem
Título
Tarja órgão
Topo
33Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
Especificações
Notícias destaque 2
Medidas da imagem: largura de 293 px, altura
de 135 px.
Categoria: 11 pt - itálico - cor #666666
máximo de 27 caracteres.
Título: 12 pt - bold - cor #333333 - máximo de
53 caracteres.
Notícias destaque 3
Medidas da imagem: largura de 600 px, altura
de 30 px.
Título: 12 pt - bold - cor #333333 - máximo de
66 caracteres.
Tarja “Mais Notícias”
Título Mais Notícias: 14 pt - bold - cor #FFFFFF.
Feed: 12 pt - bold - cor #FFFFFF (ícone
padronizado).
Em “Mais Notícias”, haverá somente o títulos
das notícias, sem imagens, e cada título será
linkado para seu respectivo conteúdo.
O campo permite incluir de duas a seis
chamadas, de acordo com a necessidade de
cada Informativo.
Texto: 12 pt - bold - cor #666666 - máximo de
62 caracteres.
Notícias destaque 2
Título
Imagem
Categoria
Notícias destaque 3
Imagem
Título
Tarja “Mais Notícias”
Notícias
Feed
34Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
Aplicação com 1 notícia
Ao lado, um exemplo de informativo com
uma notícia principal e outras informações
abaixo.
35Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
Este exemplo ilustra um informativo
específico para divulgar duas notícias
principais.
Aplicaçãocom 2 notícias
36Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
Ao lado, um exemplo com a visualização de
imagens de três notícias principais.
Aplicaçãocom 3 notícias
37Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
Ao lado, uma aplicação do informativo com
quatro notícias principais, acompanhadas de
imagens.
Aplicaçãocom 4 notícias
38
Topo secretarias
Nota:
No site http://www.comunicacao.sp.gov.br/
manual-de-identidade-visual-web
você poderá baixar os arquivos com os topos
aqui apresentados.
Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
39Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
Topo secretarias
Nota:
No site http://www.comunicacao.sp.gov.br/
manual-de-identidade-visual-web
você poderá baixar os arquivos com os topos
aqui apresentados.
40Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
Topo secretarias
Nota:
No site http://www.comunicacao.sp.gov.br/
manual-de-identidade-visual-web
você poderá baixar os arquivos com os topos
aqui apresentados.
41Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo II • Informativos
Topo secretarias
Nota:
No site http://www.comunicacao.sp.gov.br/
manual-de-identidade-visual-web
você poderá baixar os arquivos com os topos
aqui apresentados.
Módulo III • Redes Sociais
43Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo III • Redes Sociais
O Facebook é uma importante rede social e deve
ser usada com sabedoria e planejamento.
Parte desse planejamento envolve também uma
identidade visual forte, coesa e limpa.
A seguir, especificamos a melhor forma para
padronizar o perfil na rede social e garantir uma
comunicação clara.
44Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo III • Redes Sociais
Imagem de capa
Avatar
Facebook do Governo do Estado de São Paulo
Título da Fan Page
No Facebook, o nome do Governo do Estado
de São Paulo deve estar completo e sem
abreviações.
Capa
A imagem da capa pode variar de acordo com
o conteúdo postado na Fan Page. Porém, a
barra, com a cor amarela e logo do Governo
do Estado de São Paulo deve acompanhar a
imagem. Essa tarja, no entanto, não deve
conter o corte da bandeira à esquerda, já que
esta mesma imagem será usada no avatar.
Avatar
O corte da bandeira com a cor amarela
no fundo é o avatar-padrão da página do
Governo do Estado de São Paulo.
45Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo III • Redes Sociais
Imagem de capa
Avatar
Facebook de secretarias e órgãos
Título da Fan Page
Procure usar o nome completo da secretaria ou
órgão, sem abreviações.
Capa
Pode-se utilizar qualquer imagem para a capa
do Facebook. Porém, a tarja com as cores
determinadas e logo do Governo do Estado
de São Paulo, ou da respectiva secretaria,
deve acompanhar a imagem. Essa tarja,
ao contrário da utilizada no perfil oficial do
Governo do Estado de São Paulo, poderá
ser aplicada também nas cores azul, preta,
vermelha ou cinza.
Avatar
O avatar deve seguir a cor do rodapé e topo do
site. Os órgãos poderão utilizar logos próprios,
quando existirem.
46
Assim como o Facebook, o Twitter é uma
importante ferramenta da comunicação e
presença on-line, e deve ser usado com
sabedoria e planejamento pelo Governo do
Estado de São Paulo e suas secretarias e órgãos.
A fim de garantir uma identidade coesa,
apresentamos algumas soluções visuais que
facilitam a utilização da ferramenta.
Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo III • Redes Sociais
47Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo III • Redes Sociais
Avatar
FundoTarjacolorida
Logo
Twitter do Governo do Estado de São Paulo
Nome do Perfil
Procure usar o nome completo dentro de 20
caracteres, caso contrário, use o mínimo de
abreviações possíveis.
Avatar
O corte da bandeira com a cor amarela é
o avatar-padrão da página do Governo do
Estado de São Paulo.
Background
Corte da bandeira em transparência (em
fundo preto), com a tarja amarela (com o
logo do Governo do Estado de São Paulo) ao
lado esquerdo na vertical.
48Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo III • Redes Sociais
Avatar
FundoTarjacolorida
Logo
Twitter dassecretarias ou órgãos
Perfil
Procure usar o nome completo dentro de 20
caracteres, caso contrário, use o mínimo de
abreviações possíveis.
Assim como no Facebook, a URL do site
oficial deve constar na descrição do perfil,
onde estão as informações básicas da
página.
Avatar
As secretarias devem aplicar o corte da
bandeira com o fundo da mesma cor utilizada
no topo e rodapé do site.
Para órgãos do Governo do Estado de São
Paulo: corte da bandeira ou o próprio logo
(quando existir).
Background
Corte da bandeira em transparência (em
fundo preto), com a tarja de acordo com o
site da secretaria (com o logo da secretaria)
ao lado esquerdo na vertical.
49
YouTube
O YouTube é uma importante rede social de
compartilhamento de vídeos, e, assim como nos
casos do Twitter e do Facebook, deve ser usada
com sabedoria e planejamento.
A fim de garantir uma identidade coesa,
apresentamos algumas soluções visuais
que facilitam a utilização desse canal de
comunicação.
Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo III • Redes Sociais
50Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo III • Redes Sociais
YouTube do Governodo Estado de São Paulo
Perfil
Procure usar o nome completo dentro de 20
caracteres, caso contrário use o mínimo de
abreviações possíveis.
Assim como no Facebook e Twitter, a URL do
site oficial deve constar na descrição do perfil,
onde estão as informações básicas da página.
Avatar
O corte da bandeira com o fundo na cor
amarela é o avatar-padrão da página do
Governo do Estado de São Paulo.
Arte do Canal
Corte da bandeira em transparência (em fundo
preto), com a tarja amarela (com o logo do
Governo do Estado de São Paulo) alinhada na
vertical ao lado direito.
Avatar
Tarja colorida
Arte do canal
Logo
51Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo III • Redes Sociais
YouTube dassecretarias ou órgãos
Perfil
Procure usar o nome completo dentro de 20
caracteres, caso contrário, use o mínimo de
abreviações possíveis.
Assim como no Facebook e Twitter, a URL do
site oficial deve constar na descrição do perfil,
onde estão as informações básicas da página.
Avatar
As secretarias devem aplicar o corte da
bandeira com o fundo da mesma cor
que o site.
Para órgãos do Governo do Estado de São
Paulo: Corte da bandeira ou o próprio logo
(quando existir).
Arte do Canal
Corte da bandeira em transparência (em fundo
preto), com a tarja de acordo com a cor do
site da secretaria (com o logo da secretaria)
alinhada na vertical ao lado direito.
Avatar
Tarja colorida
Arte do canal
Logo
Logo
Módulo IV • Glossário
53Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo IV • Glossário
Glossário
Acessibilidade – Dentro do ambiente virtual, acessibilidade significa permitir o acesso à web por todos, independentemente de tipo de usuário, situação ou ferramenta.
Avatar – Representação gráfica da identidade de um usuário na internet utilizado, normalmente, em redes sociais.
Background – Termo técnico para o fundo de um ambiente virtual, seja um site, um hotsite, um perfil de redes sociais ou portal.
Banner – A forma publicitária mais comum na internet, muito usado em propagandas para divulgação de sites na internet que pagam por sua inclusão. É criado para atrair um usuário a um site através de um link.
Cor hexadecimal – Um sistema simbólico para definir cores e tons com exatidão dentro do ambiente virtual. Ex.: #000000 – Preto.
Corpo – Variação no tamanho dos tipos (fontes) dentro do ambiente virtual. É definido pela unidade de medida “ponto”. Ex.: 12 pt, 14 pt, 24 pt etc.
E-mail – Sistema de troca de mensagens virtuais, em que cada usuário possui um endereço próprio.
Hotsite – Um pequeno site planejado para apresentar ou destacar uma ação de comunicação e marketing pontual.
Link – Um objeto virtual, sendo texto, figura ou vídeo, capaz de transferir o usuário para outra página ou documento na navegação.
On-line – Um ambiente ou objeto virtual que se encontra disponível para acesso de usuários. Define também, de maneira mais ampla, qualquer ambiente ou objeto que só exista no meio virtual.
Off-line – Aquilo que não está, no momento, conectado à internet, ou, de maneira mais ampla, aquilo que não existe na internet.
Pixel (px) – É uma medida para definir altura e comprimento de objetos dentro do ambiente virtual (paralelo a centímetros, milímetros, metros, etc).
Peso (tipologia) – Um estilo de variação de uma família de tipos (fonte) no ambiente virtual. Ex.: bold, italic e regular.
Portal – Um centro aglomerador e distribuidor de conteúdo para uma série de outros sites ou subsites.
Kilobyte (kb) – Unidade que define a qualidade de dados virtuais. Especifica o tamanho (peso) de arquivos criados e/ou lidos por um computador, como imagens, vídeos e textos.
Rede social – Uma estrutura social composta por pessoas ou organizações, conectadas por um ou vários tipos de relações, que partilham valores e objetivos comuns. Dentre as redes sociais mais importantes na atualidade estão Twitter, Facebook e YouTube.
RSS – Tecnologia que permite a usuários se inscreverem em determinados sites, possibilitando o acompanhamento de atualizações de conteúdo e seu agrupamento em uma só ferramenta virtual de leitura. Dessa forma, o usuário não tem necessidade de visitar novamente o site para ter acesso às atualizações.
Site – Um ambiente virtual na internet.
Template – Ambiente virtual estabelecido como modelo, permitindo a criação de conteúdo de forma rápida para preenchimento da página.
URL (Uniforme Resource Location) – Endereço/localização de uma página ou arquivo na internet.
Web – A “rede” de dados. Define, de maneira mais ampla, o próprio ambiente virtual da internet.
