Design System: Jornada Júnior
Design System: Jornada Júnior
Um sistema escalável para aumentar a consistência, agilizar a prototipação e otimizar o processo de design.
Um sistema escalável para aumentar a consistência, agilizar a prototipação e otimizar o processo de design.
Quem é a Jornada Júnior?
Quem é a Jornada Júnior?
A Jornada Júnior é uma comunidade de aceleração de carreira em tecnologia que conecta voluntários juniores a oportunidades de aprendizado e experiência prática. Ao mesmo tempo, ajuda ONGs a terem acesso a soluções e produtos digitais.
A Jornada Júnior é uma comunidade de aceleração de carreira em tecnologia que conecta voluntários juniores a oportunidades de aprendizado e experiência prática. Ao mesmo tempo, ajuda ONGs a terem acesso a soluções e produtos digitais.
Contexto do projeto
Contexto do projeto
Com o crescimento do produto e da equipe, diferentes pessoas passaram a criar e atualizar telas de produtos internos, como o website e o site de certificados. Sem uma base compartilhada, começaram a surgir diferenças entre componentes, cores, tipografia e espaçamentos.
A partir disso, surgiu a proposta de criar um Design System no Figma para centralizar essas definições e facilitar a criação e manutenção das interfaces.
Principais problemas
Componentes semelhantes com estilos diferentes
Falta de padronização visual entre os produtos
Variações de tipografia e espaçamento
Retrabalho na criação e atualização de telas
Dificuldade de alinhamento entre Design e Desenvolvimento
Com o crescimento do produto e da equipe, diferentes pessoas passaram a criar e atualizar telas de produtos internos, como o website e o site de certificados. Sem uma base compartilhada, começaram a surgir diferenças entre componentes, cores, tipografia e espaçamentos.
A partir disso, surgiu a proposta de criar um Design System no Figma para centralizar essas definições e facilitar a criação e manutenção das interfaces.
Principais problemas
Componentes semelhantes com estilos diferentes
Falta de padronização visual entre os produtos
Variações de tipografia e espaçamento
Retrabalho na criação e atualização de telas
Dificuldade de alinhamento entre Design e Desenvolvimento
Princípios do sistema
Princípios do sistema
Antes de construir os componentes, definimos alguns princípios para orientar as decisões do sistema:
Antes de construir os componentes, definimos alguns princípios para orientar as decisões do sistema:
Processo de Design
Processo de Design
O projeto começou com a organização do Style Guide da Jornada Júnior e evoluiu para uma estrutura de Design System.
O processo foi dividido em seis etapas:
O projeto começou com a organização do Style Guide da Jornada Júnior e evoluiu para uma estrutura de Design System.
O processo foi dividido em seis etapas:
Como construímos o Design System
Como construímos o Design System
O sistema foi estruturado no Figma usando Variables, Components, Variants e Design Tokens.
As variáveis centralizaram valores como cores e espaçamentos, permitindo alterar uma definição e refletir a mudança nos elementos relacionados.
Também foram consideradas as necessidades de Light Mode e Dark Mode, mantendo a mesma estrutura entre os temas.
O sistema foi estruturado no Figma usando Variables, Components, Variants e Design Tokens.
As variáveis centralizaram valores como cores e espaçamentos, permitindo alterar uma definição e refletir a mudança nos elementos relacionados.
Também foram consideradas as necessidades de Light Mode e Dark Mode, mantendo a mesma estrutura entre os temas.
Foundations
Foundations
As foundations formam a base visual utilizada pelos componentes e pelas interfaces.
Foram definidos:
Cores
Tipografia
Grid
Spacing
Border Radius
Logo
Essa etapa ajudou a estabelecer as regras antes da criação dos componentes.
As foundations formam a base visual utilizada pelos componentes e pelas interfaces.
Foram definidos:
Cores
Tipografia
Grid
Spacing
Border Radius
Logo
Essa etapa ajudou a estabelecer as regras antes da criação dos componentes.
Cores
Cores
A paleta foi organizada por função e estruturada em escalas Tailwind de 50 a 950.
O sistema contempla:
Background e Surface
Textos
Accent
Bordas e divisores
Status
Também foram definidas aplicações para Light Mode e Dark Mode, considerando contraste e acessibilidade.
A paleta foi organizada por função e estruturada em escalas Tailwind de 50 a 950.
O sistema contempla:
Background e Surface
Textos
Accent
Bordas e divisores
Status
Também foram definidas aplicações para Light Mode e Dark Mode, considerando contraste e acessibilidade.
Tipografia
Tipografia
A tipografia foi organizada para criar uma hierarquia clara entre títulos, textos, informações secundárias e elementos de interface.
Foram utilizadas:
Plus Jakarta Sans
Títulos, textos, botões e elementos de destaque.
DM Sans
Textos secundários, tabelas e legendas.
A escala foi adaptada para Desktop, Tablet e Mobile, mantendo a hierarquia entre os diferentes tamanhos de tela.
A tipografia foi organizada para criar uma hierarquia clara entre títulos, textos, informações secundárias e elementos de interface.
Foram utilizadas:
Plus Jakarta Sans
Títulos, textos, botões e elementos de destaque.
DM Sans
Textos secundários, tabelas e legendas.
A escala foi adaptada para Desktop, Tablet e Mobile, mantendo a hierarquia entre os diferentes tamanhos de tela.
Grid, Spacing e Radius
Grid, Spacing e Radius
Definimos uma estrutura de grid para Desktop, Tablet e Mobile, além de escalas para espaçamento e border radius.
O objetivo foi evitar medidas aleatórias e criar uma lógica que pudesse ser repetida na construção das interfaces.
Definimos uma estrutura de grid para Desktop, Tablet e Mobile, além de escalas para espaçamento e border radius.
O objetivo foi evitar medidas aleatórias e criar uma lógica que pudesse ser repetida na construção das interfaces.
Biblioteca de componentes
Biblioteca de componentes
Com as foundations definidas, partimos para a construção dos componentes.
A biblioteca foi organizada por função:
Ações: Buttons
Formulários: Inputs, Tags
Seleção: Checkbox, Radio Button, Rating
Feedback: Status
Elementos: Avatars e outros componentes de interface
Cada componente possui suas principais variações e estados, incluindo Default, Hover, Focus, Disabled e Error, nos temas claro e escuro quando aplicável.
Com as foundations definidas, partimos para a construção dos componentes.
A biblioteca foi organizada por função:
Ações: Buttons
Formulários: Inputs, Tags
Seleção: Checkbox, Radio Button, Rating
Feedback: Status
Elementos: Avatars e outros componentes de interface
Cada componente possui suas principais variações e estados, incluindo Default, Hover, Focus, Disabled e Error, nos temas claro e escuro quando aplicável.
Resultado e impacto
Resultado e impacto
A estrutura criada tornou o processo de criação de interfaces mais organizado e previsível.
Entre os principais resultados:
Base visual centralizada no Figma
Componentes reutilizáveis
Menos decisões repetitivas durante a criação
Facilitação do handoff para Desenvolvimento
Estrutura preparada para novas telas e funcionalidades
Documentação para orientar o uso dos componentes
O projeto também ampliou minha atuação em Product Design, envolvendo não apenas a criação de interfaces, mas a organização de uma estrutura que apoia o trabalho contínuo de Design e Desenvolvimento.
A estrutura criada tornou o processo de criação de interfaces mais organizado e previsível.
Entre os principais resultados:
Base visual centralizada no Figma
Componentes reutilizáveis
Menos decisões repetitivas durante a criação
Facilitação do handoff para Desenvolvimento
Estrutura preparada para novas telas e funcionalidades
Documentação para orientar o uso dos componentes
O projeto também ampliou minha atuação em Product Design, envolvendo não apenas a criação de interfaces, mas a organização de uma estrutura que apoia o trabalho contínuo de Design e Desenvolvimento.
Gostou do projeto?
Gostou do projeto?
Confira outros trabalhos do meu portfólio ou entre em contato comigo:
nataliapires.work@gmail.com
Confira outros trabalhos do meu portfólio ou entre em contato comigo:
nataliapires.work@gmail.com
