MANUAL DE DESIGN - COMUNICAO E MULTIMDIA

MANUAL DE

DESIGN
COMUNICAO
E MULTIMDIA
Curso: Tcnico de Multimdia
Mdulo: Design - Comunicao e Multimdia
Durao: 25 h
Formador: Mrio Calhau
Formador - Paulo Sousa

1
ndice

1. Elementos grficos para Multimdia 5. Natureza plstica da cor

1.1. Multimdia 5 5.1. Fisiologia da cor 11

1.2. Definio de design 5 5.2. Cor versus ateno, iluminao e 11
1.3. Definio de design grfico 5 tempo de visualizao
1.4. Definio de multimdia 5 5.3. Sntese aditiva e sntese subtrativa 11
1.5. Conceito de memria descritiva 5 5.4. RGB versus CMYK 12
1.6. Conceito e importncia de pblico-alvo 5 5.5. Cores complementares 12
1.7 Conceito de logtipo 5 5.6. Harmonia entre as cores 12
1.8. Bitmap versus vetorial 5

2. Processo de comunicao
6. Estrutura do ritmo visual
2.1. O processo cclico de comunicao 6
2.2. Interferncias mediticas 6 6.1. Formas 14
2.3. Fonte de informao 6 6.2. Plano 14
2.4. Suporte de comunicao 6 6.3. Equilbrio e desequilbrio 14
6.4. Guio de vdeo e udio 14
3. Metodologia processual 6.5. Storyboard 15
6.6. Tipos de planos 16
3.1. Fases de um projeto 7 6.7. Movimentos de cmara 17
3.2. Importncia de briefing 7 6.8. Erros de enquadramento 17
3.3. Fontes de investigao 8 6.9. Propores 17
3.4. Metodologia projetual 8 6.10. Foco 17
3.5. Mtodos 8

4. Paginao

4.1. Regras de paginao 9

4.2. Alinhamentos 9
4.3. Texto em maisculas e minsculas 9
4.4. Tamanho de fontes adequado 10
4.5. Entrelinhamento 10

2
7. Design organizacional
MANUAL DE DESIGN - COMUNICAO E MULTIMDIA
7.1. Design de navegao 18
7.2. Estrutura de informao 18
7.3. Navegabilidade 18
7.4 Interface 18
7.5. Equipa 18
7.6. Metodologias 19
7.7. Mtodos 19
7.8. Sistemas de navegao 19

8. Design do interface

8.1. Mancha grfica e campo visual 20

8.2. Leitura do ecr 20
8.3. Como gerir animaes 20
8.4. Formatos de ficheiro para www 20

9. Noes de layout

9.1. Originalidade 21
9.2. Formato da pgina 21
9.4 Menu de navegao 23
9.5 rea de informao 23
9.6. Logtipo 23
9.7. Estrutura de navegao 24
9.8 Necessidade de feedback experimental, a aval- 24
iao

3
4
 MANUAL DE DESIGN - COMUNICAO E MULTIMDIA
1.MULTIMDIA
1.1 DESIGN 1.5 MULTIMDIA

