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

O presente trabalho é parte integrante da pesquisa desenvolvida durante o estágio de Pós-doutorado Junior da Dra. Cristina Portugal. Tal pesquisa resultou em um material didático intitulado “Design, Educação e Tecnologia”, que recebeu o “Auxílio à Editoração” (APQ 3) - 2012.2 - Faperj, sendo publicado nos formatos de livro impresso e de livro digital (www.design-educacao-tecnologia.com).

Neste trabalho foi desenvolvido o conteúdo em forma de livro digital com objetivo de disponibilizar aos alunos e interessados conceitos teóricos e estéticos para projetos de hipermídia. O conteúdo se divide em módulos com quatro temas: Design da Informação, Design de Interação, Design de Hipermídia e Conceitos Didáticos. Estes temas se separam em subtemas apresentados em forma não linear de textos; de exemplos, por meio de vídeos, animações, imagens, jogos etc.; de bibliografias, divididas por tema para facilitar a pesquisa do leitor; e de um campo denominado “Saiba mais”, que oferece referências de livros, aplicativos e sites que podem ser consultados pelo usuário, como informação complementar ao conteúdo do livro.

O desenvolvimento do livro “Design, Educação e Tecnologia”, – uma vez que o tema abordado – Hipermídia – e o objeto de estudo dessa pesquisa – livro digital – se confunde, o próprio processo de construção do livro consistiu na aplicação dos conceitos de Design de Hipermídia, possibilitando transformar o conteúdo teórico do livro em prática. Consequentemente, a apresentação de informação de maneira não linear, como hipertexto, em estrutura de nós semânticos ligados entre si (em rede), oferecem alternativas para a navegação, e sua utilização possibilita ao usuário experiências inovadoras.

O projeto do referido livro está sendo desenvolvido no âmbito do Laboratório Interdisciplinar de Design /Educação – LIDE|DAD|PUC-Rio e é supervisionado pela Professora Dra. Rita Maria de Souza Couto. Nesse espaço são desenvolvidas pesquisas sobre ensino de Design e Design na educação.

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 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

Departamento  de  Artes  e  Design    

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 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 à sua construção e sua disponibilização na Web.

Com consecução desse objetivo, espera-se constituir um espaço acadêmico direcionado ao aprofundamento de reflexões, discussões e práticas da atividade conceitual e projetual do Design no campo de projetos de hipermídia com fins educativos, visando a resignificação de seus usos escolares e sua função social.

O objetivo desse projeto está intrinsecamente relacionado aos resultados esperados por Cristina Portugal no desenvolvimento de suas pesquisas, sendo eles:

• Investigar as diversas relações do Design em Situações de Ensino-aprendizagem referentes ao desenvolvimento de sistemas de hipermídia e à interação de sua práxis com a Educação e a sociedade no qual se inserem.

• Fomentar o exercício da reflexão, do debate e da crítica, proporcionando uma visão abrangente da área do Design e suas possíveis aplicações em ambientes de hipermídia educacionais.

• Através do livro digital, disponibilizar para o campo acadêmico e para a sociedade em geral as principais reflexões realizadas na pesquisa;

• Permitir o livre acesso de professores e alunos ao livro digital para utilização do conteúdo em disciplinas, cursos e aulas;

• Contribuir para o desenvolvimento de sistemas hipermidiaticos com foco na experiência do usuário.

Método A metodologia que foi 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 por uma página inicial, uma seção de Apresentação, composta por: Créditos, Prefácio, Apresentação do livro e Biografia da autora, e dois módulos: Design de Hipermídia, dividido nos capítulos: Prólogo, Cor, Tipografia, Imagem, Multimídia e Tecnologia; e Design de Interação, formado pelos capítulos: Prólogo, Experiência do usuário, Usabilidade e Acessibilidade. O terceiro módulo,

Departamento  de  Artes  e  Design    

Design de informação, já está em desenvolvimento, porém ainda não se encontra disponível on-line. O quarto módulo, Conceitos Didáticos, já possui o conteúdo textual, faltando, porém, sua passagem para o Layout em formato HTML.

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;

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.

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

Departamento  de  Artes  e  Design    

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.

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 e inúmeros estudos de possibilidades de layout, criação de ícones e menus, disposição dos elementos nas páginas, entre outros.

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.

