Prints do header extraídos do design system open source do Ant Design no Figma Community
Se você trabalha com front, provavelmente você usa um design system.
Ou uma lib que tem seu próprio design system.
Ou uma biblioteca de componentes reproduz um.
Ou um framework baseado em design tokens.
Bora falar sobre isso?
Um dos primeiros livros que li na faculdade de design foi Design Pra Quem não é Designer da Robin Williams.
Ele começava com 4 princípios básicos que se aplicam desde um cartão de visitas até um produto consolidado.
Proximidade, alinhamento, repetição e contraste.
De forma muito resumida, o capítulo apresenta esses conceitos:
🔸 Se elementos se referem à coisas diferentes, contraste-os
🔸 Repetição causa sensação de unidade
🔸 Alinhamento gera conexão visual entre elementos
🔸 Proximidade transforma unidades sem relação em grupos
A relação entre esses elementos é muito complexa e orgânica pra ser simplesmente arbitrária. O ser humano quando se depara com uma série de dados que ele precisa relacionar pra lhes dar sentido e fazer eles funcionarem faz o que?
Um sistema.
O system do design system
Primeiro a gente cria uma taxonomia, descrevendo os elementos do sistema desde as suas partículas mais fundamentais. A partir da relação entre esses elementos, definimos suas entradas e saídas. Observando esses conjuntos, identificamos padrões.
Tá comigo ainda?
O design e as partículas
Design tokens são as nossas variáveis. Representações rudimentares das nossas primitivas. Tal como o var, o const, a taxonomia dos animais, a tabela periódica.
Atomic design, por exemplo, é uma tentativa de classificar e relacionar esses elementos
Tal como na química em que substâncias são relações não arbitrárias entre moléculas, sistemas são relações parametrizadas entre dados, no design system componentes são relações intencionais entre padrões.
Consistência, unidade, escalabilidade, qualidade. Todos os desafios que sistemas de design se propõe a resolver são os mesmos desafios que pessoas programadoras se deparam quando transformam esses padrões em código.
Variáveis, temas, utilitários, bibliotecas de componente...
São soluções construídas pra responder à esses desafios e também suprir as demandas da engenharia.
🔸 Front-end escalável com time de front enxuto
🔸 Front-end parametrizado com time de design enxuto
🔸 Maior qualidade e padronização molecular
🔸 Mudularização x Complexidade
E mesmo na engenharia, nós categorizamos e modularizamos, pq complexidade gera entropia.
Componentização gera flexibilidade e robustez, mas vem com seus próprios desafios.
Component driven design é um exemplo de uma abordagem de balanceamento entre funcionalidade e design.
E o que é design system?
Quando falamos de UI, falamos de sistema. Toda vez que a gente cria ou opera uma ferramenta de UI, a gente cria ou opera um sistema.
🔸 Classificamos suas peças fundamentais.
🔸 Criamos relações.
🔸 Geramos proximidade, alinhamento, repetição e contraste.
Seja buscando robustez, escalabilidade, adoção ou padronização, o design system é muito além da relação de design e sistemas, mas da relação das pessoas com seus sistemas, intermediadas pelo design.
Design não é como cunhamos cores ou espaçamentos, mas como projetamos pensando em necessidades humanas. Sistemas não são apenas linhas de código estroboscópicas, mas a forma que organizamos entrada, transformação e saída das coisas.
Pensando assim, você pessoa desenvolvedora não tá fazendo um trabalho tão distante das pessoas designers do seu trabalho, está?
Top comments (3)
Post incrível, mano! Esse livro "Design para quem não é designer" foi uma virada de chave para mim no início da minha carreira.
Pra mim também, inclusive peguei o Esse É Meu Tipo pq vc me lembrou que existe quando escrevi essa thread asdiuashdiuahsd
Ótimo artigo!! Li o "Refactoring UI" que tem uns takes interessantes sobre o tema. Vou ler o Design para quem não é designer agora!