O que é um Sistema de Design?

O que é um Sistema de Design? Aprenda agora.

o que um sistema de design

Empresas líderes de tecnologia compartilham e vem compartilhando suas regras e convenções de design para todos os interessados. Um exemplo bem conhecido é o Material Design do Google.

Paralelamente há o Styleguide do Yelp, o Human Interface Design da Apple e muitos outros. Até mesmo o governo dos EUA tem seu próprio conjunto de regras chamado de US Web Design System. Etodos eles são individualmente chamados de Sistemas de Design (design systems em inglês).

Ok, mas o que é um Sistema de Design?

Os sistemas de design são essencialmente um conjunto de regras, restrições e princípios implementados no design dos elementos e ao código fonte de uma companhia. Os três atributos a seguir servem funções distintas e fornecem ordem sistêmica coerente entre essas informações, botões, aplicativos, sites, marca, etc.

Regra: deve ter uma sugestão visual ou um texto para indicar o CTA

Restrição: só pode ter 3 tipos exclusivos – primário, secundário e padrão

Princípio: deve ser usado para interação específica do usuário.

Veja esses botões como exemplo:

O que é um Sistema de Design? Aprenda agora. 1

 

 

Os botões têm cores e texto, cumprindo os princípios de regras e restrições. O segundo botão “submit form”, juntamente com o “Delete File” e “notify Team”, tem todos os 3 atributos porque indica explicitamente uma ação específica do usuário. Um sistema de design contém componentes mais complexos que atendem a esses três princípios que compõem o aplicativo ou projeto web.

Os sistemas de design são sinônimos de guias de estilo?

Não. As guias de estilo se concentram principalmente no estilo que você quer transmitir. Eles incluem cores, fontes, logotipos e atributos da marca. Eles são muito utilizados por equipes de design e marketing, pois os guias de estilo contêm a marca que é a primeira a ser comunicada. O sistema de design é mais do que apenas apresentação visual; concentra-se no ecossistema da informação.

Eles são como bibliotecas de padrões?

Também não. As bibliotecas de padrões são repositórios de componentes e interações reutilizáveis. Pense em botões, modais e layouts de página. Eles geralmente andam de mãos dadas com o guia de estilo porque bibliotecas de padrão dependem de forma e aparência consistentes.

Mas e sobre os frameworks de front-end?

Um framework (estrutura) front-end pode ser um sistema de design, mas não o contrário. Os frameworks são mais amigáveis ao desenvolvedor, fornecendo instruções técnicas para desenvolvedores, o que pode ser desanimador para pessoas não técnicas.

Com o surgimento do javascript baseado em componentes, como o Vue e o React, os sistemas de design também estão focados no design de componentes. Porém, alguns desses frameworks não têm o dom, a voz e as mensagens que o sistema precisa.

Veja os sistemas de design como Ecossistemas.

Um sistema de design é uma junção de estilo, componentes e voz. O MailChimp, uma plataforma de campanhas de e-mail, tem um guia de estilo abrangente, mas também possui um guia separado que enfoca a voz e o tom, chamados Tom e Voz. O propósito deste guia é mostrar a empatia humana, estar atento às limitações humanas (isto é, incapacidades) e fornecer uma experiência geral de usabilidade. O MailChimp usa essas regras para definir uma voz uniforme em toda sua plataforma de serviços.

Então, por que há um aumento no uso dos sistemas de design?

O conceito desses sistemas já existe há algum tempo, por exemplo o Manual de Padrões gráficos da NASA de 1975, criado por Richard Danne. No entanto, apenas recentemente algumas empresas deram atenção aos sistemas de design, pois perceberam que seus projetos não estavam sendo dimensionados tão rapidamente quanto seus negócios. Com a demanda por uma boa experiência de usuário aumentando, as equipes internas reconheceram isso e começaram a construir softwares com designs mais consistentes e inteligentes, por meio de abordagens centradas no ser humano.

O que é um Sistema de Design? Aprenda agora. 2

Como mencionado anteriormente, um sistema de design é mais do que um guia de estilos estático. É um espécime vivo, que evolui à medida que a empresa amadurece ou as necessidades mudam. O guia de estilo da Lonely Planet é um exemplo deste “sistema vivo”.

Como os Sistemas de Design podem beneficiar minha empresa?

Os sistemas de Design fornecem padrões de design consistentes e robustos que podem beneficiar as equipes internas. Aumento de produtividade no trabalho, colaboração e entendimento da comunicação são alguns pontos a se considerar.

Para os designers, eles podem dividir a interface do usuário em pequenas partes, em vez de uma página web, como uma espécie de entidade. Essa mentalidade baseada em componentes permite que eles definam e modifiquem facilmente quais componentes priorizar. Para os desenvolvedores, eles podem criar facilmente esses componentes, que são fáceis de manter nas folhas estilos (css) mas com um escopo definido.

Ter um sistema de design aumenta a comunicação e compreensão entre as disciplinas envolvidas em um projeto, especialmente entre designers e desenvolvedores.

Existem padrões oficiais para sistemas de design?

Não, não existem padrões oficiais para esses sistemas, já que nem todas as empresas têm os mesmos problemas. Por exemplo, a Lonely Planet depende muito de elementos de imagem e design para atrair seu público. Eles criaram ícones que são adequados para um site de destino de viagens.

O sistema Lightning Design System da Salesforce contém padrões de projeto, componentes e diretrizes, mas não contém código JavaScript, permitindo que as equipes usem qualquer estrutura de desenvolvimento front-end de sua escolha. O Material Design do Google fornece orientação de movimento interativa, pois enfatiza o movimento natural e a animação suave para uma experiência mais fluida.

E como eu crio um sistema de design?

Primeiro, reúna seus designers e desenvolvedores, faça um inventário de todos os elementos que compõe sua empresa como fontes, cores, elementos, padrões, layouts, componentes digitais, proibições. Faça uma auditoria com sua equipe para definir as prioridades de criação. Desenhe o sistema conforme a empresa vai evoluindo. Ou seja, deixe espaço para a evolução.

Não irei me alongar mais por aqui pois o site UxPin possui um artigo muito interessante sobre como criar um sistema de design. Clica aqui ó: https://www.uxpin.com/create-design-system-guide

E sua empresa já possui um sistema de design?

Fechar Menu