uma atividade de projeto responsvel pelo planeamen- A palavra multimdia designa a combinao, contro-
to, criao e desenvolvimento de produtos e servios. lada por computador, de texto, grficos, imagens, vdeo,
um processo que busca solues criativas e inovadoras udio, animao e qualquer outro meio pelo qual a in-
para atender s caractersticas dos produtos, s neces- formao possa ser representada, armazenada, trans-
sidades do cliente e da empresa de forma sintonizada mitida e processada sob a forma digital, em que existe
com as demandas e oportunidades do mercado. pelo menos um tipo de mdia esttico (imagem, texto
ou grficos) e um tipo de mdia dinmico (vdeo, udio
ou animao).
1.2 DESIGNER
1.6 MEMRIA DESCRITIVA
o criador, quem faz o design. Ele avalia e combina tc-
Documento que acompanha um projeto e descreve o
nicas, mtodos, materiais, tecnologias, processos produ-
seu conceito, caractersticas, componentes, acessrios,
tivos, custos, normas tcnicas e legais, para atender a
detalhes construtivos, materiais, custos e outros tpicos
todos os requerimentos do projeto de forma compatvel
pertinentes sua compreenso e implantao.
com o investimento e necessidades do cliente.
Pode desenvolver a sua atividade como contratado, den-
tro da empresa, em escritrios prprios ou atuar como 1.7 PBLICO-ALVO
freelancer em intervenes pontuais e isoladas.
Pblico-alvo, tambm chamado de Prospect ou Tar-
get, o grupo de pessoas que escolhidas como clientes/
destinatrios principais, so aquelas pessoas para quem
1.3 DESIGN GRFICO direcionamos a nossa prtica e as aes de comunica-
o e marketing. O pblico-alvo pode ser definido pe-
o campo do design que compreende todos os fatores- los seguintes critrios: faixa etria, habilitaes, regio,
chave para a criao e consolidao da imagem de uma classe social, poder de compra, comportamento ou
empresa e o estabelecimento de uma adequada comuni- preferncias.
cao com o seu pblico. Engloba os elementos visuais
como as marcas, embalagens, sinalizao, revistas, im- 1.8 LOGTIPO
pressos promocionais e sites.
Um logtipo uma marca grfica ou smbolo que visa
1.4 WEB DESIGNER representar de forma inequvoca e nica empresas, or-
ganizaes, indivduos, produtos ou servios, por forma
o profissional competente para a elaborao do pro- a facilitar o seu reconhecimento por parte de terceiros
jeto esttico e funcional e um (o seu pblico-alvo).
web site. Para o desenvolvimento de websites esse pro-
fissional deve ter a compreenso da aplicao em media 1.9 BITMAP VS VECTORIAL
eletrnica de disciplinas como: Teoria das cores, Tipo-
grafia, Arquitetura de informao, Semitica, Usabili- As imagens Bitmap so compostas por pixeis, pequenos
dade, e Conhecimento de Linguagens de Estruturao pontos que formam a imagem. Ao contrrio do for-
e Formatao de Documentos em hiper texto como mato Bitmap temos o formato vectorial formado por el-
XHTML (Extensible Hypertext Markup Language) e ementos geometricos e quando a imagem aumentada
CSS(Cascade Style Sheet ). Para a aplicao desse con- nunca perde qualidade.
hecimento, de forma geral, o web designer recorre a
softwares de tratamento e edio de imagens, desenho
e codificadores.
5
2. Processo de Comunicao
2.1. O processo cclico de comunicao
O processo de Comunicao, ocorre quando o emis-
sor (ou codificador) emite uma mensagem (ou sinal) ao
receptor (ou decodificador), atravs de uma chamada,
por exemplo, o telefone . O recetor interpretar a men-
sagem que pode ter chegado at ele com algum tipo de
barreira (rudo, bloqueio, filtragem) e, a partir da, dar
o feedback ou resposta, completando o processo de co-
municao.
c) movimentos da cabea: tendem a reforar e sincroni-
zar a emisso de mensagens.
d) postura e movimentos do corpo: os movimentos
corporais podem fornecer pistas mais seguras do que
a expresso facial para se detetar determinados estados
emocionais. Por ex.: inferiores hierrquicos adotam
posturas atenciosas e mais rgidas do que os seus supe-
riores, que tendem a mostrar-se descontrados.
e) comportamentos no-verbais da voz: a entoao
(qualidade, velocidade e ritmo da voz) revela-se im-
portante no processo de comunicao. Uma voz calma
geralmente transmite mensagens mais claras do que
uma voz agitada.
f) a aparncia: a aparncia de uma pessoa reflete nor-
malmente o tipo de imagem que ela gostaria de passar.
Atravs do vesturio, penteado, maquilhagem, objetos
pessoais, postura, gestos, modo de falar, etc, as pessoas
criam uma projeo de como so e de como gostariam
de ser tratadas. As relaes interpessoais sero menos
tensas se a pessoa fornecer aos outros a sua projeo
particular e se os outros respeitarem essa projeo.

2.3 Fonte de Informao

As fontes so portadores de informao. Podem ser pes-

2.2 Interferncias mediticas soas, falando por si ou coletivamente, ou documentos
escritos ou audiovisuais, por meio dos quais os jornal-
A comunicao verbal plenamente voluntria; o com- istas tomam conhecimento de informaes, opinies
portamento no-verbal pode ser uma reao involun- ou dados e, tambm, verificam o rigor dos dados obti-
tria ou um ato comunicativo propositado. dos ou aferem a veracidade dos juzos de valor que lhes
foram apresentados anteriormente.
Alguns psiclogos (e.g. Armindo Freitas-Magalhes,
2007) afirmam que os sinais no-verbais tm as funes 2.4 Suporte de Comunicao
especficas de regular e encadear as interaes sociais e
de expressar emoes e atitudes interpessoais: Os suportes de comunicao social so todas as tec-
a) expresso facial: no fcil avaliar as emoes de al- nologias de media, incluindo a internet, a televiso, os
gum apenas a partir da sua expresso fisionmica. Por jornais e a rdio, que so usados para comunicao de
vezes, os rostos transmitem espontaneamente os senti- massa.
mentos, mas muitas pessoas tentam inibir a expresso
emocional.
b) movimento dos olhos: desempenha um papel muito
importante na comunicao. Um olhar fixo pode ser
entendido como prova de interesse, mas noutro con-
texto pode significar ameaa, provocao.
Desviar os olhos quando o emissor fala uma atitude
que tanto pode transmitir a ideia de submisso como a
de desinteresse.
6
 MANUAL DE DESIGN - COMUNICAO E MULTIMDIA
3.Metodologia Processual
3.1 Fases de um projeto

1. Fase de INICIAO - a fase onde damos partida oficialmente ao projeto atravs do Termo de Abertura.
Aqui, todos os envolvidos nesta fase reconhecem que um projeto ou fase deve comear e se comprometem para
execut-lo.

2. Fase de PLANEAMENTO- a fase responsvel por detalhar tudo aquilo que ser realizado pelo projeto, inclu-
indo cronogramas, interdependncias entre atividades, alocao de recursos envolvidos, anlise de custos, etc.,
para que, no final dessa fase, ele esteja suficientemente detalhado para ser executado, sem dificuldades e imprevis-
tos. Nesta fase, os planos auxiliares de comunicao, qualidade, riscos, suprimentos e recursos humanos tambm
so desenvolvidos.

3 - Fase de EXECUO - a fase que materializa tudo aquilo que foi planeado anteriormente. Qualquer erro co-
metido nas fases anteriores fica evidente durante este processo. Grande parte do oramento e do esforo do projeto
consumida nessa fase.

