Design na mídia

impressa e digital
Diferença  entre  diagramação  e  interface  
Conceito base
•  Os recursos da mídia digital evoluíram a partir da
mídia impressa e seus conceitos básicos são
similares.

•  Isso significa que o conceito de diagramação

muda pouco entre as mídias.

•  Diferenças entre as mídias impressa e digital:

2
Suporte
Mídia  impressa  
Papel:  
Revistas  
Livros  
Panfletos  
Brochuras  
Cartazes  
 
CMYK  

3
Suporte
Mídia  impressa   Mídia  digital  
Papel:   Monitores:  
Revistas   Sites  
Livros   SoAware  
Panfletos   Jogos  eletrônicos  
Brochuras   TV  
Cartazes   Cinema  
   
CMYK   RGB  

4
Experiência
Mídia  impressa  
Leitura  

5
Experiência
Mídia  impressa   Mídia  digital  
Leitura   Leitura  
Interação  
Escrita  

6
Tempo de leitura
Mídia  impressa  
Normalmente,  longo  

7
Tempo de leitura
Mídia  impressa   Mídia  digital  
Normalmente,  longo   Normalmente,  curto  

8
Visualização
Mídia  impressa  
Sempre  a  mesma  

9
Visualização
Mídia  impressa   Mídia  digital  
Sempre  a  mesma   Muda  de  acordo  com  os  recursos  do  
receptor.  

10
Áreas principais
Mídia  impressa  
Página  da  direita  

11
Áreas principais
Mídia  impressa   Mídia  digital  
Página  da  direita   Topo  da  página  (evitando  o  scroll)  
 

12
Tipografia
Mídia  impressa  
Serifa  

13
Tipografia
Mídia  impressa   Mídia  digital  
Serifa   Sem  serifa  

14
O que é uma interface ?
•  A interface serve de base para a interação entre
as informações e o leitor/receptor, que a partir de
agora trataremos como usuário.

Usuário Sistema

Interface

15
O que é uma interface ?
•  Idealmente, o usuário deve saber intuitivamente
como as interfaces funcionam.

•  Interfaces utilizam recursos de hipermídia

(principalmente, links).

16
Elementos de interface
na Web
•  Elementos  gráficos  simples:  pontos  e  linhas  de  todo  Opo  (livres,  
retas,  quebradas  curvas,  etc.)    
•  Elementos  geométricos,  com  ou  sem  contorno:  polígonos,  
círculos,  elipses,  ovais,  etc.    
•  Tipos:  letras  de  diferentes  formas  e  estrutura,  uOlizadas  para  
apresentar  mensagens  textuais.    
•  Gráficos:  logoOpos,  ícones,  etc.    
•  Ilustrações  
•  Fotografias  

17
Elementos de interface
na Web
•  Elementos  gráficos  simples:  pontos  e  linhas  de  todo  Opo  (livres,  
retas,  quebradas  curvas,  etc.)    
•  Elementos  geométricos,  com  ou  sem  contorno:  polígonos,  círculos,  
elipses,  ovais,  etc.    
•  Tipos:  letras  de  diferentes  formas  e  estrutura,  uOlizadas  para  
apresentar  mensagens  textuais.    
•  Gráficos:  logoOpos,  ícones,  etc.    
•  Ilustrações  
•  Fotografias  

•  Links,  Menus,  Botões  

•  Animações  
•  Video  
•  Audio   18

•  Caixas  de  texto