Resumo Executivo

Gabriely Rodrigues de Lima; Marcos Jardel Henriques

Resumo elaborado pela ferramenta ResumeAI, solução de inteligência artificial desenvolvida pelo Instituto Pecege voltada à síntese e redação.

A rápida evolução das tecnologias digitais fez com que produtos e dispositivos estivessem cada vez mais integrados à rotina das pessoas, tanto em atividades pessoais quanto em compromissos profissionais. Com essa presença crescente da tecnologia, observa-se também a dificuldade que muitas pessoas de diferentes contextos culturais, econômicos e físicos enfrentam para acessar e utilizar essas soluções, destacando a desigualdade de acesso a essas tecnologias para grande parte da população (Barbosa et al., 2021). Paralelamente, à medida que o acesso a essas soluções cresce, a falta de acessibilidade para diferentes perfis de usuários torna-se cada vez mais evidente, exigindo uma postura mais rigorosa no desenvolvimento de interfaces (SGD/MGI, 2023). No Brasil, estima-se que existam mais de 18,6 milhões de pessoas com deficiência, e apesar de a acessibilidade digital ser um direito humano estabelecido pela Lei Brasileira da Inclusão da Pessoa com Deficiência, a sua ausência ainda representa um grande obstáculo, comprometendo a autonomia de indivíduos que utilizam produtos digitais no cotidiano (SGD/MGI, 2023). Para que um produto digital seja verdadeiramente acessível, ele deve ser concebido desde o início para atender todas as pessoas, incluindo aquelas com limitações permanentes ou temporárias, sem a necessidade de adaptações ou recriações posteriores de elementos da interface (SGD/MGI, 2023). As Diretrizes de Acessibilidade para Conteúdo Web, conhecidas como WCAG, estabelecem padrões e recomendações que seguem os princípios de perceptibilidade, operabilidade, compreensibilidade e robustez, garantindo que os produtos digitais sejam acessíveis independentemente do dispositivo utilizado, seja um computador, celular ou software leitor de telas (W3C, 2018). Em conjunto com a acessibilidade, a usabilidade reforça a facilidade de uso e aprendizado ao interagir com produtos digitais, considerando o contexto específico de cada usuário e o esforço necessário para utilizar o sistema, permitindo que as atividades sejam realizadas de forma eficaz e satisfatória (Barbosa et al., 2021). Diante desse cenário, o design e o desenvolvimento de produtos digitais alinhados às diretrizes internacionais e focados na experiência do usuário tornam-se essenciais para garantir que todos possam interagir com as interfaces sem barreiras (Pereira, 2024). Essa abordagem contribui para evitar a criação de elementos que dificultem ou impeçam a interação, promovendo a inclusão social por meio da tecnologia (Barbosa et al., 2021). Nesse contexto, a criação de design systems, fundamentados em princípios de acessibilidade e usabilidade, surge como uma solução estratégica para guiar desenvolvedores e designers na aplicação desses conceitos desde a prototipação até o desenvolvimento final da interface (Kalermo, 2021). Ao estruturar a documentação e a prototipação de componentes com foco em princípios como confiança, consistência e reutilização, os design systems não apenas garantem interfaces mais eficientes para os usuários, mas também facilitam a manutenção técnica, reduzindo erros e inconsistências ao longo do ciclo de vida do software (Nguyen, 2023). Os design systems podem ser compreendidos como conjuntos organizados de padrões e práticas compartilhadas, estruturados para atender aos objetivos de um produto digital (Kholmatova, 2017). Eles reúnem elementos, componentes e regiões documentadas com diretrizes claras de design e desenvolvimento, muitas vezes acompanhadas de exemplos interativos de código, facilitando sua aplicação por equipes multidisciplinares (Vesselov e Davis, 2019). Ao definir regras consistentes para o visual e o funcionamento das interfaces, esses sistemas promovem consistência, escalabilidade e acessibilidade, permitindo a reutilização segura de componentes e acelerando o desenvolvimento de novas funcionalidades.

