top of page
Foto do escritorHelena Duppre

Lá vem climão: design system vs. guideline — parecidos, mas não a mesma coisa

Olha eu aqui mais uma vez disposta a questionar conceitos que tenho visto espalhados por ai.



Design System. Um bom designer tem corrido atrás desse conceito pra se atualizar, não é? Inclusive essa deve ter sido sua motivação para abrir esse texto. Mas eu decidi compartilhar não uma formula mágica ou algo assim. Decidi discutir algo simples: será que os designers criam guidelines ou design systems?


Primeiro vamos a um passei histórico pelo processo de design. A documentação sempre existiu com dois nomes bem conhecidos por nós: brand book e manual da marca. O mundo evoluiu e coisa e tal e chegou o design digital.


Mais um tempo se passou. As tecnologias ficaram mais robustas e novas necessidades para métodos de documentação e organização apareceram. Com isso, surgiram algumas metodologias para tratar essas dores e uma, especificamente, caiu no gosto do pessoal: o Atomic Design, construído por Brad Frost. E então começamos a falar sobre design system.


Isso tudo aconteceu lá em meados de 2012/2013. Pois é, já se passaram quase 10 anos! Naquele momento, Frost havia criado esse estilo de documentação para facilitar as entregas de design e garantir a consistência do sistema como um todo. Ou seja, um sistema de design, como ele mesmo propõe e nomeia em seu livro.


Anos se passaram e a necessidade de padronização aumentou e escorreu para outras áreas. Surgiram bibliotecas, padrões e novos sistemas de organização, como o Bootstrap. E então, nós designers, começamos a trabalhar cada vez mais em conjunto com os programadores.


Em dado momento, duas empresas anunciaram algo novo (mas nem tanto) para a comunidade de design e desenvolvimento: designer, a partir de agora chamaremos nossa documentação de padrões como “Guidelines”, ou em pt-br adaptado: guia de linguagem. Sigam a estrutura lá proposta para desenhar telas que deem um show de usabilidade. E lá vamos nós, estudar, entender e decorar o Material Design, do Google e a Human Interface Guideline, da Apple.


Voltemos ao momento atual. Quem aqui não tem ouvido falar um monte de coisas sobre design system? Então comecei a ter aquela coceira atras da orelha e parei para me questionar: será que tudo o que eu tenho visto sobre Design System não está sendo nomeado errado? Me parecem mais documentações de linhas de design, restrita a designers e para criação visual (layout) de aplicações e sites.


Do outro lado, vi empresas com materiais robustos de sistemas de design abordado de uma forma mais ampla. Ué, não seriam os front-ends designers também? Pá. É isso. Mais uma vez o conceito de design system mudou, até porque os conceitos de design também se popularizaram e evoluíram e isso faz todo sentido, ao meu ver.


Os sistemas que construimos atualmente são mais complexos como um todo e, por isso, é extremamente necessário termos uma documentação mais completa que una códigos, melhores práticas, os componentes visuais e seus comportamentos. Isso sim se chama Design System. Um exemplo que gosto demais é o material da IBM, chamado Carbon Design System. Deem uma olhada, vale a pena!


Conclusão:

A criação de um Design System não é mais papel exclusivo do designer de interfaces. Se tornou um trabalho em conjunto com o time de dev. Por tanto, tomem cuidado ao falar: o dia em que construí um Design System.


Já a definição das Guidelines visuais são uma entrega fundamental de UI, para que o desenho de telas se torne algo fluido, consistente e rápido. Assim como o design gráfico usa o Manual da Marca.


E aqui deixo uma dica bônus que costumo usar nos meus projetos: tanto o Design System, quanto as Guidelines são documentos vivos e que evoluem com o passar do tempo. Não tente criar tudo de uma vez e logo de primeira. Você terá um super trabalho e, acredite, muito retrabalho também.


Comece pela criação de um style guide enxuto, que contenha os componentes essenciais para a construção de 5 telas principais da aplicação. Normalmente esses elementos são: cores, tipografia, formulários e botões. Valide a linguagem. Evolua para espaçamentos e margens e crie uma estrutura sólida para o seu projeto. Depois, é só evoluir e brincar de lego.


Um beijo e até a próxima!


58 visualizações

Posts recentes

Ver tudo

Comments


bottom of page