4 - Fase de CONTROLE - a fase que acontece paralelamente s de Planeamento e Execuo. Tem como objetivo
acompanhar e controlar aquilo que est sendo realizado pelo projeto, de modo a propor aes corretivas e preven-
tivas, no menor espao de tempo possvel, aps a deteo de anormalidade. O objetivo do controle comparar a
Linha de Base, levantada no incio do projeto (Estado Inicial), o seu status real no momento (Estado Atual), com
o status previsto pelo planeamento (Estado Desejado), tomando aes corretivas em caso de desvio.

5 - Fase de ENCERRAMENTO - a fase quando a execuo dos trabalhos avaliada atravs de uma auditoria in-
terna ou externa (terceiros), os livros e documentos do projeto so encerrados e todas as falhas ocorridas durante
o projeto so discutidas e analisadas para que erros similares no ocorram em novos projetos e melhores estrat-
gias so identificadas e selecionadas como lies aprendidas. Aqui, se formaliza a aceitao do projeto ou fase e
encerra-se de uma forma organizada, o projeto solicitado.

3.2 Importncia de briefing

O briefing ou brfingue um conjunto de informa-

es, uma coleta de dados passada numa reunio para
o desenvolvimento de um trabalho, documento, sendo
muito utilizadas em Administrao, Relaes Pblicas e
na Publicidade. O briefing deve criar um guio de ao
para criar a soluo que o cliente procura; como ma-
pear o problema, e com estas pistas, ter ideias para criar
solues
O briefing uma pea fundamental para a elaborao
de uma proposta de pesquisa de mercado. um ele-
mento chave para o planeamento de todas as etapas da
pesquisa de acordo com as necessidades do cliente.

7
3.3. Fontes de investigao

Podemos dizer que num processo de investigao o primeiro passo a ser dado o da observao, pois a partir
dela buscar-se-o as respostas s perguntas como por que tal fenmeno ocorre? ou que relao este fenmeno
tem com aquele?. Para estas perguntas, buscar-se- formular as possveis respostas ou as denominadas hipte-
ses. Estas visam a busca de diversas informaes j conhecidas, sendo suposies testveis e, a partir delas, so
realizadas dedues, que prevm o que pode acontecer caso estejam corretas.

Desta forma, os testes experimentais e/ou novas observaes so realizados para testar as hipteses e averiguar se
as dedues podem ser confirmadas ou refutadas. Assim, uma hiptese aceite, dever ser divulgada a fim de aux-
iliar trabalhos posteriores de outros pesquisadores, atravs de publicaes, apresentaes em eventos, congressos
e comunicaes pessoais como esta.

Convm, elencar que uma hiptese confirmada por inmeras experimentaes, irrefutvel num espao tempo-
ral, poder tornar-se uma teoria - conjunto de leis, conceitos e modelos - que busca explicar diversos fenmenos.
Entretanto, mesmo uma teoria bem consolidada, ainda passvel de mudana. Finalmente, a realizao de novas
observaes e teorias faculta a possibilidade de novas descobertas, surgindo da a imprescindivibilidade de uma
pesquisa.

3.4 Metodologia projetual 3.5 Mtodos

O trabalho de projeto um mtodo particular de plani- Existem diversos mtodos de projeto, mas todos seg-
ficao, organizao e realizao de uma tarefa. Embora uem uma estrutura bsica:
esteja mais associado ao Projeto de Design, a metodo- 1. Observao e anlise: Definio do problema, pes-
logia do projeto e o seu mtodo podem ser aplicados a quisa, definio de objetivos e restries;
muitas outras reas do conhecimento onde se procura 2. Planear e projetar: gerao de opes de projeto, es-
resolver um determinado problema. colha de opo de projeto, desenvolvimento, aprimora-
A metodologia projetual indica assim um caminho de mento, detalhamento;
passos em sequncia, desde a definio do problema 3. Construir e executar: prottipo; produo
inicial at soluo final.

8

4. Paginao
4.1 Regras de paginao
Todas as folhas a partir da fol-
ha de rosto devem ser contadas,
porm no numeradas. A nume-
rao deve ser indicada a partir da
INTRODUO, que poder ser,
por exemplo 5, se foram utilizadas
quatro folhas anteriormente, em
algarismos arbicos no canto su-
perior direito da folha, a 2cm da
borda superior, ficando o ltimo al-
garismo a 2cm da borda direita da
folha. Havendo anexos, apndices
ou glossrio, as pginas devem ser
numeradas, dando sequncia nu-
merao do texto principal.
MANUAL DE DESIGN - COMUNICAO E MULTIMDIA
4.2 Alinhamento
Podemos assumir que um Tipo de
letra bem desenhado tem um es-
paamento entre letras natural ou
normal, que se encontra inserido
no prprio design da letra. Este es-
paamento normal provavelmente
o ideal para a grande maioria dos
textos, em particular quando estes
so alinhados esquerda ou dire-
ita. Quando os textos so alinhados
a ambos os lados, ou seja justifica-
dos, os espaos entre letras e entre
palavras tendem a aumentar, e neste
caso deve-se reduzir um pouco o
valor de kerning/tracking.
4.3 Texto em maisculas e
minsculas
A letra minscula inicial usada
nos seguintes casos:
01) Nos nomes dos dias: segunda-
feira;
02) Nos usos de fulano, sicrano, bel-
trano.
03) Nos pontos cardeais (mas no
nas suas abreviaturas): norte (N),
sul (S), leste (L ou E), oeste (O ou
W)
04) Nas formas corteses de trata-
mento e ttulos honorficos: O sen-
hor doutor Joo Bento, O bacharel
Cludio Abujanra, O cardeal Joo
de Arruda.
A letra maiscula inicial usada:
01) Nos nomes de pessoas, reais ou
fictcios, ou de seres mitolgicos:
Pedro Marques; Branca de Neve; D.
Quixote; Neptuno.
02) Nos nomes prprios de lugares,
reais ou fictcios:Lisboa, Luanda,
Maputo, Rio de Janeiro, Londrina;
Atlntida.
03) Nos nomes que designam in-
stituies: Instituto Portugus da
Metereologia.
04) Nos nomes de festas e festivi-
dades: Natal, Pscoa, Ramado, To-
dos os Santos.
05) Nos ttulos de jornais, revistas
e publicaes peridicas, que de-
vem ser escritos em itlico: Folha de
Londrina, O Estado de So Paulo,
Gazeta do Povo, Zero Hora.
06) Nos nomes dos pontos cardeais
ou equivalentes, quando emprega-
dos absolutamente.
07) Em siglas, smbolos ou abrevia-
turas internacionais ou nacionais,
com maisculas iniciais ou mediais
ou finais ou o todo em maisculas:
FAO, ONU; H2O, Sr., V. Ex.
9
4.4 Tamanho de fontes ad-
equado

