Departamento  de  Artes  e  Design    

DESIGN DE LIVRO DIGITAL

Aluna: Mariana Ferreira Gomes Corrêa Orientadora: Rita Maria de Souza Couto

Co-orientadora: Cristina Portugal Introdução

A pesquisa desenvolvida foi parte integrante do trabalho de Pós-doutorado Junior da Dra. Cristina Portugal no Programa de Pós-graduação em Design da PUC-Rio, desenvolvido no Laboratório Interdisciplinar de Design /Educação – LIDE|DAD|PUC-Rio. Foi supervisionado pela Professora Dra. Rita Maria de Souza Couto e teve como resultados, além do livro digital, objeto do presente relatório, disponível no site www.design-educacao-tecnologia.com, um livro impresso, publicado em 2013.

A investigação, cujo tema é o Design de Hipermídia, teve como foco a fundamentação de conceitos teóricos e estéticos direcionados a projetos de hipermídia.

No presente ano, foram desenvolvidos os dois últimos módulos do livro digital: Design da Informação e Conceitos Didáticos.

No módulo Design da Informação, o tema é abordado a partir de subtemas como design de interface, arquitetura da informação e navegação, oferecendo ao leitor uma visão geral sobre o assunto. Como nos demais módulos, os textos são acompanhados por imagens, gráficos e vídeos que ilustram o conteúdo apresentado.

Em Conceitos Didáticos, por tratar dos métodos e técnicas aplicados no contexto de ensino-aprendizagem, aspectos como cognição, conteúdo e convergência de linguagens midiáticas são apresentados de forma pontual, visando trazer ao leitor reflexões e discussões sobre as práticas em sala de aula.

Apesar da constituição em módulos, o livro digital conservou sua unidade estrutural. Portanto, os dois módulos citados respeitaram o modelo que já havia sido definido anteriormente, apresentando não apenas o conteúdo textual acompanhado de exemplos, mas também suas respectivas bibliografias e o “Saiba mais”, sessão que oferece referências de livros, aplicativos e sites a fim de que o usuário possa complementar e/ ou se aprofundar em temas relacionados ao conteúdo do livro.

Esse relatório encerra a pesquisa do livro digital e traz um breve retrospecto do que foi trabalhado nos anos anteriores, além da sua etapa final de desenvolvimento realizada nesse último ano.

Justificativa Como atividade multidisciplinar, o Design trabalha com várias áreas de conhecimento,

permitindo uma visão abrangente no desenvolvimento de projetos que solucionem problemas diversos e atendam às mais variadas necessidades. Como atividade de múltiplas abordagens, o Design atua com diversas ênfases para maximizar os objetivos de um projeto.

Uma vez que os sistemas de informação estão hoje inseridos em um ambiente de permanente desafio, que requer atualização e desenvolvimento de novas formas de apresentação, para além das tradicionais, torna-se fundamental buscar novos modelos, novos métodos e novas abordagens para o desenvolvimento de sistemas de hipermídia para a Educação, que possam disponibilizar informações significativas e criar experiências

Departamento  de  Artes  e  Design    

agradáveis no processo de ensino-aprendizagem. Ruberti e Pontes (2001)[1] enfatizam esta ideia considerando os avanços das tecnologias de informação e comunicação. À escola de nosso tempo compete o árduo trabalho de incorporar em suas práticas e teorias novas formas de ensino-aprendizagem, voltadas para a potencialização de competências e para o uso de múltiplas linguagens.

Nesta mesma linha, Bonsiepe (2011)[2] discute sobre o modo de apresentar informação de maneira não linear. Para isso, usam-se os diferentes canais de percepção (visual, auditivo, tátil) e novos procedimentos para apresentar a informação. Lidar com múltiplos recursos – música, imagens, animação, cinema – requer outras competências ou literacies, além daquelas meramente discursivas.

Vindo ao encontro das ideias acima esboçadas, o projeto do livro digital, objeto de estudo da presente pesquisa, foi conceituado como um material didático que reunirá e disponibilizará para o campo acadêmico e para a sociedade em geral reflexões sobre o Design de Hipermídia. Além de contribuir para fornecer subsídios ao planejamento de sistemas de hipermídia, o livro digital também potencializará as competências necessárias ao uso de múltiplas linguagens.

Objetivo Objetivo Geral Desenvolver um projeto de livro digital que proporcione conhecimentos teóricos e

estéticos sobre técnicas, materiais, suportes etc. para a elaboração de sistemas hipermidiáticos, incluindo arquitetura da informação, layout e linguagem de programação, navegabilidade, dentre outros aspectos necessários à construção e à disponibilização na Web do livro digital.

