Lembra do Twitter Bootstrap? Usei a biblioteca para fazer meus aplicativos parecerem visualmente atraentes. Twitter Bootstrap é uma biblioteca de código aberto para ajudar a acelerar o desenvolvimento de aplicativos para engenheiros de front-end. É uma estrutura de front-end HTML / CSS / JS que facilitou a criação de componentes de IU consistentes. Hoje, muitas empresas de tecnologia desenvolveram sua própria versão do Bootstrap, que é chamada de sistema de design . Essas são coleções de componentes reutilizáveis ​​guiados por padrões de design claros para apoiar o desenvolvimento de aplicativos. Isso permite que as empresas diferenciem seus aplicativos móveis e da web de outros, mantendo uma aparência visual entre os produtos. A evolução do Bootstrap para um sistema de design foi natural.

Você já percebeu que dois produtos diferentes da mesma empresa podem ter duas experiências de usuário totalmente diferentes? Muitas vezes, a inconsistência de design pode vir de duas equipes de design distintas que não estão em sincronia e constroem seu próprio conjunto de UIs de forma independente.

É aí que um sistema de design pode ajudar. O objetivo de um sistema de design deve ser permitir que os desenvolvedores e designers criem experiências de produto envolventes, fornecendo uma experiência de usuário consistente em todos os produtos. Empresas de tecnologia como Salesforce, Apple e Microsoft compartilham publicamente seu sistema de design e seus princípios de design.

Acima de tudo, um sistema de design não é apenas uma biblioteca de componentes de IU, mas a documentação dos padrões e diretrizes, linguagem visual e suporte para acessibilidade, bem como informações sobre como começar a implementar o sistema. Claro, esta lista não é exaustiva, mas um sistema de design completo não pára na construção de uma biblioteca de IU.

Além disso, os sistemas de design beneficiam os desenvolvedores. Como engenheiro, você pode se concentrar na solução de problemas técnicos ou aprender novas tecnologias por meio da construção de interfaces de usuário redundantes. Se você é um desenvolvedor front-end, pode ficar frustrado quando solicitado a criar os mesmos componentes de IU várias vezes. Com um sistema de design, o componente é construído uma vez e você o implementa. Vamos dar uma olhada em como um sistema de design pode ajudar as equipes de engenharia a escalar.

Pensamento sistêmico para escala

O pensamento sistêmico é um conjunto de princípios que ajudam uma organização a escalar com mais eficiência, abordando problemas por meio de todo o sistema em que eles se encaixam. Não existem regras rígidas, cada organização deve elaborar seus princípios e vinculá-los a seus objetivos de negócios. O objetivo dos sistemas de projeto é uma forma de pensamento sistêmico que resolve os desafios do projeto em escala. O mantra, “Design não escala”, era muito comum até que os sistemas de design se tornaram comuns.

Se uma organização tem um portfólio de produtos e cada equipe está construindo seus próprios ativos, criando paletas de cores e layouts de página, isso não é um bom uso de seu tempo. Os desenvolvedores que criam as mesmas coisas repetidamente têm seu valioso tempo gasto na solução de problemas centrais de engenharia. Designers que estão ocupados criando a especificação para a mesma IU que foi construída muitos meses atrás por alguma outra equipe poderiam ser melhor atendidos conduzindo pesquisas de usuário.

Por exemplo, se as equipes A e B estão criando botões, o sistema de design deve considerar o desenvolvimento de um botão reutilizável que funcione para muitas equipes de produto em uma organização. Uma equipe de sistema de design fará uma descoberta inicial sobre os requisitos de um botão reutilizável que inclui variações, tamanhos e necessidades de plataforma (móvel e web). Assim que todos os requisitos forem reunidos, a equipe será responsável pela criação de um componente.

Essencialmente, para um sistema de design ser um sistema vivo e em evolução que representa o melhor pensamento de uma organização, ele precisa entregar um valor compartilhado. Para que um componente seja reutilizável, ele precisa ser relevante para várias equipes de produto. Envolver uma equipe de sistema de design para construir um componente que seja específico apenas para o seu produto não é pensamento sistêmico. Componentes com casos únicos não devem pertencer à biblioteca de componentes ou ao sistema de design.

Suporte de uma equipe central

O coração de qualquer sistema de design é a equipe central que projeta e desenvolve componentes de IU. Uma equipe de sistema de design altamente funcional segue um processo bem definido para projetar, construir e documentar componentes, diretrizes visuais, diretrizes de engenharia e padrões de experiência do usuário. 

Por exemplo, ao construir um recurso do sistema - por exemplo, um componente de botão - uma equipe do sistema de design deve reunir os requisitos conduzindo uma descoberta de design inicial em itens como variações, tamanhos e capacidade de composição. Após essa descoberta inicial, a equipe deve compartilhar suas descobertas com os desenvolvedores que desejam usar o componente para garantir que ele tenha todos os recursos de que precisam para adotá-lo assim que for lançado. Neste ponto, construir o componente é a parte fácil, mas deve haver uma documentação clara sobre design, código e acessibilidade para oferecer suporte a esse novo elemento. Essas são as principais responsabilidades de uma equipe de sistema de design.

