Upload
dinhtram
View
225
Download
0
Embed Size (px)
Citation preview
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.