Design Systems, a buzzword do momento
Nos últimos anos temos assistido a uma infinitude de evoluções tecnológicas. Desde a utilização em massa de produtos digitais até à proliferação de automatismos que simplificam o seu desenvolvimento.
Isto significa que é hoje cada vez mais fácil e rápido criar tais produtos. A velocidade e escala a que estes produtos têm vindo a ser produzidos só tem tendência a aumentar.
A disrupção só vai acelerar. A quantidade e diversidade de aparelhos conectados — muitos dos quais ainda nem imaginamos — irá explodir. Tal como a quantidade e diversidade de pessoas no mundo que os usam. Os standards, workflows e infraestruturas existentes não o irão suportar. Esta presente explosão de aparelhos já está a levar à ruptura. Não vão aguentar o que aí vem.
– The Future-Friendly manifesto
Com esta exponencial evolução vem também uma grande necessidade de organizar os fluxos de design. Já que, mais ecrãs desenvolvidos implicam mais design a ter que ser produzido. Estamos a falar de botões, barras de navegação, formulários, etc.
Normalmente a resposta das empresas a esta necessidade tende a ser o aumento da equipa de design. Uma investigação recente da Forrester veio mostrar que as melhores empresas focam-se noutras práticas para além do aumento da equipa. Uma delas é o cumprimento de um conjunto de princípios comuns, fundações, componentes, guidelines e recursos. Isto permite aos designers desenvolver o seu melhor trabalho. Como? Focando o tempo da equipa em soluções criativas. Ou seja, na resolução de desafios específicos que possam aumentar a diferenciação do produto e/ou da marca. Isto evita que estejam constantemente a reinventar a roda obrigando ao dispêndio de tempo e esforço em decisões técnicas. Estou a falar de minudências como alinhamentos, espaçamentos, grelhas. Questões que, provavelmente, outras pessoas na organização já terão resolvido.
Muitas equipas estão hoje a recorrer a design systems para o desenvolvimento web em escala. Quando correctamente implementado, um design system funciona como uma single source of truth. A qual, por sua vez, funciona como uma espécie de contrato de colaboração entre designers e developers.
Afinal o que é que estamos a falar?
Posto de forma simples, um design system é um inventário de componentes, design patterns, regras e brand style guides. Estes são depois acompanhados pelas suas respectivas versões em código. Conteúdos que podem ser reutilizados ou contextualizados para produzir aplicações.
Um design system é um conjunto de standards para gerir o design em escala e reduzir redundâncias. Ao mesmo tempo que se cria uma consistência visual e de linguagem em todas as páginas e canais.
– Therese Fessenden | Senior user Experience Specialist na Nielsen Norman Group
Um design system pode ainda ser expandido para conter tom de voz de um produto, diretrizes para conteúdo escrito, templates de páginas e até user flows. É algo projectado para responder às necessidades e contexto de utilização de cada organização.
Empresas como a Airbnb, Uber e IBM mudaram a forma como desenham produtos apenas por implementarem os seus design systems. Ao usarem componentes reutilizáveis e regras bem definidas, foram capazes de introduzir forte inovação na industria.
Existem hoje muitas empresas que alegam possuir design systems. Na verdade, na sua maioria, não passam de pequenas coleções de componentes com as suas respectivas versões em código. Apesar de um style guide ou uma biblioteca de componentes poderem ser um bom ponto de partida para um design system, não bastam. Este não se resume a apenas essas duas partes.
Os design systems fornecem um conveniente, centralizado e envolvente mapa dos territórios da marca. Com indicações de direção para ajudar a explorar novos territórios.
– Chris Messina | Tech Evangelist e ex Developer Experience lead na Uber
Qual a diferença entre ‘Design System’, ‘Style Guide’ ou ‘Pattern Libraries’?
Como dito acima, um design system não se resume a uma coleção de componentes. Emmet Connolly, director de design de produto na Intercom defende que a maioria dos design systems que encontramos não são mais do que bibliotecas de componentes. Uma caixa de peças de Lego que podem ser montadas de infinitas formas. A questão é que, mesmo que todas elas estejam individualmente consistentes, isso não garante que o produto da sua montagem o seja. Este deve ter estrutura e significado, o todo é mais do que a soma das partes.
Posto de uma forma simples, a diferença está nos standards e na documentação que acompanha os componentes. Ter um guia sobre como e porquê os usar torna tudo mais simples e fácil de compreender.
Os design systems estão sempre em evolução. E a forma como partilhas e encorajas a adopção de novas iterações evoluirá ao longo do tempo também.
– Diana Mounter | Design Systems Manager na GitHub
Elementos de um Design System
Um design system é composto por duas partes:
- O Repositório
- A equipa de gestão
1. Repositório
Os repositórios podem assumir diferentes formas mas, de forma geral, costumam conter:
- Um style guide
- Uma biblioteca de componentes
- Uma pattern library
Style Guide
É aqui que se encontram guidelines específicas para implementação, referências visuais e design principles. Estes são necessários para criar os interfaces e/ou qualquer outro tipo de entregáveis. Geralmente os style guides costumam focar-se na marca (cores, tipografia, logótipos, etc.). Podem apresentar orientação quanto ao conteúdo (tom de voz, recomendações de escrita e de linguagem) e mesmo standards visuais e de interação. Alguma desta informação também pode ser encontrada na biblioteca de componentes para alguma orientação contextualizada.
No entanto os style guides não são uma ideia recente. Em 1976, o manual de normas gráficas da NASA já oferecia muito mais do que exemplos visuais de como usar a marca. Não se limitava a guidelines para conjugar as cores por forma a melhorar a visibilidade e legibilidade. Este manual chegava a dar indicações como: ‘Um sinal deve ser pensado como sendo um título de manchete em larga escala. Por conseguinte, a linguagem deve ser clara e concisa. A brevidade é preferível por forma a comunicar rapidamente, especialmente para condutores de veículos.’
Biblioteca de Componentes
A biblioteca de componentes é aquilo a que a maioria das pessoas associa a um design system. A sua construção implica considerável investimento de tempo e de esforço. É aqui que encontramos todos os componentes de UI pré-desenhados e pré-desenvolvidos. Serve ainda como ponto de consulta sobre qual o aspecto e como implementar cada componente. Para além de exemplos visuais dos componentes, esta biblioteca também pode incluir:
- Nome do Componente
- Descrição
- Atributos
- Estados
- O componente e código
- Frameworks de front-end e back-end
Pattern Library
É comum existir alguma confusão quanto à diferença entre biblioteca de componentes e pattern libraries. A diferença é que a primeira foca-se nos componentes específicos individualmente ao passo que a pattern library foca-se em grupos de componentes e/ou layouts inteiros. Nesta biblioteca costuma-se poder encontrar estruturas de componentes, layouts e/ou templates. Tal como os componentes, também é suposto que os patterns sejam usados e adaptados.
2. Equipa de Gestão do Design System
Quer tenha sido criado de raíz ou adaptado, um design system requere sempre manutenção e supervisão constante. Isto permite evitar que se torne datado, obsoleto ou desorganizado. Podendo variar em número, uma equipa de gestão de um design system deverá ter, no mínimo:
- um designer de interação
- um designer visual
- um developer
A ideia é que os três consigam produzir guidelines de interação, criar exemplos visuais e em código. Para além disto, também devem criar todas as directrizes de implementação e design. Idealmente, a equipa também poderia contar com um UX researcher, um UX architect e um UX writer.
Argumentos a favor de um Design System
O uso de um design system permite que designers e developers possam trabalhar de forma independente com as suas próprias ferramentas. Evitam assim estar constantemente a verificar a qualidade da implementação. Ao invés disso, podem focar-se em interações de elevado valor acrescentado mais direcionadas para os resultados. Design systems bem implementados oferecem as seguintes vantagens:
- O trabalho quer do designer quer do developer pode ser facilmente replicado em escala
- Menor produção de recursos de design. O que permite maior foco em problemas maiores e mais complexos
- Cria uma linguagem unificada entre equipas multidisciplinares
- Permite consistência visual entre produtos, canais, etc.
- Reduz o período de onboarding de novos designers/developers
Argumentos contra um Design System
Existem algumas dificuldades e limitações que podem comprometer a adopção de um design system:
- Criar e manter um design system é uma atividade intensiva que requer uma equipa dedicada
- É necessário tempo para ensinar os outros a usarem um design system
- Pode existir a ideia de que há projectos estáticos e que não requerem o uso de componentes reutilizáveis
- Gera-se o mito de que a liberdade criativa fica posta em causa
Como implementar?
Existem três formas possíveis de abordar a adopção de um design system:
- Adoptar um já existente
- Adaptar um já existente
- Criar um próprio de raíz
Existem mais e menos valias em cada opção. No entanto, de uma forma geral quanto mais personalizado um design system é, mais tempo e dinheiro será necessário para o implementar. Esta questão será abordada em maior detalhe num futuro artigo.
Conclusão
Design systems são feitos de diversos componentes, padrões, estilos, regras. As quais podem ajudar a optimizar o esforço de design e de desenvolvimento. No entanto, não deixam de ser feitos por pessoas. O principal a ter em conta quando se considera um design system é a escala e o nível de replicação dos projectos. Tal como os recursos e tempo disponível.
Quando bem aplicado, um design system pode ajudar a educar os membros das equipas, acelerar o fluxo de trabalho. Permitindo aos designers mais tempo para se focarem em desafios mais complexos dos utilizadores.
Para finalizar, partilho um video com a síntese deste artigo produzido pela Nielsen Norman Group, a principal referência no campo do design de produto e da usabilidade.
Paulo Dias
Designer UX/UI
pdias@innovagency.com
LinkedIn: https://www.linkedin.com/in/pauloshdias
INNOVAGENCY
Living the digital world
www.innovagency.com