Objetivos Específicos Desenvolver o projeto dos módulos do livro digital: Design da Informação e Conceitos

Didáticos. Criação de sistema de divulgação do livro digital que permita atualização de conteúdos

relacionados aos temas do livro.  

Método A metodologia utilizada para desenvolvimento do livro digital, objeto da presente

pesquisa, incluiu, além de um levantamento bibliográfico e documental referentes a conteúdos hipermidiáticos, estudos de recursos de Design aplicados a conteúdos de hipermídia. Foram realizados, ainda, investigações sobre recursos, ferramentas, linguagens e plataformas disponíveis para o desenvolvimento do livro digital.

Essa pesquisa resultou na preparação de um site atualmente estruturado da seguinte forma: uma página inicial; uma seção de Apresentação, composta por: Créditos, Prefácio, Apresentação do livro e Biografia da autora; o módulo Design de Hipermídia, dividido nos capítulos: Prólogo, Cor, Tipografia, Imagem, Multimídia e Tecnologia; módulo Design de Interação, formado pelos capítulos: Prólogo, Experiência do usuário, Usabilidade e Acessibilidade; módulo Design de informação, subdividido em: Introdução, Design de Interface, Arquitetura da informação e Navegação; e o quarto e último módulo, Conceitos Didáticos, cm os capítulos: Introdução, Cognição, Conteúdo e Convergência.

As principais etapas que foram percorridas no decorrer dos estudos realizados foram as seguintes:

a) Coleta de dados: elaboração do briefing, a partir do levantamento bibliográfico e documental que fundamentam esta pesquisa. Discussão dos conteúdos a fim de transformá-los em conteúdos hipermidiáticos;

Departamento  de  Artes  e  Design    

b) Organização do conteúdo: elaboração de mapas conceituais; pesquisa de imagens; escolha da narrativa e definição das metáforas visuais; elaboração do storyboard. Desenvolvimento do layout. Identificação das possibilidades de interação dos recursos de Design em projetos de hipermídia, analisando o valor de cada um deles no auxílio à motivação, aos aspectos lúdicos e à imersão;

c) Desenvolvimento da estrutura hipermidiática: investigação dos recursos, das ferramentas e das plataformas de desenvolvimento disponíveis para identificar os que melhor se adequam à proposta de criação do material didático em forma de livro digital; elaboração do Design de Interface; elaboração da arquitetura da informação; elaboração da navegação; produção e tratamento das imagens estáticas e em movimento; diagramação (dados textuais e imagens); revisão dos dados textuais após diagramação.

d) Avaliação, adequação e aprovação das interfaces gráficas; da diagramação e da navegabilidade;

e) Implementação: desenvolvimento da programação; realização de testes para verificação do funcionamento da programação; aprovação final da hipermídia para sua disponibilização; publicação do livro digital.

Livro digital A figura 1 apresentada abaixo ilustra a estrutura do livro digital on-line, cujo conteúdo

está diretamente associado aos módulos do livro impresso, que compõe a totalidade do projeto que está sendo desenvolvido pela Dra. Cristina Portugal, em sua pesquisa de pós-doutorado.

Como a disponibilização do livro digital é feita via Web, consideramos os suportes

disponíveis no mercado a fim de determinar as tecnologias ideais para sua construção. Tendo por base desktops e tablets como os principais suportes de consulta ao livro, foi necessário optar entre o uso do Flash, que proporcionaria maior interatividade, ou do HTML, que apesar de menos interativo, era suportado por todos os sistemas operacionais. Dessa forma, escolhemos trabalhar com o HTML, juntamente ao CSS3, aumentando, assim, nosso alcance nas mídias.

Figura 1: Visão geral da estrutura do livro impresso

Departamento  de  Artes  e  Design    

Tanto o texto quanto as imagens tiveram que passar por um processo de adaptação da mídia impressa para a mídia digital, trabalho este que demandou pesquisa de imagens e inúmeros estudos de possibilidades de layout, criação de ícones e menus, disposição dos elementos nas páginas, entre outros. Uma vez definido o layout final, iniciou-se a parte de elaboração, revisão e publicação on-line das páginas digitais.

O conteúdo do livro digital foi dividido em módulos com quatro temas, Design de Informação, Design de Interação, Design de hipermídia e Conceitos Didáticos. Estes temas estão subdivididos em subtemas, nos quais são apresentados sob a forma não linear de textos, de exemplos, de bibliografias e de um campo denominado Saiba mais. Os textos referem-se a reflexões teóricas e estéticas sobre o papel do Design no desenvolvimento de ambientes de Hipermídia. Os exemplos foram selecionados para ilustrar o texto e exemplificar o conteúdo por meio de vídeos, ilustrações, imagens, etc.; a bibliografia está dividida por tema para facilitar a pesquisa do leitor; já o Saiba mais consta de uma seleção de livros indicados para o aprofundamento do tema, de sites, jogos, e aplicativos, que têm por objetivo possibilitar o aprofundamento do leitor em cada tema em particular.