Até o momento, já foi desenvolvida toda a arquitetura do sistema de navegação do livro digital e 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. O módulo Design de informação já se encontra em estágio de finalização.

PÁGINA INICIAL e APRESENTAÇÃ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. A partir do círculo, foram definidas as posições dos demais elementos na tela, de forma a estarem alinhados com as cores dos confetes. Optou-se por esse tipo de alinhamento, uma vez que as cores em que os módulos estão posicionados foram utilizadas como as cores predominantes e características dos seus respectivos módulos, tornando-se assim identificadores de seção. Ou seja: cada módulo possui uma cor e essa cor está associada ao posicionamento do módulo em relação ao círculo da página inicial.

Departamento  de  Artes  e  Design    

Figura 2: Página inicial do site Uma necessidade relativa à estrutura de navegação do livro digital era a criação de um

recurso que permitisse ao usuário, de qualquer página do site, retornar à página principal. Por isso, foi criado um logo que visualmente se associava a Home e, consequentemente, ao círculo colorido. Como a estratégia escolhida para implementação desse recurso se daria através do uso do 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.

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

Departamento  de  Artes  e  Design    

Quanto à Apresentação do site, ela se subdivide em Créditos, Prefácio, Apresentação e Biografa da autora. Por se tratar de uma seção distinta dos demais módulos que trazem o conteúdo do livro propriamente dito, definiu-se que o próprio título do livro digital, centralizado na imagem do círculo de confetes, serviria como link de acesso à esse conteúdo. Além disso, optou-se por uma identidade visual mais próxima da utilizada pelo livro impresso, marcando ainda mais essa distinção para os módulos de design. A figura 4 ilustra uma das telas dessa seção.

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

Módulo DESIGN DE HIPERMÍDIA Sistemas de hipermídia podem ser entendidos a partir da relação entre hipertexto e

multimídia e partem da hibridação desses dois conceitos: o hipertexto caracteriza-se como uma matriz de textos que pode ser acionada de modo não linear, direcionando-se a outros textos relacionados conceitualmente. A multimídia compreende o conjunto de meios que são usados na representação de uma informação, ou seja, textos, imagens, sons e vídeos. Nesse sentido, dada à correlação de todos esses elementos, a multimídia se configura como um dos meios mais eficazes para apresentar informações, ampliando substancialmente a compreensão de uma mensagem.

No âmbito do projeto mencionado nesse livro, apresentam-se técnicas e métodos de Design aplicados em ambientes de hipermídia, visando promover a potencialização e o enriquecimento da construção da legibilidade do discurso comunicativo em sistemas hipermidiáticos, com os conceitos do novo tempo de interatividade, da conectividade, da navegabilidade não linear e da multiplicidade.

Departamento  de  Artes  e  Design    

Por ser o de conteúdo mais extenso, Design de Hipermídia foi o primeiro módulo a ser desenvolvido. É caracterizado pela cor verde e se divide nos capítulos: Prólogo, Cor, Tipografia, Imagem, Multimídia e Tecnologia. Durante a bolsa de pesquisa do ano de 2012, os capítulos de Cor e Tipografia já haviam sido feitos. No entanto, após alguns testes, verificou-se a necessidade de reavaliar as cores empregadas e a apresentação do menu.

Decidimos fazer uma nova versão, em que se reduziu o número de cores do módulo: em lugar de dois tons de verde, passou-se a utilizar apenas um. Além disso, definiu-se que as cores de fundo dos módulos seriam mais suaves e o branco seria empregado em mais áreas. Com isso, diminuiu-se o peso visual do fundo de tela, valorizando o conteúdo.

Na primeira versão do site, o menu, composto por um menu principal e um submenu, era todo horizontal em ambas as hierarquias. Na nova versão, a fim de resolver problemas relacionados à programação em CSS3 que causavam diversos desalinhamentos, o submenu passou a ser vertical. Além disso, foi retirado o fundo retangular que delimitava o menu principal, ainda seguindo a definição de tornar a página menos pesada.

Nas figuras abaixo vemos a primeira versão de layout acompanhada de alguns comentários sobre as tecnologias utilizadas, sobre os elementos gráficos criados para orientar a navegação do usuário, entre outros.

Figura 5: Tela de Introdução do Capítulo Cor do módulo Design de Hipermídia (primeiro Layout)