A metodologia adotada para a criação do Kitten DS baseou-se no estudo de caso, técnica indicada para investigações aprofundadas em contextos reais de desenvolvimento de software (Yin, 2001). O processo foi organizado em quatro fases operacionais distintas: revisão de literatura, prototipação, desenvolvimento técnico e documentação. A primeira fase consistiu em um levantamento técnico e bibliográfico para mapear diretrizes e boas práticas voltadas à construção de sistemas de design acessíveis. Foram consultadas bases de dados como o Google Acadêmico e materiais disponibilizados pelo W3C Brasil, organização responsável pela definição de padrões para a Web, com ênfase nas Diretrizes WCAG (W3C, 2018). A investigação foi orientada pela necessidade de compreender como os princípios de acessibilidade podem ser incorporados ao desenvolvimento de um sistema centrado na usabilidade. A revisão de literatura utilizou filtros para resultados publicados nos últimos cinco anos, combinando termos como acessibilidade, desenvolvimento, design system e componentes de interface. Foram analisados os títulos e resumos das dez primeiras páginas de resultados, selecionando 22 artigos que apresentavam maior alinhamento com os objetivos da pesquisa. Além da literatura acadêmica, foram analisados materiais técnicos do W3C e o Guia de Boas Práticas para Acessibilidade Digital (SGD/MGI, 2023). A etapa final da fase inicial consistiu na análise de design systems já existentes na base pública ADELE, onde foram encontrados 37 sistemas com diretrizes de acessibilidade, dos quais 23 foram selecionados por apresentarem documentação funcional e acessível em inglês ou português. Essa análise permitiu entender como cada componente é descrito e como a acessibilidade é incorporada na prática industrial. A segunda fase do trabalho focou na prototipação dos componentes e na documentação das fundações do sistema utilizando a ferramenta Figma. O desenvolvimento do kit de interface teve início com a definição da paleta de cores base e dos guias de estilo, que serviram de alicerce para os componentes. Foram estabelecidas sete paletas de cores, cada uma com variações tonais organizadas por um sistema de pesos numéricos de 100 a 900. Todas as paletas foram nomeadas de acordo com seu propósito funcional, podendo ser primárias, secundárias ou de feedback, orientando a aplicação consistente (Vesselov e Davis, 2019). A escolha das cores considerou heurísticas de visibilidade e prevenção de erros, visando promover interfaces intuitivas (Nielsen, 1994). Todos os tons foram testados quanto ao contraste para verificar a legibilidade com texto branco e escuro, em conformidade com o nível AAA das Diretrizes WCAG (W3C, 2018). A tipografia foi estruturada com a fonte Inter, escolhida por sua legibilidade e consistência em diferentes tamanhos de tela. Foram criados tokens tipográficos nomeados semanticamente, incluindo variantes para títulos, parágrafos e rótulos de botões, assegurando que a aplicação fosse consistente e permitisse aprendizado rápido pelo usuário (Barbosa et al., 2021). O sistema de espaçamento, bordas e sombras também foi documentado no Figma, estabelecendo diretrizes para alinhamento e hierarquia visual (Vesselov e Davis, 2019). A validação de acessibilidade na fase de prototipação utilizou ferramentas de verificação de contraste e áreas de toque, garantindo conformidade com os critérios internacionais antes do início da codificação.

A terceira fase compreendeu o desenvolvimento e os testes da biblioteca de componentes. O ambiente do projeto foi configurado utilizando a biblioteca React com TypeScript e o framework Tailwind CSS para a definição das propriedades e estilização. Para a documentação visual e testes manuais, integrou-se a ferramenta Storybook, acompanhada de extensões de acessibilidade. Os testes automatizados foram realizados com as bibliotecas Vitest, React Testing Library e Vitest Axe, garantindo que cada componente passasse por verificações unitárias de acessibilidade e usabilidade. O fluxo de desenvolvimento de cada componente seguiu etapas padronizadas: definição de propriedades, codificação, documentação no Storybook, inspeção visual e testes automatizados. A definição de propriedades via TypeScript garantiu precisão nos valores aceitos e consistência no uso pelos desenvolvedores, baseando-se em práticas de HTML acessível e atributos de acessibilidade conhecidos como ARIA (W3C, 2018). Foram incorporadas opções de personalização por meio de classes utilitárias, permitindo ajustes de tamanho e cor sem violar os princípios do sistema. A abordagem foi guiada pelas diretrizes WCAG para assegurar que os componentes pudessem ser utilizados por diferentes perfis de usuários, incluindo pessoas com baixa visão ou dificuldades motoras (Pickering, 2016). Os testes manuais complementaram os automáticos, verificando aspectos como sobreposição de elementos e navegação via teclado (SGD/MGI, 2023). Cada componente foi registrado no Storybook com exemplos interativos, permitindo identificar falhas em áreas de toque e uso de semântica HTML. Verificou-se a legibilidade com zoom de até 200% e a adequação em dispositivos móveis. Os testes automatizados validaram o comportamento e a interação esperada, checando a conformidade com os padrões de usabilidade definidos anteriormente (Nielsen, 1994; Barbosa et al., 2021). A quarta e última fase consistiu no desenvolvimento da documentação técnica, estruturando informações sobre as fundações de design e os componentes. A documentação de cada componente foi incorporada ao Storybook, incluindo guias de uso, descrições de propriedades e orientações de acessibilidade, indicando como o componente mantém o foco na usabilidade inclusiva. Essa etapa foi fundamental para garantir que a biblioteca fosse replicável e clara para futuros desenvolvedores e designers, permitindo que compreendessem rapidamente o propósito e a aplicação correta de cada elemento.

