Sistema de design: o que é, por que e como criá-lo

O tema dos sistemas de design, ao que parece, já foi considerado por todos os lados: você pode encontrar muitos artigos, postagens, relatórios e outros materiais sobre criando um sistema de design. Apesar disso, todos que se deparam com esse termo têm muitas dúvidas. Tentaremos responder detalhadamente aos principais:

• O que é um sistema de design?
• Para que serve?

O que é um sistema de design?

Um sistema de design é uma estrutura que inclui componentes visuais, uma biblioteca de códigos e diretrizes de uso.

Freqüentemente, designers iniciantes cometem o erro de simplificar o conceito pensando em um sistema de design apenas como um kit de UI – um documento que contém elementos de interface gráfica, tipografia e cores.

O sistema de design consiste em três níveis:

A Kit de interface do usuário é a linguagem visual de um produto para o qual um sistema de design é criado. São cores, fontes, ícones, botões, marcadores, interruptores, controles deslizantes, imagens, animações. Os elementos variam e dependem das especificidades do produto digital. Todos eles ajudam a criar a parte visível da interface com a qual o usuário interage.

A estrutura é uma biblioteca de códigos escrita para cada um desses elementos, bem como plug-ins para animação, tags e rótulos para navegação.

orientações são um conjunto de modelos e regras de utilização de elementos que organizam o processo de trabalho. Graças às diretrizes, um designer não está envolvido em tarefas simples, mas um desenvolvedor está imediatamente envolvido.

Por exemplo, as diretrizes especificam os parâmetros de uma janela pop-up em um site: recuos do texto, a localização e o tamanho do título e do corpo do texto, um local para um botão e a aparência da janela com menos ou mais texto.

Tipos de sistemas de design

Não existe uma classificação única, mas os especialistas distinguem dois tipos de sistemas de design – código aberto e código fechado.

Em sistemas de código aberto, qualquer empresa pode utilizar materiais e adaptá-los para seus projetos – alterar cores de botões, fontes e ícones. Por exemplo, em sistemas Ant Design, Diretrizes de Interface Humana e Material Design.

Os sistemas de design de código fechado são normalmente criados para uma empresa ou produto específico. São materiais totalmente fechados, acessíveis apenas aos funcionários, ou parcialmente abertos.

Como criar um sistema de design

O desenvolvimento de sistemas de design é baseado nos princípios do design atômico. O design atômico é uma técnica que inclui cinco níveis de elementos de design: átomos, moléculas, organismos, padrões e páginas.

Estrutura do sistema de projeto:

• Átomos são os menores componentes: botões, ícones, campos de entrada e fontes.
• Moléculas são uma combinação de vários elementos simples: dois botões, um título e uma linha de entrada, uma barra de notificação, uma caixa de seleção e texto.
• Organismos são componentes completos: cabeçalho do site, formulário de autorização, cartões de produto e banner de notificação.
• Modelos – layouts de páginas sem conteúdo: menu, aparência do site.
• PÁGINAS são páginas cheias de conteúdo.

O algoritmo geral é assim:

• Selecione cores e fontes, defina grades modulares e selecione animações, imagens e sons.
• Crie elementos básicos de interface.
• Combinações de elementos de design e layouts.
• Crie uma lista de elementos junto com as regras. Na diretriz, especifique o que é o elemento, onde é usado e quais tarefas ele resolve.

Normalmente, os sistemas de design não são criados do zero, mas são construídos com base em material já desenvolvido: kits de UI, diretrizes ou manuais de marca.

Por que você precisa de um sistema de design?

Como acontece com todo produto de TI, é fundamental responder à pergunta: “Para que serve um sistema de design?” Ou, como comentam alguns colegas da loja, “e daí”?

A resposta a esta pergunta o ajudará a compreender o valor do produto. Parte disso já pode ser visto pelo que descrevemos acima. Mas vamos decompô-lo e dar uma olhada mais profunda.

Automação

A automação oferece o benefício mais óbvio. Um sistema de design o ajudará a automatizar as operações, liberando tempo para outras tarefas.

Iteratividade

Ser capaz de herdar e aplicar automaticamente modificações nos elementos do sistema de design é uma ferramenta valiosa para uma equipe de produto. Você pode fazer rapidamente mudanças cosméticas ou até mesmo grandes em um local. Dessa forma, você sempre pode aprimorar o produto.

Consistência

A consistência afirma que os objetos e entidades em um produto que desempenham a mesma função devem buscar unidade e similaridade.

Quando utilizamos recursos comparáveis ​​em um produto, eles se tornam familiares e convenientes: entendemos instintivamente como o botão funciona e aparece, bem como onde ele está posicionado.

Esperamos que todos tenham aprendido algo valioso com o artigo. E ficamos mais uma vez convencidos de que trabalhar em um artigo estrutura o conhecimento e motiva estudos adicionais.