Você está na página 1de 14

See

discussions, stats, and author profiles for this publication at:


https://www.researchgate.net/publication/270570507

Design de Informao: base


para a disciplina no curso de
Design
Book January 2015

CITATIONS

READS

181

1 author:
Fabiane Rodrigues Fernandes
Universidade Metodista de Piracicaba (Unimep)
30 PUBLICATIONS 0 CITATIONS
SEE PROFILE

Some of the authors of this publication are also working on these related
projects:

Visual Perception and User Experience View project

Available from: Fabiane Rodrigues Fernandes


Retrieved on: 14 November 2016

FABIANE RODRIGUES FERNANDES

Design de
Informao
base para a disciplina no curso de Design

Edio 2015

Ttulo: Design de Informao: base para a disciplina no curso de Design


Edio: 2

[1 Edio, Munique: GRIN, 16 maio de 2014]

Ano: 2015
Local: Rio Claro
ISBN-13: 978-1-5025-3312-8
ISBN-10: 150253312X
Publicao: FRF Produes
Marca de registro: CreateSpace (impresso nos Estados Unidos da Amrica)
Obra registrada na Fundao Biblioteca Nacional

Fabiane Rodrigues Fernandes, 2014. Todos os direitos reservados.

Sobre a autora: Doutorado (em andamento) em Design com nfase

em Ergonomia pela FAAC UNESP/Bauru (2017). Mestre em Design


com nfase em Ergonomia pela FAAC - UNESP/Bauru (2013).

Especializao em Gesto de Projetos pela FARC (2010). Possui


graduao em Design com nfase em Projeto de Produto pela
Universidade Federal do Maranho (2005). Professor Adjunto I da

Faculdade de Administrao e Artes de Limeira (SP), no curso de


Design. Tem experincia na rea do Design Ergonmico e da

Interface Humano-Tecnologia, com nfase em: Web Design,

Ergonomic Design, User Experience (UX) & Usability, onde tambm


atuou na prtica com projetos como: Simulador Virtual dos Painis

das Lavadoras da Brastemp e Consul e Desenvolvimento de diversos


websites.
About the author: Doctorate (PhD in progress) in Design with focus
on Ergonomic at the FAAC - UNESP (2017). Master of Sciency in
Design with focus on Ergonomic at the FAAC - UNESP (2013). Master
of Business Administration in Project Management at the FARC (2010).
Bachelor in Design with focus on Product Design at the Federal
University of Maranho (2005). Professor (Adjunt I) at Limeira College
of Administration and Arts FAAL (SP), in Design's course. Experience
in the Ergonomic Design and Human-Technology Interface, with
emphasis in: Web Design, Ergonomic Design, Usability & UX (User
Experience), where she also served in practice with projects like:
Simulator

Virtual

Panels

of

Washers

Brastemp

and

Consul

Development and various websites.


No reproduzir esta obra ou parte dela sem a devida referncia ao(s)
autor(es). Apropriar-se de informaes de outros, sem a devida citao,
violao de direitos autorais.

Resumo
Este livro pretende ser uma contribuio para a disciplina de Design
de Informao, servindo como bibliografia bsica, abordando tanto

os conceitos importantes, como tambm, apresentando algumas


atividades prticas.

A ideia de criao deste livro surgiu quando fui convidada a lecionar

a Disciplina de Design de Informao para o curso de Design Grfico

da FAAL, no primeiro semestre de 2014. Ao definir o plano de

ensino, percebi o quanto seria interessante ter um livro que


abordasse os conceitos necessrios para o entendimento desse
assunto e, tambm, definisse atividades que permitissem que os
alunos praticassem os conceitos aprendidos.

A disciplina Design de Informao, na FAAL, uma entre as


disciplinas de projetos que os alunos de Design Grfico tm ao
longo do curso, de quatro anos. Por isso, se divide em dois blocos:

no primeiro bimestre apresentando todo o contedo terico,


juntamente com as atividades prticas que reforam o aprendizado

e, ento, no segundo bimestre eles desenvolvem um projeto de


interface do usurio, reunindo o conhecimento adquirido ao longo
primeiro bimestre.

Espero que seja uma contribuio til para professores e alunos.

Palavras-chave: Design, Informao, projetos, Comunicao.