Na fase inicial do projeto foi desenvolvida toda a arquitetura do sistema de navegação do livro digital e foram preparados integralmente a página inicial, a apresentação do site e dois módulos de conteúdo, Design de Hipermídia e Design de Interação.

A página inicial do site (figura 2), também conhecida como Home, se utilizou da imagem de capa do livro impresso homônimo, “Design, Educação e Tecnologia” de Cristina Portugal. Por se tratar de uma adaptação digital do mesmo, verificou-se ser fundamental transpor a imagem de capa para a Home e criar uma identidade visual uníssona a fim de tornar clara aos leitores e usuários a relação existente entre as duas mídias.

A imagem do círculo colorido de confetes, além de ser uma metáfora para a própria natureza do projeto como um todo – plural em seu conteúdo, mas pontual e objetivo em suas colocações –, também serviu como base e inspiração para a criação de toda a estrutura e hierarquia visual do site.

Figura 2: Página inicial do site

Departamento  de  Artes  e  Design    

Criou-se também um logo como ícone no canto superior direito da página. houve um

trabalho de simplificação da imagem dos confetes, permitindo uma boa legibilidade da marca mesmo em uma escala reduzida. O resultado pode ser visto na figura 3.

Quanto à Apresentação do site, ela se subdivide em Créditos, Prefácio, Apresentação e Biografa da autora. A figura 4 ilustra uma das telas dessa seção.

Figura 4: Tela de Biografia, na seção de Apresentação do livro digital

Figura 3: Simplificação de imagem da página inicial do site para criação de logo

Departamento  de  Artes  e  Design    

Por ser o de conteúdo mais extenso, o módulo Design de Hipermídia foi o primeiro a ser desenvolvido. É caracterizado pela cor verde e se divide nos capítulos: Prólogo, Cor, Tipografia, Imagem, Multimídia e Tecnologia.

Na figura 5, apresentamos um exemplo de tela desenvolvida para o capítulo Cor do livro digital em seu formato final.

Figura 5: Tela do capítulo Cor, do módulo Design de Hipermídia Seguindo a mesma lógica de estruturação e construção do módulo anterior, o módulo de

Design de Interação é formado pelos capítulos: Prólogo, Experiência do usuário, Usabilidade e Acessibilidade.

Departamento  de  Artes  e  Design    

Figura 6: Tela inicial do capítulo Usabilidade, do módulo Design de Informação Presentes em todos os capítulos de todos os módulos estão as páginas de Saiba Mais e

de Bibliografia. Destinadas a quem busca se aprofundar, o Saiba Mais oferece sugestões de livros, sites e aplicativos relacionados aos assuntos tratados nos capítulos, como pode ser visto na figura 7.

Figura 7: Tela Saiba Mais do capítulo Acessibilidade, do módulo Design de Informação

Departamento  de  Artes  e  Design    

Os módulos anteriormente apresentados foram desenvolvidos e publicados on-line durante o ano de 2013. Em 2014, dando continuidade à pesquisa, foram desenvolvidos os módulos a seguir.

O módulo Design de Informação (figura 8) se divide nos seguintes capítulos: Introdução, Design de interface, Arquitetura da informação e Navegação. Seu desenvolvimento seguiu as mesmas etapas dos módulos anteriores, que consiste na adaptação do texto da mídia impressa para a digital; pesquisa de imagens, vídeos e gráficos para acompanharem e exemplificarem o conteúdo textual; criação das páginas em HTML e CSS; publicação on-line das mesmas.

Um grande trabalho de pesquisa foi feito tanto para a produção de exemplos, quanto

para se encontrar e selecionar o material do Saiba Mais. Nessa seção, buscando em diferentes mídias e trazendo o conteúdo encontrado para dentro do livro digital, possibilitou-se ao leitor-usuário entrar em contato com livros teóricos e práticos; sites de referências, páginas com exemplos criativos de aplicação dos conceitos tratados no livro ou mesmo de jogos; além de aplicativos e ferramentas para dispositivos móveis que podem ajudar no dia-a-dia. Buscou-se, portanto, expandir o alcance do livro digital, mostrando que seus conceitos e aplicações fazem parte da nossa realidade.

Figura 8: Tela do capítulo Design de interface, do módulo Design de Informação

Departamento  de  Artes  e  Design    

