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

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 e style guides ou design systems?

Primeiro vamos a um passei histórico pelo processo de design. A documentação sempre existiu e conhecemos muito bem esses esses dois caras: brand book e manual da marca. Ai o mundo evoluiu e coisa e tal e chegou o design digital, que continuo a usar esses dois documentos pra construção de peças, sites, banners.

Mais um tempo se passou, As tecnologias ficaram mais robustas e novas necessidades em métodos de documentação e organização apareceram. Um tomou grandes proporções e caiu pesado na rede: Atomic Design, método construído por Brad Frost. E então começamos a falar sobre design system. Isso lá em meados de 2012/2013. Pois é, já se passaram quase 10 anos! Frost criou esse padrão pra facilitar as entregas de design, focado em layout, componentes e estrutura. E, realmente, na tradução ao pé da letra isso é um sistema de design, como ele mesmo propõe e nomeia em seu livro. Porém, sabemos que em Frost criou esse padrão pra facilitar as entregas de design, focado em layout, componentes e estrutura. E, realmente, na tradução ao pé da letra isso é 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, como, por exemplo, desenvolvimento web. 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 e viramos um timão daqueles, quando um entende a realidade e necessidade do outro.

Aí duas empresas criaram e anunciaram algo novo (mas nem tanto): designer chamaremos nosso documento de padrões de “Guidelines”, ou em pt-br adaptado: guia de linguagem. Sigam eles para desenhar telas que sejam 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.

Veio aquela coceira atras da orelha e comecei a 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 isso logo de cara. 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!


Lá vem climão: design system vs. guideline — parecidos, mas não a mesma coisa was originally published in UX Collective 🇧🇷 on Medium, where people are continuing the conversation by highlighting and responding to this story.



from UX Collective 🇧🇷 - Medium https://ift.tt/2UcQCMD
via IFTTT

Comentários