Os resultados obtidos com a análise dos 22 artigos da revisão de literatura permitiram identificar temas comuns, como a padronização de componentes, a reutilização eficiente e os desafios na manutenção da documentação. Observou-se que poucos estudos discutem profundamente como integrar diretrizes de acessibilidade desde a concepção inicial do sistema, o que reforçou a importância da abordagem adotada no Kitten DS. A análise dos materiais técnicos do W3C forneceu o suporte necessário para decisões sobre contraste, identificação de elementos interativos, estrutura semântica e compatibilidade com leitores de tela. A partir desses insumos, as fundações de design no Figma foram organizadas em sete paletas: Purple Brand Colors para a marca primária, Blue Brand Colors para a secundária, Neutral Colors para fundos e tipografia, e paletas de feedback para erro, informação, sucesso e atenção. A atribuição de pesos numéricos permitiu uma hierarquia visual clara e flexibilidade de aplicação em produtos com diferentes identidades visuais (Vesselov e Davis, 2019). Os tokens de cor criados atribuíram valores semânticos que definem o propósito de cada tom, permitindo que o sistema seja sobrescrito para se adaptar a necessidades específicas sem comprometer a acessibilidade. No que se refere à tipografia, a fonte Inter foi aplicada em variáveis específicas, como Display para grandes títulos com peso 700, Heading para níveis de título HTML de h1 a h6 com peso 600, e Body para parágrafos de diferentes tamanhos. Essas variáveis contribuíram para a expressão visual da identidade do produto sem prejudicar a legibilidade (Kholmatova, 2017). Além da tipografia, foram documentados tokens para sombras em três níveis de intensidade e breakpoints para dispositivos, variando de extra small para telas inferiores a 320 píxeis até double extra large para telas superiores a 1920 píxeis. A padronização de arredondamento de bordas foi definida com tokens que variam de 2 píxeis para superfícies densas até o formato totalmente circular para botões de ícone e chips. O sistema de espessura de bordas incluiu opções de 1 a 8 píxeis, garantindo destaque adequado para elementos interativos e delimitadores. O sistema de espaçamento foi um dos pontos mais detalhados, com tokens variando de 4 píxeis para espaçamentos internos mínimos até 96 píxeis para separações máximas em layouts amplos. Essa estrutura permitiu desenvolver uma base semântica reutilizável e adaptável (Vesselov e Davis, 2019).

