Projeto e responsabilidades

Atuei como Desenvolvedor Front-end e UX/UI Designer na criação do Design System do AMOS, um CMS voltado para o gerenciamento de projetos. O desafio principal foi desenvolver o Design System do zero, integrando-o a um projeto já existente e garantindo consistência visual e funcional em todas as interfaces. A base do trabalho foi construída sobre a biblioteca React Semantic UI, adaptando-a para atender às necessidades específicas da aplicação.

Durante o processo, trabalhei na prototipação e validação de componentes no Figma, além de implementar os elementos diretamente no código com tecnologias como HTML5, CSS, Next.js, TypeScript e SASS. Essa abordagem combinou práticas modernas de design e desenvolvimento, resultando em uma solução robusta e escalável que melhorou a usabilidade e a eficiência do sistema.

Tecnologias

HTML5, CSS, NextJS, TypeScript, SASS e Figma

Desafios e Soluções

O maior desafio no projeto AMOS foi criar um Design System após o projeto já estar desenvolvido e implementado. Isso significou lidar com um código preexistente, composto por várias camadas e telas, e adaptar a nova interface de forma consistente. Como o projeto era baseado na biblioteca React Semantic UI, precisei trabalhar com componentes que já possuíam estilização própria, ajustando e expandindo suas funcionalidades para atender às necessidades do sistema.

Além disso, a criação do Design System exigiu atenção especial às variações de UI que os desenvolvedores já haviam implementado no código. Para resolver esses desafios, foquei na análise detalhada das telas existentes, garantindo que as novas telas e componentes criados fossem compatíveis com o design atual e funcionalmente coesos. Esse processo envolveu uma combinação de design estratégico no Figma e desenvolvimento técnico em Next.js, TypeScript e SASS, resultando em uma solução integrada e escalável para o CMS.

Conhecimentos Adquiridos

Trabalhar no projeto AMOS foi uma experiência enriquecedora que ampliou minha habilidade de criar e integrar Design Systems em projetos existentes. Aprendi a lidar com a complexidade de sistemas já implementados, ajustando componentes e telas de forma harmoniosa para garantir consistência visual e funcional. Essa experiência também me ajudou a aprimorar minha capacidade de analisar e adaptar bibliotecas como o React Semantic UI, personalizando suas funcionalidades para atender a requisitos específicos.

Além disso, o projeto reforçou minha expertise em prototipação no Figma, desenvolvimento front-end com Next.js, TypeScript e SASS, e na criação de soluções escaláveis em projetos complexos. Com isso, melhorei minha habilidade de colaborar com equipes multidisciplinares, integrando design e desenvolvimento de forma eficaz para entregar resultados que atendem às expectativas do cliente e às demandas técnicas do projeto.

Link do projeto

https://amos.toyota.com.br/ (Restrito)

Imagens

Figma

Rolar para cima