Dezembro 2022 vol. 10 num. 5 - 14º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design

Artigo - Open Access.

Idioma principal | Segundo idioma

MORETS: Desenvolvimento de uma ferramenta para construção de sistemas tipográficos web responsivos

MORETS: Development of tool for building web responsive typographic systems

TARGINO, Mateus ; NOVAIS, Carlos ;

Artigo:

O uso de sistemas tipográficos na criação de interfaces digitais é uma prática comum e recomendada. Se tratando de websites, há uma preocupação recorrente em manter os layouts confortáveis e consistentes para diferentes tamanhos de tela considerando a variedade de dispositivos presentes no mercado. Um dos principais desafios neste contexto são as mudanças feitas em características dos textos presentes nestes ambientes. Aliado a isso, nos últimos tempos, as fontes variáveis vêm ganhando cada vez mais destaque e visibilidade por parte dos estudiosos e entusiastas de design e tipografia por suas potencialidades. Diante disto, este trabalho apresenta o processo de pesquisa e desenvolvimento de uma solução que visa criar sistemas tipográficos web responsivos. Para tanto, a ferramenta aqui proposta se inspira em cânones do design com tipos, utiliza de técnicas de desenvolvimento web e as possibilidades das variable fonts, permitindo que os usuários criem sistemas type systems fluidos e customizáveis com comportamento responsivo.

Artigo:

The use of typographic systems while creating digital interfaces is a common and recommended practice. When it comes to websites, there is a recurring concern to keep layouts comfortable and consistent for different screen sizes considering the variety of devices on the market. One of the main challenges in this context are the changes in the characteristics of the texts present in these environments. Furthermore, in recent times, variable fonts have been gaining emphasis and visibility from scholars and enthusiasts of design and typography for their potential. This work presents the research and development of a solution that aims to generate responsive web typographic systems. The software proposed is inspired by canons of typography, uses web development techniques and the possibilities of variable fonts, allowing users to create fluid and customizable type systems with responsive behavior.

Download (PDF)

Palavras-chave: Tipografia; Web Design Responsivo; Design de interfaces; Design editorial; Fontes Variáveis,

Palavras-chave: Typography; Responsive Web Design; User Interface Design, Book Design; Variable fonts,

DOI: 10.5151/ped2022-2169916

