MANUAL DE DESIGN - COMUNICAÇÃO E MULTIMÉDIA
MANUAL DE
DESIGN COMUNICAÇÃO E MULTIMÉDIA Curso: Técnico Técnico de Multimédia Módulo: Design - Comunicação e Multimédia Duração: 25 h Formador: Mário Calhau Formador - Paulo Sousa
1
Índice 1.
Elementos gráficos para Multimédia
1.1. 1.2. 1.3. 1.4. 1.5. 1.6. 1.7 1.8.
Multimédia Definição de design Definição de design gráfico Definição de multimédia Conceito de memória descritiva Conceito e importância de público-alvo Conceito de logótipo Bitmap versus vetorial
2.
Processo de comunicação
2.1. 2.2. 2.3. 2.4.
O processo cíclico de comunicação Intererências Intererê ncias mediáticas Fonte de inormação Suporte de comunicação
3.
Metodologia processual
3.1. 3.2. 3.3. 3.4. 3.5.
Fases de um projeto Importância de briefing Fontes de investigação Metodologia projetual Métodos
4.
Paginação
4.1. 4.2. 4.3. 4.4. 4.5.
Regras de paginação Alinhamentos Texto em maiúsculas e minúsculas Tamanho de ontes adequado Entrelinhamento
2
5. 5 5 5 5 5 5 5 5
6 6 6 6
7 7 8 8 8
9 9 9 10 10
Natureza Natur eza plástica da cor
5.1. Fisiologia da cor 5.2. Cor versus atenção, iluminação e tempo de visualização 5.3. Síntese aditiva e síntese subtrativa 5.4. RGB versus CMYK 5.5. Cores complementar complementares es 5.6. Harmonia entre as cores
6.
Estrutura do ritmo visual
6.1. 6.2. 6.3. 6.4. 6.5. 6.6. 6.7. 6.8. 6.9. 6.10.
Formas Plano Equilíbrio e desequilíbrio Guião de vídeo e áudio Storyboard Tipos de planos Movimentos Movimen tos de câmara Erros de enquadramento Proporções Foco
11 11 11 12 12 12
14 14 14 14 15 16 17 17 17 17
MANUAL DE DESIGN - COMUNICAÇÃO E MULTIMÉDIA
7.
Design organizacional
7.1. 7.2. 7.3. 7.4 7.5. 7.6. 7.7. 7.8.
Design de navegação Estrutura de inormação Navegabilidade Interace Equipa Metodologias Métodos Sistemas de navegação
8.
Design do interface
8.1. 8.2. 8.3. 8.4.
Mancha gráfica e campo visual Leitura do ecrã Como gerir animações Formatos de ficheiro para www
9.
Noções de layout
9.1. 9.2. 9.4 9.5 9.6. 9.7. 9.8 iação
Originalidade Formato da página Menu de navegação Área de inormação Logótipo Estrutura de navegação Necessidade de eedback experimental, a aval-
18 18 18 18 18 19 19 19
20 20 20 20
21 21 23 23 23 24 24
3
4
1.MULTIMÉDIA
MANUAL DE DESIGN - COMUNICAÇÃO E MULTIMÉDIA
1.1 DESIGN
1.5 MULTIMÉDIA
É uma atividade de projeto responsável pelo planeamento, criação e desenvolvimento de produtos e serviços. É um processo que busca soluções criativas e inovadoras para atender às características dos produtos, às necessidades do cliente e da empresa de orma sintonizada com as demandas e oportunidades do mercado.
A palavra multimédia designa a combinação, controlada por computador, de texto, gráficos, imagens, vídeo, áudio, animação e qualquer outro meio pelo qual a inormação possa ser representada, armazenada, transmitida e processada sob a orma digital, em que existe pelo menos um tipo de média estático (imagem, texto ou gráficos) e um tipo de média dinâmico (vídeo, áudio ou animação).
1.2 DESIGNER É o criador, quem az o design. Ele avalia e combina técnicas, métodos, materiais, tecnologias, processos produtivos, custos, normas técnicas e legais, para atender a todos os requerimentos do projeto de orma compatível com o investimento e necessidades do cliente. Pode desenvolver a sua atividade como contratado, dentro da empresa, em escritórios próprios ou atuar como reelancer em intervenções pontuais e isoladas.
1.6 MEMÓRIA DESCRITIVA Documento que acompanha um projeto e descreve o seu conceito, características, componentes, acessórios, detalhes construtivos, materiais, custos e outros tópicos pertinentes à sua compreensão e implantação.
1.7 PÚBLICO-ALVO
Público-alvo, também chamado de Prospect ou Target, é o grupo de pessoas que escolhidas como clientes/ destinatários principais, são aquelas pessoas para quem direcionamos a nossa prática e as ações de comunica1.3 DESIGN GRÁFICO ção e marketing. O público-alvo pode ser definido peÉ o campo do design que compreende todos os atores- los seguintes critérios: aixa etária, habilitações, região, chave para a criação e consolidação da imagem de uma classe social, poder de compra, comportamento ou empresa e o estabelecimento de uma adequada comuni- preerências. cação com o seu público. Engloba os elementos visuais como as marcas, embalagens, sinalização, revistas, im- 1.8 LOGÓTIPO pressos promocionais e sites. Um logótipo é uma marca gráfica ou símbolo que visa 1.4 WEB DESIGNER representar de orma inequívoca e única empresas, organizações, indivíduos, produtos ou serviços, por orma É o profissional competente para a elaboração do pro- a acilitar o seu reconhecimento por parte de terceiros jeto estético e uncional e um (o seu público-alvo). web site. Para o desenvolvimento de websites esse profissional deve ter a compreensão da aplicação em media 1.9 BITMAP VS VECTORIAL eletrónica de disciplinas como: Teoria das cores, Tipografia, Arquitetura de inormação, Semiótica, Usabili- As imagens Bitmap são compostas por pixeis, pequenos dade, e Conhecimento de Linguagens de Estruturação pontos que ormam a imagem. Ao contrário do ore Formatação de Documentos em hiper texto como mato Bitmap temos o ormato vectorial ormado por elXHTML (Extensible Hypertext Markup Language) e ementos geometricos e quando a imagem é aumentada CSS(Cascade Style Sheet ). Para a aplicação desse con- nunca perde qualidade. hecimento, de orma geral, o web designer recorre a sofwares de tratamento e edição de imagens, desenho e codificadores. 5
2. Processo de Comunicação 2.1. O processo cíclico de comunicação O processo de Comunicação, ocorre quando o emissor (ou codificador) emite uma mensagem (ou sinal) ao receptor (ou decodificador), através de uma chamada, por exemplo, o teleone . O recetor interpretará a mensagem que pode ter chegado até ele com algum tipo de barreira (ruído, bloqueio, filtragem) e, a partir daí, dará o eedback ou resposta, completando o processo de comunicação.
c) movimentos da cabeça: tendem a reorçar e sincronizar a emissão de mensagens. d) postura e movimentos do corpo: os movimentos corporais podem ornecer pistas mais seguras do que a expressão acial para se detetar determinados estados emocionais. Por ex.: ineriores hierárquicos adotam posturas atenciosas e mais rígidas do que os seus superiores, que tendem a mostrar-se descontraídos. e) comportamentos não-verbais da voz: a entoação (qualidade, velocidade e ritmo da voz) revela-se importante no processo de comunicação. Uma voz calma geralmente transmite mensagens mais claras do que uma voz agitada. ) a aparência: a aparência de uma pessoa reflete normalmente o tipo de imagem que ela gostaria de passar. Através do vestuário, penteado, maquilhagem, objetos pessoais, postura, gestos, modo de alar, etc, as pessoas criam uma projeção de como são e de como gostariam de ser tratadas. As relações interpessoais serão menos tensas se a pessoa ornecer aos outros a sua projeção particular e se os outros respeitarem essa projeção.
2.3 Fonte de Informação As ontes são portadores de inormação. Podem ser pessoas, alando por si ou coletivamente, ou documentos 2.2 Interferências mediáticas escritos ou audiovisuais, por meio dos quais os jornalA comunicação verbal é plenamente voluntária; o com- istas tomam conhecimento de inormações, opiniões portamento não-verbal pode ser uma reação involun- ou dados e, também, verificam o rigor dos dados obtidos ou aerem a veracidade dos juízos de valor que lhes tária ou um ato comunicativo propositado. oram apresentados anteriormente. Alguns psicólogos (e.g. Armindo Freitas-Magalhães, 2007) afirmam que os sinais não-verbais têm as unções 2.4 Suporte de Comunicação específicas de regular e encadear as interações sociais e de expressar emoções e atitudes interpessoais: Os suportes de comunicação social são todas as teca) expressão acial: não é ácil avaliar as emoções de al- nologias de media, incluindo a internet, a televisão, os guém apenas a partir da sua expressão fisionómica. Por jornais e a rádio, que são usados para comunicação de vezes, os rostos transmitem espontaneamente os senti- massa. mentos, mas muitas pessoas tentam inibir a expressão emocional. b) movimento dos olhos: desempenha um papel muito importante na comunicação. Um olhar fixo pode ser entendido como prova de interesse, mas noutro contexto pode significar ameaça, provocação. Desviar os olhos quando o emissor ala é uma atitude que tanto pode transmitir a ideia de submissão como a de desinteresse. 6
MANUAL DE DESIGN - COMUNICAÇÃO E MULTIMÉDIA
3.Metodologia Processual 3.1 Fases de um projeto
1. Fase de INICIAÇÃO - É a ase onde “ damos partida” oficialmente ao projeto através do Termo de Abertura. Aqui, todos os envolvidos nesta ase reconhecem que um projeto ou ase deve começar e se comprometem para executá-lo. 2. Fase de PLANEAMENTO- É a ase responsável por detalhar tudo aquilo que será realizado pelo projeto, incluindo cronogramas, interdependências entre atividades, alocação de recursos envolvidos, análise de custos, etc., para que, no final dessa ase, ele esteja suficientemente detalhado para ser executado, sem dificuldades e imprevistos. Nesta ase, os planos auxiliares de comunicação, qualidade, riscos, suprimentos e recursos humanos também são desenvolvidos. 3 - Fase de EXECUÇÃO - É a ase que materializa tudo aquilo que oi planeado anteriormente. Qualquer erro cometido nas ases anteriores fica evidente durante este processo. Grande parte do orçamento e do esorço do projeto é consumida nessa ase. 4 - Fase de CONTROLE - É a ase que acontece paralelamente às de Planeamento e Execução. Tem como objetivo acompanhar e controlar aquilo que está sendo realizado pelo projeto, de modo a propor ações corretivas e preventivas, no menor espaço de tempo possível, após a deteção de anormalidade. O objetivo do controle é comparar a “Linha de Base”, levantada no início do projeto (Estado Inicial), o seu status real no momento (Estado Atual), com o status previsto pelo planeamento (Estado Desejado), tomando ações corretivas em caso de desvio. 5 - Fase de ENCERRAMENTO - É a ase quando a execução dos trabalhos é avaliada através de uma auditoria interna ou externa (terceiros), os livros e documentos do projeto são encerrados e todas as alhas ocorridas durante o projeto são discutidas e analisadas para que erros similares não ocorram em novos projetos e melhores estratégias são identificadas e selecionadas como “lições aprendidas”. Aqui, se ormaliza a aceitação do projeto ou ase e encerra-se de uma orma organizada, o projeto solicitado.
3.2
Importância de briefing
O briefing ou brífingue é um conjunto de inormações, uma coleta de dados passada numa reunião para o desenvolvimento de um trabalho, documento, sendo muito utilizadas em Administração, Relações Públicas e na Publicidade. O briefing deve criar um guião de ação para criar a solução que o cliente procura; é como mapear o problema, e com estas pistas, ter ideias para criar soluções O briefing é uma peça undamental para a elaboração de uma proposta de pesquisa de mercado. É um elemento chave para o planeamento de todas as etapas da pesquisa de acordo com as necessidades do cliente.
7
3.3. Fontes de investigação Podemos dizer que num processo de investigação o primeiro passo a ser dado é o da observação, pois a partir dela buscar-se-ão as respostas às perguntas como “por que tal enómeno ocorre?” ou “que relação este enómeno tem com aquele?”. Para estas perguntas, buscar-se-á ormular as possíveis respostas ou as denominadas hipóteses. Estas visam a busca de diversas inormações já conhecidas, sendo suposições testáveis e, a partir delas, são realizadas deduções, que prevêm o que pode acontecer caso estejam corretas. Desta orma, os testes experimentais e/ou novas observações são realizados para testar as hipóteses e averiguar se as deduções podem ser confirmadas ou reutadas. Assim, uma hipótese aceite, deverá ser divulgada a fim de auxiliar trabalhos posteriores de outros pesquisadores, através de publicações, apresentações em eventos, congressos e comunicações pessoais como esta. Convém, elencar que uma hipótese confirmada por inúmeras experimentações, irreutável num espaço temporal, poderá tornar-se uma teoria - conjunto de leis, conceitos e modelos - que busca explicar diversos enómenos. Entretanto, mesmo uma teoria bem consolidada, ainda é passível de mudança. Finalmente, a realização de novas observações e teorias aculta a possibilidade de novas descobertas, surgindo daí a imprescindivibilidade de uma pesquisa.
3.4
Metodologia projetual
O trabalho de projeto é um método particular de planificação, organização e realização de uma tarea. Embora esteja mais associado ao Projeto de Design, a metodologia do projeto e o seu método podem ser aplicados a muitas outras áreas do conhecimento onde se procura resolver um determinado problema. A metodologia projetual indica assim um caminho de passos em sequência, desde a definição do problema inicial até à solução final.
8
3.5 Métodos Existem diversos métodos de projeto, mas todos seguem uma estrutura básica: 1. Observação e análise: Definição do problema, pesquisa, definição de objetivos e restrições; 2. Planear e projetar: geração de opções de projeto, escolha de opção de projeto, desenvolvimento, aprimoramento, detalhamento; 3. Construir e executar: protótipo; produção
MANUAL DE DESIGN - COMUNICAÇÃO E MULTIMÉDIA
4. Paginação
4.3 Texto em maiúsculas e minúsculas
4.1 Regras de paginação
4.2 Alinhamento
Todas as olhas a partir da olha de rosto devem ser contadas, porém não numeradas. A numeração deve ser indicada a partir da INTRODUÇÃO, que poderá ser, por exemplo 5, se oram utilizadas quatro olhas anteriormente, em algarismos arábicos no canto superior direito da olha, a 2cm da borda superior, ficando o último algarismo a 2cm da borda direita da olha. Havendo anexos, apêndices ou glossário, as páginas devem ser numeradas, dando sequência à numeração do texto principal.
Podemos assumir que um Tipo de letra bem desenhado tem um espaçamento entre letras natural ou normal, que se encontra inserido no próprio design da letra. Este espaçamento normal é provavelmente o ideal para a grande maioria dos textos, em particular quando estes são alinhados á esquerda ou à direita. Quando os textos são alinhados a ambos os lados, ou seja justificados, os espaços entre letras e entre palavras tendem a aumentar, e neste caso deve-se reduzir um pouco o valor de kerning/tracking.
A letra minúscula inicial é usada nos seguintes casos: 01) Nos nomes dos dias: segundaeira; 02) Nos usos de ulano, sicrano, beltrano. 03) Nos pontos cardeais (mas não nas suas abreviaturas): norte (N), sul (S), leste (L ou E), oeste (O ou W) 04) Nas ormas corteses de tratamento e títulos honoríficos: O senhor doutor João Bento, O bacharel Cláudio Abujanra, O cardeal João de Arruda. A letra maiúscula inicial é usada: 01) Nos nomes de pessoas, reais ou fictícios, ou de seres mitológicos: Pedro Marques; Branca de Neve; D. Quixote; Neptuno. 02) Nos nomes próprios de lugares, reais ou fictícios:Lisboa, Luanda, Maputo, Rio de Janeiro, Londrina; Atlântida. 03) Nos nomes que designam instituições: Instituto Português da Metereologia. 04) Nos nomes de estas e estividades: Natal, Páscoa, Ramadão, Todos os Santos. 05) Nos títulos de jornais, revistas e publicações periódicas, que de vem ser escritos em itálico: Folha de Londrina, O Estado de São Paulo, Gazeta do Povo, Zero Hora. 06) Nos nomes dos pontos cardeais ou equivalentes, quando empregados absolutamente. 07) Em siglas, símbolos ou abreviaturas internacionais ou nacionais, com maiúsculas iniciais ou mediais ou finais ou o todo em maiúsculas: FAO, ONU; H2O, Sr., V. Exª. 9
4.4 Tamanho de fontes adequado O tamanho das ontes varia conorme o tipo de apresentação, por exemplo, numa apresentação de slides será mais adequado o uso de um tipo de letra maior de orma a acilitar a sua leitura por parte de quem a visualiza.
4.5
Entrelinhamento
O terceiro elemento que terá de estar em harmonia com o espaçamento entre letras e entre palavras, o espaço 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 espaço entre as linhas nunca deve ser menor do que o espaço entre as palavras, porque se tal acontecer, o olho do leitor tem tendência a cair através do espaço entre as palavras das linhas seguintes. As variantes negra (bold), e extra-negra, (heavy) requerem por vezes mais entrelinha e espaço entre palavras do que a versão regular. Como regra geral, poderemos dizer que de orma a maximizar a acilidade de leitura do texto corrido se usa geralmente dois a quatro pontos de entrelinha para além do corpo do texto.
10
MANUAL DE DESIGN - COMUNICAÇÃO E MULTIMÉDIA
5. Natureza Plástica da Cor 5.1. Fisiologia da cor Há a crença de que as cores teriam dierentes eeitos psicológicos sobre as pessoas, embora isso seja extremamente duvidável conorme a comunidade científica. Os supostos eeitos seriam: •
Vermelho é paixão, entusiasmo, encontro
entre pessoas. Estimula ações agressivas; •
Amarelo é concentração, disciplina, co-
municação, ativa o intelecto. Está associado a positivismo e a boa sorte; •
Laranja é equilíbrio, generosidade, entu-
siasmo, alegria. Alem de ser atraente e aconchegante; •
5.2. Cor versus atenção, iluminação e tempo de visualização Algumas evidências científicas sugerem que a luz de di versas cores, que entra pelos olhos, pode aetar diretamente o centro das emoções. Cada um de nós responde à cor de uma orma particular. As pessoas tendem também a ser atraídas por certas cores, em virtude de alguns atores determinantes. A sua escolha pode ser baseada no seu tipo de personalidade, nas condições circunstanciais de sua vida ou no seus desejos e processos mentais mais íntimos, proundos e até inconscientes. As pessoas não escolhem necessariamente uma cor porque ela é boa para si próprias, mas porque gostam da cor, mesmo que esta possa ser contrária às suas necessidades. Existem muitos testes psicológicos,que oram desen volvidos para nos ajudar a conhecer mais sobre nós próprios, por meio do poder da cor.
Verde é esperança, abundância, cura. Es-
timula momentos de paz e equilíbrio. É a cor da revelação; •
Azul é puricação, expulsa energias neg-
ativas. Favorece a amabilidade, a paciência a serenidade. Estimula a busca da verdade interior; •
Lilás é a cor que tem mais inuência em
emoções e humores. Também está ligada a intuição e a espiritualidade; •
Branco é puricador e transformador.
Representa a pereição e o amor divino. Estimula a imaginação e a humildade. Produz a sensação de limpeza e claridade, alem de rieza e esterilidade; •
5.3
Síntese aditiva e síntese subtrativa
Síntese aditiva da cor. Quando trabalhamos num computador, as cores do ecrã são criadas com luz usando o método de síntese aditiva. A mistura de cores aditvas começa com o negro e quanto mais cores se adicionam,mais tende para o branco.
Preto, pode ser representado como uma
capa de aço, onde aquilo que está dentro não sai Sintese subtrativa. Inverso da composição da luz num prisma. Cor luz. e aquilo que está ora não entra. 11
5.4
RGB versus CMYK
Os padrões CMYK e RGB são padrões de cor utilizados em design de projetos, na criação de materiais gráficos, webdesign, material destinado a publicidade impressa, e uma infinidade de outras situações. Qual a dierença entre estes padrões? CMYK corresponde às iniciais das cores Cian (ciano), Magenta (magenta), Yellow (amarelo) and Black (preto). Este é um padrão de quatro cores primárias, que combinadas ormam cores ilimitadas. O padrão CMYK é mais usado para impressão em papel, onde 4 cores de tinta geram uma qualidade final melhor do que apenas 3. RGB corresponde às iniciais das 3 cores Red (vermelho), Green (verde) e Blue (azul). Este padão é utilizado para exibição em monitores de computador e televi- 5.5 Cores complementares sores em geral. São cores opostas na roda de cores, por exemplo: verDevido a esta dierença de padrão é que uma mesma melho e verde. imagem vista no monitor apresenta leves alterações O alto contraste entre elas cria um visual vibrante. na tonalidade das cores ao ser impressa. Alguns programas gráficos como o Corel Draw incorporam filtros, 5.6 Harminia e as Cores que tentam mostrar no monitor a imagem exatamente como será impressa.
Esquema monocromático
Ao criar o design para um ormato é preciso ter em mente qual o suporte será utilizado. No caso de imagens para web o padrão adotado deve ser o RGB, enquanto que, em se tratando de materiais impressos, deve-se utilizar o padrão CMYK ou outro de acordo com especificações técnicas do projeto adotado pelo designer. Harmonia de valores
12
MANUAL DE DESIGN - COMUNICAÇÃO E MULTIMÉDIA
5.7 Legibilidade
A Legibilidade não é mais do que a junção de cores, para destacar texto de modo a permitir a sua ácil leitura. No exemplo acima podemos observar que o texto vermelho salta, enquanto o texto amarelo é dificil de ler sobre um undo branco.
13
6. Estrutura do ritmo visual Ritmo vem do grego “Rhytmos” e designa aquilo que flui, que se move, movimento regulado. Ritmo está ligado a tempo e perceção. É o modo de organizar as estruturas repetidas na composição.
6.1 Formas A orma é a harmonia, a mistura, dos elementos visuais que nos dão as dierenças entre um polvo e um cavalo ou entre uma pêra e uma banana.
6.2 Plano O plano é caracterizado por duas dimensões: comprimento e largura. Tem uma área mas os seus limites não estão definidos, tendo todos os pontos que o constituem na mesma superície.
6.3 Equilíbrio Uma composição equilibrada, significa que há uma harmonia visual entre os elementos que a constituem. O equilíbrio pode ser obtido através da simetria ou do peso visual.
14
6.4 Guião de vídeo e áudio Se um vídeo vai incluir áudio, este deverá ser trabalhado na ase do storyboard. Geralmente, o guião de áudio vai determinar a sequência temporal do vídeo. Para que um vídeo tenha um aspecto mais profissional, o timing do áudio e do vídeo deve encaixar pereitamente, As formas estão contidas sem que seja necessário nas mensagens que nos acrescentar esperas em nechegam visualmente. nhum deles. Uma boa técnica para uma produção simples, passa pela construção da pista de áudio em primeiro lugar, para que esta possa estabelecer o timing do vídeo.
Durante a produção há uma maior flexibilidade para controlar o timing do vídeo do que do áudio, mas se não or possível encaixar o vídeo, poderá ser necessário reescrever o guião do áudio. Claro que quando são necessárias cenas com áudio sincronizado, como uma pessoa a alar, o áudio e o vídeo terão que ser produzidos ao mesmo tempo. Em relação ao vídeo, quando se chega a um acordo em relação ao storyboard, o guião de vídeo pode começar a ser desen volvido. Este guião deve descrever as características de cada cena, quem aparecerá na câmara e o que irá azer. Com o guião de vídeo, começa-se a trabalhar nos tipos de planos: close-up ou wide e alterações no ângulo da câmara com pan, tilt, ou zoom. A manipulação da câmara é um dos pontos em que a experiência profissional vai aetar a qualidade da produção. O meio de suporte em que o vídeo final vai ser apresentado aecta significativamente a abordagem de uma produção. Existem grandes dierenças entre produções para o cinema, produções para a televisão e produções para o computador. Estas dierenças devem-se aos dierentes ambientes de visualização e às dierentes possibilidades técnicas de cada meio.
MANUAL DE DESIGN - COMUNICAÇÃO E MULTIMÉDIA
6.5 Storyboard Um storyboard tem como finalidade marcar as principais passagens de uma história que será contada num filme ou vídeo de uma orma mais próxima possível do resultado final. Depois de finalizado, os envolvidos no projeto percebem a sequência, o ritmo das cenas, o clima e a eficácia em transmitir a história. A semelhança com a banda desenhada dá-se pelo acto de o storyboard também ter uma história contada através de uma sequência de quadros e pelo acto de também se utilizarem recursos como ângulos e técnicas de composição de uma cena. No mercado audiovisual, o storyboard é utilizado, seja para desenhos animados, ou para uma produção cinematográfica, o recurso do storyboard é uma maneira relativamente ácil, simples e barata de um diretor ter uma ideia do aspecto final do produto.
15
6.6
Tipos de planos
Grande plano Mostra o rosto de um personagem.
O plano de filmagem é o planeamento das acções que irão ser realizadas durante as gravações de filmes ou vídeos. Este planeamento é eito pelo realizador da produção. O principal objetivo destes planos é ter o máximo controlo dos vários elementos envolventes e também para que os envolvidos tenham uma noção de como as cenas vão acontecer. Plano conjunto ou geral Mostra uma paisagem ou um cenário completo.
Plano de detalhe A câmara enquadra uma parte do rosto ou do corpo (um olho, uma mão, um pé, etc.).
Plano médio Mostra um trecho de um ambiente, em geral com pelo menos um personagem em quadro.
Plano de conjunto Com um ângulo visual aberto, a câmara revela uma parte significativa do cenário à sua rente. A figura humana ocupa um espaço relati vamente maior na tela. É possível reconhecer os rostos das pessoas mais próximas à câmara.
16
Plano americano A figura humana é enquadrada do joelho para cima.
Primeiro plano A figura humana é enquadrada do peito para cima. Também pode ser chamado de “CLOSE-UP, ou “CLOSE”.
Ângulo normal É quando a imagem está ao nível dos olhos da pessoa que está a ser filmada.
MANUAL DE DESIGN - COMUNICAÇÃO E MULTIMÉDIA
6.8 Erros de enquadramento
6.7 Movimentos de câmara Estes movimentos são ações executadas com uma câmara através de mecanismos, como por exemplo gruas, para modificar o enquadramento de uma cena ou acompanhar a ação das personagens de um filme ou vídeo. Panorâmica É um movimento executado por uma câmara girando sobre si própria, para cima ou para baixo ou para os lados. Travelling – Movimento no qual a câmara se aproxima ou aasta dos elementos de uma cena, de orma linear, para os lados, para a rente, para atrás ou para cima e para baixo. Zoom – É a mudança de enquadramento no decorrer de uma cena manipulando as lentes de uma câmara.
No cinema as proporções mais comuns são: 4:3 (1,33) – Também pode ser chamada de janela clássica; esta proporção é mais usada nas televisões e nos monitores de computador bem como no cinema, em filmes produzidos por volta dos anos cinquenta. 7:3 (2,35) – Também conhecida por janela panorâmica, esta medida passou a ser utilizada no cinema a partir de 1950. É um processo caro e que precisa de equipamento especial tanto na gravação como na projeção. 5:3 (1,66) – Tem como nome alternativo janela europeia, tornou-se medida padrão do cinema europeu a partir dos anos sessenta. 13:5 (1,85) – Chamada janela norte-americana por ter sido adotada pelas salas de cinema dos Estados Unidos a partir de 1960, e usada até hoje na maioria das produções. 16:9 (1,77) – Esta é a proporção usada na televisão de alta definição, oi adoptada em 1980 e a partir de 2003 começou também a ser usada em monitores de computador.
Durante a captação de imagens através de uma câmara podem-se dar vários erros de enquadramento. Um erro habitual, que podemos ver em entrevistas gravadas nos programas de televisão, por exemplo, quando um entrevistado fica de lado para a câmara, ficando assim metade do visor vazio. É uma imagem pobre e errada, que nada diz ao telespetador. Este erro tem uma solução extremamente simples, basta que o jornalista se coloque sempre ao lado da câmara de filmar. O olhar da pessoa deve estar sempre ao nível da objetiva. Nunca se deve filmar um con vidado ou jornalista de cima para baixo (ângulo picado), ou de baixo para cima (ângulo contrapicado). No caso de alguém filmado de cima para baixo estamos a dar uma imagem do convidado de ser alguém diminuído. Se o convidado or filmado de baixo para cima estamos também a dar uma alsa imagem de poder. O jornalista nunca deve surgir em plano próximo em qualquer destas situações devendo usar o plano médio. A posição do jornalista deve ser ligeiramente diagonal, com 6.10 Foco o cenário em undo. O telespetador fica, desta orma, com um en- É o processo de ajustamento para quadramento mais agradável. dar mais nitidez ao objeto que tem mais importância. Foco é geral6.9 Proporções mente tomado como o centro de um interesse ou de uma atividade e é o A proporção é a relação ponto onde se concentram os raios matemática entre as duas dimensões luminosos que passam por uma susão as medidas, geralmente obtida perície transparente. pela divisão entre as medidas da largura e da altura. Pode ser representada por um número com duas casas decimais ou pela relação entre dois números inteiros. Estas proporções são utilizadas nos monitores de cinema, de televisão, do computador, na ortografia, etc..
17
7. Design Organizacional 7.1. Design de navegação O design da navegação consiste, essencialmente, na conceção dos percursos que podem ser usados pelo utilizador.
7.2. Estrutura de informação Estruturar a inormação de uma aplicação web evita alhas que podem ocorrer na definição da arquitetura, enraquecendo a aplicação web e exigindo, mais tarde, um grande esorço de remodelagem. A ESTRUTURAÇÃO incorpora a noção de partes interligadas de inormações permitindo aos usuários navegar através da rede resultante. A INFORMAÇÃO é ornecida não só porque está estocada em cada nó, mas também porque os nós ligados 7.3. Navegabilidade uns aos outros ormam caminhos por meio do qual se obtém inor- A navegação pode ter objetivos bem dierentes conorme o tipo do site. mação. Por outras palavras, “website” é uma Quando uma rede de dados inter- categoria bastante ampla: existem ligados contém gráficos, som, tex- sites onde a navegação é uma erratos, vídeo, animação, a estrutura re- menta para chegar a um objetivo: a sultante é chamada de hipermédia. compra de um produto, por exemO objetivo da estruturação é oere- plo. Noutros casos, a navegação é o cer inormação suficiente para que próprio objetivo do site. os visitantes decidam acilmente onde ir: mas não a ponto de ficarem O primeiro tipo, onde a uncionalisobrecarregados de inormações e dade manda, az parte da categoria conusos, ou de serem levados para dos sites comerciais; a segunda, na qual o navegar az parte do conteúonde não querem ir. do, dos experimentais. Assim, a priNa FrontPage e páginas internas é meira coisa a azer é perguntar: qual undamental equilibrar a quanti- o objetivo do meu site? Para que dade de inormação (opções dis- quero usar a navegação? poníveis) aos visitantes. 18
7.4
Interface
De�ne a interace de utilizador que resulta da combinação dos conteúdos com os elementos interativos.
7.5
Equipa
Uma equipa é um grupo de pessoas organizado para um determinado serviço ou para alcançar um objetivo comum. Portanto, se tivermos um trabalho para azer e temos uma equipa de três pessoas, por exemplo, devemos dividir pelos três elementos da equipa os tópicos pedidos no trabalho.
MANUAL DE DESIGN - COMUNICAÇÃO E MULTIMÉDIA
7.6
Metodologias
Metodologia de Design poderia ser entendida como um processo esquematizado e apoiado em etapas distintas, com o objetivo de apereiçoar e auxiliar o Designer (ou a equipe de Design) no desenvolvimento ou conceção de soluções para um determinado problema através de um arteacto (seja um produto ou um serviço), oerecendo um suporte de métodos, técnicas ou erramentas.
7.7 Sistemas de Navegação: Navegação global Nos sites comerciais, onde a ácil localização de produtos é undamental para a sua eficiência, há sempre algum elemento de navegação global, através do qual o usuário pode optar entre as grandes áreas do site. A navegação global, por ser responsável pelas opções mais abrangentes do usuário, estão presentes, em todo o site, justamente para possibilitar a sua mobilidade. Navegação local A navegação local destina-se a permitir o aproundamento num determinado assunto ou área do site. Assim, a navegação local é um “pente fino” eito a partir da escolha do usuário no âmbito global. Ela unciona principalmente para permitir a navegação dentro de uma área previamente escolhida pela navegação global. Navegação contextual A navegação contextual geralmente é eita a partir do próprio conteúdo publicado. Os links colocados dentro de um texto permitem uma navegação contextual, já que permitem que o usuário expanda um certo conceito mencionado pelo conteúdo.
19
8. Design do interace
20
O conceito de Interace é amplo, pode-se expressar pela presença de uma ou mais erramentas para o uso e movimentação de qualquer sistema de inormações, seja ele material, seja ele virtual. O dicionário define interace como o conjunto de meios planeadamente dispostos, sejam eles ísicos ou lógicos, com vista a azer a adaptação entre dois sistemas para se obter um certo fim cujo resultado possui partes comuns aos dois sistemas, ou seja, o objeto final possui características dos dois sistemas.
8.2
Leitura do ecrã
8.1 Mancha gráfica e campo visual
8.3 Formatos de ficheiro para www
O objetivo do design de interace de utilizador é tornar a interação desse mesmo utilizador o mais simples e eficiente possível, em termos de realização dos seus objetivos - o que normalmente é chamado de design centrado no utilizador. Um bom design de interace de utilizador acilita a conclusão da tarea manualmente sem chamar atenção desnecessária para si.
HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.
Uma outro aspeto necessário e complementar ao desenvolvimento de interaces de utilizador para múltiplos dispositivos é o modelo arquitetural empregado. Durante o desenvolvimento de sistemas, os projetistas azem uso de uma arquitetura de sofware para estruturar o sistema em termos de seus componentes (entidades computacionais com uncionalidade específica).
9. Noções de Layout
9.1
MANUAL DE DESIGN - COMUNICAÇÃO E MULTIMÉDIA
Originalidade
Em inormática, layout ou interace gráfica do utilizador permite a interação com dispositivos digitais através de elementos gráficos como ícones e outros indicadores visuais, em contraste a interace de linha de comando. A interação é eita geralmente através de um rato (Mouse) ou um teclado, com os quais o usuário é capaz de selecionar símbolos e manipulá-los de orma a obter algum resultado prático. Esses símbolos são designados de widgets e são agrupados em kits. Ambiente gráfico é um sofware eito para acilitar e tornar prática a utilização do computador através de representações visuais do sistema operacional.
9.2 Formato da página Proporções das margens A interace gráfica do utilizador usa uma combinação de tecnologias e dispositivos para ornecer uma plataorma com a qual o utilizador pode interagir. Em computadores pessoais, a combinação mais conhecida é o WIMP, que consiste de janelas, ícones, menus e ponteiros. Nesse sistema, utiliza-se um dispositivo de ponteiro como o rato para controlar a posição dum cursor e apresentar inormação organizada em janelas e representada através de ícones. Os comandos disponíveis são compilados através de menus e acionados através do dispositivo de ponteiro. Dispositivos móveis como PDAs e smartphones também usam elementos do WIMP mas com outros tipos de metáoras, devido às limitações de recurso do próprio dispositivo. 21
9.3 Formatos de ficheiro para www HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.
22
MANUAL DE DESIGN - COMUNICAÇÃO E MULTIMÉDIA
9.4
Menu de navegação
O MENU PRIMÁRIO é relativo ao conteúdo de maior interesse ao usuário. Mas a importância também é relativa; o tipo de conteúdo linkado no Primário de um site deve ser do mesmo tipo que está linkado no Secundário (por exemplo, Inormações Gerais sobre a Empresa ou uma Pessoa). O MENU SECUNDÁRIO é para conteúdo que será de menor interesse ao usuário. Qualquer conteúdo que não serve como objetivo principal do site deverá constar nesse menu. Para vários blogs, esse trabalho inclui links como “Sobre Nós”, “Contribua”, “Anuncie”, e por aí vai. Para outros sites, os links devem sugerir algo como uma área para clientes, com “FAQ” ou “Ajuda”.
9.5. Área de informação
9.6
Logótipo
Inormação abrange vários campos, tais como ilustração, otografia, cartografia, design gráfico, design industrial, arquitetura, psicologia experimental, entre outros. Inormação, em seu sentido amplo, é uma atividade relacionada à seleção, organização e apresentação de inormação para uma determinada audiência. Essa inormação pode ter origem em diversas ontes: mapas climáticos, tabelas de vôos, dados populacionais. O design da inormação implica a responsabilidade de transmissão de conteúdos de modo preciso e neutro.
Logótipo reere-se à orma particular como o nome da marca é representado graficamente, pela escolha ou desenho de uma tipografia específica. É um dos elementos gráficos de composição de uma marca, algumas vezes é o único, tornando-se a principal representação gráfica da mesma. Logótipo é uma assinatura institucional, a representação gráfica da marca, por isso ela deverá aparecer em todas as peças gráficas eitas para a empresa. Assim, o logótipo serve ao marketing do empreendimento. O logótipo deve ser simples e objeti vo. Muitos detalhes, eeitos gráficos excessivos e grande quantidade de cores tiram o objetivo do logótipo e o torna diícil a sua perceção 23
9.7. Estrutura de navegação A estrutura do site, ou Arquitetura da inormação, é composta pelo conjunto de inormações articuladas através de links, em conexões semânticas. Permite o deslocamento dos utilizadores através das inormações publicadas e a criação de percepções únicas destas inormações partir dos caminhos percorridos. A estrutura é estabelecida para atender às necessidades de ação e inormação dos usuários, de acordo com os objetivos do site.
24
9.8 Animações Entendemos e sabemos que o site com animações em Flash, usados de maneira apropriada e sem exageros enriquece muito o design do site. Mas, por outro lado, existe outro agra vante com o uso de animações em Flash que consiste no ato da demora no carregamento do conteúdo da animação em 9.9 Necessidade de feedFlash mesmo quando se tem back experimental, a avaliação boas conexões de Internet. Os Designers devem realizar testes de usabilidade nos seus layouts através de levantamento de opiniões com questionários. Não esquecendo a importância para alguns tópicos que o designer deve ter em atenção: 1. Antecipação, o web site deve antecipar-se às necessidades do usuário; 2. Autonomia, os usuários devem ter o controlo sobre o web site. Os usuários sentem que controlam um web site se conhecem sua situação em um meio abrangente, mas não infinito; 3. Há que utilizar as cores com precaução para não dificultar o acesso aos usuários com problemas de distinção de cores (aprox. um 15% do total); 4. Consistência, as aplicações de vem ser consistentes com as expetativas dos usuários, ou seja, com sua aprendizagem prévia; 5. Eficiência do usuário, os web sites devem centrar-se na produtividade do usuário, não no próprio web site. Por exemplo, às vezes as tareas com maior número de passos são mais rápidas de realizar para uma pessoa que outras tareas com menos passos mas mais complexas.
MANUAL DE DESIGN - COMUNICAÇÃO E MULTIMÉDIA
25
MANUAL DE
DESIGN COMUNICAÇÃO E MULTIMÉDIA Curso: Técnico de Multimédia Módulo: Design - Comunicação e Multimédia Duração: 25 h Formador: Mário Calhau 26
