Design de Comunicação e

Audiovisuais
UFCD 9957 Design de Multimédia

Núria Carriço
 1.

2.

3.

4.

SETEMBRO 2022 2
• Conceitos gerais de design e composição gráfica
• Ergonomia de ecrã
• Otimização de conteúdos para os diversos suportes
• Interface
• Design centrado no utilizador
• Layout
• Hierarquias visuais
• Importância da grelha
• Movimento e o ritmo na composição
• Consistência
• Equilíbrio
• Dimensões
• Tipologia
• Conceção de um produto multimédia

3
1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

4
Avaliação
diagnóstica
Jogo interativo na plataforma
digital Kahoot.pt

Podem usar o vosso telemóvel !

“Design é a visualização criativa e sistemática dos processos de interação e
das mensagens de diferentes atores sociais; é a visualização criativa e
sistemática das diferentes funções de objetos de uso e sua adequação às
necessidades dos usuários ou aos efeitos sobre os recetores”.

Beat Schneider, “Design – Uma Introdução. O design no contexto social, cultural e econômico” (2010), página 197

Por outras palavras, é a melhoria dos aspetos funcionais, ergonômicos e visuais do

produto, de modo a atender às necessidades do consumidor, melhorando o conforto, a
segurança e a satisfação dos usuários. As principais áreas do design resultam de três
grandes campos: o gráfico, o digital e o industrial.

6
Atividade 1
- Num documento em formato .odt
ou .docx, clarificar os diferentes
tipos de design, o seu conceito e
uma imagem ilustrativa.
- Devem submeter o trabalho na
plataforma Teams – Tarefa 1!

7
É a ação de organizar todos os elementos visuais presentes em uma arte que
ajudam a comunicar uma mensagem.

1. Elementos gráficos simples: pontos e linhas de todo tipo (livres, retas,

quebradas curvas, etc.)
2. Elementos geométricos, com ou sem contorno: polígonos, círculos, elipses,
ovais, etc.
3. Tipografia: letras de diferentes formas e estruturas utilizadas para apresentar
mensagens textuais.
4. Gráficos: logotipos, ícones, etc.
5. Ilustrações e imagens

8
 A ergonomia é a ciência que se dedica ao estudo e desenvolvimento de soluções
para promover o bem estar das pessoas.

Princípios do Design Universal

A ideia é facilitar o uso de todos os espaços, produtos e objetos por todos, independentemente da
idade, habilidade ou limitação física.
• Uso igualitário
• Flexibilidade de uso
• Uso simples e intuitivo
• Clareza das informações
• Tolerância ao erro
• Dimensionamento e espaço adequados ao uso de todos

9
- Realizar um flyer, de um evento à
escolha, na plataforma digital
Canva.com, tendo em conta a
composição gráfica e a
ergonomia.
- Submeter o trabalho em formato
.JPEG ou .PNG na plataforma
Teams – Tarefa 2!

10
Entenda-se por Design Centrado no Utilizador, uma abordagem de projeto, no qual
o processo é baseado na informação obtida através das pessoas que irão utilizar o
produto em causa.

1. Quem é meu utilizador? Descobrir o tipo de pessoas que usarão o produto e,

mais importante, qual é o objetivo.
2. Quais são os problemas dos meus utilizadores? Estes são os problemas
enfrentados que o produto e design ajudaram a resolver direta e indiretamente.
3. O que eles são? Como os utilizadores vão interagir com o seu design até as
emoções que irão sentir.

11
• Melhora a experiência dos utilizadores com os produtos e serviços da empresa;
• Agrega qualidade ao que é produzido, observando o feedback e a perceção dos
utilizadores;
• Melhora o foco e a produtividade, evitando trabalhos sem direcionamentos;
• Aumenta a receita e reduzir custos, por consequência da criação de produtos e
serviços melhores;
• Melhora a usabilidade de um software e suas ferramentas, possibilitando gerar mais
valor à empresa.

