Apostila - Design e Multimídia

Prévia do material em texto

DESIGN E MULTIMÍDIA 
PROF. ME. VAGNER BASQUEROTO MARTINS
Reitor: 
Prof. Me. Ricardo Benedito de 
Oliveira
Pró-reitor: 
Prof. Me. Ney Stival
Gestão Educacional: 
Prof.a Ma. Daniela Ferreira Correa
PRODUÇÃO DE MATERIAIS
Diagramação:
Alan Michel Bariani
Thiago Bruno Peraro
Revisão Textual:
Gabriela de Castro Pereira
Letícia Toniete Izeppe Bisconcim 
Luana Ramos Rocha
Produção Audiovisual:
Heber Acuña Berger 
Leonardo Mateus Gusmão Lopes
Márcio Alexandre Júnior Lara
Gestão de Produção: 
Kamila Ayumi Costa Yoshimura
Fotos: 
Shutterstock
© Direitos reservados à UNINGÁ - Reprodução Proibida. - Rodovia PR 317 (Av. Morangueira), n° 6114
 Prezado (a) Acadêmico (a), bem-vindo 
(a) à UNINGÁ – Centro Universitário Ingá.
 Primeiramente, deixo uma frase de Só-
crates para reflexão: “a vida sem desafios não 
vale a pena ser vivida.”
 Cada um de nós tem uma grande res-
ponsabilidade sobre as escolhas que fazemos, 
e essas nos guiarão por toda a vida acadêmica 
e profissional, refletindo diretamente em nossa 
vida pessoal e em nossas relações com a socie-
dade. Hoje em dia, essa sociedade é exigente 
e busca por tecnologia, informação e conheci-
mento advindos de profissionais que possuam 
novas habilidades para liderança e sobrevivên-
cia no mercado de trabalho.
 De fato, a tecnologia e a comunicação 
têm nos aproximado cada vez mais de pessoas, 
diminuindo distâncias, rompendo fronteiras e 
nos proporcionando momentos inesquecíveis. 
Assim, a UNINGÁ se dispõe, através do Ensino 
a Distância, a proporcionar um ensino de quali-
dade, capaz de formar cidadãos integrantes de 
uma sociedade justa, preparados para o mer-
cado de trabalho, como planejadores e líderes 
atuantes.
 Que esta nova caminhada lhes traga 
