Design System: conhecendo a proporção do processo.

Uma vez que o novo projeto está alinhado, é hora de comunicar a ideia aos colaboradores. A maneira padrão em todo o setor de fazer isso é criar um resumo do projeto. Um resumo do projeto é basicamente um esboço do seu projeto e do trabalho que você deseja que seus colaboradores concluam. Parece bastante simples, mas existem 101 maneiras de escrever um. Imagina ter um catálogo para facilitar a apresentação do coração da sua aplicação ou ter algo para mostrar os padrões aplicados aos seus colaboradores com facilidade e uma curva de aprendizado alta.

Ai fica a dúvida no ar…

Como fazer isso?

Como posso deixar isso padronizado?

Como deixar claro para os novos integrantes da equipe?

Já imaginou que os produtos de muitas empresas são produzidos e atualizados um uma velocidade considerável, levando em consideração as dimensões dos seus projetos? Isso vem por ter uma padronização na sua construção de software que é conhecido com Design System (DS) para otimizar, padronizar e facilitar a construção de um projeto.

O que é Design System(DS)?

Não é nenhum segredo que os projetos adoram ter um bom “kit de interface” para o usuário. No entanto, além de apenas reunir “kits” de ferramentas e guias de estilo, parece que recentemente houve um foco crescente no DS destinado a unir produtos inteiros. Ultimamente, grandes empresas estão construindo equipes internas focadas especificamente no DS. As pessoas estão começando a perceber a importância do design sistêmico. Isso é encorajador. Quem sabe um dia teremos uma ferramenta de design que não assume que estamos começando do zero toda vez que abrimos um novo documento…?

Um DS (no que se refere a produtos de tecnologia) é mais do que uma estrutura, kit de ferramentas de interface do usuário ou biblioteca de componentes. É mais do que um guia de estilo ou um conjunto de diretrizes de código. É ainda mais do que a soma dessas partes. Um DS é um conjunto de regras em evolução que governa a composição de um produto.

Há muitas facetas em qualquer bom DS tende a começar com a cultura/missão da empresa e descendo até branding, copywriting, bibliotecas de componentes e outras linguagens de design. Os pontos de nível mais alto são indiscutivelmente os aspectos mais importantes de qualquer DS.

Depois de definir esses fatores críticos, você pode converter esse conhecimento em uma linguagem de projeto coeso.

Mas, afinal, o que é DS? Design System é uma coleção de componentes reutilizáveis, padronizados para determinado produto, site ou sistema web. Diferente de um style guide (guia de estilos), um DS vai além: unificando a linguagem de um determinado produto.

Qual o impacto da implementação de um DS em seu projeto?

Construir produtos que as pessoas amam faz parte dos fundamentos do bom projeto para criar ótimas experiências para o nosso cliente, todos precisam contribuir para criar produtos de alta qualidade que inspirem os clientes, mas para conseguir tudo isso precisamos ter um bases sólidas dentro das equipes em toda a empresa, tudo é uma pequena peça do quebra-cabeça.

Desde tipografia, layouts e grades, cores, ícones, componentes e convenções de codificação, até tom de voz, guia de estilo, documentação, um projeto está reunindo tudo isso de uma maneira que permite que toda a sua equipe aprenda, construa e cresça…

Futuro

Os sistemas de design nos darão a flexibilidade necessária para trabalhar com os dispositivos desconhecidos do futuro. Pode ser uma mudança no processo, mas não deve ser muita diferença no pensamento. Precisamos continuar experimentando e comunicando, pois boas experiências do usuário são o verdadeiro sinal de que os produtos são um sucesso. Não basta focar apenas no visual, precisamos alinhar primeiro os fundamentos, como documentação, ferramentas que usamos no dia a dia, no processo de construção, tudo isso é muito importante para construir uma base forte, bem como organizar seus arquivos, como nomeá-los, quais ferramentas todos estão usando, faça um inventário de todos esses pontos e comece a limpá-los e alinhar tudo.

Antes de iniciar qualquer trabalho em direção ao seu DS, converse com todos os principais interessados ​​que possam precisar fazer referência ou atualizar o sistema. Certifique-se de entender o que funciona bem hoje, quais desafios podem ser resolvidos por meio do sistema e como cada parte interessada gosta de trabalhar. Fazer com que todos participem no início e colaborar com eles durante todo o processo é essencial para o sucesso da linguagem que você está projetando.

Lembre-se: Construir um DS é um longo processo cheio de tentativa e erro, testar, aprender, falhar…

Defina as bases antes de passar para implantação para ter um ponta pé inicial, sabemos que pode mudar no decorrer da construção.

Pontos para ter atenção:

Ferramentas que estamos usando atualmente,

Nomenclaturas que estão sendo usadas no projeto nomes para os símbolos em esboços, estilos, espaçamentos, etc.

Documentação regras e informações deixadas com facilidades no DS do projeto,

Guia de estilo: Manter o padrão para o mapeamento DS <-> projeto.

Você precisa configurar sua estação de trabalho antes de mergulhar no projeto, digamos que você seja um barman, antes do serviço você precisa configurar as garrafas, máquina de café, ingredientes prontos para os coquetéis etc. e bem configurado, aqui funciona da mesma forma.

Documentação

Documentar literalmente o DS é um desafio enorme, mas obter uma documentação de um software serve para auxiliar programadores, facilitando o uso e entendimento do software, principalmente quando esse software precisa de evoluções. Na construção do DS deve incluir explicações ou exemplos de funcionalidade, tanto nos protótipos quanto na implantação. Existem muitas maneiras de fornecer elementos com especificações que servem como documentação. Dê a eles uma ideia geral de como deve ser, juntamente com a funcionalidade no mesmo lugar. Comecei a documentar tudo até agora, desde o nome das pastas, nome do arquivo, processo de design, quais ferramentas usar durante o design e colaborativo.

Considerações Finais

“Um DS não deve ser simplesmente uma coleção de componentes de interface do usuário junto com alguma teoria de design”

Com essas lições em mente, pensa-se que nas próximas gerações na construção de DS enfatize o aprendizado e o compartilhamento. Um DS não deve ser simplesmente uma coleção de componentes de interface do usuário junto com alguma teoria de design. Deve demonstrar como os padrões de design foram aplicados em produtos reais e documentar como outras equipes estenderam os padrões para casos de uso específicos. O objetivo com este DS é permitir que as equipes de produto concentrem seus esforços na solução das novas necessidades dos clientes e compartilhem essas soluções com o restante da empresa e projetos.

Agradeço sua atenção até aqui, sucesso na sua jornada. ❤

Referências:

CROSSMAN, Jeff. GE’s Predix Design System. 2016. Disponível em: https://medium.com/ge-design/ges-predix-design-system-8236d47b0891. Acesso em: 20 abr. 2022.

LOPES, Marco. Setup a design system. 2017. Disponível em: https://blog.prototypr.io/design-system-ac88c6740f53. Acesso em: 20 abr. 2022.

TUITE, Colm. How to construct a design system. 2017. Disponível em: https://medium.com/free-code-camp/how-to-construct-a-design-system-864adbf2a117. Acesso em: 20 abr. 2022.

TWINE. What makes a good project brief? 2016. Disponível em: https://medium.com/@jointwine/what-makes-a-good-project-brief-4e3da276f1a5. Acesso em: 20 abr. 202.