10 minutos de leitura

Hoje vou falar de Design Language System (DLS). Termo em alta no mundo do design de produtos digitais. Mas por um bom motivo.

Design Language System é a ferramenta perfeita para empresas que querem ou estão com dificuldade para escalar em design de produtos. Se você é uma dessas empresas, esse artigo é pra você.

Vou contextualizar um pouco sobre o que é DLS, explicar quais são os primeiros passos para começar a fazer um e o que você pode esperar tirar de valioso dele.

Além disso, esse artigo também é interessante para designers que buscam uma forma mais inteligente e eficiente para construir interfaces, sejam elas para clientes ou para a empresa em que trabalham.

Vamos lá, espero que você goste.

Design agora é vantagem competitiva

As empresas finalmente começaram a entender o valor do design em seus negócios.

Estamos vendo algo interessante acontecendo: as grandes de tecnologia (Atlassian, LinkedIn, Airbnb, Dropbox, Google,…) vem aumentando seu time de designers significativamente nos últimos 18 meses, em cerca de 65%.

Isso não está acontecendo apenas pela capacidade financeira dessas empresas. Claro, isso ajuda muito. Mas como todo negócio, a quantidade de investimento é limitada e deve ser aplicada nos projetos que tragam mais retorno.

A realidade é que design deixou de ser luxo há um bom tempo. Agora é diferencial estratégico e vantagem competitiva. Melhor experiência de uso resulta em menor custo de aquisição de clientes, de retenção e até mesmo de suporte.

Resumindo, em um mundo em que grande parte do contato entre empresa e cliente irá se passar por meio de uma interface, quem proporcionar a melhor experiência nadará a braços largos.

Então qual é o problema?

Design está ganhando seu lugar ao sol. E com isso, encaramos um novo problema.

Com o aumento de sua relevância, nós, designers, estamos tendo dificuldade para acompanhar a velocidade de crescimento da própria empresa, principalmente a velocidade do time de desenvolvimento.

Diferente de programadores, designers possuem mais liberdade para solucionar cada problema de forma individual. Ficaria mais legal se eu aplicasse uma sombra com um pouco mais de blur e opacidade nesse modal específico? Sem problema.

Mas, como você já deve saber, solucionar cada problema de forma individual é pouquíssimo eficiente e, principalmente, leva muito mais tempo. Além disso, conforme a aplicação cresce, a empresa começa a criar o que chamamos de dívida de design. O produto começa a ficar extremamente inconsistente, prejudicando seriamente a experiência do usuário e aumentando a complexidade do problema.

E qual é a solução?

Portanto, como escalar em design?

Contratar mais designers? Criar processos de design mais eficientes? São soluções válidas, mas incompletas e perigosas pois não solucionam a fonte do problema: designers trabalham de forma individual e subjetiva. Cada desafio é resolvido de um jeito diferente. Contratar e fazer mais rápido só resultaria em uma maior inconsistência.

A solução é fazer com que designers trabalhem abaixo de um sistema unificado. Ou o que chamamos de Design Language System.

O que é Design Language System?

Em poucas palavras, Design Language System é uma biblioteca de componentes de UI reutilizáveis, guiados por padrões de design claros, que podem ser agrupados para criar aplicações em diferentes ecossistemas digitais.

Em termos lúdicos, é como se todo elemento de uma interface (botões, fontes, cores, hearders, grids, cards, ícones) fosse transformado em peças de Lego e catalogados para que outros designer possam reutilizar aquela mesma peça.

Caso não tenha ficado muito claro, aqui estão alguns exemplos bem legais de Design Language System:

Salesforce: Lightning Design System

Mailchimp: Mailchimp Design System

Trello: Nachos Design System

IBM: Carbon Design System

Atlassian: Atlassian Design System

Shopify: Polaris Design System

Pivotal: Pivotal Design System

É importante ter em mente que DLSs não são projetos, são processos. Não existe data de entrega ou validade, eles são constantemente alimentados e adquirem mais valor conforme a empresa e o sistema crescem. São organismos vivos.

A estrutura de um Design Language System

Um DLS tradicional conecta dois conceitos diferentes abaixo de um único sistema. Esses conceitos são padrões e componentes.

Padrões