Figura 10: Tela do Saiba Mais, do módulo Design de Informação

Figura 9: Tela do Saiba Mais, do módulo Design de Informação

Departamento  de  Artes  e  Design    

O módulo Conceitos Didáticos, que contém os capítulos Introdução, Cognição, Conteúdo e Convergência, é o último módulo do projeto e pode ser visto na figura 11.

Adicionalmente à produção do livro digital, também foi criada uma Fanpage no Facebook (https://www.facebook.com/DesignEducacaoETecnologia) com o intuito de, não apenas divulgar o livro e o lançamento dos módulos, mas também de se criar um ambiente que desse continuidade às pesquisas realizadas através da postagem de diversos links para sites, vídeos, lançamentos de produtos e tecnologias, congressos, notícias etc. relacionados aos temas abordados no livro.

Dessa forma, através da rede social é possível disponibilizar conteúdos aos diversos usuários, de forma dinâmica e interativa, em diferentes mídias e em tempo real, criando uma cadeia de contatos e de informações permanentemente em transformação e renovação.

Além disso, a pagina abre um canal de comunicação entre a autora, Cristina Portugal, e aqueles que seguem a página Design, Educação e Tecnologia no Facebook, promovendo trocas, comentários e compartilhamentos.

Figura 11: Tela do capítulo Conteúdo, do módulo Conceitos Didáticos

Departamento  de  Artes  e  Design    

Figura 12: Tela inicial da fanpage Design, Educação e Tecnologia no Facebook

Figura 13: Tela “Sobre” da fanpage Design, Educação e Tecnologia no Facebook

Departamento  de  Artes  e  Design    

Conclusão Uma vez definido o conteúdo teórico dos temas referentes aos módulos Design da

Informação e Conceitos Didáticos, foram usadas as definições tecnológicas já implementadas nos módulos anteriores: criação de páginas para Web em HTML e CSS.

Para isso, tanto o texto quanto as imagens tiveram que passar por um processo de adaptação da mídia impressa – a partir do livro homônimo publicado pela Dra. Cristina Portugal – para a mídia digital, trabalho que demandou pesquisa e estudos.

Estes módulos encerram o projeto do livro digital que, na íntegra, é composto pelos módulos Design de Hipermídia, Design de Interação, Design de Informação e Conceitos Didáticos, além de uma sessão introdutória com Créditos, Prefácio, Apresentação e Biografia da autora.

Elaborou-se, assim, um guia digital on-line para oferecer ao público informações e dicas sobre os processos e ferramentas disponíveis para a criação de materiais hipermidiáticos, sendo uma iniciativa que surge como uma oportunidade de inserir o estudo do Design em um novo modelo de informação: globalizado, móvel, hipertextual e multimidiático.

Como desdobramento desse trabalho, criou-se também uma Fanpage no Facebook (https://www.facebook.com/DesignEducacaoETecnologia) para divulgação do livro digital e atualização de conteúdos, através de notícias, vídeos ou outros conteúdos que se relacionam aos temas do livro. Dessa forma, traz-se ao projeto maior dinamismo e uma possibilidade de renovação constantes, além de permitir um contato mais próximo com o público através da rede social.

Referências 1- RUBERTI, I. e PONTES, A. N. Mídia, educação e cidadania: considerações sobre a importância da alfabetização tecnológica audiovisual na sociedade da informação. Educação Temática Digital, Campinas, v. 3, n. 1, p. 21, 2001. 2- BONSIEPE, G. Design, Cultura e Sociedade. São Paulo: Edgar Blucher, 2011. 3- PORTER, Joshua. Designing for Social Web. Berleley: New riders, 2008. 4- GUIMARÃES, L. As Cores na mídia. São Paulo: Annablume. 2003. 5- PORTUGAL, C. Design, Educação e Tecnologia. Rio de Janeiro, Rio Books, 2013. 6- PREECE, J., ROGERS, Y., SHARP, H. Design de interação: além da interação homem-computador. Porto Alegre: Bookman, 2005. 7- ROSENFELD, L. e MORVILLE, P. Information architecture for the World Wide Web. Sebastopol, CA: O’Reilly, 2006. 8- BUXTON, B. Sketching User Experiences: Getting the Design Right and the Right Design. São Francisco: Morgan Kaufman, 2007. 9- SHEDROFF, N. Information interaction Design: a unified field theory of Design. Disponível em: <http://www.nathan.com/thoughts/unified/>. Acesso em: 05 fev. 2012. 10- SPENCE, R. Information Visualization: Design for Interaction. New Jersey: Prentice Hall, 2007. 11- TUFTE, E. The visual display of quantitative information. Cheshire, Connectictut: Graphics Press, 2002.