O tamanho das fontes varia con-

forme o tipo de apresentao, por
exemplo, numa apresentao de
slides ser mais adequado o uso de
um tipo de letra maior de forma a
facilitar a sua leitura por parte de
quem a visualiza.

4.5 Entrelinhamento

O terceiro elemento que ter de estar em harmonia com o espaamento

entre letras e entre palavras, o espao entre linhas, ou entrelinhamento. O
valor da entrelinha pode aumentar ou diminuir a leiturabilidade.
Estudos mostraram que o aumento da entrelinha melhora a legibilidade.
O espao entre as linhas nunca deve ser menor do que o espao entre as pa-
lavras, porque se tal acontecer, o olho do leitor tem tendncia a cair atravs
do espao entre as palavras das linhas seguintes. As variantes negra (bold),
e extra-negra, (heavy) requerem por vezes mais entrelinha e espao entre
palavras do que a verso regular. Como regra geral, poderemos dizer que
de forma a maximizar a facilidade de leitura do texto corrido se usa geral-
mente dois a quatro pontos de entrelinha para alm do corpo do texto.

10

5. Natureza Plstica da Cor
5.1. Fisiologia da cor
H a crena de que as cores teriam diferentes
efeitos psicolgicos sobre as pessoas, embora
isso seja extremamente duvidvel conforme a
comunidade cientfica. Os supostos efeitos se-
riam:
Vermelho paixo, entusiasmo, encontro
entre pessoas. Estimula aes agressivas;
Amarelo concentrao, disciplina, co-
municao, ativa o intelecto. Est associado a
positivismo e a boa sorte;
Laranja equilbrio, generosidade, entu-
siasmo, alegria. Alem de ser atraente e aconche-
gante;
MANUAL DE DESIGN - COMUNICAO E MULTIMDIA
5.2. Cor versus ateno, iluminao e tempo
de visualizao
Algumas evidncias cientficas sugerem que a luz de di-
versas cores, que entra pelos olhos, pode afetar direta-
mente o centro das emoes. Cada um de ns responde
cor de uma forma particular. As pessoas tendem tam-
bm a ser atradas por certas cores, em virtude de alguns
fatores determinantes. A sua escolha pode ser baseada
no seu tipo de personalidade, nas condies circunstan-
ciais de sua vida ou no seus desejos e processos mentais
mais ntimos, profundos e at inconscientes.
As pessoas no escolhem necessariamente uma cor
porque ela boa para si prprias, mas porque gostam
da cor, mesmo que esta possa ser contrria s suas ne-
cessidades.
Existem muitos testes psicolgicos,que foram desen-
volvidos para nos ajudar a conhecer mais sobre ns
prprios, por meio do poder da cor.

Verde esperana, abundncia, cura. Es-

timula momentos de paz e equilbrio. a cor da
revelao;

Azul purificao, expulsa energias neg-

ativas. Favorece a amabilidade, a pacincia a
serenidade. Estimula a busca da verdade inte-
rior;

Lils a cor que tem mais influncia em

emoes e humores. Tambm est ligada a intu-
io e a espiritualidade;

Branco purificador e transformador. 5.3 Sntese aditiva e sntese subtrativa

Representa a perfeio e o amor divino. Estim-
Sntese aditiva da cor. Quando trabalhamos num com-
ula a imaginao e a humildade. Produz a sen-
putador, as cores do ecr so criadas com luz usan-
sao de limpeza e claridade, alem de frieza e do o mtodo de sntese aditiva. A mistura de cores
esterilidade; aditvas comea com o negro e quanto mais cores se
adicionam,mais tende para o branco.
Preto, pode ser representado como uma
capa de ao, onde aquilo que est dentro no sai Sintese subtrativa. Inverso da composio da luz num
prisma. Cor luz.
e aquilo que est fora no entra.
11
5.4 RGB versus CMYK

Os padres CMYK e RGB so padres de cor utilizados

em design de projetos, na criao de materiais grficos,
webdesign, material destinado a publicidade impressa,
e uma infinidade de outras situaes.
Qual a diferena entre estes padres?
CMYK corresponde s iniciais das cores Cian (ciano),
Magenta (magenta), Yellow (amarelo) and Black (pre-
to).

Este um padro de quatro cores primrias, que combi-