muita experiência, conhecimento e sucesso. 
Prof. Me. Ricardo Benedito de Oliveira
REITOR
33WWW.UNINGA.BR
U N I D A D E
01
SUMÁRIO DA UNIDADE
INTRODUÇÃO ............................................................................................................................................................. 4
1 - MÍDIA .................................................................................................................................................................... 6
2 - MULTIMÍDIA ........................................................................................................................................................ 8
3 - HIPERMÍDIA ........................................................................................................................................................ 11
4 - DESIGN PARA MULTIMÍDIA .............................................................................................................................. 12
5 - HISTÓRICO E EVOLUÇÃO .................................................................................................................................. 14
6 - CONSIDERAÇÕES FINAIS .................................................................................................................................. 17
HIPERMÍDIA: CONCEITOS BÁSICOS
PROF. ME. VAGNER BASQUEROTO MARTINS
ENSINO A DISTÂNCIA
DISCIPLINA:
DESIGN E MULTIMÍDIA
4WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 1
ENSINO A DISTÂNCIA
INTRODUÇÃO
O conceito de hipermídia surgiu nos anos 1960, mas tem ganhado força nos últimos anos 
com o avanço da tecnologia e da internet. Trata-se de uma plataforma que integra vários tipos 
de mídia, como textos, áudios, vídeos, animações e grá� cos, ocorrendo a interação com estas 
informações, sem que a linearidade seja necessária, ou seja, o usuário pode navegar pelos dados 
como achar conveniente, sem precisar seguir um caminho pré-estabelecido.
O embrião da hipermídia é o hipertexto, que são referências dentro de documentos que 
remetem a outros, permitindo uma leitura contínua e não linear das informações. Na internet, 
são conhecidos como links, que quando clicados, nos levam de uma página a outra, por exemplo, 
quando está lendo algum verbete da Wikipédia – Enciclopédia online colaborativa.
Em 1945, surgiram ideias que remetiam ao conceito de hipermídia e, na década de 1960, 
Ted Nelson, � lósofo e sociólogo norte-americano, cunhou o termo usado até hoje. Desde então, a 
hipermídia vem evoluindo por meio da contribuição de diversos estudiosos e empresas.
A evolução da internet aumentou as possibilidades de aplicação da hipermídia e, hoje, 
não é necessário um programa especí� co para desenvolver ou utilizar conteúdos desse tipo — 
tudo pode ser feito por meio do navegador, de um jeito bem prático para o usuário. Isto levou 
à popularização da hipermídia, que tem se multiplicado nos últimos anos em diversos veículos.
A hipermídia passou também a ocupar outros espaços que antes eram exclusivos da 
mídia tradicional, como as televisões, os livros e as revistas. Isto só foi possível porque o avanço 
da tecnologia trouxe ao mercado as TVs inteligentes e seus aplicativos, a interatividade da TV 
digital, os leitores de livros eletrônicos (e-readers – aparelho para leitura e visualização de livro e 
revistas digitais) e os tablets – aparelho para visualização de conteúdos digitais diversi� cados – e 
smartphones – tradução para telefones inteligentes.
Ao pesquisar qualquer termo na Wikipédia, você poderá verifi car partes do texto 
destacadas geralmente na cor azul e sublinhado. Ao clicar em tais partes do texto, 
você automaticamente será encaminhado para outras páginas com informações 
diferentes do termo original e consecutivamente, até o momento em que não qui-
ser mais continuar sua pesquisa, ou período de navegação.
O termo navegar e navegador, é uma analogia aos termos usados em assuntos 
náuticos, especialmente relacionados aos oceanos pela quantidade de informa-
ções que existem, ou seja, um mar de informações, por onde é preciso navegar.
5WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 1
ENSINO A DISTÂNCIA
Atualmente, existem diversos conteúdos que são criados somente para canais 
como a internet, e também outros conteúdos que são retransmitidos simultanea-
mente para diversos canais, para que assim, possam atingir o maior público pos-
sível, otimizando dessa forma o material criado.
A hipermídia (Figura 01) possibilita conteúdos mais ricos e dinâmicos, mais interativos e 
que prendem a atenção nesta época em que há um turbilhão de informações por todos os lados. 
A possibilidade de explorar o conteúdo sem um roteiro pré-estabelecido torna a experiência mais 
pessoal e, ao agregar diversos tipos de mídia em um mesmo ambiente, o conteúdo se torna mais 
imersivo.
Figura 1 – Conceito de Hipermídia. Fonte: Portal Teraware (2016).
Além do entretenimento e da informação, materiais que utilizam o conceito de hipermídia 
tem também um grande potencial na área da educação: um conteúdo escolar mais divertido e 
múltiplo, aumenta o interesse dos alunos e melhora o processo de aprendizagem.
DESIGN MULTIMÍDIA (CHARLES ANGELO BOEIRA) 2015 - O livro contribui na com-
preensão gradativa dos conceitos e a aplicação de vários itens relacionados ao 
design multimídia. 
6WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 1
ENSINO A DISTÂNCIA
1 - MÍDIA 
Mídia consiste no conjunto dos diversos meios de comunicação, com a � nalidade de 
transmitir informações e conteúdos variados. O universo midiático abrange uma série de 
diferentes plataformas que agem como meios para disseminar as informações, como os jornais, 
revistas, a televisão, o rádio e a internet (Figura 2).
A mídia está intrinsecamente relacionada com o jornalismo, mas também com outras 
especialidades da comunicação social, como a publicidade e o design. A propaganda também se 
apropria dos meios midiáticos para atingir seus objetivos, visto que a mídia atinge e exerce uma 
enorme in� uência na vida dos indivíduos na contemporaneidade, assim como o design que a 
utiliza em diversos projetos.
Figura 2 – Conceito de mídias. Fonte: Eleitoronline (2018).
Na língua portuguesa, otermo “mídia” se originou a partir do inglês media, a versão 
simpli� cada de mass media, que consiste justamente na expressão utilizada para se referir aos 
meios de comunicação em massa.
O vídeo mostra a história de uma bailarina e sua relação 
com a mãe ou avó, com elementos de sofrimento e supe-
ração, no sentido de atrair o público para que se identifi que 
com as personagens e dessa forma, criem uma associação 
inconsciente do sucesso com o uso do shampoo. Dessa 
forma, fi ca evidenciado uma forma como a mídia usa de 
elementos de nosso cotidiano, ou seja, conta histórias para 
vender além de produtos, ideias relacionadas aos mesmos. 
Assista ao vídeo no link a seguir: 
https://www.youtube.com/watch?v=uW9hdOf9Esc
7WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 1
ENSINO A DISTÂNCIA
Porém, principalmente após o advento da internet, a mídia passa a ser mais heterogênea, 
pautando assuntos que não são de interesse exclusivo das grandes empresas de comunicação 
ligadas ao governo, por exemplo.
Com a chamada “mídia alternativa”, assuntos que outrora eram ignorados pelos mass 
media passam a ser discutidos nas plataformas online, principalmente através das redes sociais.
Atualmente, os comunicólogos dividem os tipos de mídia em duas principais categorias: 
analógico e digital/eletrônico. A principal diferença entre ambos os modelos é a possibilidade do 
feedback – retorno que usuários trazem com relação ao serviço ou produto utilizado, ou mesmo 
acerca da mensagem recebida – através da mídia digital, presente principalmente na internet e 
smart TVs – Televisão inteligente, com conexão à internet e possibilidade de navegação –, por 
exemplo.
Na mídia analógica (ou também conhecida como “mídia tradicional”), o processo de 
comunicação é unilateral, � cando o receptor incapacitado de responder ou interagir com a 
informação ou conteúdo que recebe.
A mídia digital se desenvolveu com o advento da internet, facilitando a troca de 
informações entre os produtores midiáticos e os receptores, além de possibilitar algo inédito 
e revolucionário na comunicação: a interação instantânea entre ambas as partes. Dessa forma, 
as redes sociais (também conhecidas por mídias sociais), como o Facebook, Twitter, Instagram 
e blogs, por exemplo, são, atualmente, os principais meios de comunicação digital existentes 
(Figura 03).
Figura 3 – Mídias Sociais. Fonte: BBMARKETING (2018)
O Youtube (https://www.youtube.com) é um bom exemplo de mídia digital, onde a 
interação e feedback é praticamente simultâneo, as pessoas podem escolher que 
tipo de conteúdo querem ver e assim, realizam a navegação não linear, indo de 
um conteúdo para outro, marcando se gostaram ou não, além da possibilidade de 
comunicação com os criadores do mesmo.
8WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 1
ENSINO A DISTÂNCIA
2 - MULTIMÍDIA 
Multimídia é um termo que provém da língua inglesa e que se refere àquilo que utiliza 
vários meios simultaneamente na transmissão de informações diversas. Uma apresentação 
multimídia, por conseguinte, pode incluir fotogra� as, vídeos, sons e texto (Figura 04).
Figura 4 – Conceito de multimídia. Fonte: Freepik (2018)
O conceito é aplicado a objetos e sistemas que recorrem a múltiplos meios físicos e/ou 
digitais para comunicar os seus conteúdos. O termo também é usado em referência aos meios em 
si que permitem armazenar e difundir conteúdos com estas características.
A comunicação multimídia facilita a compreensão e a aprendizagem, já que é bastante 
parecida com a comunicação humana direta (cara a cara). Em uma conversa, observamos o 
interlocutor (o que seria equivalente a um vídeo) ouvimo-lo (áudio) enquanto acompanhamos 
as suas palavras com gestos e movimentos corporais (animações).
Uma apresentação ou emissão multimídia pode realizar-se de forma direta (ao vivo) 
ou ser gravada. A difusão dos conteúdos, por outro lado, pode executar-se através da internet, 
projetar-se num ecrã (projetor) ou desenvolver-se em sala.
Neste exato momento, você está utilizando um conteúdo multimídia, que possi-
bilita a você, acesso ao conteúdo aqui proposta com diferentes canais e mídias, 
para que você tenha um tipo de capacitação.
9WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 1
ENSINO A DISTÂNCIA
Um curso de inglês a distância é um exemplo de informação multimídia (Figura 05). 
Online ou por meio de um CD-ROM ou DVD-ROM, uma vez que o estudante pode assistir os 
vídeos para se familiarizar com o idioma, escutar áudios para aprender a pronunciação, participar 
de jogos interativos com animações e ler textos com explicações sobre a gramática e a ortogra� a.
Figura 5 – Curso de inglês. Fonte: Freepik (2018)
As páginas web também podem apresentar trabalhos multimídia, com animações em 
Flash, vídeos inseridos no YouTube, música de fundo e material de leitura. Nestes casos, pode-se 
falar de multimídia interativa, pois é o utilizador quem decide como será feita a apresentação da 
informação e em que momento iniciá-la, bastando, para o efeito, clicar.
Para Nascimento (2006), o design multimídia deve ser consistente e agradável do ponto de 
vista estético, a � m de orientar e ganhar a atenção do usuário. As primeiras impressões têm uma 
grande in� uência na atitude de uma pessoa em relação a um objeto ou situação. Se os recursos 
e conteúdo conseguirem estimular a curiosidade da pessoa durante os primeiros momentos de 
contato, mais chances ocorreram de um real engajamento com relação ao conteúdo.
As novas mídias e tecnologias estão cada vez mais dominando o modo de ver e pensar o 
mundo na atualidade. É cada dia mais visível a absorção do conhecimento de qualidade que se 
faz através da Internet (Figura 06), de vídeos, programas/aplicativos, jogos digitais e as demais 
mídias existentes no mercado de tecnologias (NASCIMENTO, 2006, p. 1).
10WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 1
ENSINO A DISTÂNCIA
Figura 6 – Internet. Fonte: Freepik (2017)
Quando se pensa ambientes virtuais, é possível veri� car que a interação entre usuário e 
interface – é o nome dado para o modo como ocorre a comunicação entre duas partes distintas e 
que não podem se conectar diretamente. Exemplo: Sistema operacional de um equipamento – é 
decisiva no processo de entendimento dos signi� cados. Por isso, deve-se procurar compreender 
os critérios de usabilidade para utilização de interfaces grá� cas e os diversos focos que a 
usabilidade pode contemplar, são aspectos que devem ser considerados, pois levam em conta o 
grau de aceitação do usuário com o sistema e os aspectos facilitadores no processo de ensino-
aprendizagem. A interface diz respeito à superfície de contato do objeto, do sistema que irá 
interagir com o usuário. É através dela que você interage em um ambiente virtual (LOCH, 2006).
Dessa forma, pode-se dizer que a sociedade contemporânea, denominada, Sociedade 
da Informação está, segundo Takahashi (2000), baseada em três pilares que agem como 
signi� cadores, sendo a convergência digital, a dinâmica da indústria e o crescimento da 
Internet. Essa convergência digital, permitiu que as informações pudessem ser organizadas e 
armazenadas, representadas e transmitidas de forma digital, favorecendo assim a utilização de 
diferentes linguagens, como, texto, imagem e som. Assim, a integração digital possibilita e cria 
novas estratégias no uso combinado de diferentes mídias para a criação de conteúdo digital, ou 
seja, multimídia. 
Ainda com relação à multimidialidade, ou multimídia, além do fato de, no suporte digital, 
haver a possibilidade de inserir toda e qualquer mídia, tem-se como vantagem também o fato de 
que, segundo Mayer (2005; 2009), as pessoas aprendem melhor através de palavras e imagens do 
que somente através de palavras.
11WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 1
ENSINO A DISTÂNCIA
Segundo a teoria do processamento da informação, o cérebro humano possui uma 
memória sensorial,responsável por captar os estímulos provenientes do meio ambiente; uma 
memória de curto prazo, volátil, também conhecida como memória de trabalho, que pode ser 
entendida, metaforicamente, como uma agência de produção multimídia que está continuamente 
manipulando e gerando imagens e sons que são organizados signi� cativamente) e armazenados 
em uma memória de longo prazo (SWELLER, 1998). Depois de armazenadas, essas imagens 
e sons ainda estão disponíveis para reformulação e integração com novos conceitos, quando 
novas informações são recebidas. A memória de trabalho constitui um gargalo neste processo 
em função de sua capacidade limitada de tratamento de informações.
3 - HIPERMÍDIA
Trata-se de uma plataforma que integra vários tipos de mídia, como textos, áudios, vídeos, 
animações e grá� cos, ocorrendo a interação com estas informações, sem que a linearidade seja 
necessária, ou seja, o usuário pode navegar pelos dados como achar conveniente, sem precisar 
seguir um caminho pré-estabelecido. O conceito de hipermídia surgido nos anos 1960, tem 
ganhado força nos últimos anos com o avanço tecnológico e da internet, juntamente com os 
aparelhos móveis. 
O hipertexto é o embrião da hipermídia, que são referências dentro de documentos que 
remetem a outros, permitindo uma leitura contínua e não linear das informações. Na internet, 
são os famosos links, que quando clicados levam você de uma página a outra.
Na década de 1960, Ted Nelson, � lósofo e sociólogo norte-americano, cunhou o termo 
usado até hoje, porém em 1945, já existiam ideias que remetiam ao conceito de hipermídia. Desde 
então, a hipermídia vem evoluindo por meio da contribuição de diversos estudos e pesquisas.
A evolução da internet aumentou as possibilidades de aplicação da hipermídia e, hoje, 
já é possível gerar conteúdos deste tipo com a utilização de diversos programas e aplicativos 
existentes, com as mais diversas possibilidades, seja em algum instalado, ou mesmo por meio do 
navegador, de um jeito bem prático para o usuário. Isto levou à popularização da hipermídia, que 
tem se multiplicado nos últimos anos em diversos veículos.
A hipermídia passou também a ocupar outros espaços que antes eram exclusivos da 
mídia tradicional, como as televisões, os livros e as revistas. Isto só foi possível porque o avanço 
da tecnologia trouxe ao mercado as TVs inteligentes e seus aplicativos, a interatividade da TV 
digital, os leitores de livros eletrônicos e os tablets e smartphones.
A hipermídia possibilita conteúdos mais ricos e dinâmicos, mais interativos e que 
prendem a atenção nesta época em que há um turbilhão de informações por todos os lados. A 
possibilidade de explorar o conteúdo sem um roteiro pré-estabelecido torna a experiência mais 
pessoal e, ao agregar diversos tipos de mídia em um mesmo ambiente, o conteúdo se torna mais 
imersivo.
Além do entretenimento e da informação, esta forma de mídia tem também um grande 
potencial na área da educação: um conteúdo escolar mais divertido e interessante aumenta o 
interesse dos alunos e melhora o processo de aprendizagem (Figura 07).
12WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 1
ENSINO A DISTÂNCIA
Figura 7 – Estudo online. Fonte: Freepik (2017).
O crescimento da hipermídia faz parecer que a mídia tradicional está perdendo a atenção 
dos usuários, o que é real, porém, os veículos tradicionais estão se tornando cada vez mais 
hipermídia, e tudo está se unindo em uma coisa só. Os jornais passaram a investir em hipermídia 
na internet para se manterem relevantes, e os grandes canais de televisão investem cada vez mais 
em seus portais, como uma extensão do canal de TV.
Os veículos que não se adaptarem a esta nova realidade, estes sim, perderão a atenção 
do público em um mundo em que a competição por esta atenção é cada vez mais acirrada. Por 
isso, é importante que as marcas estejam atentas a este movimento uma vez que, após décadas de 
estudos e de desenvolvimento, a hipermídia está chegando ao seu patamar mais maduro.
4 - DESIGN PARA MULTIMÍDIA
O Design para Multimídia é uma forma de atividade editorial em projetos de que tem 
como principal objetivo, e desa� o, transmitir a maior quantidade de informações possíveis, 
diferente de outras mídias. Para alcançar estes objetivos com sucesso, é necessário o uso do 
Design da Informação, para a criação de interfaces otimizadas.
A organização de uma série de informações distintas, estruturação deste conteúdo e 
planejamento de todos os � uxos de informação são essenciais para a usabilidade de qualquer 
sistema de interação entre usuário e ferramenta (Website, Portal, Aplicativo, Programa e Cursos).
13WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 1
ENSINO A DISTÂNCIA
Após a estruturação do conteúdo, através da Arquitetura da Informação, é necessário 
o uso dos princípios do Design, aliados à aplicação de tecnologias na otimização do projeto. 
O Design de Multimídia realiza a integração do Web Design (Atividade do Design voltado à 
projetos na internet), da Arquitetura da Informação, da Animação e da Manipulação de áudio e 
Vídeo (Figura 08).
Figura 8 – Junção de diversas mídias. Fonte: Freepik (2018)
O design grá� co (multimídia), media a translação de conteúdos, ou seja, o design grá� co é 
uma atividade de caráter mediador, que dá forma material a conceitos intelectuais (FONTOURA, 
2002, p. 72), é um caminho para solucionar os con� itos contemporâneos no entendimento 
grá� co de informações. O design é também a conceituação de ideias materializadas através do 
emprego de tecnologias. A união, como pondera Fontoura (2002), dos seus fundamentos, das 
suas metodologias de trabalho, das suas maneiras de interagir na formação da cultura material, 
das suas maneiras de proceder na concepção dos objetos, da sua necessidade de conhecimento de 
tecnologias e materiais, parece fazer do design grá� co uma ferramenta essencial.
Na atualidade, vivemos numa Sociedade da Informação, que está baseada em três pilares: 
a convergência digital, a dinâmica da indústria e o crescimento da Internet (TAKAHASHI, 2000). 
A convergência digital permitiu que toda a informação pudesse ser armazenada, representada 
e transmitida de forma digital, favorecendo a combinação de diferentes matrizes de linguagem 
(Figura 09), ou seja, texto, imagem e som.
14WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 1
ENSINO A DISTÂNCIA
Figura 9 – Matrizes de linguagem. Fonte: Freepik (2017)
Dessa forma, a integração digital possibilita e demanda novas estratégias no uso combinado 
de mídias para a criação de conteúdo digital e, em especial, oportuniza novas alternativas para 
a produção de materiais multimídia. A possibilidade de integração de som, imagem estática, 
imagem em movimento, texto, entre outras mídias, abre um vasto campo de exploração para 
pro� ssionais que desejam produzir seu próprio conteúdo, ou mesmo para o consumo de tal. 
Dessa forma, a criação de conteúdos multimídia é uma importante área do design, uma 
vez que possibilita aos pro� ssionais que atuam nesse segmento, uma diversi� cação de projeto 
desenvolvidos, além da geração de conteúdos que podem ser acessados por uma quantidade 
imensamente maior que em épocas passadas, onde a possibilidade de conteúdos especí� cos era 
mais restrita.
Podemos entender que os avanços tecnológicos, trouxeram mais liberdade para criação e 
especialmente, para o acesso que as pessoas podem ter aos conteúdos gerados. Além do fato que 
tais avanços, também contribuíram para que outras tecnologias pudessem surgir, assim como 
técnicas baseadas em tais avanços que tem feito com que a produção de conteúdos � que cada vez 
mais democrático e assim, temas especí� cos encontram espaço para aparecer.
5 - HISTÓRICO E EVOLUÇÃO
A Hipermídia enquanto termo criado por Ted Nelson em 1960. Utilizada como uma 
extensão do termo hiperlink, a hipermídia promoveu a fusão dos vários tipos de mídia - como o 
áudio, vídeo, texto e grá� cos – para criarum meio de comunicação único, de leitura não-linear, 
características próprias e gramática peculiar.
15WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 1
ENSINO A DISTÂNCIA
A partir da ideia de Vannevar Bush, Ted Nelson começou a trabalhar no que posteriormente 
viria a ser o Projeto Xanadu. A ideia principal do projeto era que o leitor poderia seguir uma não-
linearidade de leitura do documento eletrônico. Tal ideia anunciava o que viria a ser chamado 
de Hipertexto – sistema de informações cujos documentos possuem referências internas para 
outros documentos (o mesmo que pode ser visto no atual documento).
Enquanto Ted Nelson procurava amadurecer o conceito de hipertexto, na década de 
1960, o inventor estadunidense, Douglas Engelbart, desenvolveu e apresentou o primeiro sistema 
computacional colaborativo, chamado de NLS (o oNLine System). O NLS foi o primeiro sistema 
a empregar o uso prático do hipertexto: links, o mouse (inventado pelo próprio Engelbart em 
associação a Bill English).
Apesar de o termo ter sido criado nos anos 1960, a 
ideia de hipermídia já vinha sendo proposta desde 
meados de 1945, com o artigo As We May Think de 
Vannevar Bush. Disponível em: <http://static1.1.sqspcdn.
com/stat ic/f/346077/3614949/1247871875603/
A s + W e + M a y + T h i n k + V a n n e v a r + B u s h + 4 5 0 9 1 0 .
pdf?token=3dL66smGMZh6N0JLqJnu13YccKY%3D>. 
Acesso em: 26 out. 2018. 
Em seu trabalho, Bush propôs a criação de uma máquina 
chamada Memex, capaz de armazenar várias informações 
em sua memória. Com essa máquina, segundo Bush, os 
conhecimentos poderiam ser somados e guardados em um 
único lugar, além de poderem ser acessados rapidamente 
quando fosse necessário. Na época a ideia soou como 
futurista e utópica. A máquina não saiu do papel, mas foi a 
precursora da ideia de hipertexto.
Sobre o Projeto Xanadu:
<http://g1.globo.com/tecnologia/noticia/2014/06/
software-que-deu-origem-ao-termo-hipertexto-e-lancado-
apos-54-anos.html>
16WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 1
ENSINO A DISTÂNCIA
Apesar do seu sucesso, o NLS começou a entrar em desuso em meados de 1969. O principal 
motivo eram as di� culdades de aprendizado e desenvolvimento do sistema – eram utilizados 
métodos de programação pesada que muitas vezes os usuários sentiam-se forçados a aprenderem 
códigos que não serviam para nada realmente útil. Com a chegada da ARPANET, que também 
empregava o hipertexto, muitos pesquisadores que trabalharam no NLS abandonaram o projeto 
e seguiram para a Xerox-PARC.
Em 1981, a Xerox desenvolveu a estação de trabalho Star, primeira com objetivo 
comercial a utilizar tecnologias que hoje fazem parte dos computadores pessoais. Janelas com 
interface grá� ca, ícones, pastas, mouse, servidor de arquivos, impressoras e e-mail faziam parte 
do sistema. O conceito de Hipermídia começava a amadurecer com a utilização de widgets – é um 
componente que pode ser utilizado em computadores, celulares, tablets e outros aparelhos para 
simpli� car o acesso a um outro programa ou sistema. Eles geralmente contêm janelas, botões, 
ícones, menus, barras de rolagem e outras funcionalidades – e tornava-se cada vez mais uma 
extensão do hipertexto.
Em 1979, Steve Jobs realizou uma visita aos laboratórios de desenvolvimento da Xerox 
e soube do desenvolvimento de uma tecnologia de interface grá� ca. Pela visita Jobs ofereceu 
ações da Apple e retomou o desenvolvimento do Lisa e do Macintosh. Em 1984 Steve Jobs e a 
Apple apresentaram o Macintosh 128k, a primeira máquina construída totalmente em torno de 
interface grá� ca – mais do que nunca a hipermídia estava presente na informática. Suas bases 
estavam solidi� cadas e prontas para serem desenvolvidas.
Em 1987, a Apple desenvolveu o primeiro aplicativo bem-sucedido baseado em hipermídia. 
Tratava-se do Hypercard, aplicação que combinava banco de dados com interface grá� ca, 
� exibilidade e interação do usuário com o programa por meio de modi� cações. O� cialmente 
lançado com o System So� ware 6, o Hypercard incorporava também o Hypertalk, uma linguagem 
poderosa e de fácil aprendizagem que permitia a manipulação de dados e de interfaces.
Com a possibilidade de interação entre usuário e sistema, o Hypercard foi um sucesso. 
A hipermídia consegue um nível de amadurecimento que resultaria na criação da www (World 
Wide Web). Idealizada por Tim Berners-Lee ainda em 1980, inicialmente a www tinha como 
objetivo facilitar o compartilhamento de documentos entre seus colegas. Contudo, Tim logo 
descreveu um sistema de informações mais elaborado e propôs formalmente a www no � nal de 
1990. No NeXTcube que utilizava como servidor web, Tim desenvolveu o primeiro navegador, o 
WorldWideWeb em 1990. No � nal daquele ano, já tinha todas as ferramentas necessárias para o 
funcionamento do sistema: o servidor, o navegador e as primeiras páginas web, que buscavam 
descrever e explicar o projeto. Diferente do Hypercard, a www não era um so� ware proprietário, 
o que tornou possível a criação de extensões e diversos sistemas sem que houvesse a preocupação 
com direitos autorais. Em 1993, a www passou a ser livre para todos e houve uma grande virada 
a seu favor, principalmente com a introdução do navegador grá� co Mosaic desenvolvido por 
universitários.
Sobre a ARPANET:
CORRÊA. F. S. Um estudo quantitativo sobre as representações utilizadas por 
professores e alunos para signifi car o uso da Internet. Ribeirão Preto: USP - Dis-
sertação de Mestrado. 2013.
17WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 1
ENSINO A DISTÂNCIA
O conceito de Hipermídia expandiu-se após a criação da www e Berners-Lee realizou o 
sonho que Ted Nelson teve com o Projeto Xanadu – interligar documentos textuais e visuais em 
sistemas informacionais. Utilizada hoje em instituições educacionais, a hipermídia auxilia cada 
vez mais a construção de sociedades capazes de pensar em conjunto e de maneira compartilhada. 
As informações lineares e sequenciadas cedem cada vez mais espaço aos sistemas hipermídia: um 
conjunto enorme de arquivos interconectados em uma rede. Graças à hipermídia e a informática, 
surgiram novas formas de adquirir conhecimento e de administrar informações por vários 
caminhos distintos e não-sequenciais.
Surgida com Vannevar Bush, a ideia de hipermídia passou de futurística e improvável 
para algo que está mais presente do que nunca na nossa sociedade. Apesar de extremamente 
madura, não para de crescer. O conceito de Web 2.0 que permite a interação total do usuário 
com os diversos tipos de informação está representado cada vez mais pelas redes sociais de 
relacionamento, nas quais os usuários trocam mensagens, links, vídeos e músicas simultaneamente 
todos os dias. Em paralelo, a TV Digital, transforma cada vez mais a televisão em um veículo de 
hipermídia, desagregando a ideia de veículo de multimídia que faz parte desse sistema desde sua 
criação.
6 - CONSIDERAÇÕES FINAIS
Como pode ser visto na unidade, a hipermídia está presente em nosso dia a dia na 
atualidade de forma que muitas vezes não percebemos, em tarefas que feitas de forma automática 
nas quais estamos tão acostumados que nem precisamos pensar. Assim, é papel fundamental de 
designers, terem atenção ao desenvolvimento de tais peças, ou mesmo interfaces.
Projetos bem elaborados e executados de maneira correta, contribuem para que as 
pessoas possam ter acesso fácil e e� ciente às informações e conteúdos que desejam, inclusive, 
também podem criar tais conteúdos com as ferramentas certas, que podem ser desenvolvidas 
por designers.
Mídias, hipertextos, links, hiperlinks, interface, sistema, são termos que fazem parte do 
desenvolvimento da hipermídia, que integra as diferentes formas de se transmitir mensagens aos 
receptores, ou seja, usuários que estão à procura dos mais diferentes assuntos. Dessa forma, � ca 
evidente o constante uso de analogias para demonstrar comandos, ou mesmo conceitos.
Pro� ssionais que desenvolvem conteúdosmultimídia, tem que então, estar conectados 
com as ferramentas e teorias atuais, mas também, conseguir acompanhar as novidades e 
tendências que cada vez caminham de maneira mais rápidas em suas mudanças e novas formas 
de entender as pessoas e como interagem com as mais diversas possibilidades existentes.
1818WWW.UNINGA.BR
U N I D A D E
02
SUMÁRIO DA UNIDADE
1 - INTERFACE .......................................................................................................................................................... 21
1.1. TIPOS DE INTERFACES ..................................................................................................................................... 24
2 - DESIGN DE INTERAÇÃO .................................................................................................................................... 25
2.1. TIPOS DE INTERAÇÃO - BASEADA EM COMANDOS ..................................................................................... 27
2.2. INTERFACE HÁPTICA ....................................................................................................................................... 28
2.3. INTERFACE TANGÍVEL ..................................................................................................................................... 28
3 - USABILIDADE ..................................................................................................................................................... 29
4 - CONSIDERAÇÕES FINAIS ................................................................................................................................. 34
INTERFACES E DESIGN DE INTERAÇÃO
PROF. ME. VAGNER BASQUEROTO MARTINS
ENSINO A DISTÂNCIA
DISCIPLINA:
DESIGN E MULTIMÍDIA
19WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
INTRODUÇÃO
O conceito de Interface é amplo, podendo ser expressado pela presença de ferramentas 
para o uso e movimentação de qualquer sistema de informações, seja ele material, seja ele virtual. 
Ou seja, é o conjunto de meios planejadamente dispostos sejam eles físicos ou lógicos com vista 
a fazer a adaptação entre dois sistemas para se obter um certo � m cujo resultado possui partes 
comuns aos dois sistemas, ou seja, o objeto � nal possui características dos dois sistemas (Figura 
01).
Figura 1 – Conceito de Interface. Fonte: Freepik (2018).
20WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
Dessa forma, podemos a� rmar que Interface é o nome dado para o modo como ocorre a 
“comunicação” entre duas partes distintas e que não podem se conectar diretamente. Um so� ware 
ou sistema operacional, por exemplo, pode ser controlado através de uma pessoa usando um 
computador. A interface entre o so� ware e o usuário é a tela de comandos apresentada por este 
programa, ou seja, a interface grá� ca do so� ware.
Normalmente, nesta tela, existem várias imagens, ícones, campos de texto e demais 
ferramentas que auxiliam o utilizador a desempenhar suas tarefas no so� ware (Figura 02).
Figura 2 – Telas de sistema operacional. Fonte: Freepik (2017).
Ao iniciar o Windows ou qualquer outro sistema operacional, por exemplo, a área de 
trabalho que aparece na tela pode ser considerada a interface do usuário deste sistema operacional, 
pois apresenta ao utilizador todas as opções de ações que este pode acionar com a ajuda dos 
hardwares instalados, como o mouse, o teclado etc.
Existem várias outras de� nições aplicáveis ao termo interface, dependendo da área de 
estudo e contexto em que é aplicado. Na geofísica, por exemplo, a interface é o que separa e 
interliga as diferentes camadas sísmicas da Terra.
21WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
1 - INTERFACE
Segundo Laurel (1993), uma interface é uma superfície de contato (Figura 03) que re� ete 
as prioridades físicas das partes que interagem, as funções a serem executadas e o balanço entre 
poder e controle.
Figura 3 – Construção de interface. Fonte: Freepik (2018).
Bonsiepe (1997) a� rma que a interface revela o caráter de ferramenta dos objetos e o 
conteúdo comunicativo das informações. A interface transforma objetos em produtos. A interface 
transforma sinais em informação interpretável.
Na atualidade, as interfaces fazem parte do dia a dia, especialmente as digitais, 
de forma que nossas relações são constantemente afetadas pelas novas tecnolo-
gias, mesmo que nem percebamos as interfaces. Elas estão em rotinas comuns 
como pagar uma conta, ler uma notícia, acessar mensagens e realizar ligações.
22WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
Lévy (1999) a� rma que o termo interface é aplicado para todos os aparatos que permitem 
a interação entre o universo da informação digital e o mundo ordinário (Figura 04).
Figura 4 – Aparelhos com interfaces. Fonte: Freepik (2018).
Como pode ser visto, entre os autores, existem diversas de� nições do que é considerado 
interface, mas na prática, há a concordância de que os projetos de interfaces têm que ter o 
planejamento centrado no usuário (Figura 05) e a sua prática é levada pela solução de problemas, 
atendendo as exigências e necessidades dos clientes com e� ciência, e� cácia e satisfação.
Assim como em outras áreas acadêmicas, os autores em suas pesquisas, bus-
cam através dos levantamentos realizados, esclarecer e evidenciar suas hipóte-
ses e assim, defender seus pontos de vista perante o meio de pesquisadores, 
ocorrendo em muitos casos convergências de defi nições. Mas é possível que seja 
encontrado em algumas situações divergências claras entre autores, cabendo aos 
pesquisadores, escolher com base em razões baseadas em dados e argumenta-
ção a defesa de uma posição.
23WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
Figura 5 – Foco nos usuários. Fonte: Freepik (2018).
Falar sobre cada um deles (e� ciência, e� cácia e satisfação). A interface engloba tanto 
so� ware (programas e aplicativos), como hardware (computador, tablet, notebook, smartphone 
etc.) (Figura 06).
Figura 6 – Exemplo de hardware e so� ware. Fonte: Freepik (2018).
24WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
Segunda a ISO 924111 (International Organization for Standardization), a e� cácia seria 
a precisão e integridade com a qual os usuários alcançam objetivos especí� cos. Já a e� ciência é 
relacionada aos recursos gastos em relação à precisão e completude com que os usuários alcançam 
objetivos. Enquanto que a satisfação refere-se ao grau de liberdade de desconforto e atitudes 
positivas em relação ao produto.
O conceito de interface também vai além do ambiente computacional, pois abrange os 
objetos do cotidiano (Figura 07) que re� etem qualidades físicas de interação e do que pode ser 
feito com os mesmos (ROCHA; BARANAUSKAS, 2003).
Figura 7 – Objetos do cotidiano. Fonte: Freepik (2018)
1.1. Tipos de interfaces
Existem vários tipos de interfaces e formas de interagir com as mesmas (gestos, toque, 
olhar, cérebro computador, dentre outros). Dentre tais tipos podemos destacar:
A) baseada em comandos;
B) realidade virtual e aumentada;
C) interface háptica;
D) interface tangível.
DESIGNING INTERFACES (Jenifer Tidwell) 2011 – Apesar de todos os kits de fer-
ramentas da interface do usuário disponíveis hoje, ainda não é fácil criar boas 
interfaces de aplicativos. Este livro best-seller é uma das fontes confi áveis para 
ajudá-lo a navegar pelo labirinto de opções de design. Ao capturar as práticas re-
comendadas da interface do usuário e as ideias reutilizáveis como padrões de de-
sign, o Designing Interfaces fornece soluções para problemas comuns de design 
que você pode adaptar à situação em questão.
25WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
A interface funciona como sendo um canal entre o ser humanoe a máquina, para 
que possam se comunicar durante a interação, estando na zona entre o meio e a mensagem 
(JOHNSON, 2001) (Figura 08).
Figura 8 – Interação. Fonte: Freepik (2018).
A experiência de lidar com o objeto chama-se interação e, estudar sobre a interação, é 
importante para entender como o usuário vai lidar com o produto seja ele qual for. Tal processo 
de interação deve ser alcançado com e� ciência, e� cácia e satisfação (QUARESMA & MORAES, 
2014).
2 - DESIGN DE INTERAÇÃO
Para Preece (2009), o design de interação tem basicamente quatro atividades:
A) identi� car necessidades e estabelecer requisitos;
B) desenvolver designs alternativos que preencham esses requisitos;
C) construir versões interativas dos designs, de maneira que possam ser comunicados e 
analisados;
D) avaliar o que está sendo construído durante o processo.
26WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
Durante o processo de interação temos alguns fatores importantes a considerar como:
A) como as pessoas agem e reagem a eventos;
B) como as pessoas se comunicam;
C) estética;
D) usabilidade;
E) acessibilidade.
Tudo isso depende dos objetivos, tipo de produto, público alvo, contexto e situação em 
que será implementado o design. Os métodos para aplicar o design de interação na prática varia 
para cada autor, mas neste caso, há o modelo conceitual que é extensivamente usado.
O modelo conceitual envolve o que e como o usuário vai interagir com o produto, 
oferecendo um layout e framework que ajudem na interação. Assim, é necessário considerar os 
tipos de interação (PREECE, 2009) (Figura 09).
Figura 9 – Ordem da interação. Fonte: Freepik (2018).
Frameworks – é uma abstração que une códigos comuns entre vários projetos de so� ware 
provendo uma funcionalidade genérica – oferecem conselhos de como projetar, podendo vir de 
várias formas: perguntas, princípios, etc. Abrange a interação humano computador (IHC), então 
raciocina em como o sistema trabalha, funciona, como o usuário vai entender o sistema e como 
o mesmo funciona (PREECE, 2009).
27WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
2.1. Tipos de interação - Baseada em comandos:
A) Realidade virtual (RV);
B) Realidade aumentada (RA).
A RV é um ambiente e tecnologia que provoca sensações geradas arti� cialmente que 
levam o usuário a tomar como real um mundo sintético. A pessoa interage com um ambiente 
tridimensional que difere em muito das imagens bidimensionais convencionais (PREECE; 
ROGERS; SHARP, 2013).
A RA veio da RV. Segundo Azuma (2001), RA é a inserção de objetos virtuais no mundo 
real fazendo uma simulação de que estão no mesmo espaço (Figura 10).
Figura 10 – Realidade aumentada. Fonte: Freepik (2018).
Ambas RV e RA podem ser acessadas por óculos 3D, capacetes, computador, por exemplo. 
Mas, a interação da primeira transporta o usuário para um outro tipo de ambiente que não é o 
real e a interação da segunda o usuário continua no ambiente real, mas há um ou mais objetos 
virtuais inseridos.
28WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
2.2. Interface Háptica
A palavra “háptico” se refere à capacidade de sentir um ambiente mecânico natural ou 
sintético através do tato. No ser humano, este sentido possui dois componentes independentes, 
o cutâneo e o cinestésico. O primeiro está ligado aos sensores localizados na superfície da pele, 
que são responsáveis por sensações tais como pressão, temperatura, vibração e dor. O segundo 
está ligado aos sensores localizados nos músculos, tendões e juntas. São responsáveis tais como 
movimento e força (OAKLEY ET AL., 2000; RODRIGUES, 2006) (Figura 11).
Figura 11 – Exemplo de interface háptica. Fonte: Freepik (2018).
2.3. Interface tangível
As interfaces tangíveis (TUI) podem ser de� nidas como qualquer interface em que o 
usuário interfere no sistema digital por meio de dispositivos físicos. Existem duas classes de 
interfaces tangíveis, de� nidas por dois parâmetros principais: metáfora e personi� cação da 
interação (ISHII, 2008; FISHKIN, 2004) (Figura 12).
29WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
Figura 12 – Exemplo de interface tangível. Fonte: Newatlas (2015)
3 - USABILIDADE
Usabilidade é o termo usado para de� nir a facilidade com que as pessoas podem empregar 
uma ferramenta ou objeto a � m de realizar uma tarefa especí� ca e importante. Também pode se 
referir aos métodos de mensuração da usabilidade e ao estudo dos princípios por trás da e� ciência 
percebida de um objeto.
Na Interação Humano-computador e na Ciência da Computação, usabilidade 
normalmente se refere à simplicidade e facilidade com que uma interface pode ser utilizada. O 
Termo também é utilizado no contexto de produtos como aparelhos eletrônicos, em áreas da 
comunicação e produtos de transferência de conhecimento, como manuais, documentos e cursos 
online. Também pode se referir à e� ciência do design de objetos como uma maçaneta ou um 
martelo, assim como de aplicativos e sistemas em geral.
A usabilidade está relacionada aos estudos de Ergonomia e de Interação Humano-
computador. Segundo Barbosa (2010), “IHC é uma disciplina interessada no projeto, 
implementação e avaliação de sistemas computacionais interativos para uso humano, juntamente 
com os fenômenos relacionados a esse uso”. A usabilidade em meios digitais, como na internet, é 
um termo muito utilizado também nas novas mídias. A necessidade de entender os desejos dos 
interagentes no ambiente virtual facilita a compreensão do conteúdo disponibilizado, fazendo-o 
auto-su� ciente nos cliques do hipertexto. Até quem tem di� culdade motora ou problemas de 
navegação por falta de conhecimento técnico poderá alcançar o que deseja, se o produto da 
informação, se os processos de usabilidade forem respeitados, deixando o usuário mais à vontade, 
mais independente.
30WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
Figura 13 – Usabilidade. Fonte: Freepik (2018).
Pela de� nição da ISO (2011), usabilidade é a medida pela qual um produto pode ser 
usado por usuários especí� cos para alcançar objetivos especí� cos com efetividade, e� ciência e 
satisfação em um contexto de uso especí� co (ISO 9241-11).
Medida (Figura 14), aqui, deve ser entendida como um conjunto de valores resultantes de 
uma medição e os processos utilizados para se obter aqueles valores. A efetividade permite que o 
usuário alcance os objetivos iniciais de interação, e tanto é avaliada em termos de � nalização de 
uma tarefa quanto também em termos de qualidade do resultado obtido.
31WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
Figura 14 – Medir a satisfação. Fonte: Freepik (2018).
O conjunto de atributos representando a usabilidade evidencia o esforço necessário para 
a utilização de um so� ware. Da mesma forma, é considerado o julgamento individual de seu uso 
por meio de um conjunto implícito ou explícito de usuários (AVOURIS, 2001). Para tanto, os 
critérios de medição da característica de usabilidade estabelecidos pela norma ISO 9241 re� etem 
na:
A) análise das características requeridas do produto num contexto de uso especí� co;
B) análise do processo de interação entre usuário e produto;
C) análise da e� ciência (agilidade na viabilização do trabalho), da e� cácia (garantia da 
obtenção dos resultados desejados) e da satisfação resultante do uso deste produto.
Ainda pode-se a� rmar que a e� ciência se refere à quantidade de esforço e recursos 
necessários para se chegar a um determinado objetivo. Os desvios que o usuário faz durante a 
interação e a quantidade de erros cometidos pode servir para avaliar o nível de e� ciência do site.
A terceira medida de usabilidade, a satisfação, é a mais difícil de medir e quanti� car, 
pois, está relacionada com fatores subjetivos. De maneira geral, satisfação se refere ao nívelde 
conforto que o usuário sente ao utilizar a interface e qual a aceitação como maneira de alcançar 
seus objetivos ao navegar no site.
32WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
Ainda segundo a norma citada (parte 11 da norma ISO 9241), a usabilidade pode ser 
especi� cada ou medida segundo outras perspectivas, como:
A) Facilidade de aprendizado – o usuário rapidamente consegue explorar o sistema e 
realizar suas tarefas;
B) Facilidade de memorização – após um certo período sem utilizá-lo, o usuário não 
frequente é capaz de retornar ao sistema e realizar suas tarefas sem a necessidade de reaprender 
como interagir com ele;
C) Baixa taxa de erros – o usuário realiza suas tarefas sem maiores transtornos e é capaz 
de recuperar erros, caso ocorram;
O teste de usabilidade é uma técnica formal que pode envolver usuários representando a 
população alvo para aquele determinado sistema. Estes usuários são designados para desenvolver 
tarefas típicas e críticas havendo com isso uma coleta de dados para serem posteriormente 
analisados. Contudo, o teste de usabilidade caracteriza-se por utilizar diferentes técnicas voltadas 
em sua maioria para a avaliação da ergonomia dos sistemas interativos.
A) Avaliação heurística;
B) Critérios ergonômicos;
C) Inspeção Baseada em Padrões, Guias de Estilos de Recomendações;
D) Inspeção por checklists;
E) Percurso (ou inspeção) cognitivo;
F) Teste empírico com usuários;
G) Entrevistas e questionários.
Algumas técnicas de avaliação para testes de usabilidade podem incluir uma lista de 
métodos que direciona os esforços dos usuários em realizar uma variedade de tarefas em um 
protótipo ou sistema. Enquanto realiza estas tarefas, ele é observado por inspetores que coletam 
dados referentes aos processos de interação do usuário, incluindo erros cometidos pelo usuário, 
quando e onde eles confundem-se ou se frustram, a rapidez com a qual o usuário realiza a tarefa, 
se eles obtêm sucessos na realização da tarefa e a satisfação do usuário com a experiência (Figura 
15).
O Design de Interação é a vertente do design responsável 
por projetar o comportamento de artefatos interativos.
Para explicar como essa abordagem de design é utilizada e 
qual a sua função precisamos entender um pouco sobre a 
história dos sistemas e software – qual a origem e neces-
sidade de pensar em como projetar a interação de um arte-
fato e qual a sua relação com UX. Para entender um pouco 
mais sobre o assunto, assista de Daniel Furtado, designer 
de interação acessando o vídeo no link a seguir: 
https://goo.gl/mS3h74
33WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
Figura 15 – Métodos de medição. Fonte: Freepik (2018).
Entretanto, testes de usabilidade que envolvem usuários reais nos procedimentos de 
interação, transformam-se em um procedimento mais oneroso e complexo. A utilização de 
heurísticas, por exemplo, permite identi� car erros mais sérios e difíceis de serem identi� cados. 
Mas, estudos apontam que a utilização conjunta de ambos os processos (aplicação de heurísticas 
e testes de usabilidade), é a melhor abordagem de investigação de usabilidade.
O paradigma de desenvolvimento de uma interface com o usuário, deve permitir a 
realização de sucessivos ciclos de “análise/concepção/testes”, com a necessária retroalimentação 
dos resultados dos testes, de um ciclo a outro. A estratégia consiste em, a cada ciclo, identi� car 
e re� nar continuamente o conhecimento sobre o contexto de uso do sistema e as exigências em 
termos de usabilidade da interface. Na sequência dos ciclos, se constroem versões intermediárias 
da interface do sistema que são submetidas a testes de uso, em que os representantes dos usuários 
simulam a realização de suas tarefas. Inicialmente eles participarão de simulações “grosseiras”, 
usando maquetes, mas, com o avanço do desenvolvimento, eles recorrerão a protótipos e versões 
acabadas do sistema, em simulações mais e mais � dedignas. O objetivo é avaliar a qualidade das 
interações e levar em conta os resultados dessas avaliações para a construção de novas versões 
das interfaces. Se implementada desde cedo no desenvolvimento, tal estratégia pode reduzir o 
risco de falhas conceituais do projeto, garantindo que, a cada ciclo, o sistema responda cada vez 
melhor às expectativas e necessidades dos usuários em suas tarefas (CYBIS, BETIOL & FAUST, 
2007) (Figura 16).
34WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 2
ENSINO A DISTÂNCIA
Figura 16 – Checagens constantes. Fonte: Freepik (2018).
4 - CONSIDERAÇÕES FINAIS
Como pode ser visto nesta unidade, as interfaces e o design de interação, fazem parte do 
nosso dia a dia, e nesse sentido, proporcionam possibilidades extraordinárias aos pro� ssionais 
de design, no sentido de que existe uma variedade crescente de possíveis projetos que tais 
pro� ssionais possam se envolver e empresas que podem ser atendidas.
Um aspecto que � cou mais uma vez evidente a partir desta unidade, é a importância do 
usuário no processo de desenvolvimento de qualquer artefato de design, uma vez que é o público 
alvo e destinatário de todo e qualquer projeto de design, seja ele físico ou digital, sendo que as 
interfaces e interações acontecem nas duas esferas dimensionais.
Saber como estabelecer os critérios ideias conforme as necessidades dos usuários, é uma 
tarefa que por vezes não gera a possibilidade de correções, devido aos cronogramas, ou mesmo 
à uma falta de comprometimento das etapas de um projeto que pode ser literalmente esquecido 
e assim, perder sua continuidade e consistência, gerando frustração aos usuários que o estavam 
eventualmente utilizando. Dessa forma, é importante que os projetos de interfaces e de design 
de interação, estejam alinhados e ajustados ao cronograma e orçamento do projeto, para que as 
etapas sejam cumpridas no tempo e custos.
Sendo assim, em toda e qualquer situação estamos sujeitos à interação através de interfaces 
que contribuem para que possamos executar as mais diversas tarefas e assim, estabelecer por 
exemplo, contato com outras pessoas, ou mesmo � nalizar tarefas simples do lar, assim como, 
criar projetos extraordinários, gerando facilidades aos usuários.
3535WWW.UNINGA.BR
U N I D A D E
03
SUMÁRIO DA UNIDADE
INTRODUÇÃO ........................................................................................................................................................... 37
1 - FORMATOS DE ARQUIVOS ................................................................................................................................ 38
1.1. JPEG (JOINT PHOTOGRAPHIC EXPERTS GROUP) ........................................................................................ 38
1.2. GIF (GRAPHICS INTERCHANGE FORMAT) .................................................................................................... 38
1.3. PNG (PORTABLE NETWORK GRAPHICS) ...................................................................................................... 38
1.4. PSD (PHOTOSHOP DOCUMENT) .................................................................................................................... 39
1.5. TIFF (TAGGED IMAGE FILE FORMAT) ............................................................................................................. 39
1.6. EPS (ENCAPSULATED POSTSCRIPT) ............................................................................................................. 39
1.7. AI (ADOBE ILLUSTRATOR) ............................................................................................................................... 39
1.8. CDR (COREL DRAW) ........................................................................................................................................ 40
1.9. SVG (SCALABLE VECTOR GRAPHICS) ........................................................................................................... 40
PRODUÇÃODE MÍDIA
PROF. ME. VAGNER BASQUEROTO MARTINS
ENSINO A DISTÂNCIA
DISCIPLINA:
DESIGN E MULTIMÍDIA
36WWW.UNINGA.BR
1.10. PDF (PORTABLE DOCUMENT FORMAT) ...................................................................................................... 40
1.11. BMP (WINDOWS BITMAP) ............................................................................................................................. 41
2 - COMPRESSÃO DE ARQUIVOS ........................................................................................................................... 41
3 - UTILIZAÇÃO DE SOFTWARE ............................................................................................................................. 44
4 - CONSIDERAÇÕES FINAIS ................................................................................................................................. 53
37WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
INTRODUÇÃO
Atualmente, existem inúmeros tipos de arquivos, para cada aplicação e destino no qual 
será utilizado. Dessa forma, em alguns momentos � ca difícil saber qual escolher, portanto, é 
necessário conhecer os formatos principais no meio do design grá� co, para que assim, seja 
possível estabelecer parâmetros adequados a cada projeto que estiver sendo elaborado.
Ainda assim, antes de falar sobre as principais extensões, é preciso explicar a diferença 
entre os dois tipos de imagens existentes: Bitmap x Vetorial (Figura 01).
Bitmap – São imagens compostas por um mapa de pontos (pixels). Esses pixels são 
pequenos quadrados individuais que quando unidos compõem uma imagem. Imagens de alta 
resolução gera arquivos grandes, pois são compostas por um número bem maior de quadrados, 
sendo assim a relação de qualidade está diretamente ligada a quantidade de pixels.
Vetoriais – São imagens formadas através de expressões matemáticas e as instruções 
inseridas produzem linhas, curvas, polígonos, textos, formas preenchidas, etc. Podem ser 
editados separadamente, ser ampliadas ou reduzidas sem causar perda de qualidade. Geram 
arquivos menores em termos de processamento e são indicados aos projetos de desenhos como 
marcas, ilustrações, etc.
Figura 1 – Bitmap|Vetorial. Fonte: Clube Design (2012).
Mesmo com o grande número de tipos de arquivos, e os programas que os utili-
zam, é comum ver profi ssionais que desenvolvem projetos que em tese deveriam 
ser realizados em um determinado formato, que acabam sendo feitos num outro 
que não é o mais adequado, tendo em vista especialmente os projetos que neces-
sitam ser impressos, podendo gerar problemas em algum momento. Por isso, é 
importante estar atento aos formatos e usos recomendados para que situações 
como essas possam ser evitadas.
38WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
1 - FORMATOS DE ARQUIVOS
É importante saber que cada extensão possui características próprias, sendo indicadas 
para situações diferentes, assim trazendo particularidades distintas. Dessa forma, na sequência, 
será apresentada uma lista com os principais formatos de arquivos para área do design grá� co.
1.1. JPEG (Joint Photographic Experts Group)
Formato de imagem bitmap padrão da grande maioria dos usuários, possui uma altíssima 
taxa de compressão capaz de fazer com que imagens de boa resolução ocupe pouco espaço em 
disco, mas isso só é possível porque a compressão perde parte da qualidade da imagem.
Em vários casos, em especial nas páginas da internet, o tamanho menor do arquivo 
supera a desvantagem da perda de qualidade, mas este não é o formato recomendado para quem 
deseja � delidade nos detalhes de suas fotos e imagens. Isso não torna o JPG ruim, já que possui 
um excelente nível de compressão – ele apenas é menos indicado para essas situações.
Uma foto com este formato suporta até 24 bits por pixel nos formatos RGB ou CMYK — 
8 pixels de brilho, 8 pixels azuis e 8 pixels vermelhos —, exibindo mais de 16 milhões de cores. 
O método de compressão do JPG trabalha removendo da imagem cores não vistas pelo olho 
humano, o que garante reduzir o tamanho do arquivo sem perda de qualidade. Além disso, você 
pode reduzir a qualidade manualmente ao salvar um arquivo em JPG/JPEG, mas � que atento: a 
possibilidade de controlar a qualidade da imagem pode ser um trunfo (pois é possível diminuí-la 
a � m de reduzir ainda mais o tamanho do arquivo), mas também pode ser um problema (redução 
excessiva vai deixar a imagem cheia de problemas visíveis).
É importável na maioria dos programas, como: Word, Excel, PowerPoint, etc., assim 
como é bem aceito nas plataformas de redes sociais.
1.2. GIF (Graphics Interchange Format)
O GIF trabalha com apenas 8 bits por pixel (três vermelhos, três verdes e dois azuis). 
Com isso, é possível alcançar apenas 256 cores em uma imagem neste formato, a não ser que 
você utilize diversos blocos de cor, o que garante uma quantidade maior de opções. Até há algum 
tempo, o GIF era protegido e era preciso de uma autorização para usá-lo.
Se pensarmos em termos de qualidade, o GIF perde para os concorrentes, isso porque ele 
trabalha com menos cores, prejudicando o aspecto geral de uma foto. Atualmente sendo utilizado 
para a criação de pequenas animações usadas na internet, principalmente em redes sociais com 
objetivo humorístico. 
1.3. PNG (Portable Network Graphics)
Formato de imagem bitmap que suporta milhões de cores, fundo transparente e 
compressão sem perdas. Somente salva com cores em RGB, por isso é o formato mais utilizado 
para internet e meios digitais. E não é adequado para impressos.
39WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
Ele suporta de 24 ou 32 bits por pixel, alcançando um desempenho visual bastante 
parecido com o JPG. Em comparação com o GIF, ele oferece compressão de 5 a 25% maior e 
uma variedade maior de cores. Em relação às transparências, ele permite variação na opacidade 
da imagem, diferente do GIF que oferece apenas as opções totalmente opaco ou totalmente 
transparente. Isso porque o PNG trabalha com o formato RGB (24 bits) e RGBA (32 bits) — “A” 
de Alpha, o detalhe que permite a variação de transparências.
A maior quantidade de informação presente no PNG deixa as imagens neste formato 
maiores do que aquelas em JPG ou GIF. Ou seja, ele não é o formato ideal para guardar 
fotogra� as na web ou então enviá-las para seus amigos por e-mail ou qualquer outro meio digital. 
Entretanto, seu uso em pequena escala, na web mesmo, é bastante indicado. Apesar de ter suporte 
para animação, o PNG não conseguiu superar o GIF e é pouco comum ver fotos animadas neste 
formato.
1.4. PSD (Photoshop Document)
Formato de imagem bitmap nativo do so� ware Photoshop. Suporta o uso de camadas e 
com isso preserva todos os recursos utilizados do Photoshop (camadas, efeitos, máscaras etc.) 
durante o tratamento e/ou manipulação de uma imagem. Indicado para edição e tratamento de 
imagens, além de pós-produção.
Arquivos criados com o Photoshop, so� ware da Adobe, são salvos em formato PSD. 
Como os produtos da Adobe são compatíveis entre si, é possível importar e criar links de arquivos 
do Photoshop dentro de outros so� ware dessa empresa, como: Illustrator e InDesign.
Os arquivos em PSD possuem características particulares do Photoshop, por isso, o ideal 
é abri-los e editá-los com este so� ware. No entanto, na falta do programa da Adobe, é possível 
abrir um arquivo PSD com outro so� ware de edição de imagem, como o GIMP.
1.5. TIFF (Tagged Image File Format)
Formato de imagem bitmap muito utilizado em aplicações pro� ssionais para edição e 
impressão. Garante grande quantidade de cores e excelente qualidade de imagem, porém gera 
arquivos mais pesados. O formato TIFF suporta o uso de camadas, isto é, podendo-se utilizar 
versões diferenciadas da imagem a ser trabalhada em um único arquivo.
1.6. EPS (Encapsulated PostScript)
Arquivo padrão de imagens vetoriais.Pode ser aberto em so� ware grá� cos e de desenho, 
como PhotoShop, CorelDraw, Illustrator, etc.
1.7. AI (Adobe Illustrator)
Arquivo nativo criado pelo so� ware Adobe Illustrator de imagens vetoriais. Pode ser 
aberto no Illustrator e importável em outros so� ware grá� cos e de desenho, como Photoshop, 
CorelDraw, InDesign, etc.
40WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
O Adobe Illustrator é um dos so� ware mais populares para a criação de grá� cos vetoriais. 
É um dos preferidos pelos designers devido aos recursos e fácil comunicação com o Photoshop 
e InDesign.
Os arquivos criados neste so� ware de desenho são salvos no formato AI. Desta forma, o 
ideal é abrir e editar este tipo de arquivo com este programa, mas é possível utilizá-lo no Corel 
Draw e o Inkscape.
1.8. CDR (Corel Draw)
Arquivo nativo criado pelo so� ware Corel Draw de imagens vetoriais. Com a característica 
de só funcionar nele próprio, perdendo a função de intercâmbio tão importante de outros so� ware.
O Corel Draw é um so� ware de desenho, utilizado para criar e editar arquivos grá� cos 
vetoriais. Neste programa, o arquivo � nal é salvo no formato CDR.
Uma vantagem de trabalhar com o Corel Draw é que ele permite importar diversos 
formatos, inclusive arquivos do Illustrator (AI) e arquivos vetoriais EPS. Além disso, este so� ware 
de desenho também exporta em muitos formatos, além dos já citados, também em Photoshop.
Da mesma forma do PSD, o ideal é abrir e editar arquivos CDR no Corel Draw. No entanto, 
é possível abrir esse tipo de arquivo com o Inkscape, um so� ware de desenho open source.
1.9. SVG (Scalable Vector Graphics)
Formato livre (sem vínculos com qualquer empresa/marca), o SVG é um formato vetorial 
que pode ser reconhecido pela maior parte dos navegadores web modernos. Sendo assim, você 
pode usar esse formato no seu website, blog, etc. Este formato tem se popularizado de forma 
rápida por seu tamanho ín� mo e a sua escalabilidade in� nita. Serve tanto para � guras estáticas 
quanto para imagens animadas. Redes sociais ainda não suportam o upload deste formato.
1.10. PDF (Portable Document Format)
Formato de arquivo criado pela empresa Adobe Systems para que qualquer documento 
seja visualizado, independente de qual tenha sido o programa que o originou. Por exemplo, um 
documento criado no Microso� Word quando é convertido para o formato PDF, poderá ser 
visualizado em outros dispositivos de forma idêntica ao documento original, independente do 
usuário ter ou não o programa Word instalado.
A grande vantagem dos arquivos PDF é a capacidade de manter a qualidade do arquivo 
original, seja um texto ou uma imagem. Pode ser aberto no Illustrator e PhotoShop. É importável 
em outros so� ware grá� cos e de desenho, CorelDraw, InDesign, etc.
41WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
1.11. BMP (Windows Bitmap)
O Bitmap é um formato proprietário do Windows e atualmente está quase sendo 
aposentado. É bem difícil encontrar imagens neste formato habitando a web especialmente 
porque arquivos deste tipo costumam ser pesados. Ele tem suas vantagens, como suporte para 
transparência e também para um número variado de bits por pixels, mas perdeu a relevância a 
partir do surgimento de opções mais leves e funcionais. Atualmente, não há absolutamente nada 
que justi� que a escolha deste formato com relação ao enorme leque de opções existentes.
Além dos arquivos tratados até o momento, vale ainda de maneira mais breve, trazer 
alguns outros que de igual maneira são importantes para o meio do design grá� co e assim, se 
fazem necessários para o bom andamento de projetos.
Tabela 01 - Formatos de arquivos. Fonte: do autor (2018).
2 - COMPRESSÃO DE ARQUIVOS
Estamos acostumados a fazer downloads de arquivos compactados com extensão .zip e 
.rar, formatos que diminuem signi� cativamente o tamanho total de dados em disco e o tempo 
total de download. Mas a maioria das pessoas não imagina a lógica envolvida no processo de 
compactação dos arquivos.
Grande parte dos arquivos em nosso computador possui informações repetidas, e a 
compressão não faz nada mais do que organizar e eliminar essas redundâncias. Se em um texto 
as palavras aparecem mais de uma vez, o algoritmo de compressão as armazena apenas uma vez 
e guarda a referência das posições de onde elas aparecem. Observe a frase como o exemplo:
A Copa de 2014 será no Brasil. Será que o Brasil conseguirá preparar tudo o que é 
necessário até lá?
Observe que as palavras “Brasil”, “o”, “que” e “será” aparecem duas vezes, e por isso são 
consideradas redundantes no texto. Utilizando uma compactação baseada no dicionário LZ – 
um dos mais utilizados pelos so� ware de compressão –, atribuímos um índice a cada palavra 
diferente na frase já exposta, como a seguir:
Formato
DOC
XLS
PPT
MOV
WAV
DWG
MP3
Descrição
Arquivo do Microsoft Word e pode ser aberto no BROffice.
XLS e XLSX são versões do Microsoft Excel.
Arquivo original do Microsoft Power Point.
Formato de arquivo para o QuickTime, foi criado pela Apple.
É a forma abreviada para o nome Waveform Audio File Format.
Nativo do AutoCAD, software utilizado para desenhos técnicos.
 Abreviação de MPEG Layer 3, formato de compressão de áudio. 
42WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
Figura 3 – Relação de compressão. Fonte: do autor (2018).
Em seguida reescrevemos a frase com os índices do dicionário:
1 2 3 4 5 6 7. 5 8 9 7 10 11 12 9 8 14 15 16?
Veja que o texto foi reduzido de 20 para 16 palavras, o que também resulta na diminuição 
de seu tamanho, mas é importante lembrar que o dicionário também é armazenado junto 
com o arquivo. Tendo isso em mente, � ca fácil descobrir porque arquivos maiores possuem 
um coe� ciente de compactação maior, já que existem mais repetições e um aumento pouco 
signi� cativo do tamanho do dicionário.
Mesmo que o simples exemplo acima nos dê uma boa noção de como a compactação 
funciona, na prática os algoritmos atuais são muito mais so� sticados. Os mais conhecidos, como 
RAR e ZIP, fazem uma análise inicial do arquivo veri� cando quantos padrões existem e se vale 
a pena utilizá-los, pois cada novo padrão exige um novo dicionário, o que pode resultar em um 
arquivo maior no � nal das contas.
Além das informações citadas, podemos que existem várias formas de compressão de 
arquivos digitais. Dentre as opções as opções mais utilizadas estão o formato ZIP (Winzip) e RAR 
(Winrar).
Figura 4 – Winzip e Winrar. Fonte: do autor (2018).
Além dos so� ware apresentados, nos dias atuais, é fácil encontrar sites que realizam as 
conversões de arquivos ou a compressão, que facilitam o dia a dia trazendo facilidade e praticidade, 
especialmente em casos em que não seja possível instalar o so� ware em questão, mas que exista a 
necessidade de acessar determinado projeto através dos arquivos. Ou mesmo a possibilidade de 
converter um arquivo para que seja enviado para a visualização por um cliente ou usuário que 
esteja participando de algum teste.
O Convertio é um serviço online no qual é possível converter arquivos de um formato 
para outro e conta com diversas opções dentre as quais é possível estabelecer parâmetros e 
con� gurações.
43WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
Figura 5 – Convertio. Fonte: do autor (2018).
Smallpdf é uma empresa de so� ware online especializada em Portable Document Format e 
outras ferramentas de documentos digitais disponíveis sob demanda via nuvem. Um serviço útil 
para agilizar tarefas do dia a dia.
Figura 6 – SmallPDF. Fonte: do autor (2018).
44WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
3 - UTILIZAÇÃO DE SOFTWARE
No Design Grá� co, a plataforma Adobe (Figura 07) é a mais utilizada, pela facilidade 
gerada do intercâmbio entre os so� ware. E também para saída dos arquivos seja para impressão 
oupara outro so� ware.
Figura 7 – So� ware Adobe. Fonte: do autor (2018).
Os software que utilizamos tem uma relação que se confi gura de um misto entre 
preferências pessoais e possibilidades de acesso ao software em questão. Além 
disso, temos que levar em consideração a confi guração de hardware de nossos 
equipamentos, tendo em vista que em alguns casos, não ser possível a instalação 
dos programas gráfi cos, uma vez que exigem alto desempenho dos equipamen-
tos, se fazendo necessário inclusive em alguns casos, a realização da troca de 
equipamentos, ou mesmo a melhoria com adição de memória se o equipamento 
permitir esse tipo de melhoria.
45WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
O Adobe Photoshop é um so� ware caracterizado como editor de imagens bidimensionais 
do tipo raster desenvolvido pela Adobe Systems. É considerado o líder no mercado dos editores 
de imagem pro� ssionais, assim como o programa de fato para edição pro� ssional de imagens 
digitais e trabalhos de pré-impressão. Mesmo existindo diversos concorrentes no mercado, ele 
ainda tem o absoluto destaque entre agências, escritórios de design e fornecedores do setor 
grá� co (Figura 08).
Figura 8 – Photoshop. Fonte: do autor (2018).
Para acessar um curso básico do software, acesse o link: 
https://www.youtube.com/watch?time_continue=8&v=-
V5uwg1yqtE
46WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
O Adobe Illustrator é um editor de imagens vetoriais desenvolvido e comercializado pela 
Adobe Systems. Foi criado inicialmente para o Apple Macintosh em 1985, e, foi comercializado 
para todo o público em 1995 como complemento comercial de so� ware de fontes da Adobe e da 
tecnologia PostScript desenvolvida pela empresa (Figura 09).
Figura 9 – Illustrator. Fonte: do autor (2018).
Para acessar um curso básico do software, acesse o link: 
https://www.youtube.com/watch?v=L2xMfpgJ4VI
47WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
O Adobe InDesign é um so� ware da Adobe Systems desenvolvido para diagramação e 
organização de páginas, criado para substituir o Adobe PageMaker, apresentando uma variedade 
de aprimoramentos, resultando em mais produtividade (Figura 10). Um concorrente que pode 
ser encontrado com certa frequência é o QuarkPress, que tem funções similares.
Figura 10 – Indesign. Fonte: do autor (2018).
Para acessar um curso básico do software, acesse o link: 
h t t p s : / / w w w . y o u t u b e . c o m /
watch?v=z0amVKVsFR4&t=4865s
48WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
O Adobe Premiere Pro é um programa que é empregado para a edição de vídeos 
pro� ssionais (Figura 11). Além dele, existem diversos so� ware como Sony Vegas, que tem 
qualidade semelhante para realização de edição de imagens.
Figura 11 – Premiere. Fonte: do autor (2018).
O Adobe A� er E� ects é um programa de criação de grá� cos com movimento e efeitos 
visuais da empresa Adobe Systems. É extensamente usado em pós-produção de vídeo, � lmes, 
DVDs e produções da plataforma Flash (Figura 12).
Para acessar um curso básico do software, acesse o link: 
https://www.youtube.com/watch?v=QQKsMFrNggM
49WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
Figura 12 – A� er E� ects. Fonte: do autor (2018).
O CorelDRAW é um programa de desenho vetorial bidimensional para design grá� co 
desenvolvido pela Corel Corporation, Canadá (Figura 13). Ele é um programa que usualmente 
é facilmente aprendido mesmo por pessoas que não da área da comunicação e tem uma relação 
de amor e ódio literalmente, pois como sua plataforma e interface é de fácil assimilação, tornou-
se popular, mas constantes problemas de instabilidade, � zeram com que diversas empresas, só 
o tenham para a necessidade de abertura de arquivos de fornecedores. Mas ainda assim, é uma 
importante ferramenta para o design grá� co.
Para acessar um curso básico do software, acesse o link: 
https://www.youtube.com/watch?v=fQS4v_2HWKo
Para acessar um curso básico do software, acesse o link: 
https://www.youtube.com/watch?v=wjYDDRUVn0o
50WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
Figura 13 – CorelDraw. Fonte: do autor (2018).
Além dos programas apresentados, ainda é importante trazer algumas informações dos 
sistemas operacionais mais utilizados no design grá� co. Sendo que são características importantes 
para o dia a dia em agências, escritórios e fornecedores em geral nos setores de comunicação.
A maioria das empresas utilizam o Windows, sistema operacional da Microso� , 
mais comum em computadores e notebooks em geral, o que re� ete nas empresas do setor de 
comunicação, com especial atenção aos fornecedores grá� cos (Figura 14).
Fechamento de arquivos (Gráfi ca e editorial) (Rodrigo Venturini Soares e Mara 
Aguiar Comprar) 2017 - Os temas relevantes à etapa de fechamento de arquivos 
estão presentes nesta publicação. O livro aborda a linguagem de descrição de 
páginas, os tipos de formatos de arquivos, a classifi cação das extensões de ar-
quivos, os métodos de envio, a análise das imagens e os gerenciadores de fontes. 
São estudados a função da sangria e dos links, a escalas de cores, os tipos de 
trapping e como fazer a adequação de arquivos digitais à impressão offset, fl exo-
grafi a e rotográfi ca. 
51WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
Figura 14 – Windows 10. Fonte: Techtudo (2017).
Outro sistema utilizado com frequência, especialmente em agências e escritórios de design, 
é o Mac OS X, exclusivo para equipamentos Apple, com atenção à qualidade do controle de cores 
e estabilidade, o que contribuiu para que tenha se consolidado no setor como o “queridinho”. 
Outra característica, é o fato de existirem numa quantidade menor a incidência de vírus, fato que 
ajuda na preferência em agências (Figura 15).
Figura 15 – Mac OS X Lion. Fonte: Lifewire (2017).
52WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
Uma característica clara entre os dois sistemas, é que enquanto o Windows funciona em 
praticamente qualquer con� guração de Hardware (Figura 16), o Mac OS X, é desenvolvido para o 
hardware da Apple (Figura 17). O que contribui com a diferença de preços que podem ser vistos 
entre equipamentos similares de um e do outro sistema operacional.
Figura 16 – Hardware genérico (PC). Fonte: TI (2018).
Figura 17 – Computadores Apple (PC). Fonte: Apple (2018).
Dessa forma, cabe ao pro� ssional se adaptar e escolher qual sistema prefere utilizar, 
assim como os demais so� ware que existem no mercado. Pois ambos têm qualidades e problemas 
que irão � car visíveis no dia a dia e com as preferências de trabalho, assim como os demais 
apresentados na unidade.
53WWW.UNINGA.BR
DE
SI
GN
 E
 M
UL
TI
M
ÍD
IA
 | U
NI
DA
DE
 3
ENSINO A DISTÂNCIA
4 - CONSIDERAÇÕES FINAIS
Como pode ser visto, existe uma série de detalhes que precisam ser levados em 
consideração com relação aos tipos, formatos e maneiras de compressão dos arquivos utilizados 
no design grá� co. Cada projeto tem características distintas e precisa da atenção necessária para 
que alcance os melhores resultados.
A maneira como utilizamos os so� ware, implicam diretamente no resultados dos projetos, 
tendo em vista que padrões precisam ser seguidos, mesmo que isso possa parecer um limitador 
da imaginação e criatividade, precisamos ter em mente que na verdade, são balizadores que nos 
ajudam a conseguir justamente os melhores resultados com os recursos técnicos existentes, e à 
medida que novas tecnologias são incorporadas, os so� ware tem melhorado cada vez mais, ou 
seja, acompanhado com novos recursos e ferramentas para facilitar nosso trabalho.
Portanto, é necessário que os pro� ssionais estejam capacitados na utilização de uma gama 
considerável de so