design digital, imersão e pós-modernismo: uma proposta de publicação digital Cassiano Ferreira Belluco design digital, imersão e pós-modernismo: uma proposta de publicação digital Trabalho de conclusão de curso Cassiano Ferreira Belluco Universidade Estadual Paulista “Júlio de Mesquita Filho” Faculdade de Arquitetura, Artes, Comunicação e Design Orientação Professor Dr. Maurício Elias Klafke Dick Bauru 2024 B449d Belluco, Cassiano Ferreira design digital, imersão e pós-modernismo : uma proposta de publicação digital / Cassiano Ferreira Belluco. -- Bauru, 2024 63 p. Trabalho de conclusão de curso (Bacharelado - Design) - Universidade Estadual Paulista (UNESP), Faculdade de Arquitetura, Artes, Comunicação e Design, Bauru Orientador: Maurício Elias Klafke Dick 1. design gráfico. 2. interatividade. 3. experiência. 4. editorial. 5. pós-modernidade. I. Título. Sistema de geração automática de fichas catalográficas da Unesp. Biblioteca da Universidade Estadual Paulista (UNESP), Faculdade de Arquitetura, Artes, Comunicação e Design, Bauru. Dados fornecidos pelo autor(a). Essa ficha não pode ser modificada. 4design digital, imersão e pós-modernismo: uma proposta de publicação digital Nesse momento de fechamento de ciclo da minha gradua- ção, quero agradecer a todos que estiveram presentes e tor- naram essa jornada uma experiência incrível. À minha família, que sempre esteve comigo, me apoiando, incentivando e au- xiliando. Aos amigos, que proporcionaram momentos ótimos nesses anos. Também aos professores do curso, que mu- daram minha visão de mundo dentro e fora do design, e em especial aos professores Cassia Leticia Carrara Domiciano e Dorival Campos Rossi, por terem aceitado ser membros da banca avaliadora, contribuindo ainda mais para o projeto. Gostaria também de agradecer meu orientador, professor Maurício Elias Klafke Dick, por contribuir imensamente para que todo esse processo de desenvolvimento do TCC fosse possível, com sua dedicação ao projeto, atenção e paciên- cia, me auxiliando, com sua experiência, a tomar as melhores decisões e caminhos para chegar até aqui, na conclusão do projeto. Muito obrigado! agradecimentos 5design digital, imersão e pós-modernismo: uma proposta de publicação digital resumo De acordo com a última pesquisa das Tecnologias de Infor- mação e Comunicação nos domicílios brasileiros, 84% da população brasileira é usuária de internet. Além disso, 81% dos leitores usam a internet para aprofundar um conheci- mento particular. Com isso, cada vez mais trazer formas de leituras mais interessantes e que fujam do comum se tornam uma pauta importante. Essa busca pela quebra do comum trouxe também outra oportunidade para o projeto: trabalhar o design gráfico pós-moderno como conteúdo principal da pu- blicação – momento em que os designers “nadavam contra a corrente”. Com base nisso, esse projeto tem como objetivo criar uma publicação digital sobre design gráfico pós-moder- no que seja interativa e imersiva. Para tal, como método de projeto, adaptou-se a proposta de Dick e Gonçalves (2016), que divide o projeto de publicações digitais em cinco eixos: Conceito, Conteúdo, Funcionalidades, Experiência e Super- fície. Como resultado, produziu-se um protótipo de alta fide- lidade de uma publicação digital, em plataforma web, que consiste na versão digital do livro Abaixo as Regras de Rick Poynor. Por meio de diferentes recursos interativos, a publi- cação busca contribuir para uma experiência de imersão, explorando potencialidades exclusivas do meio digital. palavras-chave: design gráfico; interatividade; experiência; editorial; pós-modernidade abstract According to the latest Information and Communication Te- chnologies in brazilian residences research, 84% of the bra- zilian population is an internet user. Also, 81% of readers use the internet to deepen a particular knowledge. Hence, brin- ging more interesting and nonstandard reading ways are in- creasingly becoming a more important subject. This chase to being nonstandard brought another opportunity to the pro- ject: bring the postmodern graphic design as this publica- tion’s key content. On that basis, this project aims to develop a digital publication about postmodern graphic design that is interactive and immersive. To achieve this, as methodology, it was adapted the proposal of Dick and Golçalves (2016), that divides the digital publication project in five axes: Concept, Content, Functionalities, Experience and Surface. As a result, it was produced utilizing Framer, a high fidelity prototype of a digital publication, in web format, consisting of the digital version of Rick Poynor’s book Abaixo as Regras (No More Rules). Through varied interactive features, the publication aims to contribute to an immersive experience, exhibiting the exclusive capabilities of the digital environment. keywords: graphic design; interactivity; experience; editorial; post-modernity 6design digital, imersão e pós-modernismo: uma proposta de publicação digital 1. introdução 07 1.1 contexo 07 1.2 objetivo 08 1.3 justificativa 08 1.4 metodologia 09 2. conceito 10 2.1 assunto 10 2.2 análise de similares 2.3 necessidades e hábitos do usuário/leitor 2.4 objetivos da publicação 2.5 tecnologia 21 2.6 conceito-chave 21 6. superfície 6.1 estudos de linguagem estética 6.2 padrões estéticos da interface 7. resultados 8. considerações finais referências apêncices apêncice A respostas do questionário apêndice B levantamento de possibilidades de funcionalidades 3. conteúdo 3.1 subeixo organização 3.2 subeixo fluxo 4. funcionalidades 4.1 análise de limitações e possibilidades 4.2 especificações de funcionalidades e recursos interativos 5. experiência 5.1 wireframes e protótipos 5.2 testes de usabilidade sumário 13 22 33 33 23 24 26 28 55 59 31 22 52 54 55 41 33 24 2818 21 7design digital, imersão e pós-modernismo: uma proposta de publicação digital 1.1 contexto Cada vez mais a internet se torna uma parte es- sencial do cotidiano das pessoas. De acordo com a última pesquisa TIC Domicílios – Tecnolo- gias de Informação e Comunicação nos domicí- lios brasileiros (CGI.br, 2023), 84% da população brasileira é usuária de internet. Essa inclusão da internet no dia a dia tem influenciado diversos hábitos, como por exemplo a leitura. De acordo com a 5ª edição da pesquisa Retratos da Leitura no Brasil realizada pelo Instituto Pró-Livro em parceria com o Itaú Cultural em 2020, 81% dos lei- tores usam a internet para aprofundar um conhecimento particular e 64%, para estudar e fazer trabalhos escolares (Malini, 2020). Apesar do grande número de leitores digitais, segundo a pesquisa Trend Tracker 2023 de- senvolvida pela organização Two Sides (2023), de modo geral 65% dos consumidores dizem preferir ler livros impressos. Sendo assim, ao mesmo tempo que a leitura nos meios digitais atrai muitas pessoas, sua experiên- cia ainda não é a preferida em meio aos leitores. 1. introdução 8design digital, imersão e pós-modernismo: uma proposta de publicação digital introdução 1.2 objetivo O objetivo geral deste trabalho é criar uma publicação digital sobre de- sign pós-moderno que seja interativa e imersiva. Os objetivos específi- cos são: • Entender as necessidades dos possíveis leitores/usuários; • Definir requisitos de conteúdo e especificações funcionais que contribuam para uma experiência imersiva; • Desenvolver um projeto gráfico coerente com a estética pós- moderna, produzido em um protótipo de alta fidelidade. 1.3 justificativa Ao desenvolver um livro levando em conta as possibilidades do am- biente digital, é possível libertar o projeto das limitações do meio físico, levando a novas configurações e estruturas que questionam as formas e limites tradicionais, como argumenta Phillips (2014). Apesar disso, segundo Dick e Gonçalves (2022), esse tipo de projeto não é muito ex- plorado no cenário de publicação de livros digitais, onde opta-se na maioria das vezes por e-books que não aproveitam as potencialidades do meio digital, imitando a experiência impressa. Com isso, esse proje- to tem como motivação essa oportunidade de inovação, ao trazer uma publicação digital com foco em imersão, levando em conta as poten- cialidades do ambiente digital e questionando as formas e limites tradi- cionais de publicação. Diante desse problema, questiona-se como tornar a experiência de lei- tura digital mais atrativa. Um dos fatores que poderia contribuir para tal seria a experiência de imersão digital: A experiência de ser transportado para um lugar primorosamente simu- lado é prazerosa em si mesma, independente do conteúdo da fantasia. Referimo-nos a essa experiência como imersão. “Imersão” é um termo metafórico derivado da experiência física de estar submerso na água. Buscamos de uma experiência psicologicamente imersiva a mesma im- pressão que obtemos num mergulho no oceano ou numa piscina: a sen- sação de estarmos envolvidos por uma realidade completamente estra- nha, tão diferente quanto a água e o ar, que se apodera de toda a nossa atenção, de todo nosso sistema sensorial (MURRAY, 2003, p. 102). Essa noção de imersão se alia ao conceito de flow, descrito por por Mihaly Csikszentmihalyi em seu livro Flow : The Psychology of Optimal Expe- rience. Segundo o autor (Csikszentmihalyi, 2008) quando alcançado na realização de tarefas, o estado de flow promove maior concentração e satisfação. Essa experiência pode ser atingida por meio de interfaces que façam com que seu usuário sinta ter controle da atividade, mas ao mesmo tempo se diferencie da experiência comum do cotidiano. Dessa forma, no contexto da leitura digital discutido anteriormente, apenas os e-books ou interfaces padronizadas não são favoráveis para trazer imer- são ao usuário/leitor. Nesse cenário, portanto, identificou-se a oportunidade de projetar uma publicação digital que tenha como foco ser imersiva e contribua para uma experiência de flow ao usuário/leitor, trazendo recursos interativos e se distanciando do comum em relação às demais publicações, que “perpe- tuam a ilusão de que o espaço da internet é feita de páginas, de palavras, de telas planas” (HELFAND, 2019, p. 151). Essa busca pela quebra do co- mum trouxe também outra oportunidade para o projeto: trabalhar o design gráfico pós-moderno como conteúdo principal da publicação – momento da história em que os designers “nadavam contra a corrente” (MEGGS; PURVIS, 2009) quebrando regras estabelecidas pelos modernistas. 9design digital, imersão e pós-modernismo: uma proposta de publicação digital introdução 1.4 metodologia Para desenvolver essa publicação digital, optou-se por adaptar a proposta de Dick e Gonçalves (2016), apresentada na Figura 01. Nela, a publicação digital é segmentada em cinco eixos: • Conceito: eixo inicial do projeto, em que são feitas as primeiras defi nições da publicação, que servem de base para as decisões tomadas nos demais eixos. Nessa dimensão são identifi cados as necessidades do usuário/leitor, além de decididos os objetivos, aspectos tecnológicos e conceitos-chaves da publicação; • Conteúdo: nessa etapa são defi nidos, organizados e estruturados os conteúdos da publicação. Ela é dividida em dois subeixos: Organização e Fluxo. O primeiro está ligado a como o conteúdo é distribuído e hierarquizado na publicação. Já o segundo se refere à estruturação, como fl uxo e ritmo de leitura; • Funcionalidades: nesse eixo são decididos os recursos interativos e funcionalidades que estarão disponíveis na publicação, para isso são analisadas as limitações e possibilidades do escopo do projeto; • Experiência: é nesta dimensão do projeto que se inicia o desenho dos protótipos de baixa e média fi delidade, realizando-se também os primeiros testes de usabilidade com os usuários/leitores;w • Superfície: é o último eixo do design. Nele os aspectos visuais da publicação são defi nidos e desenvolvidos, e consequentemente a publicação toma sua forma fi nal. Figura 01 - Diagrama dos eixos e subeixos da publicação digital. Fonte: Dick e Gonçalves (2016). 10design digital, imersão e pós-modernismo: uma proposta de publicação digital 2. conceito Nessa primeira etapa do projeto, foram feitas as atividades e definições relacionadas ao eixo de Conceito: Definição do assunto, objetivo e conceitos-chave da publicação, análise de similares, identificação das necessidades do usuário e de- finição dos aspectos tecnológicos do projeto. 2.1 assunto Como início do projeto, é importante trazer aqui um panorama geral sobre o design gráfico pós-moderno – assunto central da publicação. Porém, para entender o pós-modernismo, é necessário primeiro conhecer o de- sign gráfico moderno. O modernismo no design gráfico foi um momento de “purificação”, característica que pode ser exemplificada pelo movimento De Stijl (um dos muitos movimentos presentes no período moderno): se- gundo Meggs e Purvis (2009), os adeptos do De Stijl buscavam em seus 11design digital, imersão e pós-modernismo: uma proposta de publicação digital conceito trabalhos uma forma de purificação, porque eles acreditavam que a bele- za vinha da pureza absoluta; dessa forma o conteúdo dos seus trabalhos deveria ser a harmonia universal. No geral, esse momento foi marcado por uma retórica que “valoriza geralmente o novo, o puro, o original, o univer- sal, buscando uma estética absoluta e elitista, num discurso veemente de verdades únicas” (Cauduro, 2009, p. 114). Figura 02 - Theo van Doesburg e László Moholy - Nagy, capa de livro, 1925. Fonte: Meggs e Purvis (2009). Figura 03 - Jan Tschichold, capa para o nú- mero especial “Elementare Typographie”, 1925. Fonte: Meggs e Purvis (2009). Enquanto o modernismo prezava pela racionali- dade e funcionalismo, o pós-modernismo prega- va contra esses sistemas absolutos: “no design, o pós-modernismo significava o rompimento com o Estilo Internacional dominante desde a Bauhaus. Nadavam contra a corrente, ao desafiar a ordem e a clareza do design moderno, particularmente do design corporativo” (Meggs; Purvis, 2009, p. 601). O pós-modernismo no design gráfico foi um momento de experimentações, de quebrar regras do “bom design” modernista. Segundo Domicia- no (2014), as características de foco na informa- ção e legibilidade com um design “neutro” são deixadas de lado no pós-modernismo, em que os signos visuais começam a ganhar cada vez mais atenção, recebendo um significado, de for- ma que a interpretação imediata da mensagem se torna muitas vezes inibida intencionalmente. Essa busca por “nadar contra a corrente” não se limitou somente ao caráter visual e organizacio- nal dos designs. Se por um lado o design mo- dernista era elitista, as distinções de valor entre “alta” culturam e “baixa” cultura acabam colap- 12design digital, imersão e pós-modernismo: uma proposta de publicação digital conceito sando, tornam duas possbilidades iguais em um mesmo plano (Poynor, 2010). Concluindo, o pós-modernismo é um momento de quebra das convenções anteriores modernis- tas e pode ser considerado um momento de ex- perimentação e libertação – “o pós-modernismo nada, e até se esponja, nas fragmentárias e caó- ticas correntes de mudança” (HARVEY, 2001, p. 49). De acordo com Poynor (2010), os resultados da cultura pós-moderna são normalmente clas- sificados como fragmentados, impuros, ausen- tes de profundidade, indeterminados e plurais. Figura 04 - Elliot Earls - Dysphasia, cartaz para família de fonte, EUA, 1995. Fonte: Poynor (2010). Figura 05 - Dan Friedman - Typografische Monatsblätter, n° 1, capa de revista, Suíça, 1971. Fonte: Poynor (2010). 13design digital, imersão e pós-modernismo: uma proposta de publicação digital conceito 2.2 análise de similares Para encontrar similares a esta proposta, inicialmente buscou-se por li- vros digitais que tratassem do assunto “design pós-moderno”. Analisando o panorama, foi possível perceber que a integração do meio digital como uma forma de possibilitar novas experiências aos leitores sobre o assunto de “design pós-moderno” é praticamente nula. No geral, livros de mídia física apresentam como versão digital apenas e-books que são arquivos PDF sem nenhum conteúdo novo. No contexto de outras mídias digitais, como sites, estes contam apenas com artigos simples sobre assuntos se- lecionados em formatos comuns. Diante desse cenário, foram escolhidos quatro similares1 para serem ana- lisados com mais profundidade: Abaixo as regras - Rick Poynor Abaixo as regras é um livro escrito por Rick Poynor e publicado em 2003, que busca explicar o movimento pós-modernista no design gráfi co. O autor divide o livro em 6 capítulos: origens, desconstrução, apropriação, techno, autoria e oposição. O livro físico é um pouco diferente do convencional, no que diz respeito às dimensões (278 x 216 mm) e o tipo de papel do miolo (couché fosco), que passam uma ideia de revista para o livro. No projeto gráfi co, o grid assimétrico, a tipografi a quadrada dos títulos, as linhas que cortam o texto nas aber- turas de capítulos e as imagens que muitas vezes sangram, trazem um ar mais pós-modernista à publicação, ainda que moderado. Quanto ao padrão cromático, a publicação traba- lha majoritariamente com preto para a tipografi a e o branco para fundos, mas é possível perceber o magenta, o amarelo e o azul presente na identidade para a capa e os números de páginas. No meio digital, por sua vez, a publicação conta apenas com um e-book em formato PDF, com os conteúdos e o layout idênticos ao do meio físico. Figura 06 - Página dupla do livro Abaixo as Regras, de Rick Poynor. Fonte: Poynor (2010). 1Encontrou-se também o similar Postmodern Design Complete dos autores Judith Gura, Charles Jencks e Denise Scott Brown, publicado pela editora Thames & Hudson no ano de 2017. Entretanto, não foi possível ter acesso à versão impressa ou digital para analisá-lo neste trabalho. 14design digital, imersão e pós-modernismo: uma proposta de publicação digital conceito História do Design Gráfi co - Philip B. Meggs e Alston W. Purvis História do Design Gráfi co é um livro escrito por Philip B. Me- ggs e Alston W. Purvis e publicado em 2009, que descreve toda a história do design gráfi co. Neste trabalho, conside- rou-se o recorte do capítulo que trata sobre o pós-modernis- mo(página 600 até 625). O livro em si tem uma identidade padronizada e estruturada em todos os capítulos, trabalhando com um grid de cinco co- lunas, em que 4 delas são utilizadas para formar duas colu- nas de corpo de texto e uma para as legendas de imagem, na maioria das vezes. As fi guras, por sua vez, na maior parte dos casos obedecem ao grid, se organizando de forma espalhada pelo layout. No que se diz respeito às tipografi as, foram usa- das duas fontes sem serifa para títulos, e uma serifada para o corpo de texto. Já para o padrão cromático, de modo ge- ral trabalha-se com preto para títulos e texto, e branco para fundos; o azul é usado apenas para legendas das imagens. O livro impresso apresenta dimensões de 260 x 224 mm e mio- lo em papel woodfree, de caráter não revestido. Sua versão digital é apenas um e-book em formato PDF, com os mesmos conteúdos e layouts do livro físico. Figura 07 - Páginas do livro História do Design Gráfi co, de Philip B. Meggs e Alston W. Purvis. Fonte: Meggs e Purvis (2009). 15design digital, imersão e pós-modernismo: uma proposta de publicação digital conceito Eye on Design https://eyeondesign.aiga.org/how-california-became-a-haven-for-postmoder- nism/ A Eye on Design é uma plataforma editorial publicada pela AIGA (American Institute of Graphic Arts – Instituto America- no de Artes Gráfi cas, em tradução livre), que oferece artigos e publicações sobre design no geral. O artigo usado nesta aná- lise tem como título “Como a Califórnia se tornou um paraíso para o design pós-moderno” (tradução livre) e foi escrito por Margaret Andersen. Todo o site apresenta uma identidade visual mais jovem e li- vre, com uma paleta de cores reduzida (predominantemente fazendo uso do preto para textos, branco para fundos e rosa para destaques e elementos gráfi cos), e uma paleta tipográ- fi ca que conta com uma tipografi a serifada para corpo de texto, e duas tipografi as sem serifa para títulos, subtítulos e elementos de interface. Quanto ao layout do artigo, é usado uma coluna central para o texto, com imagens que na maior parte das vezes ultrapassam estes limites; ou são dispostas em carrosséis de rolagem horizontal. Vale ressaltar algumas funcionalidades interessantes: primei- ramente a barra principal no topo do site que conta com o logo, o menu e as redes sociais da plataforma, se transforma no título do artigo, junto de uma linha de progressão, à medi- da que o usuário desce a página. O efeito acontece tanto na versão desktop quanto em dispositivos móveis. Figura 08 - Capturas de tela do site Eye on Design. Fonte: eyeondesign.aiga.org (2018). 16design digital, imersão e pós-modernismo: uma proposta de publicação digital conceito Em segundo, as micro interações que o site proporciona na maioria dos botões, que variam desde animações simples de mudança de cor, até mais complexas, como de animação das letras ao passar o mouse em cima. E por último, os “olhinhos” do logo que vão aparecendo com a ausência de movimento na tela do site e somem no momento que o usuário mexe novamente o mouse, remetendo aos descansos de tela que eram muito utilizados nos sistemas operacionais dos compu- tadores nas décadas de 1990 e 2000. Figura 9 - Captura de tela do site Eye on Design. Fonte: eyeondesign.aiga.org (2018). Linearity https://www.linearity.io/blog/history-of-graphic-design/#the-painted-roots-of- -graphic-design Linearity é uma empresa de software para design gráfico e animação. Em seu site, além de oferecer serviços, também são postados artigos sobre design no geral. A página usada para análise neste trabalho traz um artigo longo sobre a his- tória do design gráfico escrito por Samantha Spiro. No artigo, o texto, imagens e vídeos são dispostos em uma coluna única vertical com um layout padronizado. Seguindo a marca, o site todo tem um projeto gráfico minimalista e limpo, usando preto, branco e laranja para eventuais palavras que funcionam como hiperlinks. Além disso, no layout optou-se pelo uso de tipografias sem serifa em todo o site. 17design digital, imersão e pós-modernismo: uma proposta de publicação digital conceito Uma funcionalidade interessante do site é um visualizador da progressão do texto, que é observado tanto na versão desk- top quanto em dispositivos móveis, com algumas alterações. Quando em dispositivos móveis (à esquerda) é mostrado ape- nas a linha da progressão, sempre no topo da interface, no desktop (à direita), além da linha, é apresentado um sumário sempre à esquerda da tela, que demonstra em qual seção do artigo o leitor está. Todos os títulos são clicáveis e levam para as respectivas seções. Figura 10 - Capturas de tela do site Linearity na versão mobile e desktop. Fonte: linearity.io (2022). Em suma, sintetizando os referenciais analisa- dos, foi possível perceber a falta de publicações digitais que falem sobre o assunto “design gráfi- co pós-moderno” explorando as potencialidades do meio digital, por meio de experiências de imersão e inte- ratividade. Não só isso, mas também observou-se a ausência de projetos visuais que conversem com o tema apresentado. Esses fatores, portanto, contribuem para evidenciar um es- paço a ser preenchido pelo projeto: uma publicação digital, que além de tratar sobre design gráfico pós-moderno, faça o leitor experienciar o tema. 18design digital, imersão e pós-modernismo: uma proposta de publicação digital conceito 2.3 necessidades e hábitos do usuário/leitor Com o objetivo de compreender as necessidades e hábitos do usuário/ leitor da publicação em desenvolvimento, elaborou-se um questionário com 14 perguntas, divididas em 3 partes. Na primeira parte foram feitas perguntas para entender o perfi l do participante, como idade, ocupação e áreas de interesse e atuação. Na segunda parte, o foco das pergun- tas foi o design gráfi co pós-moderno, com o objetivo de entender se os participantes já tinham conhecimento, ou se apresentavam interesse sobre o tema. Por último, na terceira parte, foram feitas perguntas sobre hábitos de leitura sobre design, como, por exemplo, quanto o partici- pante costuma ler, meio de leitura e motivação, além de sua experiência prévia com iniciativas digitais que pudessem ser consideradas imer- sivas. A pesquisa foi feita pelo Google Forms e obteve um total de 26 respostas. O formulário pode ser visto na íntegra no Apêndice A, ao fi m deste documento. De modo geral, foi possível observar que a maioria dos respondentes gostam da estética pós-moderna (65,4%), porém 60,2% das pessoas dizem conhecer de médio para pouco sobre o tema. Figura 11 - Compilado de resultados de perguntas sobre design gráfi co pós-moderno da pesquisa. Fonte: autor (2024). 19design digital, imersão e pós-modernismo: uma proposta de publicação digital conceito É possível perceber também que, apesar de 53,9% dos entrevistados dizerem ter interesse em história do design, apenas 11,5% apresenta costume de ler sobre design. A maior motivação para ler sobre design foi estudar para faculdade ou trabalho (53,8%), utilizando o meio digital quando lê sobre o tema (69,2%). Apesar do grande número de leitores digitais, a pesquisa apontou que apenas 30,8% dos participantes já experienciaram imersão digital. A pesquisa abriu espaço para que esses pudessem contar um pouco mais sobre, que no geral comentaram que atividades como trabalho, jogos, realidade virtual ou que utilizam os 5 sentidos propiciaram a sensação de imersão. Figura 12 - Compilado de resultados de perguntas sobre leitura digital. Fonte: autor (2024). 20design digital, imersão e pós-modernismo: uma proposta de publicação digital conceito Maria Clara: Jovem de 20 anos, estudante de design na UNESP, está no 3° ano da graduação. É interessada pelas áreas de identidade visual, editorial, ilustração e fotografia. Ela tem muita afinidade pela estética pós-moderna e gosta de história do design gráfico. Apesar de não ter mui- to costume de ler sobre design, quer se aprofun- dar mais sobre pós-modernismo, assunto que ela já tem cer- to conhecimento e gosta bastante. Ela busca um meio não tradicional de ler sobre design gráfico. Daniel: Adulto de 37 anos, trabalha com design de serviços. Já é formado há mais de 10 anos. Tem um pouco de interesse em história do design gráfico, e conhece pouco sobre o Pós-modernis- mo. Tem costume de ler sobre design, principal- mente nas mídias digitais. Precisa se aprofundar mais no design gráfico pós-moderno por exigên- cia de um trabalho e, dessa forma, ele procura por uma publi- cação que seja mais leve e traga um estímulo a mais para ler sobre o tema. Figura 13 - Parsona 1, Maria Clara. Fonte: autor (2024) Figura 14 - Persona 2, Daniel. Fonte: autor (2024) Por fim, a partir da síntese das respostas, foi possível traçar duas personas de leitores para a publicação: 21design digital, imersão e pós-modernismo: uma proposta de publicação digital conceito 2.4 objetivos da publicação A partir da compreensão do assunto, da análise de similares e da identificação das necessidades do público, foi possível definir que a publicação teria como objetivo principal trazer uma forma digital, interativa e imersiva de conhecer sobre design gráfico pós-moderno, utilizando os conteúdos do li- vro “Abaixo as Regras” de Rick Poynor. Portanto, seria uma versão digital deste impresso2. “Abaixo as Regras” foi escrito por Rick Poynor – escritor de temas como design, tipografia e cultura visual – e trata sobre a história do design gráfico pós-moderno. O autor, na sinop- se do livro comenta de modo geral sobre a publicação: Abaixo as Regras é a primeira pesquisa crítica abrangen- te que busca compreender esse movimento internacional (pós-modernismo). Movidos por uma nova acepção de autoria, designers pós-modernos adotaram um ponto de vista autoconfiante, idiossincrático e, por vezes, extremo. A comunicação visual hoje é definitivamente mais aber- ta, inclusiva e criativa como resultado desses desafios. O design gráfico agora abarca uma expressiva variedade de opções, de estilos informais inspirados no vernacular – admirados por seu antiprofissionalismo – as formas vir- tuosas de criação digital que levam a tecnologia gráfica ao limite. A complexidade da construção, há muito uma característica de imagens pós-modernas que desafiam as regras, encontra um meio de expressão paradoxal em designs espetacularmente detalhados que emanam co- nhecimento técnico (POYNOR, 2010, Orelha do livro) 2 Os direitos autorais da obra impressa, utilizada como para esse trabalho, são do autor (Rick Poynor) e os direitos comerciais no Brasil são da editora Bookman. Cabe destacar que a proposta aqui desenvolvida tem caráter aca- dêmico e, portanto, não tem fins comerciais nem lucrativos. 22design digital, imersão e pós-modernismo: uma proposta de publicação digital conceito 2.5 tecnologia A publicação foi realizada em plataforma web, uma vez que é um formato não utilizado pelos livros similares e cujos recursos são pouco explorados pelos concorrentes digitais. O foco foi em dispositivos desktop, mas apresentaria responsividade para dispositivos móveis, como celulares e tablets. O foco inicial na plataforma desktop se deu primeiramente por ser um disposi- tivo mais comum usado para leituras longas e para pesquisas extensas durante o trabalho. Além disso, a plataforma possibili- ta uso de mais recursos interativos e gráficos, devido ao tama- nho maior da tela. 2.6 conceito-chave Neste aspecto do eixo de Conceito, é necessário estabelecer os conceitos-chave, que se referem às características da publi- cação. Por meio da análise das definições realizadas até então para o projeto, esses são os conceito-chaves que nortearam as próximas etapas desenvolvidas: • Experiência e imersão; • Informativo; • Digital; • Leitura linear ou seletiva; • Alternativo; • Não tradicional; • Prático; • Mutante. 23design digital, imersão e pós-modernismo: uma proposta de publicação digital 3. conteúdo Para o eixo de Conteúdo, foram feitas as se- guintes atividades com o objetivo de delimitar, organizar e estruturar a publicação: definição e análise do conteúdo (presente no subeixo da Or- ganização) e estruturação do fluxo de leitura da publicação (presente no subeixo do Fluxo). 3.1 subeixo organização Como afirmado anteriormente, essa publicação digital tem o objetivo de trazer uma forma digital do livro “Abaixo as regras” de Rick Poynor. Assim foi decidido que todos os conteúdos do livro impresso esta- riam presentes na versão digital. Para isso, as estruturas de capítulos se manteriam. 24design digital, imersão e pós-modernismo: uma proposta de publicação digital conteúdo Ao todo, a publicação conta com 6 capítulos: • Origens: são descritos indícios de um início do pós-modernismo no design gráfico; o movimento New Wave e a Escola de Memphis; • Desconstrução: fala-se sobre o movimento punk; o desconstrucionismo no design e o estilo grunge; • Apropriação: descreve-se o movimento de pilhagem no pós-modernismo; • Techno: é descrito o movimento techno e sua aplicação no uso das novas tecnologias da época; • Autoria: aborda-se a nova visão do design como autor no movimento; • Oposição: são trazidos e exemplificados o modernismo radical e o design ativismo. Para além dos capítulos do livro, a publicação ainda conta- ria com o Prefácio e a Introdução presente no impresso, que dão uma explicação sobre o que é abordado na publi- cação; Índice; e uma sessão de Sobre o Projeto, que teria um pequeno resumo explicativo do projeto e um hiperlink que ligaria a esse relatório. Nota-se que, após o teste de usabilidade detalhado no tópico “4. Experiência”, a Intro- dução passou a contar com uma breve explicação sobre como utilizar esta versão digital. 3.2 subeixo fluxo Voltando-se agora para a estruturação do fluxo de leitura da publicação, inicialmente foi realizado um levantamento de possibilidades. Para isso, utilizou-se o capítulo “Fluxo de Con- teúdo” do livro Tipos na Tela, escrito por Ellen Lupton (2015). Ela elenca os seguintes modelos de estruturação para publi- cações digitais: • Páginas: o conteúdo é colocado em páginas de layout fixo; • Varal: o usuário pode navegar pelo documento livremente, tanto verticalmente, quanto horizontalmente; • Espinha: o texto principal se torna uma espinha central, em que conteúdos complementares se tornam opções agregadas ao caminho principal; • Rolo: uma forma de organização que o conteúdo fica todo em uma página de navegação vertical; • Grid: o conteúdo fica disposto na tela de forma agrupada, mas não conectada; • Slides: o conteúdo fica disposto em telas. 25design digital, imersão e pós-modernismo: uma proposta de publicação digital conteúdo Diante das possibilidades, decidiu-se organizar os conteúdos da publicação em uma mistura de sli- des com rolo. A intenção foi que o usuário tivesse uma experiência parecida com a de um site, em que ele tem telas a serem navegadas em forma de slide, e o conteúdo das telas esteja em rolo. Dessa forma, o leitor pode navegar de forma mais livre entre capítulos e entre o texto, permitindo a decisão entre ler de forma linear ou não-linear. Figura 15 - Fluxograma da publicação. Fonte: autor (2024). Tela inicial índicetela de pesquisa Cap. 1 Cap. 2 Cap. 3 Cap. 4 Cap. 5 Cap. 6 Cap. 7 Sobre o projeto 26design digital, imersão e pós-modernismo: uma proposta de publicação digital 4. funcionalidades Na etapa do eixo de Funcionalidades, são esco- lhidos os recursos interativos e funcionalidades que estarão presentes na publicação digital; para isso, é necessário entender as possibilidades e li- mitações do escopo do projeto. Pensando nisso foram feitas as seguintes atividades: análise das possibilidades e limitações tecnológicas e do pro- jeto, e definição das especificações de funcionali- dades e recursos interativos da publicação. 4.1 análise de limitações e possibilidades Antes da busca de referências e possibilidades funcionais para a publi- cação, optou-se por trazer um plano geral das limitações enfrentadas no escopo desse projeto. A primeira delas diz respeito à equipe e ao tempo: todo o projeto seria feito por uma pessoa que não tem conhecimentos de programação em um período de aproximadamente 9 meses. Dessa forma o projeto necessitava de um escopo que não fosse demasiado extenso, mas sim tangível de se tornar realidade, além de limitar-se ao uso de ferramen- tas de prototipagem de interfaces que não necessitassem de programação. 27design digital, imersão e pós-modernismo: uma proposta de publicação digital funcionalidades Diante dessa necessidade, alguns softwares po- deriam ser usados, como, por exemplo, o Figma, que traz a possibilidade de criação de protótipos funcionais sem a necessidade de programar. Po- rém, no momento do desenvolvimento deste tra- balho, haviam limitações nas suas funcionalida- des, como o recurso de rolagem de tela limitado apenas no sentido vertical em dispositivos Win- dows. Outra ferramenta útil para explorar recur- sos interativos seriam os vídeos animados, que, apesar da sua capacidade ilustrativa, ainda ti- nham a limitação de não serem interativos. Diante disso, optou-se por utilizar outra ferra- menta para prototipação, a plataforma Framer. Sua escolha se deu pela possibilidade de pu- blicação do protótipo como um site funcional, sem a necessidade de programação. Entretanto, apesar de funcional, o protótipo ainda possuiria limitações. Devido ao uso do sistema na versão gratuita, o projeto não teria um domínio próprio e contaria com uma marca d’água no canto da tela. Além disso, alguns recursos possíveis, mas que necessitariam de programação para serem implementados, teriam que ser deixados de lado ou apenas exemplificados na interface. Definida a plataforma para desenvolver este tra- balho, foi feito um levantamento sobre recursos interativos possíveis em formato web, através da análise de sites e aplicativos que se destacavam como exemplos do que poderia ser feito no am- biente digital. A análise completa está presen- te no Apêndice B, ao fim deste documento. Em resumo, diversos recursos interativos são usados nos sites atuais para trazer interatividade para in- terfaces – desde micro interações em botões ou imagens, sentidos de navegação não convencio- nais, até customizações em cursores –, o que aca- ba trazendo uma forma mais atrativa e interessan- te do leitor/usuário se relacionar com a interface. Entende-se, portanto, que estes recursos pode- riam promover maior concentração na tarefa, com elementos e ferramentas que trariam maior con- trole ao usuário de forma intuitiva e interativa, e, ao mesmo tempo, permitiriam ao leitor se distan- ciar em parte de atividades cotidianas. Em últi- ma instância, colaborariam para uma experiência de flow, como é explicado por Mihaly Csikszent- mihalyi em seu livro Flow : The Psychology of Op- timal Experience (Csikszentmihalyi, 2008) 4.2 especificações de funcionalidades e recursos interativos Com base na análise de limitações do escopo do projeto, das possibilida- des e limitações tecnológicas do formato web, da plataforma de prototi- pação e das referências no uso de recursos digitais, as funcionalidades e recursos interativos definidas para este projeto foram hierarquizadas em obrigatórias, desejáveis e opcionais. 28design digital, imersão e pós-modernismo: uma proposta de publicação digital funcionalidades Obrigatórios: • Elementos interativos (através de hover3, rolagem da página e clique) – micro interações; • Elementos animados (não interativos); • Permitir navegação entre capítulos; Desejáveis: • Uso de rolagem horizontal e vertical; • Identidade mutante de acordo com o capítulo apresentado; • Pop-up ou/e barra de progressão indicando do capítulo lido e quanto falta para acabar; • Responsividade em dispositivos móveis; • Cursor próprio mutante; Opcionais: • Uso de música e elementos sonoros; • Descanso de tela próprio e mutante; • Transições de tela próprias. 3 hover significa em sua tradução “planar”. Nesse contexto, diz respeito à ação de deixar o cursor do mouse em cima de outro elemento - planando sobre ele. 29design digital, imersão e pós-modernismo: uma proposta de publicação digital 5. experiência Nessa etapa, foram feitas as seguintes atividades: busca por referências, desenho de wireframes e protótipos de baixa e média fidelidade e realização de testes de usabilidade. 5.1 wireframes e protótipos Antes de começar a esboçar as telas, primeiro foi feito um painel de referências com o foco em grid, que é um elemento de características marcantes no design gráfico pós-moderno. A intenção era que as telas tivessem composições não con- vencionais para, além de conversar com a temática do pós- -modernismo, também serem mais apelativas visualmente. 30design digital, imersão e pós-modernismo: uma proposta de publicação digital experiência Figura 16 - Painel de referências com o foco em grid. Fonte: compilação do autor4 (2024). 4 Montagem com imagens retiradas de Samara (2007), Roberts e Thrift (2002), https://www.instagram.com/val- ben_d/, https://www.instagram.com/lammkirch/ e https:// www.instagram.com/slavafedutik/. Ainda antes do início dos esboços, foram escolhidos quais conteúdos entrariam para o protótipo inicial, uma vez que no contexto de interfaces é preciso estabelecer um foco para as ações de design (Sunwall, 2021). Foi decidido então que: além das telas de início, índice e sobre o projeto, seriam prototipadas uma parte inicial dos três primeiros capítulos (introdução, origens e desconstrução). 31design digital, imersão e pós-modernismo: uma proposta de publicação digital experiência De início, começou-se desenhando esboços das telas e ano- tando ideias de interação e organização de conteúdos de for- ma parecida com um brainstorming, como mostra a Figura 17. Depois disso, as ideias foram passadas para o software. Du- rante esse processo, algumas decisões foram sendo toma- das: em relação à tipografia, inicialmente testou-se um cor- po de texto para os parágrafos de 32px na fonte Sansation (uma tipografia sem serifa e humanista), mas percebeu-se, por meio de testes, que estava muito grande, sendo reduzi- do para 24px. Ainda, na estruturação do corpo de texto con- forme algumas características percebidas do design gráfico pós-moderno, descobriu-se que os parágrafos não poderiam ser justificados sem a criação dos chamados “caminhos de rato”, que prejudicariam a leiturabilidade, pois não havia a op- ção de hifienização. Além disso, as colunas de texto não con- seguiriam assumir formas orgânicas, por limitações dentro do software de prototipagem que impediam a criação de blocos de texto com formas customizadas.Na tela inicial a margem lateral é de 130px para esquerda e para a direita; • Na tela inicial a margem lateral é de 130px para esquerda e para a direita; • No índice não existe uma margem e nem um grid, para trazer dar a ideia dos botões estarem soltos, espalhados na tela; • No restante das telas existe uma margem de 240px à esquerda, para deixar espaço para a barra de progressão, e 130px à direita. Figura 17 - Esboços iniciais de telas da publicação. Fonte: autor (2024). 32design digital, imersão e pós-modernismo: uma proposta de publicação digital experiência Por fim, foram desenhadas 7 telas em média fidelidade. Ne- las foram prototipados recursos interativos para fins de tes- te, que seriam melhor explorados no protótipo final, a saber: recursos que trabalham com hover, como, por exemplo, botões que aumentam de tamanho, destaques em meio ao texto que revelam imagens ou manchas no meio da tela que liberam a leitura com a interação. Figura 18 - Compilado de exemplos de recursos interativos do protótipo de média fidelidade no Figma. Fonte: autor (2024). 5.2 teste de usabilidade Após finalizada a primeira versão do protótipo de média fideli- dade, partiu-se para a realização de um teste de usabilidade. A intenção é que fossem testados alguns recursos interativos da publicação, para verificar se eles funcionariam na prática, ou se precisariam de mudanças. Para o teste de usabilidade, foram definidas duas tarefas a se- rem feitas pelos participantes: 1. Navegar pela publicação, da página inicial até o último capítulo disponível, para avaliar quais recursos seriam percebidos facilmente pelo usuário e quais passariam despercebidos; 2. Buscar pela imagem “The Weirdos are Loose”, no capítulo 3 (desconstrução), partindo-se da tela inicial. O propósito foi testar quão prático estava para um leitor retornar à página que ele estava depois de uma pausa na leitura. 33design digital, imersão e pós-modernismo: uma proposta de publicação digital experiência Por razão do tempo limitado, o teste foi realizado somente com dois participantes, que se encaixavam no perfil de público do projeto. Após terem concluído as tarefas, deixaram seu feedba- ck em relação a alguns problemas da interface: • Alguns botões, como os que levam às telas de “índice” e “sobre o projeto” na tela inicial, não foram percebidos como clicáveis pela falta de affordance5, como aqueles usados nos botões que levam aos capítulos, na tela do índice, que contam com o recurso de aumento de tamanho com o hover; • Letras com hastes retas (como i, f n, etc), quando sobrepostas em imagens, se tornaram ilegíveis de maneira não intencional, por estarem alinhadas com a borda da imagem; • Alguns elementos interativos que necessitavam de hover ou clique para serem ativados não foram percebidos pelo usuário (novamente, problemas em relação às affordances). Sendo assim, decidiu-se por algumas alterações que foram le- vadas para o protótipo de alta fidelidade com o objetivo de eli- minar os problemas apontados pelos participantes do teste de usabilidade. Primeiramente todo botão contaria com um efeito de aumentar de tamanho com o hover, para que indicasse ao leitor/usuário que ele é clicável. Além disso, na tela inicial da pu- blicação, seria adicionado um tutorial que explicasse todas as funcionalidades presentes na interface. Por fim, todas imagens da publicação se tornariam arrastáveis, para que, se em algum momento estivessem atrapalhando a leitura, o usuário/leitor po- deria tirá-las do caminho para liberar a visualização. Figura 19 - Visão geral do protótipo de média fidelidade feito inicialmente no software Figma. Fonte: autor (2024). 5 “Termo usado para se referir aos atributos de um objeto que possibilitem as pessoas entenderem como usá-lo” (Sharp; Rogers; Preece, 2015, p. 63, tradução do autor). 34design digital, imersão e pós-modernismo: uma proposta de publicação digital 6. superfície Nessa última etapa do projeto, foram feitas as seguin- tes atividades com o foco em desenvolver as dimen- sões estéticas e visuais da publicação: busca por refe- rências estéticas, estudos do projeto gráfico, definição do padrão cromático, tipográfico e imagético, para en- tão desenvolver o protótipo de alta fidelidade. 6.1 estudos de linguagem estética Iniciou-se a definição de linguagem estética estudando e buscando refe- rências para a montagem de um moodboard, agora com o foco no design visual – cores, elementos gráficos e tipografia. As escolhas, tanto das re- ferências, quanto da identidade da publicação, foram pensadas para que visualmente conversassem com a estética pós-moderna, e abrisse brecha para mutação, de acordo com a mudança em capítulos. 35design digital, imersão e pós-modernismo: uma proposta de publicação digital superfície Figura 20 - Moodboard estético. Fonte: Fonte: compilação do autor6 (2024). 6 Montagem com imagens retiradas de https://www.instagram.com/kooollektoor/, https://www. instagram.com/lammkirch/, https://www.instagram.com/visual_anxiety_/, https://www.instagram. com/mathias.manner/, https://www.instagram.com/abcdinamo/, https://www.instagram.com/ju- liakatarzyna_/, https://www.instagram.com/electrobibliotheque/, https://www.instagram.com/je- susdesignedme/, https://www.instagram.com/pavelripley/, https://www.instagram.com/chris_____ ro/, https://www.instagram.com/crystalzapata Como um todo, as referências levantadas fazem uso de tipografi as sem serifa, que algumas ve- zes são distorcidas, blocos de texto com que- bras não convencionais e cores implementadas em degradês com texturas; elementos que fo- ram explorados na publicação. Com o moodboard feito, foram iniciados os tes- tes e estudos de linguagem estética. Em primeiro lugar, foram selecionadas possibilidades de fon- tes para a publicação: Averia Libre, Saira, Hel- vetica Neue, Urbanist, Lexend Exa, Noto Sans e Sansation. As sete tipografi as foram testadas em um corpo de texto maior (para títulos) e em um menor (para o corpo de texto mais extenso). 36design digital, imersão e pós-modernismo: uma proposta de publicação digital superfície Depois de uma análise, decidiu-se que a Lexend Exa seria usada para títulos, mas não funcionaria para o corpo de texto. Sua escolha se deu porque, além da tipografia ser sem serifa (propriedade buscada para esse projeto), ela tem a característi- ca de ser estendida, fato que contribui para trazer uma ideia de tipografia que foi distorcida (apesar de não ser ideal para textos longos, neste projeto se torna interessante para títu- los). Diante disso, foram feitos novamente outros arranjos para analisar qual tipografia poderia funcionar como complemen- tar a ela, para o corpo de texto da publicação. Seria neces- sária uma tipografia que não fosse nem muito diferente – pois era preciso um certo grau de semelhança formal para existir compatibilidade na combinação –, nem muito similar a ponto de parecer que o projeto fazia uso de apenas uma fonte. Figura 21 - Primeiro estudo para escolha da tipografia. Fonte: autor (2024) 37design digital, imersão e pós-modernismo: uma proposta de publicação digital superfície Entre as combinações testadas, decidiu-se que a Helvetica Neue trabalharia bem com a Lexend Exa. As duas tipografias possuem semelhanças em seu desenho, sendo mais arredondadas, não serifadas e apresentarem uma altura de X se- melhante. Mas, ao mesmo tempo, possuem di- ferenças estruturais suficientes para não serem confundidas como uma mesma tipografia, prin- cipalmente no que diz respeito à largura dos ca- racteres e ao estilo das letras (uma geométrica e outra grotesca). Com a tipografia escolhida para o texto, não foi preciso alterar o corpo testado previamente. Po- rém, outro ajuste necessário que precisou de testes foi o espaçamento entre linhas. Até o mo- mento no protótipo, estava-se usando o espa- ço automático (112% do tamanho do corpo de texto), mas foi percebido que as linhas estavam muito juntas, prejudicando a leiturabilidade. En- tão foram feitos testes com entrelinhas de 120%, 130%, 140% e 150%. Por proporcionar boa lei- turabilidade, sem tornar a composição excessi- vamente aberta, optou-se pelo espaço entre li- nhas 1,4 vezes (140%) no corpo do texto. Figura 22 - Segundo estudo para escolha da tipografia. Fonte: autor (2024). Figura 23 - Testes para escolha dos espaçamentos do bloco de texto. Fonte: autor (2024). 38design digital, imersão e pós-modernismo: uma proposta de publicação digital superfície Definidos os parâmetros tipográficos, foram inicia- dos os testes de cores. Com o objetivo de explo- rar os gradientes, foi utilizado um plugin chamado Shader Gradient, disponível no Framer, que facilitou a criação dos degradês animados. A intenção era que a publicação no geral trabalhasse com duas cores (preto e branco) para textos e fundos; porém cada capítulo teria uma paleta de cor que estaria presente em gradientes e elementos gráficos. Nos testes, algumas decisões foram feitas: cada de- gradê deveria apresentar combinações de cores que se diferenciassem o suficiente de um capítulo para outro, para que a mudança fosse perceptível ao leitor/usuário; além disso, as cores não deve- riam ser muito claras, para trazer contraste com fundos brancos e quando textos brancos estives- sem em sobreposição. De modo geral, esses estudos contribuíram para que os padrões estéticos da publicação fossem alinhados aos requisitos definidos nas etapas an- teriores do projeto. Características como o uso de gradientes animados com formas, cores distintas e texturas, tipografias sem serifas e blocos de texto com quebras não convencionais fizeram com que os conceitos-chave e a identidade visual fizessem sentido entre si. Figura 24 - Testes de cores aplicadas em degradês usando o plugin Shader Gradient. Fonte: autor (2024). 39design digital, imersão e pós-modernismo: uma proposta de publicação digital superfície 6.2 padrões estéticos da interface Com os estudos de linguagem estética finalizados, foi pos- sível estabelecer os padrões estéticos da interface, que se referem à paleta tipográfica, paleta cromática, padrão imagé- tico/iconográfico e padrão interativo (affordances). paleta tipográfica A publicação apresenta uma paleta tipográfica reduzida, contando com apenas duas tipografias: Lexend Exa, tipografia geométrica sem serifas e de largura estendida, que é usada para títulos; e Helvetica Neue, tipografia também sem seri- fas, com altura-x semelhante à Lexend Exa, mas de estilo grotesco e largura normal, sendo usada para o corpo de texto em seu peso regular. Lexend Exa regular Helvetica Neue Light Figura 25 - Tipografias e pesos utilizados na publicação. Fonte: autor (2024). 40design digital, imersão e pós-modernismo: uma proposta de publicação digital superfície paleta cromática Para a paleta de cores principal, a publicação faz uso apenas do branco e do preto, que são utilizados com conjunto para fundos e corpo de texto. Já em sua paleta de cor secundária, são utilizados gradientes animados com ruí- dos, aplicados no preenchimento de alguns botões, fundos e elementos gráficos. Cabe destacar que a noção de ruído contribui para uma estética que converse com a pós-moder- na – ainda que esse trabalho seja produto do design contemporâneo – pois no contexto do design gráfico modernista, um ruído é uma dis- tração que acontece entre a informação e o in- divíduo, que interfere distorcendo, obliterando ou ocultando a mensagem (Frascara, 2004). Cores principais Gradientes #000000 #FFFFFF Figura 26 - Cores principais e gradientes utilizados na publicação. Fonte: autor (2024). 41design digital, imersão e pós-modernismo: uma proposta de publicação digital superfície ícones, controles e aff ordances Para o padrão iconográfi co desta publicação, foram usados alguns ícones do pacote Feather Icons – projeto open source que está presente no Framer – por sua estética arredondada, que con- versou com a identidade do projeto. Eles estão presentes na publicação para integrar botões de interação, como, por exemplo, avançar e voltar na navegação. No que diz respeito às aff ordances, como afi rma- do anteriormente, todos os elementos que são interativos têm o efeito de aumentar de tamanho com o hover. Isso instiga o usuário/leitor a utilizar os recursos interativos, como arrastar imagens ou clicar em botões e destaques, que podem o levar para outras telas ou liberar conteúdos no texto, em uma postura mais ativa/participativa na direção de uma publicação mais imersiva. Figura 27 - Botões utilizando ícones do pacote Feather Icons. Fonte: autor (2024). 42design digital, imersão e pós-modernismo: uma proposta de publicação digital 7. resultados Aqui são apresentados alguns elementos e páginas do protótipo de alta fidelidade. A publicação final é totalmente funcional e pode ser acessada pelo link: https://secondary-clicks-766088.framer.app/. Para uma melhor experiência, recomenda-se a visualiza- ção em um dispositivo desktop. 43design digital, imersão e pós-modernismo: uma proposta de publicação digital resultados página inicial Ao abrir o site, o usuário/leitor tem contato com a capa da publicação, que é dinâmica devido ao gradiente animado. Descendo a tela, a capa se movimenta para a esquerda, revelando então o início do texto da publicação. A página inicial con- ta com o prefácio do livro, tutorial dos recursos interativos e dois botões em seu fi m, que levam para o índice, ou para a seção sobre o projeto. Figura 28 - Página inicial da publicação. Fonte: autor (2024). 44design digital, imersão e pós-modernismo: uma proposta de publicação digital resultados exploração de movimentos de rolagem de página A publicação trabalha explorando mudanças de direção através da rolagem de página. À medi- da que o usuário/leitor avança pelo texto, o con- teúdo se desvenda nos eixos X, Y e Z. Essas mudanças contribuem para criar um senso de imersão e fl ow por meio da espacialidade, e per- mitem também criar quebras no ritmo da publi- cação, variando a sua cadência. Figura 29 - Exemplo de movimentos de tela presente na publicação. Fonte: autor (2024). 45design digital, imersão e pós-modernismo: uma proposta de publicação digital resultados tutoriais A publicação conta com tutoriais na sua página inicial que podem ser acessados com o clique. Neles são explicados através de breves anima- ções – que trazem legenda no cursor com a inte- ração de hover – os principais recursos interati- vos presentes na publicação, para que o usuário/ leitor possa entender melhor e aproveitar todas experiências possíveis. Figura 30 - Capturas de tela dos tutoriais da publicação. Fonte: autor (2024). 46design digital, imersão e pós-modernismo: uma proposta de publicação digital resultados sobre o projeto A tela sobre o projeto é acessada por meio da página inicial. Nela, é explicado um pouco mais sobre a publicação, além de incluir um hiperlink para esse relatório, em caso do usuário/leitor ter interesse de entender um pouco mais do pro- cesso de desenvolvimento da publicação. Figura 31 - Captura de tela sobre o projeto. Fonte: autor (2024). 47design digital, imersão e pós-modernismo: uma proposta de publicação digital resultados índice O índice da publicação foi organizado em bo- tões, que levam aos seus respectivos capítulos. Cada botão tem como fundo um gradiente de cores específi cas, contribuindo para a sua iden- tifi cação. Além disso, os botões reagem ao mou- se, interagindo entre si e com o usuário: com o hover, o botão de capítulo aumenta, subtraindo área e espaço dos botões em sua volta. Ade- mais, a página do índice conta com uma barra de pesquisa, acima do botão de voltar. Nela é possível pesquisar por conteúdos do livro. Figura 32 - Capturas de tela do índice da publicação. Fonte: autor (2024). 48design digital, imersão e pós-modernismo: uma proposta de publicação digital resultados pesquisa Presente na tela do índice, a publicação conta com uma ferramenta de busca. Nela, é possível o usuário/leitor pesquisar por palavras presen- tes no livro. Os resultados são exibidos em uma tela à parte, em blocos como no índice, os quais possuem um botão que leva para o lugar exato em que o termo pesquisado aparece na publi- cação. É importante notar que, no protótipo de alta fi delidade, esta função foi apenas simulada. Portanto, não é funcional. Figura 33 - Capturas de tela mostrando o recurso de pesquisa da publicação. Fonte: autor (2024). 49design digital, imersão e pós-modernismo: uma proposta de publicação digital resultados capítulos de identidade própria Na publicação, cada capítulo possui caracterís- ticas próprias de layout e cores, mas que ainda sim mantém uma unidade entre si. Essas dife- renças são exemplifi cadas nas aberturas de ca- pítulos. Nota-se que para fi ns deste estudo, fo- ram prototipadas partes do conteúdo de cada capítulo da obra original. Figura 34 - Capturas dos inícios dos capítulos da publicação. Fonte: autor (2024). 50design digital, imersão e pós-modernismo: uma proposta de publicação digital resultados cursor mutante Na publicação, o cursor é importante para a sen- sação de imersão, pois ele reage a certas ações do usuário. Por exemplo, comprime-se quando o botão do mouse está pressionado e volta ao nor- mal quando o botão é solto. Além disso, é nele que aparecem todas as legendas de imagem, dis- ponibilizadas quando o usuário/leitor passa com o cursor por cima delas. Finalmente, devido à seu preenchimento de cor com modo de mesclagem confi gurado para “diferença”, o cursor se adequa a qualquer informação que ele estiver em cima. Figura 35 - Exemplos de interação do cursor do mouse. Fonte: autor (2024). 51design digital, imersão e pós-modernismo: uma proposta de publicação digital resultados barra de navegação Com o intuito de deixar a experiência de explo- rar a publicação mais fl uida, todo capítulo con- ta com uma barra de navegação. Ela aparece logo no início de cada parte, ao rolar um pouco a página, transformando-se a partir da forma em gradiente usada no cabeçalho. Na barra de na- vegação, o usuário encontra sua progressão do capítulo, que mostra quanto falta para terminar o texto, além de um botão de “voltar” (que leva ao índice). Ao chegar ao fi m do capítulo, a barra de navegação se transforma novamente, liberando os botões de “avançar” (que leva ao próximo ca- pítulo) e “voltar” (que leva ao índice). Figura 36 - Capturas de tela mostrando os três es- tados da barra de navegação. Fonte: autor (2024). 52design digital, imersão e pós-modernismo: uma proposta de publicação digital resultados seleção de texto Por último, a publicação conta com uma ferra- menta de seleção de texto. Nela, ao selecionar normalmente algum trecho, aparecerá um desta- que, que dá as opções de ouvir o trecho selecio- nado, copiar para área de transferência ou com- partilhar. Novamente, é importante mencionar que, no protótipo de alta fi delidade, esta função foi apenas simulada. Assim, não está funcional. Figura 37 - Capturas de tela mostrando o recurso de seleção de texto da publicação. Fonte: autor (2024). 53design digital, imersão e pós-modernismo: uma proposta de publicação digital 8. considerações finais Cada vez mais a internet se torna uma parte es- sencial do cotidiano das pessoas, influenciando diversos hábitos, como, por exemplo, a leitura – que começou cada vez mais a ganhar espaço no meio digital. Porém, apesar do grande número de leitores digitais, de modo geral, a leitura digi- tal ainda não é a preferida em meio aos leitores de livros. Diante dessa realidade, identificou-se a oportunidade para tornar a experiência de lei- tura digital mais atrativa, a partir de uma propos- ta que favoreça a imersão, fugindo das publica- ções digitais comuns. Essa busca pela quebra do comum trouxe também outra oportunidade para o projeto: trabalhar o design gráfico pós- -moderno como conteúdo principal da publica- ção - momento em que os designers “nadavam contra a corrente”. É nesse contexto que iniciou- 54design digital, imersão e pós-modernismo: uma proposta de publicação digital considerações finais -se esse projeto, com o objetivo de criar uma pu- blicação digital sobre design pós-moderno que fosse interativa e imersiva, diferenciando-se das publicações digitais comuns, que se tratam, em sua maioria, de reproduções estáticas das suas versões impressas. Para isso, utilizou-se como método uma adaptação da proposta de Dick e Gonçalves (2016), que conta com os cinco eixos: Conceito, Conteúdo, Funcionalidades, Experiên- cia e Superfície. Pondera-se que foi uma escolha acertada, uma vez que ela auxiliou o projeto a manter-se com um caráter editorial, mas, ainda assim, considerar as possibilidades e especifi- cidades do meio digital. Assim, o processo teve como resultado o protótipo de alta fidelidade de uma publicação digital em plataforma web, que conta com diversos recursos interativos, sendo uma versão digital do livro “Abaixo as Regras” de Rick Poynor. O projeto em si foi desafiador – literalmente um processo de aprendizado constante – afinal este autor, no início dele, não tinha conhecimento al- gum sobre como utilizar a plataforma Framer. Assim, a curva de aprendizagem, aliada à limi- tação do tempo, fez com que a responsividade da interface fosse um elemento deixado como secundário durante o desenvolvimento do pro- jeto. Isso fez com que algumas telas desktop apresentassem problemas de adaptação a telas menores e que a publicação não tivesse supor- te a dispositivos móveis; problemas que seriam possíveis de serem corrigidos se houvesse mais tempo de desenvolvimento do projeto. Outra li- mitação do produto final foi ocasionada pela falta de conhecimento deste autor com programação, o que possibilitou que recursos mais complexos – como as possibilidades de pesquisa e de sele- ção de texto – fossem apenas exemplificados na interface, não sendo realmente funcionais. Todavia, apesar dos problemas, pode-se dizer que o projeto foi bem sucedido e cumpriu com os seus principais objetivos e requisitos. Sabe- -se que imersão e flow são conceitos complexos e que não é possível afirmar que esta publica- ção permite o seu alcance, mas entende-se que determinados recursos interativos podem con- tribuir para essa experiência imersiva. Com isso em mente, a publicação trabalhou com funcio- nalidades que dão controle da interface ao usuá- rio/leitor, como arrastar imagens e legendas que aparecem de acordo com a interação do cursor do mouse; e também formas de alterar sua per- cepção durante a leitura, proporcionando uma sensação de espacialidade, com o uso dos eixos X, Y e Z para desvendar conteúdos. Finalmente, quanto a estudos futuros, aponta-se que outras mídias poderiam ser implementadas para contri- buir ainda mais para uma imersão e flow, como o uso de música e efeitos sonoros, por exemplo – recursos que não foram implementados neste projeto por falta de tempo – além de outras tec- nologias, como realidade virtual. Ainda, em uma perspectiva empírica, estudos poderiam ser fei- tos para uma investigar como o design da publi- cação de fato contribui para criar imersão e flow no contexto digital. 55design digital, imersão e pós-modernismo: uma proposta de publicação digital referências CAUDURO, Flávio Vinicius. Design e pós-modernidade. Revista Fame- cos, Porto Alegre, v. 40, p. 113-116, dez. 2009. Quadrimestral. CGI.br. Pesquisa sobre o uso das tecnologias de informação e comuni- cação nos domicílios brasileiros: TIC Domicílios, 2023. CSIKSZENTMIHALYI, Mihaly. Flow : the psychology of optimal experien- ce. Nova Iorque: Harper Perennial, 2008. DICK, Maurício Elias; GONÇALVES, Berenice Santos. Orientações para o design de publicações digitais sistemáticas. Revista Educação Grá- fica, v. 20, p. 38-56, 2016. DICK, Maurício Elias Klafke; GONÇALVES, Berenice Santos; “Inovação na indústria editorial digital: um panorama sob a ótica do design”, p. 8099-8117 . In: Anais do 14º Congresso Brasileiro de Pesquisa e De- senvolvimento em Design. São Paulo: Blucher, 2022. DOMICIANO, Cassia Leticia. Design Gráfico Contemporâneo. Estudo de caso: produção discente da Unesp. 2014. In: ANDRADE, A.B.P et al. Ensaios em Design. Práticas interdisciplinares. Bauru: Canal 6, 2014. FRASCARA, Jorge. 2004. Communication design: principles, methods, and practice. New York: Allworth Press. HARVEY, David. Condição pós-moderna: uma pesquisa sobre as ori- gens da mudança cultural. 10. ed. São Paulo: Loyola, 2001. HELFAND, Jessica. A desmaterialização do espaço da tela. In: ARMS- TRONG, Helen (org.). Teoria do design gráfico. São Paulo: Ubu, p. 148- 155, 2019. LUPTON, Ellen. Tipos na tela: um guia para designers, editores, tipó- grafos, blogueiros e estudantes. São Paulo: Gustavo Gili, 2015. MALINI, Fabio. Os impactos da leitura de livros em plataformas digitais no Brasil. Instituto Pró-Livro. 20 out. 2020. Disponível em: https://www. prolivro.org.br/2020/10/20/os-impactos-da-leitura-de-livros-em-plata- formas-digitais-no-brasil/. Acesso em: 27 mai. 2024. MEGGS, Phillips B.; PURVIS, Alston W.. História do design gráfico. São Paulo: Cosac & Naify, 2009. MURRAY, Janet Horowits. Hamlet no holodeck: o futuro da narrativa no ciberespaço. São Paulo: Ed. da Unesp: Itaú Cultural, 2003. PHILLIPS, A. Turning the page: The evolution of the book. Abingdon, Reino Unido: Routledge, 2014. POYNOR, Rick. Abaixo as regras: design gráfico e pós-modernismo. Porto Alegre: Bookman, 2010. ROBERTS, Lucienne; THRIFT, Julia. The designer and the grid. East Sussex: Rotovisión, 2002. SAMARA, Timothy. Grid: construção e desconstrução. São Paulo: Co- sac Naify, 2007. SHARP, Helen; ROGERS, Yvonne; PREECE, Jenny. Interaction Design: beyond human-computer interaction. 4. ed. Chichester: John Wiley & Sons, 2015. SUNWALL, Evan. Prioritize Quantitative Data with the Pareto Princi- ple. Nielsen Norman Group, 2021. Disponível em: https://www.nngroup. com/articles/pareto-principle/. Acesso em 24 mai. 2024 TWO SIDES. Trend Tracker 2023. 2023. Disponível em: https://twosi- des.info/trend-tracker-2023/. Acesso em 27 mai. 2024. 56design digital, imersão e pós-modernismo: uma proposta de publicação digital apêndice A – respostas do questionário perfi l 57design digital, imersão e pós-modernismo: uma proposta de publicação digital apêndice A – respostas do questionário design gráfi co pós-moderno 58design digital, imersão e pós-modernismo: uma proposta de publicação digital apêndice A – respostas do questionário leitura sobre design 59design digital, imersão e pós-modernismo: uma proposta de publicação digital apêndice A – respostas do questionário Se sim, conte um pouco mais como e onde foi: • Em alguns contextos, em jogos virtuais a partir de telas me sinto meus sentidos totalmente tomados e atentos ao conteúdo apresentado, e também em fi lmes. Ou em experiências com óculos de realidade virtual onde se é possível ver em volta de você outra realidade, porem neste caso estava sem fones de ouvido o que quebrou um pouco da experiência, • Uma vez usei óculos de realidade virtual e não gostei mas o cinema 4D foi legal. • Todos os dias quando estou aprendendo algum recurso novo. • Já tive diversas experiências de imersão digital, seja com um site, video ou game… A experiência é bastante semiótica e faz com que a imersão por si só praticamente transcenda a realidade. Quase se tornando uma realidade em si para o espectador. Geralmente a utilização de todos ou grande parte dos 5 sentidos, fazem essa imersão ser mais profunda e torna mais difícil quebrá-la. • Amaze.com - vale a pena. • Farol Santander Você gostaria de fazer alguma contribuição sobre o assunto que não tenha sido mencionada anteriormente? • Experiências imersivas digitais não necessariamente demandam um óculos VR. Mas creio que dependem mais de uma narrativa que prenda a atenção • Sim! Esse video tem muitas informações valiosas que podem ajudar a tornar a imersão mais forte e transformá- la numa experiência sensorial única https://youtu.be/ N6wjC0sxD2o?si=dXAUL6g2v16wPVQy 60design digital, imersão e pós-modernismo: uma proposta de publicação digital apêndice B – levantamento de possibilidades de funcionalidades Voltando-se a atenção para possibilidades de funcionalidades e referências para o projeto, fo- ram analisados sites e aplicativos que pudessem servir de exemplo no uso de certos recursos in- terativos. O primeiro deles é o aplicativo The Mu- tant Library, publicado em 2013. Nele, através do toque, imagens e conteúdos são revelados, trazendo uma forma simples, porém efetiva, de gerar interação entre sistema e usuário. Figura 38 - Exemplos retirados do aplicativo The Mu- tant Library, design à esquerda por Yingxi Zhou e à direita por Gabriela Hernandez. Fonte: Lupton (2015). 61design digital, imersão e pós-modernismo: uma proposta de publicação digital apêndice B – levantamento de possibilidades de funcionalidades Seguindo para uma forma mais complexa de in- teração, tem-se o site Float (https://youfloat.co/), newsletter sobre cultura, comportamento e es- tratégia. Nele as interações de hover são bem exploradas, fazendo com que elementos se me- xam, mudem de cor, ou então se revelem, formas interessantes de trazer dinamicidade e imersão ao usuário. Figura 39 - Capturas de tela do site Float. Fonte: https://youfloat.co. 62design digital, imersão e pós-modernismo: uma proposta de publicação digital apêndice B – levantamento de possibilidades de funcionalidades Com o foco em interações de scroll, há o site por- tfólio do Form Studio (https://formstudio.site/), que tem toda a sua experiência focada na rolagem da página. Nele, enquanto o usuário vai rolando o scroll do mouse para baixo, ações vão sendo desvenda- das na interface: a tela desce verticalmente, depois navega horizontalmente, imagens e textos apare- cem, aumentam de tamanho e depois somem; tra- zendo mais imersão e dinamicidade ao design. Figura 40 - Capturas de tela do site Form Studio. Fonte: https://formstudio.site/. 63design digital, imersão e pós-modernismo: uma proposta de publicação digital apêndice B – levantamento de possibilidades de funcionalidades Já nos elementos gráficos interativos, o uso de ob- jetos tridimensionais tem se tornado uma tendên- cia estética em interfaces. Assim, decidiu-se trazer como exemplo o site Kubota Future Cube (https:// www.kubota.com/futurecube/), da Kubota Corpo- ration, interface que ficou em terceiro lugar no prê- mio CSS Design Awards de 2022. Nele é explorada a forma do cubo para trazer recursos interativos. Na tela inicial, existe um cubo que se movimen- ta de acordo com o cursor do mouse e convida o usuário a clicar para iniciar a navegação. Por fim, a interface também utiliza cubos para trabalhar as transições de tela. Figura 41 - Capturas de tela do site Kubota Future Cube. Fonte: https://www.kubota. com/futurecube/.