Abstract
This book is a contribution to the discipline of Information Design, as
basic bibliography, covering both the important concepts as well as
presents some practices.
The idea of writing this book came when I was invited to teach the
discipline of Information Design for the Graphic Design course of
FAAL, in the first half of the year 2014. By setting the syllabus, I
realized how important it is have a book that cover the necessary
concepts for understanding the subject and also define activities that
allow students to practice the learned concepts.
This discipline in FAAL is one of several practice disciplines that
students of Graphic Design have during the course. So, is divided into
two blocks: the first two months presents the entire theoretical content,
along with practical activities that reinforce learning and then, in the
second months they develop a UI design, bringing together the
knowledge acquired throughout the first two months.
I hope it is a useful contribution to teachers and students.

Keywords: Design , Information, projects , communication

Lista de Figuras
Figura 01: projetando a informao para criar sentido (significado). ......... 15
Figura 02: os trs elementos do processo da Informao............................... 16
Figura 03: os trs elementos do processo da Comunicao. ......................... 17
Figura 04: estrutura da linguagem (aspecto sinttico)...................................... 19
Figura 05: interpretao da linguagem (aspecto semntico). ........................ 20
Figura 06: compreenso da linguagem (aspecto semntico)......................... 20
Figura 07: a linguagem do receptor (aspecto semntico). .............................. 21
Figura 08: imagens e as diferentes interpretaes (aspecto semntico). .. 21
Figura 09: cones do aplicativo Whatsapp e Hangout ............................... 22
Figura 10: inteno x interpretao (pragmtico) ............................................... 23
Figura 10: sentido figurado e sentido literal ......................................................... 24
Figura 11: sentido literal e sentido figurado ......................................................... 25
Figura 12: imagem de um tornado. .......................................................................... 30
Figura 13: reportagem de uma revista Comunicao visual prtica. ....... 35
Figura 14: folder Mais Educao ................................................................................ 36
Figura 15: folder da Campanha de Amamentao com grids. ....................... 37
Figura 16: folder de Campanha do Portal Educao ......................................... 38
Figura 17: folder de Campanha do Portal Educao com grids. ................... 39
Figura 18: cartaz da Campanha Hortifruti Holywood ......................................... 41
Figura 19: cartaz da Campanha Hortifruti Holywood com grids. ................... 42
Figura 20: cartaz da Campanha Beba Mais Lquidos. ........................................ 43
Figura 21: cartaz da Campanha Beba Mais Lquidos com grids. ................... 43
Figura 22: propaganda da Faculdade Salesiana No seu mundo. .............. 44

Figura 23: reportagem sobre Aimee Fuller Coven Magazine. .................... 46


Figura 24: convites de casamento comunicao visual simblica. ........... 47
Figura 25: reportagem sobre Aimee Fuller Coven Magazine. .................... 48
Figura 26: contraste como rudo da comunicao visual................................. 50
Figura 27: poluio visual como rudo da comunicao visual. .................... 51
Figura 28: poucas reas de respiro como rudo da comunicao visual. .. 52
Figura 29: reas de respiro na comunicao visual do banco Ita. ............. 53
Figura 30: infogrfico Tipos de caf ...................................................................... 58
Figura 31: infogrfico Como o boi vira bife ....................................................... 59
Figura 32: infogrfico Por dentro dos Planetas ................................................ 60
Figura 33: infogrfico Mundo rvore PARTE 1 ............................................. 62
Figura 34: infogrfico Mundo rvore PARTE 2 ............................................. 63
Figura 35: exemplo de infogrfico de informao cientfica .......................... 64
Figura 36: exemplo de infogrfico aplicado em manuais ................................ 65
Figura 37: exemplo de infogrfico narrativo Biodiversidade em nmeros.
................................................................................................................................................. 67

Figura 38: exemplo de infogrfico narrativo - Show do Milho ................ 68


Figura 39: exemplo de infogrfico narrativo Bebidas com cafena ....... 69
Figura 40: exemplo de infogrfico instrutivo Como o bondinho funciona
................................................................................................................................................. 70

Figura 41: exemplo de infogrfico instrutivo Como cuidar dos dentes71


Figura 42: exemplo de infogrfico instrutivo O processo do caf ........ 72
Figura 43: exemplo de infogrfico instrutivo O crebro vitorioso ........ 73
Figura 44: exemplo de infogrfico no interativo ............................................... 74
Figura 45: videogrfico Arte Folha Hidroeltrica de Belo Monte .......... 75
Figura 46: simulao do caso Nardoni Fantstico (Rede Globo)............... 76
Figura 47: tela inicial do infogrfico interativo Boca em Ao ............... 77

