54
Manual de Identidade Visual Web do Governo do Estado de São Paulo Versão atualizada em Junho 2016

Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

Embed Size (px)

Citation preview

Page 1: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

Manual de Identidade Visual Webdo Governo do Estado de São Paulo

Versão atualizada em Junho 2016

Page 2: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

Introdução

Page 3: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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:

[email protected]

Page 4: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

Índice

Page 5: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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

Page 6: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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

Page 7: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

Variantes de cor

Page 8: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 9: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

Tipologia

Page 10: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 11: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

Módulo I • Sites

Page 12: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 13: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 14: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 15: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 16: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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

Page 17: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 18: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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/

Page 19: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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

Page 20: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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).

Page 21: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 22: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 23: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 24: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 25: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

25

Aplicação Mobile

Variação de cores.

Page 26: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

Módulo II • Informativos

Page 27: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 28: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 29: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 30: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 31: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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

Page 32: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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

Page 33: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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

Page 34: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 35: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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

Page 36: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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

Page 37: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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

Page 38: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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

Page 39: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 40: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 41: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 42: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

Módulo III • Redes Sociais

Page 43: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

43Manual de Identidade Visual Web • Governo do Estado de São Paulo • Módulo III • Redes Sociais

Facebook

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.

Page 44: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 45: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 46: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

46

Twitter

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

Page 47: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 48: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 49: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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

Page 50: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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

Page 51: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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

Page 52: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

Módulo IV • Glossário

Page 53: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento

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.

Page 54: Manual de Identidade Visual Web do Governo do Estado de ... · Manual de Identidade Visual Web • Governo do Estado de São Paulo • Introdução 3 Introdução Após o desenvolvimento