12
A Interface é o termo usado para descrever o modo como ocorre a comunicação
entre duas partes diferentes que não estão diretamente conectadas.
A relação entre a navegação e layout em medias digitais forma a identidade
visual e funcional da interface. O layout facilita a compreensão das
funcionalidades, o conteúdo e as tarefas mais importantes em relação às menos
importantes. A harmonia do conjunto, a composição dos elementos, as cores, têm
papel importante nesta diferenciação.

13
 - Escolher um website/app e
analisar o seu design, interface e
layout. Evidenciar aspetos
negativos e aspetos positivos
centrando na vossa experiência
como utilizador.
- Submeter o trabalho em formato
.DOCX ou .ODT na plataforma
Teams – Tarefa 3!

01/03/20XX TEXTO DE RODAPÉ DE EXEMPLO 14

Padrões de visualização de páginas
Todas as culturas leem de cima para baixo e a maioria da esquerda para a direita. Além desta informação influenciar a
criação de um design, estudos recentes mostram que as pessoas primeiro verificam o produto por completo antes de
começar a ler. Os padrões de visualização tendem a ter duas formas a “F” e a “Z”.

Os padrões “F” são aplicados a páginas mais pesadas, com texto longos, como artigos ou posts de blogs. O leitor
verifica o lado esquerdo da página, a procura de palavras-chave interessantes em títulos. Para utilizar este princípio no
design, alinhe a informação importante a esquerda e utilize títulos curtos e em bold.

Os padrões “Z” são aplicados para outros tipos de páginas como anúncios ou sites onde a informação não é
necessariamente apresentada em blocos de parágrafos.

15
Sobre o tamanho: é a regra mais simples e direta possível (as pessoas leem as coisas
grandes primeiro).
O tamanho, principalmente para textos, é uma ferramenta poderosa na medida em que
contorna as regras tradicionais de leitura da esquerda para direita e de cima para baixo. Isso
significa que uma palavra grande ou frase, pode estar no canto inferior direito e ser a
primeira coisa que uma pessoa lê. Além disso, o tamanho pode dar ênfase à mensagem ou
conteúdo, tornando-o mais significativo.

16
Espaço e Textura

Uma outra forma de chamar a atenção é dar ao conteúdo um espaço amplo de respiro.
O espaçamento pode ser uma alternativa elegante ou ainda um adicional ao uso dos grandes
tamanhos na criação de um website. Reduzir o ruído visual irá criar pontos mais claros de
evidência para a sua criação.

A textura refere-se ao arranjo total ou padrão de espaço, texto e outros detalhes da criação de um
design.

17
A cor
Cores brilhantes destacam-se de cores suaves ou tons de cinza. Certas cores podem ajudar a
definir o clima do site (azuis são tranquilos, vermelhos mais agressivos).

A direção
Os layouts das páginas são tipicamente desenhados de acordo com grids (grelhas) verticais e
horizontais, tanto por convenção, quanto por serem os formatos mais legíveis. Neste sistema, uma
nova forma de hierarquia emerge: quebrar o grids existentes. Textos posicionados em curvas ou
diagonais, irão automaticamente destacar-se. Esta tem sido uma estratégia eficaz em anúncios e
também em websites.

18
- Criar uma imagem de capa para a
página do Facebook do
Agrupamento de Escolas da
Azambuja.
- Submeter o ficheiro em formato
.JPEG ou .PNG na tarefa 4.

19
Fundamentos da linguagem visual
 Qual dos seguintes
quadrados é mais dinâmico?
- Vamos começar a desenvolver o nosso produto
multimédia – Revista Digital
1. Tema da Revista
2. Público-alvo da Revista
3. Capa da Revista

Vamos aprender a mexer no Adobe Indesign!

Visita https://divergente.pt/

40
Uma revista digital é hoje em dia o suporte mais versátil de
comunicação.