Departamento  de  Artes  e  Design    

Figura 6: Tela do Capítulo Cor do módulo Design de Hipermídia (primeiro Layout)

Figura 7: Tela de Introdução do Capítulo Cor do módulo Design de Hipermídia (primeiro Layout)

Departamento  de  Artes  e  Design    

Já na figura 8, apresentamos um exemplo de tela desenvolvida para o capítulo Cor do livro digital em seu formato final. Tanto a mudança de cores quanto a nova apresentação do menu e o uso do logo no canto superior direito podem ser vistos na figura abaixo.

Figura 8: Tela do Capítulo Cor do módulo Design de Hipermídia (versão final)

Módulo DESIGN DE INTERAÇÃO Interação em sistemas operacionais refere-se ao modo de apresentar informação de

maneira não linear, vale dizer, como hipertexto, em estrutura de nós semânticos ligados entre si (em rede), oferecendo alternativas para a navegação. Para isso, usam-se os diferentes canais de percepção (visual, auditivo, tátil) e novos procedimentos para apresentar a informação. Isso requer trabalho de uma equipe com especialista em psicologia cognitiva, design de som, redação, programação e design interativo (BONSIEPE, 2011.)[2].

Para Joshua Porter [3], as pessoas ao usarem a tecnologia nunca deveriam sentir que falharam. Porter constata que, assim como o cliente, o usuário está sempre certo. Se o programa der erro, a falha é dos projetistas do software, se alguém não acha algo em um site, a falha é do webdesigner. Neste sentido, a grande diferença entre bons e maus designers será a forma como eles lidam com as pessoas lutando com seu design. Dentro desse contexto pode-se dizer que a tecnologia serve aos humanos. Humanos não servem à tecnologia.

Em relação à produção do livro digital, 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 9: 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 nas figuras 10 e 11.

Figura 10: Tela Saiba Mais do Capítulo Acessibilidade do módulo Design de Informação

Departamento  de  Artes  e  Design    

Módulo DESIGN DE INFORMAÇÃO Embora ainda não esteja finalizado e, portanto não se encontre disponível on-line, o

desenvolvimento desse módulo já está em andamento, faltando a seleção e criação de exemplos que ilustrem o conteúdo textual do módulo e a pesquisa de sites e aplicativos para a seção Saiba Mais.

O módulo se divide nos seguintes capítulos: Introdução, Design de interface, Arquitetura da informação e Navegação.

Conclusão Vivemos uma época em que a Internet, assim como os diversos equipamentos e

tecnologias disponíveis para se conectar a ela, possibilitou a construção de um novo paradigma de geração de conhecimento e acesso à informação.

Elaborar, portanto, um guia digital on-line que permita aos interessados obter informações e dicas sobre os processos e ferramentas disponíveis para a criação de materiais hipermidiáticos é uma iniciativa que surge como uma oportunidade de inserir o estudo do Design a esse novo modelo de informação: globalizado, móvel, hipertextual e multimidiático.

Uma vez que o tema abordado – Hipermídia – e o objeto de estudo dessa pesquisa – livro digital – se confundem, o próprio processo de construção do livro consistiu na aplicação dos conceitos de Design de Hipermídia, possibilitando transformar o conteúdo teórico do livro em prática.

Além disso, por se tratar de um livro sobre Design, já havia um conhecimento prévio sobre o tema a ser trabalhado, além de uma identificação com o mesmo. Esse envolvimento não apenas contribuiu para que se mantivesse um olhar crítico acerca do conteúdo e dos exemplos desenvolvidos, como também possibilitou uma enriquecedora troca de experiências e conhecimentos entre os participantes.

Figura 11: Tela Saiba Mais do Capítulo Acessibilidade do módulo Design de Informação

Departamento  de  Artes  e  Design    

Outro aspecto diferencial desse projeto consiste no fato de que, ao contrário do que se costuma encontrar no mercado de trabalho – em que as áreas de atuação dos profissionais são cada vez mais segmentadas –, tive a oportunidade de ampliar meus conhecimentos, participando e contribuindo em várias etapas do desenvolvimento do projeto, que vão desde a discussão sobre os conteúdos e a melhor forma de ilustrá-los, passando pelo desenvolvimento das partes gráficas, até a programação em HTML e CSS3 das telas.

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.