No começo deste ano, entrei em um novo projeto aqui na ateliware e estive envolvido em sua construção desde então. Após o kickoff e a definição dos objetivos, começamos a estudar dentro do time de design quais seriam os próximos passos na construção de valor seguindo as diretrizes apresentadas pelo cliente, que englobam as melhores práticas do UX Design, UX Writing e UI Design. Como o produto em que estamos trabalhando possui alguns anos de mercado, essa foi uma grande oportunidade para iniciar os processos de redesign em toda a plataforma. Nesse post quero abordar os benefícios da utilização do Design System na construção e manutenção de um produto digital.

O início do Design System

Reza a lenda que o primeiro Design System foi criado pela NASA, em 1976. Desde então, esse processo de construção de um, digamos, Manual de Identidade Visual (MIV), sofreu algumas modificações para aplicações digitais, sendo as mais emblemáticas com a introdução do Material Design, lançado pelo Google, em 2014, e a teoria do Atomic Design criada por Brad Frost. Atualmente, um grande número de empresas, de todos os tamanhos - startups e grandes corporações, como Uber - adotaram essas diretrizes para padronizar o design e o desenvolvimento de uma única linguagem visual para ser aplicada em diferentes equipes, projetos e aplicativos.

Mas o que é um Design System?

In a nutshell, o Design System é uma das principais ferramentas de trabalho utilizadas por designers e desenvolvedores. Assim como a NASA utilizou um tipo de MIV para compor sua comunicação - e com isso assegurar que a unidade, conceito e tons de voz da empresa e marca fossem mantidas - atualmente, empresas digitais utilizam a mesma abordagem para criar seus produtos. Com o surgimento de programas de construção de sistemas, como Figma, Sketch e Adobe XD, esse processo foi acelerado e facilitado. Ou seja, um Design System é nada mais nada menos que um arquivo composto por componentes reutilizáveis que guiam padrões visuais e podem ser combinados para a construção de qualquer número de aplicativos ou programas, um tipo de MIV Digital aprimorado e avançado. Ele deve mostrar todos os componentes de design existentes com orientações sobre quando e como eles devem ser utilizados. Um verdadeiro GPS para o mundo do projeto.

Como cada projeto tem suas características, urgências e objetivos, os passos abaixo podem ser seguidos para garantir o aperfeiçoamento do projeto em seu desenvolvimento independente do seu tamanho ou etapa.

1. Deve ser adotado por todos

Apesar de ser majoritariamente utilizado por designers e desenvolvedores, ele deve ser uma das principais fontes de verdade dentro de um projeto. É importante entender que o nome Design System não é apenas um nome extravagante para descrever um kit de UI. Ele é uma ótima plataforma para informar, inspirar e guiar todos os times de uma empresa que trabalham em diferentes canais digitais. Conforme os projetos e as empresas crescem, ou são atualizados, é essencial que todos que estão envolvidos adotem suas diretrizes e estejam na mesma página para fazer as modificações necessárias conforme o projeto/produto evolui.

2. Deve ser criado para pessoas e ser acessível

Nesta era digital, uma empresa inteligente precisa estar preparada para fazer alterações em seus produtos quando o cliente precisar. Todos nós trabalhamos para que um aplicativo ou programa seja utilizado por pessoas e é essencial que o comportamento desses usuários seja estudado e levado em consideração. A experiência que um usuário tem ao interagir com um produto é um fator decisivo para o seu sucesso. Portanto, deixou de ser algo superficial de um produto para se tornar a base sobre a qual ele é construído. Imagine como uma pessoa com deficiência motora utilizaria um celular e como a interação com um aplicativo aconteceria. Esse aplicativo está preparado para esse tipo de cenário? Ele facilita e auxilia esse usuário ou dificulta esse processo? Por esses motivos, os testes de usabilidade são necessários, pois garantem que o usuário seja o centro das atenções. Ele é utilizado para entender comportamentos e preferências, identificando problemas e descobrindo oportunidades.

3. Deve ser escalonável

Acredito fielmente que nós, designers, devemos criar um acesso fácil ao conteúdo independente do dispositivo, tamanho da tela ou contexto. A construção de um Design System deve seguir essas mesmas diretrizes. Quando falamos de um design responsivo estamos considerando que ele foi projetado para ser escalonado e adaptável a qualquer tipo de tela com os mais variados tipos de resoluções, ou seja, um DS deve ser constituído por componentes que mantenham a informação intacta conservando o acesso ao seu conteúdo.

4. Um Design System nunca chegará ao fim

Todos nós sabemos que mudanças acontecem rápido. DS precisam ficar sintonizados e serem flexíveis a novos comportamentos, novas tecnologias, novos negócios e novas formas de trabalhar. Conforme a empresa, seus produtos e seus clientes mudam, o DS também precisa mudar e acompanhar essas transformações. É por esse motivo que um Design System nunca chegará ao fim, ele sempre será algo vivo, um sistema em constante modificação. Esse movimento de atualizações constantes na tecnologia e no mundo é o que torna o processo de design e manutenção de um Design System uma tarefa difícil, desafiadora e incrivelmente fascinante.

Referências:

• Material Design
• Atomic Design | Brad Frost
• Design System Handbook | Design Better
• Building a design system… not just a UI kit | UX Design
• Scaling Design Systems | UX Design