Escalando produtos com um design system.
Cliente
E-PET
Papel
Product Designer
Linha do tempo
2024
Responsabilidades
Pesquisa
Design tokens
Components
Arquitetura
Bibliotecas
Ferramentas
Figma
Zeroheight
Objetivos de alto nível
Garantir consistência e eficiência em produtos digitais
Criar uma biblioteca global e alinhada à marca para facilitar o uso por todos os consumidores.
Inicio
O Caramelo DS estava em seus estágios iniciais de criação, definindo suas diretrizes e princípios.
Eficiência e Acessibilidade
Além de oferecer uma experiência visualmente atraente, é essencial ter um Design System acessível e de fácil utilização.
Consistência Visual
Desenvolver uma identidade visual para o Design System, com ênfase na escalabilidade para um modo claro.
Documentação
Produzir uma documentação completa com o intuito de garantir que equipes futuras possam utilizar a biblioteca de maneira consistente e sem erros.
Resultados
218 Tokens
Tokens primitivos para assegurar a escalabilidade e a consistência.
170 Componentes
Componentes para enriquecer nossa biblioteca de design system.
79 Styles
Estilos de cores criados para manter a consistência e a evolução dos produtos.
Testes, protótipos e muita exploração.
Trabalhei com referências, pesquisa e esboços, realizando testes de cores para garantir funcionalidade e acessibilidade. Além disso, analisei os componentes para assegurar harmonia dentro da biblioteca, tudo isso para aplicar qualidade e consistência no design.
Design Tokens em todo projeto.
A fundação central do design system reside nos tokens, que atuam como blocos fundamentais de construção. Esses tokens começam com os primitivos, que são os valores fundamentais.
Os tokens primitivos são usados para alimentar os tokens semânticos. Assim, os tokens semânticos são responsáveis por fornecer significado e consistência aos componentes do Design System.
Observe ao lado como os tokens funcionam, formando a estrutura fundamental do sistema e facilitando a criação e manutenção dos componentes ao longo do tempo.
Biblioteca de componentes.
Cada componente criado no Figma foi desenvolvido com atenção meticulosa à escalabilidade e fidelidade, incluindo considerações detalhadas para estados, variações e tipos individuais.
A biblioteca foi projetada de maneira simples e prática, refletindo a ideia central de ser facilmente acessível e utilizável por qualquer pessoa.
Padrões globais de acessibilidade
Nosso compromisso com a acessibilidade é guiado pela Iniciativa de Acessibilidade da Web (WAI) do World Wide Web Consortium (W3C) e pelas Diretrizes de Acessibilidade de Conteúdo da Web (WCAG), contribuindo para uma web mais inclusiva.
O Caramelo DS vai além de um conjunto de diretrizes; ele representa um compromisso com a criação de experiências digitais acessíveis e acolhedoras para todos. Ao utilizar o Caramelo em seus projetos, você não apenas desenvolve interfaces, mas também expande a usabilidade e a acessibilidade para um público diversificado, eliminando barreiras digitais.
Construção de componentes flex
Ao utilizar "slots components" em todos os elementos que podem e devem ser substituídos, como botões e cards, garantimos que não haja a necessidade de recorrer ao tradicional "detach" dos componentes.
Essa estratégia mantém a consistência em todas as instâncias, proporcionando flexibilidade no processo de substituição sem comprometer a integridade dos elementos.
Design em escala
O Design System foi concebido para se integrar e se adaptar a diversos temas e modos. Inicialmente, foi desenvolvido com configurações padrão para dispositivos móveis, mas pode ser facilmente personalizado para outras plataformas, como desktops.
Em relação ao tema, o projeto foi estruturado para suportar futuras expansões, incluindo a introdução de novas marcas.
Essa flexibilidade é especialmente valiosa para o Caramelo DS, pois antecipa possíveis cenários de crescimento. Isso assegura uma capacidade eficiente de adaptação e prepara o sistema para evoluções na identidade da marca.
Componentes prontos para uso.
Todos os componentes foram prototipados com animações integradas em seus estados.
Com essa configuração inicial, a criação de protótipos de alta fidelidade torna-se mais fácil e ágil, já que a base está pronta, o que contribui para a rapidez e a eficiência no desenvolvimento.
Documentação completa para desenvolvedores e designers
É essencial reconhecer que a documentação desempenha um papel vital para estabelecer uma organização eficiente. Sem ela, todo o esforço investido na criação do Design System pode ser comprometido.
Dessa forma, todos os componentes e tokens foram registrados no Figma e também no Confluence, incluindo suas variações, tipos, estados e demais especificações.
Essa abordagem não apenas mantém a integridade do Design System, mas também fornece uma referência abrangente para a equipe, garantindo consistência e compreensão completa de cada elemento.
Figma
Storybook
Conclusão
Construir um Design System, o "produto" do produto, é um desafio significativo que exige muita colaboração entre design e desenvolvimento, além da cooperação entre as pessoas envolvidas.
Sem dúvida, este foi o projeto em que mais me dediquei a aprender e compreender a área de desenvolvimento. Isso é extremamente importante para que eu possa continuar trabalhando em um alto nível.
Como próximos passos, continuarei empenhado em assegurar a correta implementação dos componentes. Além disso, seguirei trabalhando em conjunto com a equipe de desenvolvimento para aprimorarmos ainda mais a documentação do projeto.
Vamos bater um papo!
Maicon Maciel, 2024.
todos os direitos reservados.
Escalando produtos com um design system.
Cliente
E-PET
Papel
Product Designer
Linha do tempo
2024
Responsabilidades
Pesquisa
Design tokens
Components
Arquitetura
Bibliotecas
Ferramentas
Figma
Storybook
Objetivos de alto nível
Garantir consistência e eficiência em produtos digitais
Criar uma biblioteca global e alinhada à marca para facilitar o uso por todos os consumidores.
Inicio
O Caramelo DS estava em seus estágios iniciais de criação, definindo suas diretrizes e princípios.
Eficiência e Acessibilidade
Além de oferecer uma experiência visualmente atraente, é essencial ter um Design System acessível e de fácil utilização.
Consistência Visual
Desenvolver uma identidade visual para o Design System, com ênfase na escalabilidade para um modo claro.
Documentação
Produzir uma documentação completa com o intuito de garantir que equipes futuras possam utilizar a biblioteca de maneira consistente e sem erros.
Resultados
218 Tokens
Tokens primitivos para assegurar a escalabilidade e a consistência.
170 Componentes
Componentes para enriquecer nossa biblioteca de design system.
79 Styles
Estilos de cores criados para manter a consistência e a evolução dos produtos.
Testes, protótipos e muita exploração.
Trabalhei com referências, pesquisa e esboços, realizando testes de cores para garantir funcionalidade e acessibilidade. Além disso, analisei os componentes para assegurar harmonia dentro da biblioteca, tudo isso para aplicar qualidade e consistência no design.
Aa
Design Tokens em todo projeto.
A fundação central do design system reside nos tokens, que atuam como blocos fundamentais de construção. Esses tokens começam com os primitivos, que são os valores fundamentais.
Os tokens primitivos são usados para alimentar os tokens semânticos. Assim, os tokens semânticos são responsáveis por fornecer significado e consistência aos componentes do Design System.
Observe ao lado como os tokens funcionam, formando a estrutura fundamental do sistema e facilitando a criação e manutenção dos componentes ao longo do tempo.
Biblioteca de componentes.
Cada componente criado no Figma foi desenvolvido com atenção meticulosa à escalabilidade e fidelidade, incluindo considerações detalhadas para estados, variações e tipos individuais.
A biblioteca foi projetada de maneira simples e prática, refletindo a ideia central de ser facilmente acessível e utilizável por qualquer pessoa.
Padrões globais de acessibilidade
Nosso compromisso com a acessibilidade é guiado pela Iniciativa de Acessibilidade da Web (WAI) do World Wide Web Consortium (W3C) e pelas Diretrizes de Acessibilidade de Conteúdo da Web (WCAG), contribuindo para uma web mais inclusiva.
O Caramelo DS vai além de um conjunto de diretrizes; ele representa um compromisso com a criação de experiências digitais acessíveis e acolhedoras para todos. Ao utilizar o Caramelo em seus projetos, você não apenas desenvolve interfaces, mas também expande a usabilidade e a acessibilidade para um público diversificado, eliminando barreiras digitais.
Construção de componentes flex
Ao utilizar "slots components" em todos os elementos que podem e devem ser substituídos, como botões e cards, garantimos que não haja a necessidade de recorrer ao tradicional "detach" dos componentes.
Essa estratégia mantém a consistência em todas as instâncias, proporcionando flexibilidade no processo de substituição sem comprometer a integridade dos elementos.
Design em escala
O Design System foi concebido para se integrar e se adaptar a diversos temas e modos. Inicialmente, foi desenvolvido com configurações padrão para dispositivos móveis, mas pode ser facilmente personalizado para outras plataformas, como desktops.
Em relação ao tema, o projeto foi estruturado para suportar futuras expansões, incluindo a introdução de novas marcas.
Essa flexibilidade é especialmente valiosa para o Caramelo DS, pois antecipa possíveis cenários de crescimento. Isso assegura uma capacidade eficiente de adaptação e prepara o sistema para evoluções na identidade da marca.
Componentes prontos para uso.
Todos os componentes foram prototipados com animações integradas em seus estados.
Com essa configuração inicial, a criação de protótipos de alta fidelidade torna-se mais fácil e ágil, já que a base está pronta, o que contribui para a rapidez e a eficiência no desenvolvimento.
Documentação completa para desenvolvedores e designers
É essencial reconhecer que a documentação desempenha um papel vital para estabelecer uma organização eficiente. Sem ela, todo o esforço investido na criação do Design System pode ser comprometido.
Dessa forma, todos os componentes e tokens foram registrados no Figma e também no Confluence, incluindo suas variações, tipos, estados e demais especificações.
Essa abordagem não apenas mantém a integridade do Design System, mas também fornece uma referência abrangente para a equipe, garantindo consistência e compreensão completa de cada elemento.
Figma
Storybook
Conclusão
Construir um Design System, o "produto" do produto, é um desafio significativo que exige muita colaboração entre design e desenvolvimento, além da cooperação entre as pessoas envolvidas.
Sem dúvida, este foi o projeto em que mais me dediquei a aprender e compreender a área de desenvolvimento. Isso é extremamente importante para que eu possa continuar trabalhando em um alto nível.
Como próximos passos, continuarei empenhado em assegurar a correta implementação dos componentes. Além disso, seguirei trabalhando em conjunto com a equipe de desenvolvimento para aprimorarmos ainda mais a documentação do projeto.
Vamos bater um papo!
Maicon Maciel, 2024.
todos os direitos reservados.
Papel
Product Designer
Linha do tempo
2024
Responsabilidades
Pesquisa
Design tokens
Components
Arquitetura
Bibliotecas
Ferramentas
Figma
Storybook
Escalando produtos com um design system.
Cliente
E-PET
Objetivos de alto nível
Garantir consistência e eficiência em produtos digitais
Criar uma biblioteca global e alinhada à marca para facilitar o uso por todos os consumidores.
Inicio
O Caramelo DS estava em seus estágios iniciais de criação, definindo suas diretrizes e princípios.
Eficiência e Acessibilidade
Além de oferecer uma experiência visualmente atraente, é essencial ter um Design System acessível e de fácil utilização.
Consistência Visual
Desenvolver uma identidade visual para o Design System, com ênfase na escalabilidade para um modo claro.
Documentação
Produzir uma documentação completa com o intuito de garantir que equipes futuras possam utilizar a biblioteca de maneira consistente e sem erros.
Resultados
218 Tokens
Tokens primitivos para assegurar a escalabilidade e a consistência.
170 Componentes
Componentes para enriquecer nossa biblioteca de design system.
79 Styles
Estilos de cores criados para manter a consistência e a evolução dos produtos.
Testes, protótipos e muita exploração.
Trabalhei com referências, pesquisa e esboços, realizando testes de cores para garantir funcionalidade e acessibilidade. Além disso, analisei os componentes para assegurar harmonia dentro da biblioteca, tudo isso para aplicar qualidade e consistência no design.
Aa
Design Tokens em todo projeto.
A fundação central do design system reside nos tokens, que atuam como blocos fundamentais de construção. Esses tokens começam com os primitivos, que são os valores fundamentais.
Os tokens primitivos são usados para alimentar os tokens semânticos. Assim, os tokens semânticos são responsáveis por fornecer significado e consistência aos componentes do Design System.
Observe ao lado como os tokens funcionam, formando a estrutura fundamental do sistema e facilitando a criação e manutenção dos componentes ao longo do tempo.
#FADE3E
$yellow-600
$color-brand-primary
A
$font-size-48
A
$font-size-xlg
$border-radius-8
$border-radius-md
$border-width-2
$border-width-thin
Biblioteca de componentes.
Cada componente criado no Figma foi desenvolvido com atenção meticulosa à escalabilidade e fidelidade, incluindo considerações detalhadas para estados, variações e tipos individuais.
A biblioteca foi projetada de maneira simples e prática, refletindo a ideia central de ser facilmente acessível e utilizável por qualquer pessoa.
Padrões globais de acessibilidade
Nosso compromisso com a acessibilidade é guiado pela Iniciativa de Acessibilidade da Web (WAI) do World Wide Web Consortium (W3C) e pelas Diretrizes de Acessibilidade de Conteúdo da Web (WCAG), contribuindo para uma web mais inclusiva.
O Caramelo DS vai além de um conjunto de diretrizes; ele representa um compromisso com a criação de experiências digitais acessíveis e acolhedoras para todos. Ao utilizar o Caramelo em seus projetos, você não apenas desenvolve interfaces, mas também expande a usabilidade e a acessibilidade para um público diversificado, eliminando barreiras digitais.
Construção de componentes flex
Ao utilizar "slots components" em todos os elementos que podem e devem ser substituídos, como botões e cards, garantimos que não haja a necessidade de recorrer ao tradicional "detach" dos componentes.
Essa estratégia mantém a consistência em todas as instâncias, proporcionando flexibilidade no processo de substituição sem comprometer a integridade dos elementos.
Headline
Slot component
Slot component
Confirmar
Cancelar
Design em escala
O Design System foi concebido para se integrar e se adaptar a diversos temas e modos. Inicialmente, foi desenvolvido com configurações padrão para dispositivos móveis, mas pode ser facilmente personalizado para outras plataformas, como desktops.
Em relação ao tema, o projeto foi estruturado para suportar futuras expansões, incluindo a introdução de novas marcas.
Essa flexibilidade é especialmente valiosa para o Caramelo DS, pois antecipa possíveis cenários de crescimento. Isso assegura uma capacidade eficiente de adaptação e prepara o sistema para evoluções na identidade da marca.
Componentes prontos para uso.
Todos os componentes foram prototipados com animações integradas em seus estados.
Com essa configuração inicial, a criação de protótipos de alta fidelidade torna-se mais fácil e ágil, já que a base está pronta, o que contribui para a rapidez e a eficiência no desenvolvimento.
Dropdown
Dropdown
Item 01
Item 02
Item 04
Item 05
Documentação completa para desenvolvedores e designers
É essencial reconhecer que a documentação desempenha um papel vital para estabelecer uma organização eficiente. Sem ela, todo o esforço investido na criação do Design System pode ser comprometido.
Dessa forma, todos os componentes e tokens foram registrados no Figma e também no Confluence, incluindo suas variações, tipos, estados e demais especificações.
Essa abordagem não apenas mantém a integridade do Design System, mas também fornece uma referência abrangente para a equipe, garantindo consistência e compreensão completa de cada elemento.
Figma
Storybook
Design language
Design kit
Component Library
Developer
Conclusão
Construir um Design System, o "produto" do produto, é um desafio significativo que exige muita colaboração entre design e desenvolvimento, além da cooperação entre as pessoas envolvidas.
Sem dúvida, este foi o projeto em que mais me dediquei a aprender e compreender a área de desenvolvimento. Isso é extremamente importante para que eu possa continuar trabalhando em um alto nível.
Como próximos passos, continuarei empenhado em assegurar a correta implementação dos componentes. Além disso, seguirei trabalhando em conjunto com a equipe de desenvolvimento para aprimorarmos ainda mais a documentação do projeto.
Vamos bater um papo!
todos os direitos reservados.
Maicon Maciel, 2024.