Alia o formato com visual tradicional de revista em papel, ao

ambiente digital.

Economicamente mais viável, adaptada a dispositivos móveis e de

fácil atualização e distribuição.

Quais as vantagens?
✓ É um interface com alguma ligação visual ao tradicional formato
de revista;
✓ Pode ser implementado em ligação com o seu site ou
isoladamente;
•NEWSLETTERS | para clientes ou parceiros
•CATÁLOGOS | produtos ou serviços
•NOVIDADES | Folhetos de lançamento de serviços
•JORNAIS | De escolas, clubes, associações,...
•FICHAS | especificações técnicas de produtos
•RELATÓRIOS | de eventos, reuniões, projetos,...
A capa da Revista
Bom design visual da mensagem

O impacto de uma mensagem não depende apenas de palavras escritas.

É necessário a consistência , ou a conformidade, dos seguintes elementos:

margens, tipo de letra, estilo de tipo, cores, etc.

Letras Diferentes e 𝓑𝓸𝓷𝓲𝓽𝓪𝓼 | invertexto.com

45
1 – Definir no máximo 2 famílias tipográficas diferentes.
2 – Não utilizar mais do que 6 tamanhos diferentes de tipos.
3 – Criar um guia de estilo com as cores e os tons que serão usados
no projeto.
4 – Definir um grid para o seu site ( exemplo: regra dos terços )
5 – Utilizar a mesma distância entre elementos e seções.
6 – Se os elementos possuem bordas arredondadas, utiliza sempre
o mesmo arredondamento.
7 – Manter as larguras das bordas consistentes. A diferença de 1px
pode estragar o projeto.
8 – Utilizar ícones de uma mesma família, criados pelo mesmo
ilustrador ou que seguem as mesmas regras.

46
O uso de equilíbrio , ou distribuição de texto e elementos gráficos
uniformemente para criar uma aparência atraente (colunas e grelhas).

47
Hipertexto é um texto de formato
digital que reúne um conjunto de
conhecimentos na forma de textos,
páginas, palavras, imagens, sons,
gráficos ou partes de gráficos que
estão conectados pelas ligações,
designadas por hiperlinks ou links.

ThingLink: Crie experiências únicas com

imagens interativas, vídeos e mídia em
360 graus
Mapme - The map builder for every
need. No coding needed.

48
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 informação
possa ser representada, armazenada, transmitida e processada sob a forma digital,
em que existe pelo menos um tipo de media estático (texto, gráficos ou imagens) e
um tipo de media dinâmico (vídeo, áudio ou animação).

49
50
Media capturados do mundo real - imagens, vídeo e áudio;

Media sintetizados por computador - texto, gráficos e animação.

Media estáticos - texto, imagens e gráficos; constituídos por elementos de informação

independentes do tempo

Media dinâmicos - áudio, vídeo e animação; exigem uma reprodução contínua ao longo do
tempo - o tempo faz parte da sua semântica.

Vídeo digital - imagens em movimento.

Animação - gráficos em movimento.

51
 Interatividade é a característica dos sistemas multimédia que permite ao utilizador
final controlar como e quando os elementos da informação são apresentados. É a
única característica que não é obrigatória para que um sistema possa ser designado
por multimédia. É uma característica bastante frequente, mas nem todos os sistemas
multimédia são interativos.

52
Aplicação multimédia - designa o programa, ou a aplicação informática, que controla a
apresentação dos conteúdos de vários tipos de media ao utilizador final, istro é, o
software que realiza a reprodução das combinações de media (apresentação multimédia).

Exemplos de aplicações multimédia: Livros eletrónicos; quiosques multimédia; jogos

interativos; educação; formação; televisão interativa; realidade virtual; projetos de
aplicações; ferramentas de autoria; tecnologias interativas para a criação de interfaces e
da navegação.

53
• Ficha de avaliação
• Projeto Revista Digital

54