Figura 48: verso impressa do infogrfico Boca em Ao ........................... 78


Figura 49: tela inicial do infogrfico interativo Carnaval IG ..................... 79
Figura 50: infogrfico interativo Carnaval IG ................................................. 79
Figura 51: esboo para uma reportagem do jornal Folha de So Paulo ... 82
Figura 52: infogrfico da seo Equilbrio do jornal Folha de So Paulo .. 82
Figura 53: esquema das etapas da experincia do usurio ............................ 86
Figura 54: esquema Experincia do Usurio x Usabilidade ............................. 87
Figura 55: trade, em ordem, da Arquitetura de Informao. ......................... 90
Figura 56: os quatros sistema da A.I interligados ............................................... 91
Figura 57: site da Nike parte acima da dobra ................................................... 92
Figura 58: site da Nike inteiro (homepage) ............................................................ 94
Figura 59: folder da ACSP Servios Eletrnicos .................................................... 95
Figura 60: folder da Bestfer .......................................................................................... 97
Figura 61: rtulo e cones Site da Nike ................................................................ 97
Figura 62: antigo site do banco Ita ......................................................................... 99
Figura 63: folder da Delamra ...................................................................................100
Figura 64: site Lets - Homepage ...............................................................................101
Figura 65: site Lets pgina de resultados ..........................................................102
Figura 66: folder da empresa Intercuf. ...................................................................103
Figura 67: folder Eco Atlntico Digital ....................................................................104

Sumrio
Resumo
Abstract
Lista de figuras
A histria da Informao .......................................................................... 12
O que Design de Informao ................................................................................. 13
Informao & Comunicao .................................................................... 15
Informao ....................................................................................................................... 15
Comunicao .................................................................................................................. 17
Linguagem ....................................................................................................................... 18
Sintticos...................................................................................................................... 18
Semnticos .................................................................................................................. 19
Pragmtico ................................................................................................................. 22
Design e Design de Informao .............................................................. 27
Design .............................................................................................................................. 27
Design de Informao ................................................................................................. 28
Comunicao Visual .................................................................................. 30
Comunicao Visual Casual ........................................................................................ 31
Comunicao Visual Intencional .............................................................................. 32
Comunicao Visual Prtica ................................................................................. 33
Comunicao Visual Esttica ................................................................................ 37
Comunicao Visual Simblica ............................................................................ 45
Rudo................................................................................................................................. 49
Infogrfico .................................................................................................. 56
Classificao por objetivo ........................................................................................... 66

Infogrficos Narrativos ........................................................................................... 66


Infogrficos Instrutivos ........................................................................................... 69
Tipos com relao ao suporte .................................................................................. 74
No interativos ......................................................................................................... 74
Multimdias ................................................................................................................. 75
Interativos ....................................................................................................................77
Metodologia de criao .............................................................................................. 80
Usabilidade & Arquitetura de Informao ............................................ 84
Design e Ergonomia Visual ........................................................................................ 84
Experincia do Usurio e Usabilidade .................................................................... 85
Experincia do Usurio........................................................................................... 85
Usabilidade ................................................................................................................ 86
Mtodos de Avaliao ............................................................................................ 88
Avaliao de inspeo....................................................................................... 88
Avaliao emprica ............................................................................................. 88
Arquitetura de Informao ........................................................................................ 89
Os quatro sistemas .................................................................................................. 90
Sistema de Organizao.................................................................................... 91
Sistema de Rotulao ........................................................................................ 96
Sistema de Navegao ..................................................................................... 98
Sistema de Busca ...............................................................................................100
Projeto: Design de Interface .................................................................. 108
Memorial Descritivo do Projeto ...............................................................................108
As etapas de desenvolvimento ...........................................................................109
Definio do cliente (banco) ..........................................................................109
Coleta e Anlise de dados ..............................................................................109
Anlise das influncias ......................................................................................109

Gerao de Requisitos e Restries .............................................................109


Desenvolvimento das alternativas Esboo de Ideias ........................... 110
Anlise da tarefa Fluxograma de Tarefa .................................................. 111
Prottipo de baixa fidelidade Wireframe ................................................ 112
Prottipo de alta fidelidade ............................................................................ 112
Referncia Bibliogrfica ......................................................................... 113
Apndice A ............................................................................................... 119

Você também pode gostar