SIGa

 *Protótipos do Dashboard SIGA.* # Contextualização O **Dashboard SIGA (Sistemas de Informação Gerencial Agrário)** é um projeto de **UI Design** voltado à **gestão de estoques e insumos no contexto do agronegócio**, com base em sistemas ERP. O projeto foi desenvolvido na disciplina Introdução a Sistemas de Informação do ICMC/USP, e teve como referência também os aprendizados do curso “Prototipação no Figma” da EBAC – Escola Britânica de Artes Criativas e Tecnologia. # Problema identificado > Como exibir uma **grande quantidade de informações** relacionadas a insumos, estoques, vendas e compras de forma **organizada, padronizada e acessível** para o usuário final? ### As informações envolviam campos como: - Nome, classificação e código do insumo - Fabricante, validade e condições de armazenamento - Dados de compra, venda, devoluções, ajustes e transferências - Histórico completo de movimentações - Geração de relatórios e funcionalidades específicas para a administração # Metodologia utilizada O projeto seguiu um fluxo inspirado em processos de **Design Thinking**, priorizando etapas visuais e iterativas com foco em organização da informação  *Fluxo do Design Thinking, que foi adaptado para a necessidade do projeto.* # Entender e explorar ## Arquitetura da informação Após uma coleta de requisitos com a equipe, a estrutura principal foi baseada em: - **Abas principais** (Dashboard, Insumos, Compras, Vendas, Estoques) - **Tabelas padronizadas** para cada aba, com filtros e ações - **Tela detalhada de cada insumo**, com histórico cruzado por seção (compras, vendas, etc.) > A separação por abas facilitou a legibilidade e possibilitou a criação de um dashboard inicial com visão geral e insights por IA. ## Pesquisa secundária Realizei uma pesquisa visual em plataformas como o **Dribbble** e o **YouTube**, buscando referências em dashboards modernos com foco em clareza, padronização e aplicação no contexto de estoque/logística. ## Wireframes Com base na arquitetura definida e nas inspirações, desenvolvi **wireframes em papel** para estruturar a interface e validar com a equipe interna, de forma rápida e de baixo custo.  *Wireframe inicial feito à mão, explorando as melhores formas de dispor as informações.* # Desenvolvendo a ideia ## Guia de estilos (Style Guide) Antes de montar os mockups finais, estruturei um Style Guide simples, para **facilitar e padronizar** todo o desenvolvimento do protótipo de alta fidelidade.  *Exemplo da paleta de cores utilizada.*  *Exemplo da tipografia utilizada.* ## Componentes e Atomic Design Com base no wireframe e no style guide, criei uma **biblioteca de componentes reutilizáveis**, com base nos princípios do **Atomic Design**.  *Componentes utilizados durante o projeto, baseados no Atomic Design.* > O uso do Atomic Design trouxe um **desenvolvimento do protótipo mais claro e de fácil reutilização**! ## Protótipo de alta fidelidade  *Tela de compras de insumos do Dashboard SIGA.*  *Tela de compras de insumos, inspecionando uma compra.*  *Tela de insumos do Dashboard SIGA, quando inspeciona um insumo.*