Este livro pretende ser uma contribuição para a disciplina de Design de Informação, servindo como bibliografia básica, abordando tanto os conceitos importantes, como também, apresentando algumas atividades práticas.
A ideia de criação deste livro surgiu quando fui convidada a lecionar a Disciplina de Design de Informação para o curso de Design Gráfico 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 necessários para o entendimento desse assunto e, também, definisse atividades que permitissem que os alunos praticassem os conceitos aprendidos.
A disciplina Design de Informação, na FAAL, é uma entre as disciplinas de projetos que os alunos de Design Gráfico têm ao longo do curso de quatro anos. Por isso, se divide em dois blocos: no primeiro bimestre é apresentando todo o conteúdo teórico, juntamente com as atividades práticas que reforçam o aprendizado e, então, no segundo bimestre eles desenvolvem um projeto de interface do usuário, reunindo o conhecimento adquirido ao longo primeiro bimestre.
Espero que seja uma contribuição útil para professores e alunos.
Sumário
Resumo
Abstract
Lista de figuras
A história da Informação
O queéDesign de Informação
Informação & Comunicação
Informação
Comunicação
Linguagem
Sintáticos
Semânticos
Pragmático
Design e Design de Informação
Design
Design de Informação
Comunicação Visual
Comunicação Visual Casual
Comunicação Visual Intencional
Comunicação Visual Prática
Comunicação Visual Estética
Comunicação Visual Simbólica
Ruído
Infográfico
Classificação por objetivo
Infográficos Narrativos
Infográficos Instrutivos
Tipos com relação ao suporte
Não interativos
Multimídias
Interativos
Metodologia de criação
Usabilidade &
Arquitetura de Informação
Design e Ergonomia Visual
Experiência do Usuário e Usabilidade
Experiência do Usuário
Usabilidade
Métodos de Avaliação
Avaliação de inspeção
Avaliação empírica
Arquitetura de Informação
Os quatro sistemas
Sistema de Organização
Sistema de Rotulação
Sistema de Navegação
Sistema de Busca
Projeto: Design de Interface
Memorial Descritivo do Projeto
As etapas de desenvolvimento
Definição do cliente (banco)
Coleta e Análise de dados
Análise das influências
Geração de Requisitos e Restrições
Desenvolvimento das alternativas - Esboço de Ideias
Análise da tarefa - Fluxograma de Tarefa
Protótipo de baixa fidelidade - Wireframe
Protótipo de alta fidelidade
Referência Bibliográfica
Apêndice A
Check-list para Análise dos Similares
Caixa eletrônico de um banco
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). Especialização em Gestão de Projetos pela FARC (2010). Possui graduação em Design com ênfase em Projeto de Produto pela Universidade Federal do Maranhão (2005). Professor Adjunto I da Faculdade de Administração e Artes de Limeira (SP), no curso de Design. Tem experiência na área do Design Ergonômico e da Interface Humano-Tecnologia, com ênfase em: Web Design, Ergonomic Design, User Experience (UX) & Usability, onde também atuou na prática com projetos como: Simulador Virtual dos Painéis 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 Maranhão (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.
Não reproduzir esta obra ou parte dela sem a devida referência ao(s) autor(es). Apropriar-se de informações de outros, sem a devida citação,éviolação de direitos autorais.
Resumo
Este livro pretende ser uma contribuição para a disciplina de Design de Informação, servindo como bibliografia básica, abordando tanto os conceitos importantes, como também, apresentando algumas atividades práticas.
A ideia de criação deste livro surgiu quando fui convidada a lecionar a Disciplina de Design de Informação para o curso de Design Gráfico 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 necessários para o entendimento desse assunto e, também, definisse atividades que permitissem que os alunos praticassem os conceitos aprendidos.
A disciplina Design de Informação, na FAAL,éuma entre as disciplinas de projetos que os alunos de Design Gráfico têm ao longo do curso de quatro anos. Por isso, se divide em dois blocos: no primeiro bimestreéapresentando todo o conteúdo teórico, juntamente com as atividades práticas que reforçam o aprendizado e, então, no segundo bimestre eles desenvolvem um projeto de interface do usuário, reunindo o conhecimento adquirido ao longo primeiro bimestre.
Espero que seja uma contribuição útil para professores e alunos.
Palavras-chave: Design, Informação, projetos, Comunicação.
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 informação para criar sentido (significado)
Figura 02: os três elementos do processo da Informação
Figura 03: os três elementos do processo da Comunicação
Figura 04: estrutura da linguagem (aspecto sintático)
Figura 05: interpretação da linguagem (aspecto semântico)
Figura 06: compreensão da linguagem (aspecto semântico)
Figura 07: a linguagem do receptor (aspecto semântico)
Figura 08: imagens e as diferentes interpretações (aspecto semântico)
Figura 09: Ícones do aplicativo Whatsapp® e Hangout®
Figura 10: intenção x interpretação (pragmático)
Figura 10: sentido figurado e sentido literal
Figura 11: sentido literal e sentido figurado
Figura 12: imagem de um tornado
Figura 13: reportagem de uma revista - Comunicação visual prática
Figura 14: folder Mais Educação
Figura 15: folder da Campanha de Amamentação com grids
Figura 16: folder de Campanha do Portal Educação
Figura 17: folder de Campanha do Portal Educação com grids
Figura 18: cartaz da Campanha Hortifruti Holywood
Figura 19: cartaz da Campanha Hortifruti Holywood com grids
Figura 20: cartaz da Campanha Beba Mais Líquidos
Figura 21: cartaz da Campanha Beba Mais Líquidos com grids
Figura 22: propaganda da Faculdade Salesiana - No seu mundo
Figura 23: reportagem sobre Aimee Fuller - Coven Magazine
Figura 24: convites de casamento - comunicação visual simbólica
Figura 25: reportagem sobre Aimee Fuller - Coven Magazine
Figura 26: contraste como ruído da comunicação visual
Figura 27: poluição visual como ruído da comunicação visual
Figura 28: poucas áreas de respiro como ruído da comunicação visual
Figura 29: áreas de respiro na comunicação visual do banco Itaú
Figura 30: infográfico “Tipos de cafp”
Figura 31: infográfico “Como o boi vira bife”
Figura 32: infográfico “Por dentro dos Planetas”
Figura 33: infográfico “Mundo Árvore - PARTE 1”
Figura 34: infográfico “Mundo Árvore - PARTE 2”
Figura 35: exemplo de infográfico de informação científica
Figura 36: exemplo de infográfico aplicado em manuais
Figura 37: exemplo de infográfico narrativo - “Biodiversidade em n~meros”
Figura 38: exemplo de infográfico narrativo - “Show do Milhão”
Figura 39: exemplo de infográfico narrativo - “Bebidas com cafeína”
Figura 40: exemplo de infográfico instrutivo - “Como o bondinho funciona”
Figura 41: exemplo de infográfico instrutivo - “Como cuidar dos dentes”
Figura 42: exemplo de infográfico instrutivo - “O processo do cafp”
Figura 43: exemplo de infográfico instrutivo - “O cprebro vitorioso”
Figura 44: exemplo de infográfico não interativo
Figura 45: videográfico Arte Folha - “Hidroelptrica de Belo Monte”
Figura 46: simulação do caso Nardoni - Fantástico (Rede Globo)
Figura 47: tela inicial do infográfico interativo - “Boca em Ação”
Figura 48: versão impressa do infográfico “Boca em Ação”
Figura 49: tela inicial do infográfico interativo - “Carnaval IG”
Figura 50: infográfico interativo - “Carnaval IG”
Figura 51: esboço para uma reportagem do jornal Folha de São Paulo
Figura 52: infográfico da seção Equilíbrio do jornal Folha de São Paulo
Figura 53: esquema das etapas da experiência do usuário
Figura 54: esquema Experiência do Usuário x Usabilidade
Figura 55: site da Nike - parte acima da dobra
Figura 56: site da Nike inteiro (homepage)
Figura 57: folder da ACSP Serviços Eletrônicos
Figura 58: folder da Bestfer
Figura 59: rótulo e ícones - Site da Nike
Figura 60: antigo site do banco Itaú
Figura 61: folder da Delamôra
Figura 62: site Lets - Homepage
Figura 63: site Lets - página de resultados
Figura 64: folder da empresa Intercuf
Figura 65: folder Eco Atlântico Digital
A história da Informação
No livro Information Design Workbook [1] o autor Kim Baer apresenta uma frase de Brenda Dervin, Professora de Comunicação de Ohio State University: “Não há nada natural na informação, independente do que seja: dados, conhecimentos, fatos, música, histórias ou metáforas - a informação sempre precisará ser projetada” (tradução própria).
Por isso a disciplina começa com um documentário da BBC, de 2012, cujo título p “Ordem e Desordem: a história da informação” (Episódio 02) e foi elaborado por Jim Al-Khalili, professor de física da Universidade de Surrey (Inglaterra). O documentário apresenta vários cientistas que ao longo da história descobriram formas de criar e armazenar informações, ou seja, pessoas que fizeram parte da história da informação. O documentário aborda a questão de que a informação nãoéalgo abstrato como o pensamento, passa a existir no momento em que os dados são apresentados em um suporte. O documentário aborda a necessidade do ser humano de se comunicar e apresenta os primeiros suportes feitos pelo homem na tentativa de se comunicar e perpetuar a informação. O documentário permite, também, outro olhar: quando buscamos informação, ou seja, compreender (entender) as coisas que nos cercam, como elas funcionam, abre-se uma porta para a inovação, e assim, p possível criar “ordem” no universo. Algo que parecia desordenado (sem sentido) através da informação - do entendimento dos seus significados - cria-se ordem (sentido). E, ao fazer sentido, dar-se margem para ir além, criar algo novo.
O Design de Informaçãoéimportante no projeto de uma peça gráfica, ou de qualquer artefato que passe informação as pessoas.
Elas precisam ser projetas de forma a fazer sentido (ordem) aos leitores e usuários da interface ou de artefato1 produzidos por designers.
O queéDesign de Informação
Para compreendermos o conceito de Design de informaçãoépreciso entender e diferenciar Informação de Comunicação. Muitas vezes, esses dois termos causam confusão e muitas pessoas sentem dificuldades em definir e separar os dois conceitos. Por isso, começaremos abordando os dois assuntos: Informação x Comunicação. Por que, compreender essa diferença permite, também, a compreensão de outros conceitos que serão abordados: Comunicação Visual, Infográficos, Experiência do Usuário, Usabilidade, Arquitetura de Informação.
O Design de Informaçãoéo projeto da informação, ou seja, a transformação de dados complexos, desestruturados e desorganizados em informação de valor e significado. O papel do designer de artefatos informacionaisécriar ordem (sentido) na desordem (sem sentido).
O homeméum ser que fala;éum ser que trabalha e se organiza; pelo trabalho transforma a natureza e a si mesmo, ao criar novos instrumentos ou artefatos, isto é, tecnologias. Para completar, devemos enfatizar, ainda, que a ação humanaéuma ação coletiva, na qual o trabalhoéexecutado como uma tarefa social e a palavra toma sentido pelo diálogo, pelas interações. Todas as diferenças no comportamento modelado existentes em uma sociedade são resultados da maneira pela qual os homens organizam as relações entre si, possibilitando o estabelecimento de valores e de regras de condutas que guiarão a construção da vida sociocultural, organizacional, econômica e política[2].
Informação & Comunicação
“Não há informação fora de um sistema qualquer de sinais e fora de um veículo ou meio apto a transmitir esses sinais”[3]. Por isso, o segundo estudo da disciplina de Design de InformaçãoéInformação, Comunicação e Linguagem.
Informação
Para um bebê que ainda não aprendeu a ler e escrever, as letras não formam palavras, ou seja, são símbolos disposto lado a lado mais que não fazem nenhum sentido para eles. Nãoédiferente de uma pessoa leiga, que não seja da área de Física, por exemplo, que acha difícil o conteúdo dessa matéria, mas quando se dedica a compreender e aprende sobre o assunto passa a achar a informação fácil, porque passa a lhe fazer algum sentido (Figura 01).
Figura 01: projetando a informação para criar sentido (significado).
illustration not visible in this excerpt
Fonte: DX.com (http://www.dx.com). Montagem feita pelo próprio autor.
Informaçãoéalgo imprescindível na obtenção de conhecimento, porque através das informaçõesépossível analisá-las, sintetizá-las e criar significados, adquirindo conhecimento que permite gerar maior qualidade nas análises e de poder de decisão. Mas, o queéinformação? São conjuntos de dados, processados, manipulados e organizados com um objetivo a ser transmitido. Então, um emissor com uma intenção muito clara, “projeta” em um suporte os elementos (dados) para que possa transmitir sua mensagem. Essa informação pode ser diferentes tipos de dados: notícias (meios de comunicação), fatos (relatos de alguém), ideias, códigos (informações em placas das máquinas de tear, informações binárias compreendidas pelos computadores), opinião. Então, a informação nãoéalgo abstrato, ela precisa de três elementos para existir: do emissor (com uma intenção), do código (sistema de sinais, a linguagem) e um meio (o suporte ou canal) que permite que a informação exista (figura 02).
Figura 02: os três elementos do processo da Informação.
illustration not visible in this excerpt
Fonte: montagem feita pelo próprio autor.
Mas, a informação pode existir sem a comunicação? Sim, a informação pode existir e nunca ser comunicada. Uma pintura antiga, contendo dados (informações), pode existir em uma caverna, em um lugar remoto e ainda não ter sido lida ou interpretada por ninguém, até hoje e, isso, não significa que a informação não esteja lá, que ela não exista, mas,épossível que nunca seja interpretada. Essaéa grande diferença entre informação e comunicação: a primeira só precisa de um emissor, dados e um canal (suporte), para que exista. Já a segunda, precisa de um receptor que a interprete para existir.
Comunicação
Então, o queécomunicação? É a transmissão de informação entre um emissor (intenção) e um receptor que interpreta e cria significados. Por isso, para existir comunicação são necessários quatro elementos: emissor, os dados, o canal e o receptor (figura 03).
illustration not visible in this excerpt
Figura 03: os três elementos do processo da Comunicação.
Fonte: montagem feita pelo próprio autor.
É fácil confundir informação e comunicação, porque em certos momentos eles se misturam, principalmente por causa do meio (canal/suporte). Quando uma pessoa fala com outra, em uma conversa por meio da fala, ocorre ao mesmo tempo a construção da informação e a comunicação, porque o emissor também se torna o canal, ou seja, o suporte ou meio (sua voz) que permite que a linguagem falada (que são os dados) seja dita e, ao mesmo tempo interpreta pelo receptor (aquele que ouve a informação).
Para que um receptor consiga compreender e interpretar a informação ele precisa conhecer a linguagem, ou seja, o sistema de sinais usados para criar a informação. Porque se eu escrever ou falar algo em inglês e você não conhecer essa língua com certeza não conseguirá compreender a informação. A linguageméprimordial para informação. E, o designer precisa compreender comoécomposta a linguagem, ou seja, seus elementos e assim “projetar” a informação.
Linguagem
A linguagem (sistema de sinais), para fazer sentido,éformada por três aspectos (sintáticos, semânticos e pragmáticos) que não são trabalhados separadamente, mais são mais fáceis de serem estudados e aprendidos quando são separados.
Sintáticos
Os aspectos sintáticos estão relacionados à estrutura da linguagem, ou seja, como os signos são combinados (inter- relações entre as partes) para criar expressões que façam sentido ao receptor, conforme apresentado na figura 04, letras formam palavras e caracteres podem forma símbolos e se utilizados em um contexto criam significados para os receptores da informação.
illustration not visible in this excerpt
Figura 04: estrutura da linguagem (aspecto sintático).
Fonte: montagem feita pelo próprio autor.
É preciso ter muito cuidado com a escolha dos elementos que irão compor a mensagem, porque termos, símbolos e linguajares errados, sem contexto e intenção bem definidos podem não fazer sentido algum ao receptor, perdendo a objetividade (foco) da comunicação.
Semânticos
O aspecto semântico está ligado ao receptor, ou seja, relacionado à questão de significação. Como os elementos criam sentido ao receptor, como ele criar os significados. Sabe-se que fazemos associações do que vemos, lemos e observamos com o nosso repertório culturas e pressupostos. É condicionado pelas premissas de quem enxerga e de como se dá a situação do ato de ver[4], ler, ouvir. O aspecto semântico está ligado ao modo como a informaçãoépercebida pelo seu receptor. A figura 05 ilustra essa questão ao criar uma brincadeira usando a palavra “vendo” para o emissor com o sentido de “ver” e o receptor interpretando como “vender”.
illustration not visible in this excerpt
Figura 05: interpretação da linguagem (aspecto semântico).
Fonte: Mundo Texto[5].
A figura 06 ilustra outro fato: quando o receptor não compreende um termo (uma palavra) usado pelo emissor. Se ele não conhece não poderá criar significado, assim, a mensagem deixa de fazer sentido.
illustration not visible in this excerpt
Figura 06: compreensão da linguagem (aspecto semântico).
Fonte: Leite[40].
Por isso,épreciso conhecer o contexto de uso e queméo receptor da mensagem para que seja usada uma linguagem apropriada (Figura 07).
illustration not visible in this excerpt
Figura 07: a linguagem do receptor (aspecto semântico).
Fonte: Santos[41]
As interpretações acerca de algo podem mudar com o tempo e com o contexto de uso. As atribuições de significados por diferentes usuários podem variar imensamente[4]. Por exemplo, o símbolo de uma carta para muitas pessoas pode representar apenas isso: carta. Mas, se essa imagem aparecer em um celular ou tablet irá significar não uma carta, mas sim, que você recebeu uma mensagem (figura 08) ou ainda um e-mail (associada também ao ícone do Gmail).
illustration not visible in this excerpt
Figura 08: imagens e as diferentes interpretações (aspecto semântico).
Fonte: Cultura Mix[42]; Sardinha[43].
Com o passar o tempo, para os usuários mais recentes, uma carta em um aparelho celular poderá não ter mais sentido algo, já que os símbolos (ícones) associados ao recebimento de uma mensagem agoraéassociado ao aplicativo que você utiliza (Figura 09).
illustration not visible in this excerpt
Figura 09: Ícones do aplicativo Whatsapp® e Hangout®
Fonte: montagem feita pelo próprio autor
Pragmático
O aspecto pragmático está ligado a intenção do emissor da mensagem ao passar uma informação, ou seja, qual seria o objetivo da informação para quem comunica.
Mas uma vez faço uso de tirinhas para exemplificar essa questão, porqueéfácil evidenciar as brincadeiras que o emissor da mensagem (o cartunista) quis apresentar ao criar a história. Na figura 10 um menino tentando parecer gentil oferece à senhora a oportunidade de saborear um delicioso caramelo, porém se irrita quando ela tentar pegar mais de um caramelo, deixando claro que a sua intenção foi usar “um” como artigo indefinido e não como numeral.
illustration not visible in this excerpt
Figura 10: intenção x interpretação (pragmático)
Fonte: Abreu[44].
É difícil separa os aspectos da linguagem quando analisamos um artefato de comunicação. A intenção do emissor (pragmático) fará com que use elementos, crie uma estrutura (sintáticos) que permita uma interpretação (semântica) pelo receptor, que irá criar significados próprios de suas experiências e vivências. Quanto mais objetivo for o emissor mais chances têm de que o receptor interprete exatamente a mensagem como ele (o emissor) quis dizer.
Muito comum na comunicação ver profissionais da área brincar com as interpretações de certas palavras ou imagens que possuem um significado real (sentido literal ou denotativo), sendo usadas em outros contextos (sentido figurado ou conotativo). A figura 10éa propaganda de um medicamento para gripe que usa a palavra “casquinha” e a imagem de uma casquinha (tipo de sorvete) no sentido literal (denotativo), porém, ao ler o texto o emissor se refere a “casquinha” no sentido figurado (conotativo) de “não se aproveitar”.
illustration not visible in this excerpt
Figura 10: sentido figurado e sentido literal
Fonte: anossaescola[6].
Outro exemploéa imagem abaixo (figura 11) no qual podemos perceber que uma imagem pode realmente dizer “mais que mil palavras”. Nesse caso, uma manipulação na imagem foi feita para parecer que “o cprebro do rapaz atrofiou” de tanto ficar na frente da televisão. Dando um sentido literal a algo que tem um sentido figurado. O leitor da informação (receptor) faz claramente a leitura (interpretação) da informação e da intenção do emissor.
illustration not visible in this excerpt
Figura 11: sentido literal e sentido figurado
Fonte: André Ramalho[7].
Antes de seguirmos com o próximo capítulo sobre Design e Design de Informação, uma proposta de atividadeésugerida para que o aluno reforce o conhecimento sobre informação, comunicação e linguagem.
Muitas vezes temos uma intenção quando falamos de nós mesmos para outras pessoas. Apresentamo-nos como queremos ser visto, porém, nem sempre a interpretação que as outras pessoas fazem de nóséexatamente como planejamos ser vistos.
illustration not visible in this excerpt
Design e Design de Informação
Para uma melhor compreensão do que seja Design de Informaçãoépreciso compreender e conceituar o que seria Design, porque ao se entender o conceito básico do que seja o primeiro, todas as outras ramificações são facilmente compreendidas. Antes de ser designer de produto ou designer gráfico, há uma ligação entre ambos - a palavra Design.
Design
Designéo processo de resolução de problemas e necessidades das pessoas, cujo resultado (do Design)ésempre um artefato de uso [8, 9], mas porque não dizer, também, de comunicação, informação, signo[4]. Porque as pessoas fazem uso de produtos, ambientes, roupas, peças gráficas e interfaces gráficas, entre outros. E, todos os artefatos, frutos do Design, também comunicam, criando significados e, muitas vezes, expressam algo sobre seus proprietários, sugerem atitudes[4].
Então, independente da ramificação que o Design tenha - Design, de produto, Design de interiores, Design de Moda, Design Gráfico, Design da Informação, etc. - estará sempre preocupado com a finalidade e o contexto de uso. Porque o designer “projeta” artefatos feitos para as pessoas e compreender essas relações (artefato x pessoas)émuito importante.
Design, então, sempre estará ligado a três questões: artefato, finalidade de uso, relação com as pessoas. Qual a necessidade do usuário? Seus anseios e desejos? Qual a finalidade do artefato? Qual o contexto de uso? Isso explica porque o volante, o assento do carro, o painel, por exemplo, são projetos cujos designers são peças fundamentais da equipe de projeto, já o projeto do motor ou partes que vão dentro do capo do carro não há fundamental necessidade desse profissional, apenas terá se o motor for exposto, ou venha a ter uma relação mais direta com o usuário.
Todos os produtos, ou as partes desse, que tenham interação direta com o usuárioécompetência do designer, e aqueles produtos ou parte deles que não haja essa relação direta não necessita desse profissional envolvido. Isso explica porque o publicitário se preocupa em como influenciar o consumidor a comprar produtos e serviços dos seus clientes e o designer se preocupa em como comunicar de forma mais eficiente, clara e objetiva, sempre pensando no contexto de uso e no usuário do artefato.
Sabemos que produtos, interfaces, peças gráficas, etc., podem ser feitas por pessoas que não são da área (infelizmente), mas o resultado não será um processo de Design, porque não estará voltado para resolver as questões do usuário e sua relação com o artefato. Muitas vezes, estará preocupado apenas com a função prática (funcionar para aquela finalidade) sem ter certeza seéa melhor solução e se funciona de forma eficiente. “O designer deve colocar o problema do usuário no centro das atenções do projeto” [9, 10].
Design de Informação
O processo de Design de Informação tem como resultado, ou seja, o seu artefato será sempre um artefato informacional que se comunica com o usuário. Sendo assim, o designer de informação trabalha dados complexos, desorganizados e constrói uma informação que seja atraente, objetiva, clara, e de fácil entendimento para quem irá usá-la. Ele estuda a melhor forma de comunicar algo, de forma efetiva, com bom gosto e que faça sentido ao leitor/usuário.
O Design sempre acrescenta propósito e planejamento à criação. Por isso o designer de informação faz pesquisas, testa ideias e faz uso de ferramentas como texto, gráfico, cores, texturas, ilustrações para criar a Comunicação Visual. Designéum processo único de solução de problemas.
Design de Informaçãoéuma área do Design gráfico que objetiva equacionar os aspectos sintáticos, semânticos e pragmáticos que envolvem os sistemas de informação através da contextualização, planejamento, produção e interface gráfica da informação junto ao seu público alvo. Seu princípio básicoéo de otimizar o processo de aquisição da informação efetivado nos sistemas de comunicação analógicos e digitais [11].
Comunicação Visual
Como já vimos, Comunicaçãoéa transmissão de uma informação - dados processados, manipulados e organizados[3]inseridos em um meio (canal ou suporte) - entre um emissor, aquele que tem a intenção e envia a mensagem, para um receptor, aquele que interpreta e cria os significados. Então, o que seria comunicação visual?
Existe comunicação em uma imagem? A figura 12 apresenta uma paisagem e nelaépossível observar um tornado. Alguns poderiam interpretar a informação desta imagem como um acontecimento ruim, perigoso, outros, porém, podem ver a beleza da natureza. Poderão existir muitos pontos de vistas e diversas informações podem ser extraídas de uma imagem.
Abbildung in dieser Leseprobe nicht enthalten
Figura 12: imagem de um tornado.
Fonte: Tornado High Definition Wallpaper[12].
Fotografias, ilustrações, comunicam algo que pode estar aberta a várias interpretações, nem sempre igual às intenções de quem as fizeram. Por isso, comunicação visual pode ser considerada como um mix de símbolos e elementos (imagens, texto, cores e tons, ícones, texturas, ilustrações, ponto, forma, direção, movimento, escala, dimensão) usados para passar uma informação. Bruno Munari em seu livro “Design e Comunicação Visual”[13]fala sobre a Comunicação Visual e a divide em comunicação Visual Casual que seria aquela passível de diversas interpretações e olhares e, a Comunicação Visual Intencional (objetivo do designer) que seria aquela que tem uma intenção muito clara e objetiva fazendo com que o leitor (receptor) a compreenda facilmente.
Comunicação Visual Casual
Pense na seguinte cena: um rapaz está em um Campus Universitário, sentado abaixo de uma árvore, quando observa uma pessoa jogar um resto de sanduíche no chão, então resolve tirar uma foto do pedaço de sanduíche no chão. Essa foto terá certo significado para o rapaz que a tirou, porque ele irá lembrar-se do ato errado de quem jogou o lixo no chão. Para qualquer outra pessoa que não sabe da cena e que veja a foto poderá ficar confuso e não entender porque uma pessoa tiraria foto de um resto de lanche no chão.
A Comunicação Visual Casualéaquela que pode ser livremente interpretada, com diferentes significados, dependendo sempre de quem vê, ou seja, aberta a diferentes olhares e percepções. Fotografias, ilustrações, esculturas, enfim, muitas outras formas de arte, podem abordar esse tipo de comunicação, despreocupadas com seus interpretadores, os receptores da mensagem.
Comunicação Visual Intencional
A comunicação visual “projetada” por designers tem sempre o foco na objetivação. Na comunicação visual intencional os elementos são trabalhados de forma a criar um significado intencional, ou seja, passar uma informação de forma precisa (objetividade). Por isso, a comunicação visual intencional manipula e organiza os dados (imagens, ilustrações, textos, ícones, cores, texturas) para gerar uma comunicação clara, objetiva e eficiente, no qual a intenção do emissor será fácil e claramente compreendida e interpretada pelo receptor.
Lobach[9]em seu livro “Design Industrial” afirma que os artefatos frutos do Design podem ter três funções: prática, estética e simbólica. Para entender que ligação essas funções tem com a comunicação visual intencionalépreciso, primeiramente, recordar o que seria cada função.
A função prática atende ao objetivo básico e primordial para qual o artefato foi criado. Por exemplo, uma cadeira serve para sentar (de forma correta, confortável), se ela cumpriu esse papel, conseguiu atender a sua função prática. Uma informação escrita em um pedaço de papel que foi lida e compreendida por seu leitor cumpre sua função prática.
Já a função estética tem ligação com atração e beleza, aquilo que seria “agradável aos olhos”. A função estética pode estabelecer a escolha de um produto no meio de tanto outros, ou ainda, definir a escolha quando dois produtos têm condições de lhe atender da mesma forma e, ambos, estão com preço acessível. Com a informação nãoédiferente, um bilhete de amor escrito em um pedaço de papel e a mesma informação trabalhada em forma de cartão, com canetas coloridas, pequenos corações, ilustrações, etc. Qual deles seria mais atrativo e agradável de ler?
Já a função simbólica vai além do que se considera bonito, essa função tem ligação com questões afetivas e emocionais, estão ligadas as associações que fazemos com experiências vividas ou, também, ligada a forma como queremos ser vistos. Tem uma conexão com as lembranças, sensações, status, entre outras coisas.
Após o esclarecimento das funções, fica mais fácil entender como funciona para a Comunicação Visual. Bruno Munari[13]dividiu a comunicação visual em prática e estética, mas veremos que a ela também pode ser simbólica, assim como os demais artefatos que são frutos do Design.
Comunicação Visual Prática
A comunicação visual prática, assim como a função prática descrita por Lobach[9]se preocupa com o básico e mais primordial da comunicação visual: fazer uso de texto, imagens, cores para passar uma informação intencional de forma mais tradicional. Caracterizada pelo alinhamento e simetria de texto e imagens, muitas vezes, com predominância de uma quantidade maior de texto. As imagens tem apenas um papel “ilustrativo”, ou seja, ilustrar a informação passada através do texto.
A figura 13 apresenta uma reportagem da Revista Movie, edição nº 6, que fala do sucesso de uma brasileira em Hollywood. Muito comum ainda nas revistas o uso tradicional da comunicação visual, os rótulos, títulos das reportagens, com uma fonte grande, o texto com uma fonte bem menor e o uso de uma imagem usando o espaço de 02 colunas para “ilustrar” a informação textual que está dividida em três colunas. Faz uso de cores, porém de forma moderada para chamar atenção de algumas áreas (título e frase em destaque ao final da página). Muitas reportagens em revista ainda utilizam esse padrão, fazendo uso da comunicação visual prática, cujo foco da preocupaçãoéna linguagem correta e cumprimento do objetivo queéinformar o leitor sobre o mundo do cinema.
illustration not visible in this excerpt
Figura 13: reportagem de uma revista - Comunicação visual prática.
Fonte: Revista Movie - 6ª Ed.[14].
Outro exemplo, do uso da comunicação visual práticaéo folder do Programa Mais Educação da Secretaria de Educação do Governo do Estado do Acre (figura 14) que desenvolve a estrutura, dimensionamento e formato de forma muito tradicional. Imagens e texto ocupam o mesmo alinhamento: uma coluna para cada aba/dobra do folder, mantendo sempre uma simetria (linha central).
illustration not visible in this excerpt
Figura 14: folder Mais Educação
Fonte: Melo[15].
A figura 15 apresenta o folder da campanha de Amamentação do Ministério da Saúde do Governo Federal que incentiva a amamentação. Apesar de o folder trabalhar em duas áreas, capa e contracapa, com imagens bem manipuladas por programas de computação gráfica e de certa forma atrativas, chegando a ser quase uma comunicação visual estética, não são imagens de impacto, elas apenas ilustram a informação do texto. Outro detalheéo alinhamento de toda a informação textual e da imagem do folder. Acrescentou-se ao folder original linhas verticais, como margens, para que fosse possível perceber que todo o texto e imagens ocupam a mesma coluna, o mesmo alinhamento e simetria.
illustration not visible in this excerpt
Figura 15: folder da Campanha de Amamentação com grids.
Fonte: Bianca[16](grids acrescentado pela autora).
Comunicação Visual Estética
A comunicação visual estética, assim como a função estética descrita por Lobach[9]se preocupa em prender a atenção, ser atrativo e “agradável aos olhos”. As imagens não apenas ilustram, como também, são suporte do texto, tendo grande importância porque servem como destaque, um ponto focal do projeto. Cores são trabalhadas como destaque e segregação da informação e elementos como a configuração (disposição, layout, tipografias, etc.), acabamento, ilustrações têm grande importância no projeto.
A figura 16 mostra uma campanha do Portal da Educação na sua página do Google Plus, no qualépossível observar a comunicação
illustration not visible in this excerpt
Figura 16: folder de Campanha do Portal Educação
Fonte: Portal da Educação[45].
[...]
1 Artefato: objeto feito ou modificado pelo homem.
-
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X. -
Upload your own papers! Earn money and win an iPhone X.