Use este identificador para citar ou linkar para este item:
http://repositorio.utfpr.edu.br/jspui/handle/1/40097| Título: | ElevaSystem: desenvolvimento e consolidação de um design system para a empresa Media4All |
| Título(s) alternativo(s): | ElevaSystem: development and consolidation of a design system for Media4All |
| Autor(es): | Evangelista, Caio Felipe da Silva |
| Orientador(es): | Santana, Gisele Alves |
| Palavras-chave: | Projeto de produto Designers Interfaces gráficas de usuário (sistemas de computador) Product design Designers Graphical user interfaces (Computer systems) |
| Data do documento: | 28-Nov-2025 |
| Editor: | Universidade Tecnológica Federal do Paraná |
| Câmpus: | Cornelio Procopio |
| Citação: | EVANGELISTA, Caio Felipe da Silva. ElevaSystem: desenvolvimento e consolidação de um design system para a empresa Media4All. 2025. Trabalho de Conclusão de Curso (Bacharelado em Engenharia da Computação) - Universidade Tecnológica Federal do Paraná, Cornélio Procópio, 2025. |
| Resumo: | Este trabalho apresenta o desenvolvimento de um sistema de design (design system), que surgiu diante da necessidade de padronizar as interfaces gráficas utilizadas nos sistemas da empresa Media4all, uma vez que a ausência de diretrizes visuais unificadas resultava em inconsistências estéticas, retrabalho e impacto negativo na experiência do usuário. Nesse contexto, foi desenvolvido um Design System, nomeado de ElevaSystem, para promover eficiência, coerência e integração entre design e tecnologia. O objetivo geral deste trabalho é apresentar e analisar o processo de desenvolvimento do Design System, desde a concepção até a implementação dos componentes visuais, destacando as decisões de arquitetura, metodologia e integração com o fluxo de trabalho das equipes. A metodologia adotada baseou-se no modelo do Duplo Diamante, dividido em quatro etapas: Descobrir, Definir, Desenvolver e Entregar, que orientaram o levantamento de informações, a identificação de inconsistências, a construção dos componentes e a entrega da documentação final. O resultado foi a criação da primeira versão funcional do ElevaSystem, composta pelos Design Tokens de cores, tipografia e iconografia, e pelos principais componentes atômicos, como: botões, campos de entrada e menu lateral. As decisões visuais foram embasadas no manual de marca da Media4All e em referências obtidas na plataforma Mobbin, assegurando uma linguagem moderna e coerente. A implementação do ElevaSystem trouxe ganhos expressivos de produtividade, consistência e qualidade visual, fortalecendo a identidade institucional e otimizando o trabalho colaborativo entre designers e desenvolvedores. Como proposta futura, sugere-se a ampliação do ElevaSystem com novos componentes e diretrizes de acessibilidade, além da criação de um portal interativo de documentação, que permita atualizações em tempo real e suporte à melhoria contínua da experiência do usuário e dos processos internos da empresa. |
| Abstract: | This work presents the development of a design system created to address the need for standardizing the graphical interfaces used in Media4all's systems, as the absence of unified visual guidelines had resulted in aesthetic inconsistencies, rework, and a negative impact on user experience. In this context, a Design System named ElevaSystem was developed to promote efficiency, coherence, and integration between design and technology. The main objective of this work is to present and analyze the development process of the Design System, from its conception to the implementation of visual components, highlighting the architectural decisions, methodology, and integration with the teams' workflow. The adopted methodology was based on the Double Diamond model, divided into four stages: Discover, Define, Develop, and Deliver, which guided the information gathering, identification of inconsistencies, construction of components, and delivery of the final documentation. The outcome was the creation of the first functional version of ElevaSystem, composed of color, typography, and iconography design tokens, as well as key atomic components such as buttons, input fields, and the sidebar menu. The visual decisions were supported by the Media4all brand guidelines and references obtained from the Mobbin platform, ensuring a modern and coherent design language. The implementation of ElevaSystem brought significant gains in productivity, consistency, and visual quality, strengthening the company's institutional identity and optimizing collaborative work between designers and developers. As a future proposal, the expansion of ElevaSystem is suggested, including new components and accessibility guidelines, in addition to the creation of an interactive documentation portal that enables real-time updates and supports continuous improvement of user experience and internal company processes. |
| URI: | http://repositorio.utfpr.edu.br/jspui/handle/1/40097 |
| Aparece nas coleções: | CP - Engenharia da Computação |
Arquivos associados a este item:
| Arquivo | Descrição | Tamanho | Formato | |
|---|---|---|---|---|
| elevasystem.pdf | 3,6 MB | Adobe PDF |  Visualizar/Abrir |
Este item está licenciada sob uma Licença Creative Commons