Ao todo, foram definidos 39 tokens de cor e 43 tokens de fundações para o Kitten DS, fornecendo uma base sólida para suportar diferentes temas e funcionalidades. Foram prototipados e desenvolvidos 17 componentes principais, incluindo botões em variações preenchidas e delineadas, botões de ícone, cartões, caixas de seleção, grupos de seleção, chips, elementos de formulário como campos de texto e seletores simples ou múltiplos, links, botões de rádio, lanchonetes de notificação, indicadores de carregamento e dicas de ferramentas. Cada componente foi desenvolvido com variações de estilo e cor, fundamentadas nos tokens de feedback. A documentação incluiu descrições breves e todas as variações de estado, como flutuação, ativo, desabilitado e foco. Essas definições seguiram rigorosamente as recomendações de acessibilidade das diretrizes WCAG e do Guia de Boas Práticas para Acessibilidade Digital (SGD/MGI, 2023). Para proporcionar uma experiência de usuário eficiente, os componentes foram projetados para serem intuitivos, respeitando princípios de consistência e feedback claro (Nielsen, 1994; Barbosa et al., 2021). Durante a prototipação, priorizou-se a sinalização clara de estados e interações previsíveis, facilitando o reconhecimento por usuários com pouca familiaridade tecnológica. A validação de acessibilidade identificou inicialmente inconsistências nos contrastes de cor e no tamanho de áreas clicáveis, que foram ajustadas para garantir conformidade com o nível AA da WCAG. Como resultado, a interface foi otimizada para telas sensíveis ao toque e para uma navegação inclusiva. O kit de interface validado foi disponibilizado como uma biblioteca que facilita a integração e padronização de produtos, garantindo manutenção e evolução contínua. Essa organização permitiu a criação de um ambiente colaborativo onde a biblioteca base pode ser atualizada centralmente, viabilizando a qualidade visual em escala. A implementação técnica em React utilizou propriedades relacionadas a variantes de cor, espaçamento e tipografia, complementadas por atributos ARIA para leitura por tecnologias assistivas. O uso de TypeScript permitiu definir com precisão os valores aceitos, promovendo segurança no desenvolvimento. No Storybook, cada componente recebeu uma aba com suas variações visuais, permitindo que desenvolvedores visualizassem e personalizassem os elementos em tempo real.

Durante os testes manuais da biblioteca, foram identificados e corrigidos pontos de melhoria no contraste de cores e nos indicadores visuais de foco, assegurando que todos os componentes atendessem aos critérios de acessibilidade (W3C, 2018). Os testes automatizados garantiram 100% de cobertura de código nos cenários críticos, validando a navegação por teclado, o comportamento em estados inativos e a aceitação de tags HTML semânticas. Essa abordagem assegurou que os componentes funcionassem corretamente com leitores de tela e tivessem contraste adequado para pessoas que navegam exclusivamente pelo teclado. O desenvolvimento e a validação demonstraram que o Kitten DS é um sistema acessível, flexível e consistente, alinhado à fundamentação teórica levantada. A documentação técnica incluiu páginas de guia de uso com visões gerais detalhadas, instruções de aplicação e recomendações baseadas em heurísticas de usabilidade (Nielsen, 1994). Para componentes interativos, foram incluídos guias visuais demonstrando aplicações corretas e exemplos a serem evitados, reforçando os critérios de acessibilidade. A seção final de cada guia destacou como o componente atende às diretrizes específicas da WCAG, fornecendo referências para manter a acessibilidade em novos contextos de uso. A documentação das fundações incluiu tipografia, paleta de cores e tokens essenciais para a personalização do sistema conforme o contexto de cada produto. Cada grupo e subgrupo de cores contou com uma descrição de propósito e demonstrações visuais dos tons configurados. A tabela de tokens do Figma foi integrada à documentação, detalhando a função e a amostra visual de cada elemento. A escolha da fonte Inter e a criação dos tokens tipográficos garantiram consistência e suporte à acessibilidade, sustentando a criação de componentes de título e texto com estrutura semântica apropriada. Essa etapa final contribuiu para a entrega de um sistema de design completo, disponibilizando não apenas componentes isolados, mas diretrizes claras que promovem a consistência e o foco na usabilidade, alinhando-se à literatura técnica consultada. O uso combinado de ferramentas modernas de desenvolvimento e documentação proporcionou um ciclo de trabalho eficiente, reduzindo o risco de inconsistências entre o design e o código final. A documentação interativa tem o potencial de facilitar a adoção da biblioteca por outras equipes, reforçando o caráter inclusivo do projeto.

