Motion system bold: Desenvolvimento de guidelines para implementação de animações em um design system

Motion system bold: Development of guidelines for implementing animations in a design system

Gomes, André Luiz; Gonçalves, Berenice dos Santos; Wazlawick, Raul Sidnei

Artigo:

O motion design, como área do conhecimento, iniciou sua jornada associado ao cinema. Só a partir da sua inserção no mundo digital, foi possível evidenciar uma nova gama de possibilidades para sua utilização. O motion foi incluído nas interfaces digitais com foco na melhoria da usabilidade, na experiência do usuário e na diferenciação dos produtos no mercado. Entretanto, a utilização e o conhecimento de motion nas interfaces ainda é limitada e muitas vezes restringida à grandes empresas do setor tecnológico. O Laboratório Bridge, tem oferecido soluções tecnológicas para a gestão pública e mantém o Bold, um design system de código aberto que é utilizado nos seus principais produtos digitais como o e-SUS PEC APS. Utilizando um método de quatro etapas: diagnóstico, direcionamento, desenvolvimento e desfecho foram desenvolvidas motion guidelines que contém curvas de suavização e durações para orientar a criação e implementação de animações no Bold Design System.

Motion design, as a field of knowledge, began its journey associated with cinema. It was only with its integration into the digital world that a new range of possibilities for its use became evident. Motion was included in digital interfaces with a focus on improving usability, user experience, and product differentiation in the market. However, the use and understanding of motion in interfaces are still limited and often restricted to large companies in the technology sector. Laboratório Bridge has been offering technological solutions for public management and maintains Bold, an open-source design system used in its main digital products like e-SUS PEC APS. Using a four-step method—diagnosis, direction, development, and conclusion—motion guidelines were developed. These guidelines include easing curves and durations to guide the creation and implementation of animations within the Bold Design System.

Palavras-chave: UX motion; motion design; animação; UX/UI design UX motion; motion design; animation; UX/UI design

DOI: 10.5151/ergodesign2025-0070

Referências bibliográficas

• [1] APPLE. WWDC23: Animate with springs | Apple. 2024. Disponível em: https://youtu.be/HaZ2jw9rx9M?si=KjpGZcK69XWBgU3E. Acesso em: 20 maio 2024
• [2] BARCLAY, Caleb. 5 steps for including motion design in your system. 2019. Disponível em: https://www.designsystems.com/5-steps-for-including-motion-design-in-your-system/. Acesso em: 07 abr. 2024.
• [3] BUDIU, Raluca. Change Blindness in UX: Definition. 2018. Disponível em: https://www.nngroup.com/articles/change-blindness-definition/. Acesso em: 06 abr. 2024.
• [4] CARDOSO, Arthur Henrique Oliveira. Motion design no Brasil: uma proposta de metodologia. 2021. 249 f. Dissertação (Mestrado) - Curso de Design, Universidade do Estado de Minas Gerais, Belo Horizonte, 2021.
• [5] FROST, Brad. Atomic Design. 2013. Disponível em: https://atomicdesign.bradfrost.com/table-of-contents/. Acesso em: 08 abr. 2024.
• [6] NIELSEN, Jakob. Usability 101: Introduction to Usability. 2012. Disponível em: https://www.nngroup.com/articles/usability-101-introduction-to-usability/. Acesso em: 08 maio 2024.
• [7] SAFFER, Dan. Microinteractions: designing with details. Sebastopol: O'Rilley, 2013. 152 p.
• [8] SILVEIRA, Felippe. Animação em Design Systems – O Motion dentro de interfaces. 2022. Disponível em: https://uxmd.com.br/motion-designsystem/. Acesso em: 23 jul. 2024
• [9] WILLENSKOMER, Issara. Creating Usability with Motion: The UX in Motion Manifesto. 2017. Disponível em: https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc. Acesso em: 04 jun. 2024.
• [10] WILLIAMS, Richard. Manual de Animação. São Paulo: Senac, 2016.
• [11] WU, Yingshan. The Brief Evolution of Motion Interface Design on Computer and Smartphone. 2019. Disponível em: https://medium.com/@yingshanwu/the-brief-evolution-of-motion-interface-design-on-computer-and-smartphone-466cb6c28a5. Acesso em: 21 abr. 2024.
• [12] YIN, Robert. Case Study Research and Applications: design and methods. 6. ed. Los Angeles: Sage Publications, 2018. 352 p.

Como citar:

Gomes, André Luiz; Gonçalves, Berenice dos Santos; Wazlawick, Raul Sidnei; "Motion system bold: Desenvolvimento de guidelines para implementação de animações em um design system", p-952-964. In: Anais do 20º ERGODESIGN & USIHC - 2025. São Paulo: Blucher, 2026.
ISSN 23186968, DOI 10.5151/ergodesign2025-0070