nadas formam cores ilimitadas. O padro CMYK mais
usado para impresso em papel, onde 4 cores de tinta
geram uma qualidade final melhor do que apenas 3.

RGB corresponde s iniciais das 3 cores Red (vermel-

ho), Green (verde) e Blue (azul). Este pado utilizado
para exibio em monitores de computador e televi- 5.5 Cores complementares
sores em geral.
So cores opostas na roda de cores, por exemplo: ver-
Devido a esta diferena de padro que uma mesma melho e verde.
imagem vista no monitor apresenta leves alteraes O alto contraste entre elas cria um visual vibrante.
na tonalidade das cores ao ser impressa. Alguns pro-
gramas grficos como o Corel Draw incorporam filtros, 5.6 Harminia e as Cores
que tentam mostrar no monitor a imagem exatamente
como ser impressa.
Esquema monocromtico
Ao criar o design para um formato preciso ter em
mente qual o suporte ser utilizado. No caso de imagens
para web o padro adotado deve ser o RGB, enquanto
que, em se tratando de materiais impressos, deve-se uti-
lizar o padro CMYK ou outro de acordo com especifi-
caes tcnicas do projeto adotado pelo designer.

Harmonia de valores

12
5.7 Legibilidade
MANUAL DE DESIGN - COMUNICAO E MULTIMDIA

A Legibilidade no mais do que a juno de cores,

para destacar texto de modo a permitir a sua fcil lei-
tura. No exemplo acima podemos observar que o texto
vermelho salta, enquanto o texto amarelo dificil de ler
sobre um fundo branco.

13
6. Estrutura do ritmo visual Durante a produo h
uma maior flexibilidade
Ritmo vem do grego Rhytmos e designa aquilo que para controlar o timing
flui, que se move, movimento regulado. do vdeo do que do udio,
Ritmo est ligado a tempo e perceo. mas se no for possvel
o modo de organizar as estruturas repetidas na com- encaixar o vdeo, poder
posio. ser necessrio reescrever o
guio do udio. Claro que
6.1 Formas quando so necessrias
cenas com udio sincroni-
A forma a harmonia, a zado, como uma pessoa
mistura, dos elementos vi- a falar, o udio e o vdeo
suais que nos do as dife- tero que ser produzidos
renas entre um polvo e ao mesmo tempo.
um cavalo ou entre uma Em relao ao vdeo,
pra e uma banana. quando se chega a um
acordo em relao ao sto-
6.2 Plano ryboard, o guio de vdeo
pode comear a ser desen-
O plano caracterizado volvido. Este guio deve
por duas dimenses: com- descrever as caractersti-
primento e largura. Tem cas de cada cena, quem
uma rea mas os seus lim- aparecer na cmara e o
ites no esto definidos, que ir fazer. Com o guio
tendo todos os pontos que de vdeo, comea-se a tra-
o constituem na mesma balhar nos tipos de planos:
superfcie. 6.4 Guio de vdeo e close-up ou wide e alter-
udio aes no ngulo da cma-
6.3 Equilbrio ra com pan, tilt, ou zoom.
Se um vdeo vai incluir A manipulao da cmara
Uma composio equili- udio, este dever ser tra- um dos pontos em que
brada, significa que h balhado na fase do sto- a experincia profissional
uma harmonia visual ryboard. Geralmente, o vai afetar a qualidade da
entre os elementos que a guio de udio vai deter- produo. O meio de su-
constituem. O equilbrio minar a sequncia tempo- porte em que o vdeo final
pode ser obtido atravs ral do vdeo. Para que um vai ser apresentado afecta
da simetria ou do peso vdeo tenha um aspecto significativamente a abor-
visual. mais profissional, o timing dagem de uma produo.
do udio e do vdeo deve Existem grandes diferen-
encaixar perfeitamente, as entre produes para
As formas esto contidas
sem que seja necessrio o cinema, produes para
nas mensagens que nos
acrescentar esperas em ne- a televiso e produes
chegam visualmente.
nhum deles. Uma boa tc- para o computador. Estas
nica para uma produo diferenas devem-se aos
simples, passa pela con- diferentes ambientes de
struo da pista de udio visualizao e s diferen-
em primeiro lugar, para tes possibilidades tcnicas
que esta possa estabelecer de cada meio.
o timing do vdeo.
14
6.5 Storyboard
MANUAL DE DESIGN - COMUNICAO E MULTIMDIA
Um storyboard tem como finalidade marcar as principais passagens de uma
histria que ser contada num filme ou vdeo de uma forma mais prxima
possvel do resultado final. Depois de finalizado, os envolvidos no projeto
percebem a sequncia, o ritmo das cenas, o clima e a eficcia em trans-
mitir a histria. A semelhana com a banda desenhada d-se pelo facto de
o storyboard tambm ter uma histria contada atravs de uma sequncia
de quadros e pelo facto de tambm se utilizarem recursos como ngulos e
tcnicas de composio de uma cena.
No mercado audiovisual, o storyboard utilizado, seja para desenhos ani-
mados, ou para uma produo cinematogrfica, o recurso do storyboard
uma maneira relativamente fcil, simples e barata de um diretor ter uma
ideia do aspecto final do produto.

