Skip to content

Design e Componentes

Douglas Souza edited this page Nov 4, 2026 · 5 revisions

🎨 UX/UI e consistência visual

O design faz parte do processo de construção do sistema de estoque do SESI Lab. A proposta é criar interfaces claras, acessíveis e consistentes, oferecendo aos participantes experiência prática em pesquisa de fluxos, prototipação e colaboração com desenvolvedores.

Ferramentas

O Penpot é a ferramenta adotada para prototipação colaborativa. Consulte a equipe de design para obter acesso ao espaço compartilhado. A referência de trabalho é o guia de design do repositório.

Fluxo de prototipação

No arquivo compartilhado do Penpot, mantenha as telas do sistema em uma única página, para construir os fluxos em conjunto. A página de componentes permanece separada e reúne os elementos reutilizáveis.

  1. Compreender os perfis de usuário e suas necessidades.
  2. Desenhar jornadas e wireframes dos fluxos prioritários.
  3. Prototipar login, navegação, dashboard, itens e movimentações.
  4. Compartilhar links e apresentar as decisões visuais à equipe.
  5. Incorporar feedback das revisões e validações.

Padrões visuais e componentes

Ao longo do desenvolvimento, vale buscar consistência em tipografia, cores, espaçamentos, estados de interação, acessibilidade e componentes reutilizáveis.

Design System e Storybook são referências que a equipe poderá explorar para organizar e documentar componentes, conforme a evolução do projeto. Não são pré-requisitos para começar a contribuir.

Entrega e colaboração

Registre o link do protótipo na issue correspondente e indique quais telas ou fluxos estão contemplados. As revisões são momentos de troca de conhecimento e mentoria.

Compartilhe o link do protótipo navegável, confirme que os revisores têm acesso e registre pendências e decisões na Issue. A equipe discutiu identificar versões no histórico do Penpot pelo número da Issue; confirme com a frente de design como fazer isso. Não presuma que um link compartilhado represente uma versão histórica imutável.

Ao registrar sua contribuição na Issue, use STAR: descreva a situação, a tarefa, as ações realizadas e o resultado, incluindo o link do protótipo e as pendências de validação.

← Início da Wiki