A criação de uma documentação com diretrizes de uso focadas na usabilidade e na acessibilidade contribuiu para tornar o Kitten DS um sistema robusto, permitindo que os componentes fossem utilizados de forma consistente sem comprometer a flexibilidade necessária para adaptação a diferentes contextos. Embora a utilização de ferramentas automatizadas e testes manuais tenha sido eficaz para a validação, reconhece-se que essas abordagens não substituem integralmente os testes com usuários reais, que poderiam fornecer percepções mais precisas sobre a experiência final de uso (Pickering, 2016). Como perspectivas futuras, planeja-se dar continuidade à manutenção da biblioteca, incluindo a criação de novos componentes e a aplicação do sistema em produtos reais para validar sua eficácia em larga escala. O Kitten DS, por ser baseado em princípios rigorosos de acessibilidade e permitir a sobrescrita de padrões de estilo, pode servir como base para sistemas em diversos setores, como produtos educacionais, portais governamentais e plataformas de comércio eletrônico. Essa flexibilidade permite que diferentes produtos se beneficiem de uma estrutura testada e documentada, promovendo boas práticas de usabilidade. O trabalho reforça a importância de considerar a acessibilidade como um pilar central desde as etapas iniciais do desenvolvimento de software, e não como uma camada adicional aplicada ao final do processo. A integração entre design e engenharia, mediada por um sistema de design bem estruturado, demonstra ser um caminho viável para a construção de interfaces mais inclusivas e eficientes. A padronização de elementos visuais e funcionais não apenas acelera a produção, mas garante que a qualidade da interação seja mantida independentemente da complexidade do produto. A disseminação de práticas de design inclusivo é fundamental para reduzir a exclusão digital e garantir que os avanços tecnológicos beneficiem toda a sociedade, respeitando a diversidade de capacidades e contextos de uso.

Conclui-se que o objetivo foi atingido por meio do desenvolvimento do Kitten DS, um design system acessível, customizável e rigorosamente documentado em conformidade com as Diretrizes WCAG. A integração entre o kit de interface no Figma e a biblioteca de componentes em React, utilizando Tailwind CSS e Storybook, demonstrou ser uma solução técnica eficiente para garantir a consistência visual e a escalabilidade de produtos digitais. Os testes manuais e automatizados confirmaram que os 17 componentes desenvolvidos atendem aos padrões internacionais de acessibilidade e usabilidade, oferecendo uma base sólida para a criação de interfaces inclusivas. A estrutura baseada em tokens semânticos permitiu a flexibilidade necessária para a personalização estética sem violar os princípios de contraste e legibilidade. O trabalho contribuiu para a sistematização de práticas que unem design e engenharia de software, reforçando a importância de conceber produtos digitais que respeitem a diversidade de usuários desde as etapas iniciais de planejamento.

Referências Bibliográficas:

Barbosa, S. D. J. et al. Interação Humano-Computador e Experiência do Usuário. [S.l.: s.n.], 2021. Disponível em: https://leanpub.com/ihc-ux. Acesso em: 25 ago. 2025

Kalermo, T. 2021. Building a Design System. Trabalho de conclusão de curso, Metropolia University of Applied Sciences, Helsinki, Finlândia.

Kholmatova, A. 2017. Design Systems. Smashing Media AG, Freiburg, Baden-Württemberg, Alemanha.

Nguyen, N. 2023. Developing an inclusive design system for an industrial machinery organisation. Dissertação de Mestrado. Faculty of Information Technology and Communication Sciences, Tampere University, Tampere, Finlândia.

Nielsen, J. 1994. Engenharia de Usabilidade. Academic Press, Cambridge, MA, USA.

Pereira, M. V. S. 2024. Design systems: um estudo exploratório sobre a documentação de componentes para interfaces de usuário. Trabalho de conclusão de curso, Universidade Federal do Ceará (UFC), Fortaleza, CE, Brasil.

Pickering, H. 2016. Inclusive Design Patterns. Smashing Magazine GmbH, Freiburg, BW, Alemanha.

Secretaria de Governo Digital do Ministério da Gestão e da Inovação em Serviços Públicos [SGD/MGI]; Ministério da Saúde; Centro de Estudos sobre Tecnologias Web (Ceweb) do NIC.br; Movimento Web para Todos. 2023. Guia de Boas Práticas para Acessibilidade Digital 2023. Secretaria de Governo Digital, Ministério da Gestão e da Inovação em Serviços Públicos, Brasília, DF, Brasil.

Vesselov, S.; Davis, T. 2019. Building Design Systems: Unify User Experiences through a Shared Design Language. 1ed. Apress, Berkeley, CA, EUA.

World Wide Web Consortium [W3C]. 2018. Web Content Accessibility Guidelines (WCAG) 2.1. Disponível em: https://www.w3.org/WAI/WCAG21/. Acesso em: 20 mar. 2025.

Yin, R. K. 2001. Estudo de caso: planejamento e métodos. 2ed. Bookman, Porto Alegre, RS, Brasil.

Resumo executivo oriundo de Trabalho de Conclusão de Curso da Especialização em Engenharia de Software do MBA USP/Esalq

Para saber mais sobre o curso, clique aqui e acesse a plataforma MBX Academy