15
6.6 Tipos de planos
O plano de filmagem o planea-
mento das aces que iro ser re-
alizadas durante as gravaes de
filmes ou vdeos. Este planeamento
feito pelo realizador da produo.
O principal objetivo destes planos
ter o mximo controlo dos vrios
elementos envolventes e tambm
para que os envolvidos tenham uma
noo de como as cenas vo acon-
tecer.
Plano conjunto ou geral
Mostra uma paisagem ou um
cenrio completo.
Plano mdio
Mostra um trecho de um ambiente,
em geral com pelo menos um per-
sonagem em quadro.
16
Grande plano
Mostra o rosto de um personagem.
Plano de detalhe
A cmara enquadra uma parte do
rosto ou do corpo (um olho, uma
mo, um p, etc.).
Plano de conjunto
Com um ngulo visual aberto, a c-
mara revela uma parte significativa
do cenrio sua frente. A figura
humana ocupa um espao relati-
vamente maior na tela. possvel
reconhecer os rostos das pessoas
mais prximas cmara.
Plano americano
A figura humana enquadrada do
joelho para cima.
Primeiro plano
A figura humana enquadrada do
peito para cima. Tambm pode
ser chamado de CLOSE-UP, ou
CLOSE.
ngulo normal
quando a imagem est ao nvel
dos olhos da pessoa que est a ser
filmada.

6.7 Movimentos de cmara
Estes movimentos so aes exe-
cutadas com uma cmara atravs
de mecanismos, como por exemplo
gruas, para modificar o enquadra-
mento de uma cena ou acompanhar
a ao das personagens de um filme
ou vdeo.
Panormica
um movimento executado por
uma cmara girando sobre si
prpria, para cima ou para baixo ou
para os lados.
Travelling Movimento no qual a
cmara se aproxima ou afasta dos
elementos de uma cena, de forma
linear, para os lados, para a frente,
para atrs ou para cima e para baixo.
Zoom a mudana de enquadra-
mento no decorrer de uma cena ma-
nipulando as lentes de uma cmara.
MANUAL DE DESIGN - COMUNICAO E MULTIMDIA
6.8 Erros de enquadramento No cinema as propores
mais comuns so:
Durante a captao de imagens at- 4:3 (1,33) Tambm pode ser
ravs de uma cmara podem-se dar chamada de janela clssica; esta pro-
vrios erros de enquadramento. Um poro mais usada nas televises e
erro habitual, que podemos ver em nos monitores de computador bem
entrevistas gravadas nos programas como no cinema, em filmes produz-
de televiso, por exemplo, quando idos por volta dos anos cinquenta.
um entrevistado fica de lado para 7:3 (2,35) Tambm conhecida
a cmara, ficando assim metade do por janela panormica, esta medida
visor vazio. uma imagem pobre e passou a ser utilizada no cinema a
errada, que nada diz ao telespetador.partir de 1950. um processo caro e
Este erro tem uma soluo extrema- que precisa de equipamento especial
mente simples, basta que o jornalis- tanto na gravao como na projeo.
ta se coloque sempre ao lado da 5:3 (1,66) Tem como nome alter-
cmara de filmar. O olhar da pessoa nativo janela europeia, tornou-se
deve estar sempre ao nvel da obje- medida padro do cinema europeu
tiva. Nunca se deve filmar um con- a partir dos anos sessenta.
vidado ou jornalista de cima para 13:5 (1,85) Chamada janela
baixo (ngulo picado), ou de baixo norte-americana por ter sido adota-
para cima (ngulo contrapicado). da pelas salas de cinema dos Estados
No caso de algum filmado de cima Unidos a partir de 1960, e usada at
para baixo estamos a dar uma im- hoje na maioria das produes.
agem do convidado de ser algum 16:9 (1,77) Esta a proporo usa-
diminudo. Se o convidado for fil- da na televiso de alta definio, foi
mado de baixo para cima estamos adoptada em 1980 e a partir de 2003
tambm a dar uma falsa imagem de comeou tambm a ser usada em
poder. O jornalista nunca deve sur- monitores de computador.
gir em plano prximo em qualquer
destas situaes devendo usar o pla-
no mdio. A posio do jornalista
deve ser ligeiramente diagonal, com 6.10 Foco
o cenrio em fundo. O telespeta-
dor fica, desta forma, com um en- o processo de ajustamento para
quadramento mais agradvel. dar mais nitidez ao objeto que tem
mais importncia. Foco geral-
6.9 Propores mente tomado como o centro de um
interesse ou de uma atividade e o
A proporo a relao ponto onde se concentram os raios
matemtica entre as duas dimenses luminosos que passam por uma su-
so as medidas, geralmente obtida perfcie transparente.
pela diviso entre as medidas da lar-
gura e da altura. Pode ser represen-
tada por um nmero com duas casas
decimais ou pela relao entre dois
nmeros inteiros. Estas propores
so utilizadas nos monitores de cin-
ema, de televiso, do computador,
na ortografia, etc..
17
7. Design Organizacional
7.1. Design de navegao

O design da navegao consiste, es-

sencialmente, na conceo dos per-
cursos que podem ser usados pelo
utilizador.
7.2. Estrutura de informa-
o

Estruturar a informao de uma

aplicao web evita falhas que po-
dem ocorrer na definio da arquite-
tura, enfraquecendo a aplicao web
e exigindo, mais tarde, um grande
esforo de remodelagem.

A ESTRUTURAO incorpora a
noo de partes interligadas de in-
formaes permitindo aos usurios
navegar atravs da rede resultante.