É preciso entender os porquês antes dos o ques. Definir padrões tira a subjetividade e ambiguidade que diferentes designers trabalhando no mesmo projeto podem gerar.

Quais itens podem/devem ser padronizados?

Princípios. Qual é a visão e a missão da empresa e como isso deve ser abordado pelo design?

Acessibilidade. Como proporcionar uma experiência que seja acessível a um grande grupo de pessoas? Incluindo deficientes visuais, auditivos, físicos e daltônicos.

Internacionalização. Como seu produto e design vão refletir e abordar diferentes línguas e culturas?

Tom de voz. Qual é a maneira correta de se comunicar com seu consumidor?

Ferramentas. Quais ferramentas o time de design vai usar desde a etapa de descoberta até a etapa de prototipação?

Pastas e arquivos. Qual é o sistema de pastas e nomenclatura de arquivos que melhor se adapta ao seu produto e ao seu time?

Esses padrões vão guiar cada decisão de design quando você for começar a pensar nos componentes do seu produto. Sem padrões, seu sistema não escala e as incoerências permanecem.

Componentes 

Componentes são pedaços de código reutilizáveis. Eles variam em complexidade. Vão desde botões e dropdowns até telas e grids inteiros.

Antes de começar a componentizar os elementos de UI, conduza uma auditoria visual no seu produto (caso você já tenha) para metrificar o tamanho da inconsistência. Fazer isso vai dar um senso de urgência e estimativa de quão grande o problema é. Existem duas formas de você fazer isso:

Você pode usar ferramentas como o CSS Stats para fazer uma auditoria básica e quantitativa.

Ou separar um tempo na sua agenda para printar cada elemento inconsistente para ter uma noção mais visual do problema que enfrenta.

Depois de definir os padrões, fazer uma auditoria e conversar com alguns de seus usuários sobre o estado atual do seu design, você pode começar a componentização dos seus elementos.

Quais elementos podem ser componetizados?

Cores (primárias, secundárias, cores de negação, de sucesso e de aviso,…)

Tipografia (tamanho, fonte, estilo, peso,…)

Espaçamento (margens, padding, coordenadas de posicionamento,…)

Imagens (ícones, ilustrações,…)

Estrutura e grids

Textura dos elementos (elevação, profundidade, sombra, arredondamento das bordas,…)

Motion (micro-interações, animações,…)

Elementos interativos (botões, dropdowns, menus, paginação, sliders…)

A componentização dos elementos é o fim de todo Design Language System. Dele, vão surgir dois artefatos:

UI Kit. Um arquivo do formato de preferência da equipe (Illustrador / Sketch / Photoshop), para que telas novas possam ser criadas com facilidade.

Componentes reutilizáveis. Podem ser em React ou CSS.

O valor de um Design Language System

Design em escala

Seguindo um mesmo sistema e componentes, o time de design consegue criar, iterar e inovar com menos fricção e na mesma velocidade que a empresa.

Gerencia a dívida de design

A partir do momento que você adota um DLS, sua empresa previne que uma dívida de design seja criada. Dessa forma, seu produto fica mais consistente, mais intuitivo e mais elegante, resultando em uma experiência melhor para seu usuário.

Menos tempo de go-to-market

Com componentes, criar protótipos de alta fidelidade e validá-los com usuários reais é um trabalho pouquíssimo complexo. Dessa forma, o tempo entre ideação e deploy de uma feature é reduzido consideravelmente.

Mais senso de marca

Seguindo uma mesma identidade visual, seu produto ganha reconhecimento e familiaridade de marca.

Mais inovação

Ao componentizar os elementos de UI, você diminui o número de decisões que precisarão ser tomadas no processo de construção de uma tela. Dessa forma, a equipe de designers tem mais tempo e energia para pensar em problemas maiores e que irão gerar mais valor para a empresa.

Muito obrigado por ler, espero que tenha sido valioso. Caso tenha surgido alguma dúvida ou ponderação em relação a esse artigo, deixo meu e-mail à sua disposição – joao@bossabox.com

Links úteis

Design Systems Handbook por InVision

Design Language System por UX Planet

A Comprehensive Guide to Design Systems por InVision

Designing at Scale: How Industry Leaders Leverage Design Systems por InVision

Building a Visual Language por Airbnb