18
Manual de normas gráficas e estilos

Religh

Embed Size (px)

DESCRIPTION

Style Guide

Citation preview

Manual de normas gráficas e estilos

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