A INFORMAO fornecida no
s porque est estocada em cada n,
mas tambm porque os ns ligados 7.3. Navegabilidade 7.4 Interface
uns aos outros formam caminhos
por meio do qual se obtm infor- A navegao pode ter objetivos bem Dene a interface de utilizador que
mao. diferentes conforme o tipo do site. resulta da combinao dos conte-
Por outras palavras, website uma dos com os elementos interativos.
Quando uma rede de dados inter- categoria bastante ampla: existem
ligados contm grficos, som, tex- sites onde a navegao uma ferra- 7.5 Equipa
tos, vdeo, animao, a estrutura re- menta para chegar a um objetivo: a
sultante chamada de hipermdia. compra de um produto, por exem- Uma equipa um grupo de pessoas
O objetivo da estruturao ofere- plo. Noutros casos, a navegao o organizado para um determinado
cer informao suficiente para que prprio objetivo do site. servio ou para alcanar um obje-
os visitantes decidam facilmente tivo comum. Portanto, se tivermos
onde ir: mas no a ponto de ficarem O primeiro tipo, onde a funcionali- um trabalho para fazer e temos uma
sobrecarregados de informaes e dade manda, faz parte da categoria equipa de trs pessoas, por exemplo,
confusos, ou de serem levados para dos sites comerciais; a segunda, na devemos dividir pelos trs elemen-
onde no querem ir. qual o navegar faz parte do conte- tos da equipa os tpicos pedidos no
do, dos experimentais. Assim, a pri- trabalho.
Na FrontPage e pginas internas meira coisa a fazer perguntar: qual
fundamental equilibrar a quanti- o objetivo do meu site? Para que
dade de informao (opes dis- quero usar a navegao?
ponveis) aos visitantes.

18
7.6 Metodologias
MANUAL DE DESIGN - COMUNICAO E MULTIMDIA
Metodologia de Design poderia ser entendida como um processo esque-
matizado e apoiado em etapas distintas, com o objetivo de aperfeioar e
auxiliar o Designer (ou a equipe de Design) no desenvolvimento ou con-
ceo de solues para um determinado problema atravs de um artefac-
to (seja um produto ou um servio), oferecendo um suporte de mtodos,
tcnicas ou ferramentas.

7.7 Sistemas de Navegao:

Navegao global
Nos sites comerciais, onde a fcil localizao de produtos fundamen-
tal para a sua eficincia, h sempre algum elemento de navegao glob-
al, atravs do qual o usurio pode optar entre as grandes reas do site. A
navegao global, por ser responsvel pelas opes mais abrangentes do
usurio, esto presentes, em todo o site, justamente para possibilitar a sua
mobilidade.

Navegao local
A navegao local destina-se a permitir o aprofundamento num determi-
nado assunto ou rea do site. Assim, a navegao local um pente fino
feito a partir da escolha do usurio no mbito global. Ela funciona princi-
palmente para permitir a navegao dentro de uma rea previamente escol-
hida pela navegao global.

Navegao contextual
A navegao contextual geralmente feita a partir do prprio contedo
publicado. Os links colocados dentro de um texto permitem uma navega-
o contextual, j que permitem que o usurio expanda um certo conceito
mencionado pelo contedo.

19
8. Design do interface
O conceito de Interface amplo,
pode-se expressar pela presena de
uma ou mais ferramentas para o
uso e movimentao de qualquer
sistema de informaes, seja ele ma-
terial, seja ele virtual. O dicionrio
define interface como o conjunto
de meios planeadamente dispostos,
sejam eles fsicos ou lgicos, com
vista a fazer a adaptao entre dois
sistemas para se obter um certo fim
cujo resultado possui partes comuns
aos dois sistemas, ou seja, o objeto
final possui caractersticas dos dois
sistemas.
8.1 Mancha grfica e campo
visual
O objetivo do design de interface
de utilizador tornar a interao
desse mesmo utilizador o mais sim-
ples e eficiente possvel, em termos
de realizao dos seus objetivos - o
que normalmente chamado de
design centrado no utilizador. Um
bom design de interface de utiliza-
dor facilita a concluso da tarefa
manualmente sem chamar ateno
desnecessria para si.
20
8.2 Leitura do ecr
Uma outro aspeto necessrio e
complementar ao desenvolvimen-
to de interfaces de utilizador para
mltiplos dispositivos o modelo
arquitetural empregado. Durante
o desenvolvimento de sistemas, os
projetistas fazem uso de uma ar-
quitetura de software para estru-
turar o sistema em termos de seus
componentes (entidades computa-
cionais com funcionalidade espec-
fica).
8.3 Formatos de ficheiro
para www
HTML (abreviao para a expresso
inglesa HyperText Markup Lan-
guage, que significa Linguagem de
Marcao de Hipertexto) uma lin-
guagem de marcao utilizada para
produzir pginas na Web. Docu-
mentos HTML podem ser inter-
pretados por navegadores.
 MANUAL DE DESIGN - COMUNICAO E MULTIMDIA
9. Noes de Layout
9.1 Originalidade
Em informtica, layout ou inter-
face grfica do utilizador permite a
interao com dispositivos digitais
atravs de elementos grficos como
cones e outros indicadores visuais,
em contraste a interface de linha de
comando.
A interao feita geralmente
atravs de um rato (Mouse) ou um
teclado, com os quais o usurio ca-
paz de selecionar smbolos e manip-
ul-los de forma a obter algum re-
sultado prtico. Esses smbolos so
designados de widgets e so agrupa-
dos em kits.
Ambiente grfico um software
feito para facilitar e tornar prtica
a utilizao do computador atravs
de representaes visuais do sistema
operacional.
9.2 Formato da pgina
Propores das margens
A interface grfica do utilizador usa
uma combinao de tecnologias
e dispositivos para fornecer uma
plataforma com a qual o utilizador
pode interagir.
Em computadores pessoais, a com-
binao mais conhecida o WIMP,
que consiste de janelas, cones,
menus e ponteiros. Nesse sistema,
utiliza-se um dispositivo de pon-
teiro como o rato para controlar a
posio dum cursor e apresentar
informao organizada em janelas
e representada atravs de cones. Os
comandos disponveis so compila-
dos atravs de menus e acionados
atravs do dispositivo de ponteiro.
Dispositivos mveis como PDAs
e smartphones tambm usam el-
ementos do WIMP mas com outros
tipos de metforas, devido s limita-
es de recurso do prprio disposi-
tivo.
21
9.3 Formatos de ficheiro
para www

