Upload
paula-carvalho
View
213
Download
0
Embed Size (px)
DESCRIPTION
Style Guide
Citation preview
Design e Comunicação MultimédiaAveiro 2011
Página 03
Índice
Identidade
ApresentaçãoLogótipoLogótipo versõesMargem de segurançaUtilização IncorrectaPalette de coresTipogra�a
Suportes de comunicação
ApresentaçãoComunicação Online
02
030405060708
09
10
1112-18
Design e Comunicação MultimédiaAveiro 2011
Página 04
Apresentação
Bem-Vindo ao manual de normas grá�cas e estilos
Este manual é um instrumento de trabalho que ilustra e de�ne toda a identidade grá�ca da instalação interactiva ReLight
desenvolvida no âmbito das unidades curriculares de Multimédia em Ambientes Artísticos e Design de Comunicação Multimédia
do Mestrado em Comunicação Multimédia da Universidade de Aveiro.
A identidade foi desenvolvida de forma global de forma a que todos os elementos de cor, tipogra�a e composição se
complementem e contribuam para a construção de uma identidade grá�ca coerente.
Para garantir essa mesma coerência todas as regras apresentadas neste manual devem ser inteiramente respeitadas na
aplicação e desenvolvimento do projecto.
Símbolo
Logótipo
Design e Comunicação MultimédiaAveiro 2011
Página 05
Logótipo
Como parte da identidade do projecto relight o logótipo reLight é composta pelo símbolo e tipogra�a. A inspiração do símbolo
remete para a tecnologia e para os paineis de led’s.
As ligações entre os elementos da marca foram estudadas e não devemser alteradas e as proporções devem ser respeitadas.
Design e Comunicação MultimédiaAveiro 2011
Página 06
Logótipo Versões
O logótipo apresenta duas versões diferentes possíveis para utilização. A versão a cores e a versão monocromática. Estas
versões estão representadas abaixo. Sempre que possível recomenda-se a utilização da versão a cores do logótipo pois esta
garante uma maior visibilidade. A versão monocromática poderá também ser utilizado em situações em que apenas uma cor é
permitida.
35 x 145 pxVersão reduzida da aplicação da assinatura
Design e Comunicação MultimédiaAveiro 2011
Página 07
Margem de segurança
Por forma a preservar a visibilidade do logótipo foi de�nida uma margem de segurança mínima à sua volta. A área corresponde
ao valor “X” que corresponde à altura do símbolo.
Para a identidade foram efectuados estudos tendo em conta a diversidade de formatos existentes, sendo assim veri�ca-se a
necessidade de analisar o logótipo em dimensões mais reduzidas, pois a escalibilidade é um aspecto importante. Assim existe a
necessidade de manter a visibilidade do logótipo em escalas mais reduzidas. Assim o tamanho mínimo não deve ser inferior a
51 mm de largura e 13mm de altura ou em pixeis 145 e 35 pixeis respectivamente.
Design e Comunicação MultimédiaAveiro 2011
Página 08
Utilização Incorrecta
Recomenda-se a utilização do logótipo relight num fundo branco por forma a ter mais impacto e visibilidade. A utilização do
logo em fundos escuros é permitida quando este for preto. A utilização do logótipo em fundos com gradientes ou com padrões
não é permitida bem como em cores que di�cultem a legibilidade. A utilização do logótipo deve ser legível.
#B2B2B2
R 178G 178B 178
#5571AD
R 85G 113B 173
#69B1C9
R 105G 177B 201
#CBC0AD
R 203G 192B 173
#EBC165
R 235G 193B 101
#D4D665
R 212G 214B 101
Design e Comunicação MultimédiaAveiro 2011
Página 09
Palete de cores
A palete de cores que foi desenvolvida para a identidade relight deve ser mantida e respeitada para os restantes elementos como tipogra�a e elementos grá�cos nos outros formatos. Esta palete de cores será utilizada para os forma-tos de impressão e online.
0 31 70 100
R 215G 223B 35
R 251G 176B 64
R 0G 174B 239
R 102G 45B 145
Palete de cores de construção do gradiente do logótipo
Título primário com o tipo de letra Comfortaa regular com a cor #69B1C9 e o tamanho de 24 pontos
Título secundário com o tipo de letra Comfortaa regular com a cor #B2B2B2 e o tamanho de 18 pontos
Outro texto com o tipo de letra Futura STD com a cor #6D6968 e o tamanho de 14 pontos variando entre o modo Light e Regular
Design e Comunicação MultimédiaAveiro 2011
Página 10
Tipografia
A tipogra�a é uma componente importante da identidade pelo que deve ser mantida para que exista uniformidade.Esta deverá ser respeitada em todos os conteúdos relativos à identidade relight. O tipo de letra é Comfortaa normal para o logótipo, títulos princiapais e secundários em documentos e Futura std em texto descritivo.
R 102G 45B 145
Design e Comunicação MultimédiaAveiro 2011
Página 12
Apresentação
A identidade relight pode ser aplicada em suportes de comunicação como documentos para impressão ou para outros tipos de media como vídeo. A identidade deve ser utilizada sempre no âmbito do projecto e esta deverá ser utilizada por forma a manter a legibilidade. Os suportes de comunicação desenvolvidos deverão respeitar a palette de cores e a tipogra�a da identidade.
Logótipo
Menu
Fotos
Footer
Colunas conteúdo
Design e Comunicação MultimédiaAveiro 2011
Página 13
Plataforma Online
Para a plataforma online apresenta-se no esquema as principais áreas constituintes da página inícial.
110 px
350 px350 px
200 px
35 px
70 px
Design e Comunicação MultimédiaAveiro 2011
Página 14
Plataforma Online
As medidas recomendadas para a construção dos principais áreas de conteúdos da página inicial
Logótipo
Menu
Footer
Conteúdos
Design e Comunicação MultimédiaAveiro 2011
Página 15
Plataforma Online
Para a plataforma online apresenta-se no esquema as principais áreas constituintes de uma página típica de conteúdos
Centrado
935 px
110 px
200 px
35 px
Design e Comunicação MultimédiaAveiro 2011
Página 16
Plataforma Online
As medidas recomendadas para a construção dos principais áreas de conteúdos da página inicial com pré-visualização no browser
1 - Os botões da navegação no estado normal.
2 - Os botões da navegação com o botão do projecto em estado “hover”.
Design e Comunicação MultimédiaAveiro 2011
Página 17
Plataforma Online
A navegação da plataforma onine onde se pode observar os diferentes estados (normal e hover). O estado normal tem um valor de 80% de transparência e no estado “hover” um valor de 100%
Estado HoverFutura STD bold 12 px
#666666
Estado NormalFutura STD 12 px
#999999
Design e Comunicação MultimédiaAveiro 2011
Página 18
Plataforma Online
A navegação da plataforma onine secundária, que se encontra no rodapé do site. Apresentam também dois estados distintos com o estado normal e “hover”.