Design System e Style Guid

Design System & Style Guide

Sistemas de Design e Guias de Estilo

O que é Design System

Conceito

Design System – ou sistema de design – trata-se de um conjunto de padrões de componentes de design elaborados a fim de manter a consistência visual e funcional de um certo produto, sistema ou organização. Um exemplo clássico para se explicar o Design System é pensar em peças do brinquedo Lego.

O termo Design System vem ganhando cada vez mais notoriedade, principalmente graças aos produtos digitais que vem sendo criados nesse cenário tecnológico que vivemos.

Seguindo essa analogia, imagina esse sistema de design, como um conjunto de pecinhas padronizadas, que seguem a mesma consistência de design. Cada pecinha poderia ser considerada um componente. Mas não para por aí. As peças de lego (ou componentes) já estão predefinidas, você precisa apenas selecionar as que você precisa e montá-las dentro de um padrão. Esses componentes podem se relacionar, se juntando e criando a partir disso novos componentes. E esses novos componentes por sua vez poderiam se juntar com outros e assim por diante.

Outro exemplo que temos, e que lidamos no dia a dia, são alguns softwares, como o Microsoft Office. Essas famílias de programas seguem uma linha visual e todos estão dentro de uma consistência de visual e funcional, por exemplo, desde o visual até atalhos pré-definidos por seus criadores . Independente de quando você adquiriu o programa ou de que país seja ou de que língua você fale, esses padrões serão os mesmo para cada ferramenta. Isso facilita bastante a vida de quem vai utilizar esses programas, pois possibilita a uma coerência de uso e estética.

Design System e Regras

• Conjunto de regras/elementos que são definidos para garantir

consistência entre interfaces da marca.

• Regras são definidas para todos os elementos do design, como espaços,

cores, tipografia, grid, formas, imagens, ícones e mais.

Quando construirum Design System?

Imagine que uma empresa sempre está modificando seus times, seja demitindo ou contratando novas pessoas. Imagine também que sempre que novas pessoas aparecem, também surgem novas ideias e palpites acerca de um projeto.Muita das vezes essas ideias que surgem, já foram discutidas e definidas; mas com a correria da rotina e a falta de um documento contendo essas informações, um membro do time de design – por exemplo – irá gastar mais tempo testando novas ideias, que talvez nem tenha coerência com o projeto. Para evitar situações como essas, é necessário ter um bom Sistema de Design.

A diferença entre Design Systeme Style Guide

Ao estudar o design, nos deparamos com o Style Guide, que é facilmente confundido com o Design System. Na prática, o Style Guide também compõe com informações dentro do Design System. O Style Guide ou Guia de estilo é um sistema de organização menor e mais restrito para a parte visual que o Design System. Isso porque ele é responsável por criar um estilo de trabalho de um produto, permitindo que apenas os designers e criadores entendam o que está acontecendo.

É como se o Style Guide fosse uma fatia e o Design System uma pizza inteira. O Sistema de Design é um apanhado de informações de várias áreas do design, como o Motion, UI Design e até códigos de programação. A ideia é que o Design System seja um documento que garanta uma melhor consistência nos projetos, produtos e que dialogue com todas as áreas envolvidas, não somente a identidade visual ou com características visuais. Exemplos nos projetos internos: https://www.figma.com/file/CrayRbgHnYnJ2yUiS4zqKo/GowClin-(Copy)?node-id=966%3A780 https://www.figma.com/file/ifARxNyQDcVOxlXnaklvvg/%F0%9F%92%AA--MOVE-Treinamentos---projeto?node-id=801%3A4126

Os elementos que compõemum Design System

• Objetivos e valores

Antes de pensar em grid, tipografia e cores precisamos pensar nos objetivos e valores da empresa. Esses fundamentos guiarão todas as escolhas feitas, evitando projetos sem coesão com os princípios da instituição.

• Guia de Estilo

Um guia de estilo é fundamental para definir os princípios de design, identidade da marca, cores, tipografia, etc. Esse é o momento de definir diretrizes, para que todos os designers envolvidos usem as combinações estabelecidas.Quando esses elementos visuais são definidos, a criatividade será utilizada para definir combinações e como será usado as cores, ilustrações, ícones, tipografias, animações – por exemplo – criando, assim, uma identidade visual coesa.

• Biblioteca de componentes e padrões

Após ter estabelecido a identidade visual, é hora de definir como será construído esse projeto e, nesse momento, uma biblioteca de componentes e padrões podem ajudar. Na prática, uma biblioteca de componentes e padrões são elementos que serão utilizados no desenvolvimento de um produto. Imagine que você precise de um componente para criar um site, por exemplo, e lembra especificamente de um que utilizou em projetos anteriores. Até você procurar os projetos que ele foi utilizado, observar como ele se comporta, custaria um tempo precioso dentro do seu prazo.

Para aumentar a produtividade, uma boa solução é ter em mãos todos os componentes e padrões que serão utilizados na construção do seu produto. Para criar essa biblioteca podem entrar desenvolvedores e UI Designers.Os componentes e padrões são essenciais na construção do sistema e em como ele irá funcionar. Ui/Web kit: esses seriam um kit desses componentes citados acima, interligados, formando um template construídos com base nos componentes do sistema.

• Códigos

Dependendo do projeto podemos incluir padrões de códigos, como nome de classes, ids, indentação, formatação e organização. Um projeto de um sistema de design pode lidar com a integração entre design e a parte de desenvolvimento front-end.É super importante, quando há a necessidade, que a integração entre as áreas para que o Design System funcione como o esperado. Apesar do nome (Design System) poder lembrar em um primeiro momento apenas a questão visual, design não se trata apenas disso e questão funcional também é importante. Exemplos de Design System disponíveis na internet no site Adele UX Pin. https://adele.uxpin.com/ https://marvelapp.com/styleguide/overview/introduction

O design no processo de criação do produto

A criação de um aplicativo da Web por exemplo, é um processo altamente organizado e abrangente em que o objetivo principal é desenvolver um produto que atenda às necessidades de empresas e negócios. Na maioria dos casos, consiste em várias etapas. Durante cada etapa, uma equipe dedicada deve cuidar de diferentes aspectos, como design de produto e, escrever um código eficiente.