Referências bibliográficas
  • [1] ADOBE SYSTEM INCORPORATED. Designing Multiple Master Typefaces. Adobe System Incorporated, 1997. Disponível em . Acesso em 15/06/2019.
  • [2] BRINGHURST, R. Elementos do Estilo Tipográfico. 1.ed. São Paulo: Editora Cosac Naify Ltda, 2015.
  • [3] BROWN, T. Flexible typography with CSS locks. Adobe Typekit Blog, 2016. Disponível em . Acesso em 30/01/2022.
  • [4] CAMDEN, R.; RINALDI, B. Working with Static Sites: Bringing the Power of Simplicity to Modern Sites. O'Reilly Media, Sebastopol, 2017.
  • [5] da SILVA, D. M.; BELLO, J. C. S. O uso de design thinking na concepção de um produto de software: Auxiliando instrutores de musculação. TCC, PUCRS, Porto Alegre, 2018.
  • [6] DAM, R. F.; SIANG, T. Y. . What Kind of Prototype Should You Create? Interaction Design Foundation, 2020. Disponível em . Acesso em 30/01/2022.
  • [7] DOS REIS, M.; MERINO, E. Painel semântico: revisão sistemática da literatura sobre uma ferramenta imagética de projeto voltada à definição estético-simbólica do produto. Estudos em Design | Revista Online, n.º 1, p. 178-190, 2020.
  • [8] e SILVA, M. J. V.; e FILHO, Y. V.; ADLER, I. K.; de FIGUEIREDO LUCENA, B.; RUSSO, B. Design thinking: inovação em negócios. MJV Press, Rio de Janeiro, 2012.
  • [9] GIT. Git. Git, 2022. Disponível em . Acesso em 30/01/2022.
  • [10] GITHUB. Hello World. Github Docs, 2022. Disponível em . Acesso em 30/01/2022.
  • [11] GITHUB. What is Gulp. Github, 2019. Disponível em . Acesso em 30/01/2022.
  • [12] GONZALEZ, R. Figma Wants Designers to Collaborate Google-Docs Style. Wired, 2017. Disponível em . Acesso em 30/01/2022.
  • [13] GOOGLE. Introduction. Material Design, 2018. Disponível em . Acesso em 30/01/2022.
  • [14] GOOGLE. Introducing OpenType Font Variations. Google Open Source Blog, 2016. Disponível em . Acesso em 30/01/2022.
  • [15] GRAHAM, G. Fluid Typography. CSS Tricks, 2019. Disponível em . Acesso em 30/01/2022.
  • [16] KELLUM, S. Intrinsic Typography is the Future of Styling Text on the Web. CSS Tricks, 2021. Disponível em . Acesso em 30/01/2022.
  • [17] HIBBARD, J. A Guide to the Pug HTML Template Preprocessor. Sitepoint, 2019. Disponível em . Acesso em 30/01/2022.
  • [18] JUNIOR, M.; FREITAS, R.; PERES, S.; FANTINATO, M.; STEINBECK, R.; e ARAÚJO, U. Experimenting with design thinking in requirements refinement for a learning management system. Simpósio Brasileiro de Sistemas de Informação, João Pessoa, 2013.
  • [19] LIIKKANEN, L. A.; LAAKSO, M., BJÖRKLUND, T. Foundations for studying creative design practices. In: Procedings of the Second Conference on Creativity and Innovation in Design. ACM, New York, NY, USA 2011. p.309–315.
  • [20] LUPTON, E. Pensando com tipos: Guia para designers, escritores e estudantes. 1ed. - Editora Gustavo Gili, 20
  • [21] MOZILLA. The Web Open Font Format(WOFF). MDN Web Docs Mozilla, 2022. Disponível em . Acesso em 30/01/2022.
  • [22] NETLIFY. About Netflify. Netlify, 20 Disponível em . Acesso em 30/01/20
  • [23] PAMENTAL, J. Responsive Typography: Using Type Well on the Web. 1ed. - O'Reilly Media, Sebastopol, 2014.
  • [24] PIOVESAN, A.; TEMPORINI, R. Pesquisa exploratória: procedimento metodológico para o estudo de fatores humanos no campo da saúde pública. Scielo Public Health, 1995. Disponível em . Acesso em 30/01/2022.
  • [25] TSCHIHOLD, J. The Form of the Book: Essays on the Morality of Good Design. - Hartley & Marks, Vancouver, 1991.
  • [26] TSCHIMMEL, K. Design thinking as an effective toolkit for innovation. In: Proceedings of the ISPIM Conference: Action for Innovation from Experience. Barcelona 2012. p.1–20.
  • [27] VICTIONARY. On the road to variable: flexible future of typography. - Two Points, Hong Kong, 1991.
  • [28] W3SCHOOLS. CSS Web Fonts. W3Schools, 2022. Disponível em . Acesso em 30/01/2022.
  • [29] MOZILLA. CSS. MDN Web Docs, 2021. Disponível em . Acesso em 30/01/2022.
  • [30] MOZILLA. HTML: Linguagem de Marcação de Hipertexto. MDN Web Docs, 2021. Disponível em . Acesso em 30/01/2022.
  • [31] MOZILLA. Javascript. MDN Web Docs, 2021. Disponível em . Acesso em 30/01/2022.
  • [32] MOZILLA. Node.js. MDN Web Docs, 2021. Disponível em . Acesso em 30/01/2022.
  • [33] WITHROW, J. Competitive Analysis: Understanding the Market Context. Boxes and Arrows, 2006. Disponível em . Acesso em 30/01/2022.
  • [34] WOLOSZYN, M.; MEÜRER, M.; GONÇALVES, B. S. Fontes variáveis: um estudo prospectivo. In: Anais do 9º CIDI e 9º CONGIC. 14 Folhas. Sociedade Brasileira de Design da Informação – SBDI, 2019.
Como citar:

TARGINO, Mateus; NOVAIS, Carlos; "MORETS: Desenvolvimento de uma ferramenta para construção de sistemas tipográficos web responsivos", p. 2446-2467 . In: Anais do 14º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design. São Paulo: Blucher, 2022.
ISSN 2318-6968, DOI 10.5151/ped2022-2169916

últimos 30 dias | último ano | desde a publicação


downloads


visualizações


indexações