Este projeto tem como objetivo ilustrar como funciona um design system para User Interface, utilizando a ferramenta Adobe XD para definir o guia de estilo e a criação de componentes de interface.
O projeto não leva em consideração todo o trabalho de User Experience que deve acompanhar a criação da interface, o objetivo aqui é exemplificar como funciona um design system organizado para designers e desenvolvedores trabalharem juntos de maneira coesa.
O produto final é o protótipo de um aplicativo de e-commerce fictício construído utilizando o guia de estilo e componentes do design system.
O protótipo navega pelo cadastro, página inicial, página de produto e carrinho do aplicativo fictício de e-commerce.
Abaixo temos a visão geral do documento de design system.
O documento de exemplo aborda duas instancias do design system, uma sendo o guia de estilo, que é como um manual de regras a serem seguidas para um design coeso de interface independente de onde e por quem é aplicado. A segunda instancia é onde estão pré-produzidos os componentes (assets) a serem utilizados.
Selecione uma página para visualizar em mais detalhes a documentação.
O design system é um organismo vivo, abastecido por designers e desenvolvedores, que produzem colaborativamente e bebem da mesma fonte.
Um design system completo não se limita apenas à interface, mas deve pensar também em experiência de usuário, comportamento, personalidade, documentação, acessibilidade, linguagem e identidade.
Este projeto será continuamente atualizado, é um projeto pessoal utilizado para colocar em prática novos conhecimentos e testar novas idéias.
UI Design System
Published:

UI Design System

Published:

Tools

Creative Fields