Além disso, a equipe é responsável por corrigir bugs, apoiar a comunidade de design, criar material de treinamento e assim por diante. Um sistema de design deve ser tratado como uma equipe de produto cujos clientes são os designers internos e engenheiros de front-end, com foco na construção e dimensionamento do sistema.

Por fim, a equipe é responsável pela adoção. Se não houver adoção por outras equipes, construir um sistema de design por construir um é um esforço perdido. Existem muitas maneiras de avaliar o impacto de um sistema de design dentro de uma organização. Por exemplo, uma equipe de sistema de design pode varrer as bases de código de toda a empresa para identificar onde e como o sistema é usado. Isso também ajuda a entender quais equipes estão usando a versão mais recente dos componentes de IU.

Outra forma de avaliar a taxa de adoção é pedir às equipes de produto que apresentem relatórios trimestrais sobre o progresso da adoção. Isso funciona dependendo do tamanho da organização. Uma equipe de sistema de projeto também pode usar uma combinação de pesquisas com outros métodos de avaliação.

Freqüentemente, há um gerente de produto responsável por cultivar parcerias com outras partes interessadas. Eles criam o roteiro de desenvolvimento e trazem as necessidades da comunidade de volta aos designers e desenvolvedores.

Ao criar uma cultura sustentável, seu sistema de design é tão forte quanto seu relacionamento com as equipes que o utilizam.

Projetado para ajudar os desenvolvedores

Os sistemas de design destinam-se a capacitar os desenvolvedores front-end com seu fluxo de trabalho de desenvolvimento. Existem muitas tarefas com as quais os desenvolvedores se preocupam - download de pacotes, ferramentas, módulos com escopo e muito mais. A boa notícia é que os sistemas de design ajudam a abordar esses tópicos. Vamos dar uma olhada em alguns dos casos específicos.

Se um sistema de design construísse componentes, mas não tivesse como distribuí-los, muitos desenvolvedores seriam frustrados. Ou se os pacotes estivessem sendo distribuídos por meio de um gerenciador de pacotes desatualizado, o consumo dos componentes do sistema de design seria um desafio para os desenvolvedores. Um bom sistema de design está constantemente evoluindo suas ferramentas de distribuição. Ferramentas modernas de gerenciamento de pacotes, como NPM ou Yarn, são comumente suportadas em muitos sistemas de design hoje.

Além disso, os componentes precisam ter a versão correta e as notas de versão precisam ser atualizadas com frequência para refletir as alterações principais e secundárias da versão. Muitos sistemas de design vão longe documentando seu processo de teste para ganhar a confiança dos desenvolvedores na estabilidade dos componentes.

Além disso, os desenvolvedores se preocupam com o encapsulamento de estilo e a compilação e transpilação do código. Alguns desenvolvedores se preocupam com os nomes das classes CSS com escopo definido. Muitos sistemas de design usam módulos CSS para modularizar e compor CSS. Os sistemas de design aproveitam os módulos CSS para permitir o escopo personalizado dos nomes das classes e evitar conflito de nomes entre as diferentes versões. Os Módulos CSS permitem que os componentes da IU coexistam em uma página com outras versões da biblioteca. 

Como tal, os sistemas de design vêm com uma documentação clara para desenvolvedores sobre muitos desses tópicos na seção Getting Started for Engineers . Isso ajuda os desenvolvedores iniciantes a bordo. Existem vários outros problemas de engenharia que os sistemas de design podem ajudar a resolver - polyfills JavaScript, suporte para estruturas Vue ou React, distribuição de recursos de biblioteca usando um CDN, pós-processamento SCSS ou substituições, acessibilidade integrada e assim por diante. A questão é que o sistema de design vai muito além das diretrizes visuais. Apoiar tarefas de engenharia é parte do que um sistema de projeto faz.

Empacotando

Se você descobrir que suas equipes estão construindo os mesmos componentes repetidamente, talvez seja hora de sistematizar seu projeto. Com um sistema de design, é uma aliança entre suas equipes de engenharia e design pode construir de forma eficiente uma experiência de usuário consistente para os usuários finais que escalam facilmente em vários produtos e plataformas. Isso vai além de construir uma biblioteca, inclui pesquisar, manter e distribuir documentação sobre os padrões e diretrizes para o design da organização. É fundamental que designers e desenvolvedores cumpram seu papel para criar uma experiência de produto envolvente.

Um sistema de design não é um projeto ou um projeto paralelo. É um produto que serve a outros produtos. Sem tratá-lo como seu próprio produto, não conseguirá ser adotado em uma organização. 

Um sistema de design não é um guia de estilo, biblioteca de padrões ou biblioteca de componentes. Mas todos esses juntos constituem o sistema.

O Avance Network é uma comunidade fácil de usar que fornece segurança de primeira e não requer muito conhecimento técnico. Com uma conta, você pode proteger sua comunicação e seus dispositivos. O Avance Network não mantém registros de seus dados; portanto, você pode ter certeza de que tudo o que sai do seu dispositivo chega ao outro lado sem inspeção.