HTML (abreviao para a expresso

inglesa HyperText Markup Lan-
guage, que significa Linguagem de
Marcao de Hipertexto) uma lin-
guagem de marcao utilizada para
produzir pginas na Web. Docu-
mentos HTML podem ser inter-
pretados por navegadores.

22

9.4 Menu de navegao
O MENU PRIMRIO relativo
ao contedo de maior interesse ao
usurio. Mas a importncia tambm
relativa; o tipo de contedo linka-
do no Primrio de um site deve ser
do mesmo tipo que est linkado no
Secundrio (por exemplo, Informa-
es Gerais sobre a Empresa ou uma
Pessoa).
O MENU SECUNDRIO para
contedo que ser de menor inter-
esse ao usurio. Qualquer contedo
que no serve como objetivo prin-
cipal do site dever constar nesse
menu. Para vrios blogs, esse tra-
balho inclui links como Sobre Ns,
Contribua, Anuncie, e por a vai.
Para outros sites, os links devem
sugerir algo como uma rea para
clientes, com FAQ ou Ajuda.
MANUAL DE DESIGN - COMUNICAO E MULTIMDIA
9.5. rea de informao
Informao abrange vrios campos,
tais como ilustrao, fotografia, car-
tografia, design grfico, design in-
dustrial, arquitetura, psicologia ex-
perimental, entre outros.
Informao, em seu sentido amp-
lo, uma atividade relacionada
seleo, organizao e apresentao principal representao grfica da
de informao para uma determi-
nada audincia. Essa informao
pode ter origem em diversas fontes:
mapas climticos, tabelas de vos,
dados populacionais. O design da
informao implica a responsabil-
idade de transmisso de contedos
de modo preciso e neutro.
9.6 Logtipo
Logtipo refere-se forma particu-
lar como o nome da marca repre-
sentado graficamente, pela escolha
ou desenho de uma tipografia espe-
cfica. um dos elementos grficos
de composio de uma marca, algu-
mas vezes o nico, tornando-se a
mesma.
Logtipo uma assinatura institu-
cional, a representao grfica da
marca, por isso ela dever aparecer
em todas as peas grficas feitas para
a empresa. Assim, o logtipo serve
ao marketing do empreendimento.
O logtipo deve ser simples e objeti-
vo. Muitos detalhes, efeitos grficos
excessivos e grande quantidade de
cores tiram o objetivo do logtipo e
o torna difcil a sua perceo
23
9.7. Estrutura de
navegao
A estrutura do site, ou Arquitetu-
ra da informao, composta pelo
conjunto de informaes articula-
das atravs de links, em conexes
semnticas. Permite o deslocamen-
to dos utilizadores atravs das in-
formaes publicadas e a criao vante com o uso de animaes
de percepes nicas destas infor-
maes partir dos caminhos percor-
ridos.
A estrutura estabelecida para
atender s necessidades de ao e
informao dos usurios, de acordo
com os objetivos do site.
24
9.8 Animaes
Entendemos e sabemos que o
site com animaes em Flash,
usados de maneira apropriada
e sem exageros enriquece mui-
to o design do site. Mas, por
outro lado, existe outro agra-
em Flash que consiste no fato
da demora no carregamento
do contedo da animao em 9.9 Necessidade de feed-
Flash mesmo quando se tem back experimental, a avalia-
boas conexes de Internet. o
Os Designers devem realizar testes
de usabilidade nos seus layouts at-
ravs de levantamento de opinies
com questionrios. No esquecendo
a importncia para alguns tpicos
que o designer deve ter em ateno:
1. Antecipao, o web site deve ante-
cipar-se s necessidades do usurio;
2. Autonomia, os usurios devem
ter o controlo sobre o web site. Os
usurios sentem que controlam um
web site se conhecem sua situao
em um meio abrangente, mas no
infinito;
3. H que utilizar as cores com pre-
cauo para no dificultar o acesso
aos usurios com problemas de dis-
tino de cores (aprox. um 15% do
total);
4. Consistncia, as aplicaes de-
vem ser consistentes com as expeta-
tivas dos usurios, ou seja, com sua
aprendizagem prvia;
5. Eficincia do usurio, os web sites
devem centrar-se na produtividade
do usurio, no no prprio web site.
Por exemplo, s vezes as tarefas com
maior nmero de passos so mais
rpidas de realizar para uma pessoa
que outras tarefas com menos pas-
sos mas mais complexas.
MANUAL DE DESIGN - COMUNICAO E MULTIMDIA

25
 MANUAL DE

DESIGN
COMUNICAO
E MULTIMDIA
Curso: Tcnico de Multimdia
Mdulo: Design - Comunicao e Multimdia
Durao: 25 h
Formador: Mrio Calhau
26