Para projetar um site ou aplicativo escalável, você precisa de uma maneira eficaz e eficiente de gerenciá-lo sem introduzir erros, inconsistências ou experiências cheias de atrito. É para isso que serve um sistema de design de UI.
Nesta introdução aos sistemas de design, veremos exemplos reais de sistemas de design que as principais organizações usam hoje. Também examinaremos os motivos pelos quais você precisa de um sistema de design, os momentos em que não precisa de um e o que incluir ao construir o seu.
Padrões tipográficos no sistema de design Mailchimp
O que é um sistema de design?
Ao projetar uma interface de usuário para um site ou aplicativo, é fácil que os detalhes passem despercebidos. Cada vez que você adiciona uma nova página ou componente ou aumenta a complexidade de um projeto, fica mais difícil controlar tudo.
Ou seja, fica difícil sem um sistema de design.
Um sistema de design é uma coleção de diretrizes, estilos, componentes, padrões e outros recursos usados para criar interfaces de usuário para produtos digitais. Pense nisso como a linguagem visual de uma marca.
O que incluir em um sistema de design
Um sistema de design é uma estrutura bem organizada e documentada que simplifica o design da UI. Ao mesmo tempo, torna mais fácil para as equipes digitais dimensionar, atualizar e gerenciar produtos digitais; perguntas sobre o que usar, por que e quando são todas respondidas.
Embora cada sistema de design tenha uma aparência única, a estrutura costuma ser a mesma de marca para marca. Aqui estão os componentes mais comuns de um sistema de design:
Princípios de design
Esta seção tem muitos nomes. Por exemplo:
- Visão geral
- Introdução
- Marca
- Diretrizes de projeto
- Princípios de design
Também nem sempre é tratado da mesma maneira. Alguns usam esta seção para expandir os objetivos e a missão da marca. Outros o usam para explicar os princípios motrizes por trás do sistema de design.
Por exemplo, esta é a página Visão geral no Lightning Design System:
Ele explica que clareza, eficiência, consistência e beleza são usadas para tomar decisões de design para produtos da Salesforce.
Guia de estilo
Guias de estilo podem existir dentro e fora dos sistemas de design. Mas seu propósito é sempre o mesmo: fornecer uma referência visual e diretrizes para os estilos básicos usados no design de uma marca.
Esses elementos fundamentais incluem coisas como:
- Cor
- Tipografia
- Iconografia
- Logotipos
- Imagens
- Espaçamento
- Disposição
- Movimento
Também pode incluir informações sobre capacidade de resposta, globalização e acessibilidade. Está se tornando mais comum encontrar informações sobre tokens de design nesta seção também.
Cada token de design possui uma chave json e um valor correspondente. Se você está procurando um bom exemplo de como isso é, dê uma olhada no sistema de design Polaris do Shopify:
Os tokens ajudam a preencher a lacuna entre as decisões de um designer e a implementação delas por um desenvolvedor. Ao selecionar tokens de design específicos, não há como contestar a decisão do designer.
Eles também facilitam a implementação e atualização de estilos globais.
Componentes
A biblioteca de componentes é o próximo passo na definição da linguagem visual de uma marca. Nele, você encontrará componentes de UI reutilizáveis como:
- Acordeões
- Migalhas de pão
- Botões
- Containers
- Listas
- Barras de progresso
- Formulários de pesquisa
- Guias
- Entradas de texto
Estes são os blocos de construção básicos da IU. Cada seção da biblioteca de componentes descompacta o componente, como usá-lo e as diferentes variações.
Por exemplo, este é o Botão página no sistema de design Luna da Sainsbury:
Os usuários encontrarão diferentes estilos de botões explicados e representados visualmente. Mais abaixo na página, eles também encontrarão o que fazer e o que não fazer ao usar o componente, bem como dicas sobre como criar rótulos.
Biblioteca de padrões
Bibliotecas de padrões são baseadas em componentes. Eles contêm combinações de componentes que ajudam os usuários a realizar tarefas específicas em um site ou aplicativo.
Um bom exemplo disso é o formulário. Este padrão pode reunir componentes como:
- Etiquetas
- Entradas de texto
- Caixas de seleção
- Menus suspensos
- Botões
- Migalhas de pão
- Barras de progresso
- Mensagens de erro
O sistema de design Clarity para VMware é um bom exemplo se você quiser ver como padrões como Formulários são comumente abordados:
Você não encontrará apenas uma representação visual dos estilos e componentes usados para criar o padrão. Você encontrará o que fazer e o que não fazer sobre como apresentá-lo. Tudo, desde a localização até a acessibilidade, também é abordado.
Informações adicionais
Alguns sistemas de design seguem o básico acima. Outros incluem informações adicionais. Por exemplo:
- Partes de codigo
- Diretrizes de conteúdo
- Recursos como modelos, kits de UI e plug-ins
O que você inclui no seu tudo depende do que você e sua equipe mais se beneficiarão. Se houver algo que tornará mais fácil projetar UIs escalonáveis de maneira mais eficaz, pode valer a pena incluir as informações em seu sistema de design.
Exemplos de sistemas de design
Para que os sistemas de design sejam eficazes, eles precisam ser acessíveis e compartilháveis em toda a organização. Isso porque não são apenas web designers e desenvolvedores que usam sistemas de design.
Embora muitas empresas optem por manter seus sistemas de design privados, algumas organizações maiores optam por publicá-los online. Portanto, temos muitos exemplos de sistemas de design ao vivo para referência.
Por exemplo:
Bancada de trabalho é o sistema de design do Gusto:
Pijamas é o sistema de design do Gitlab:
Mochila é o sistema de design do Skyscanner:
Giz de cera é o sistema de design do Freshworks:
Isto é o Atlassiano sistema de projeto:
E este é o sistema de design para o Consórcio da World Wide Web:
Os benefícios dos sistemas de design
Há muitos benefícios em criar um sistema de design para sua organização:
- Eficiência: Estilos bem projetados e componentes e padrões reutilizáveis tornam mais fácil e rápido projetar produtos digitais.
- Qualidade: Reduza erros e inconsistências ao projetar e atualizar seus produtos digitais.
- Clareza: Estabeleça uma linguagem visual unificada para que todos – incluindo os novos contratados – saibam exatamente como traduzir a visão da sua marca em uma interface visual.
- Eficácia: Cada detalhe é bem pensado com antecedência para que você não precise tomar decisões rapidamente ou perder tempo em inúmeras reuniões para obter a adesão de todos.
- Automação: Quando um sistema de design é sincronizado com uma ferramenta como o Figma, as atualizações da IU podem ser enviadas para todo o produto em uma fração do tempo que levaria para fazer manualmente.
- Escalabilidade: Crie produtos melhores que escalam mais rápido, têm ótima aparência e proporcionam aos usuários uma experiência incrível.
- Unificação: Crie uma experiência coesa, consistente e de alta qualidade para seus usuários em cada um de seus produtos e canais digitais.
Como o sistema de design responde efetivamente a todas as perguntas que alguém possa ter sobre o design da UI de um produto, você terá mais tempo para se concentrar em assuntos mais importantes — como lidar com tarefas complexas e refinar a experiência do usuário.
Quando você precisa de um sistema de design?
O que deveríamos perguntar é quando não deveria você usa um sistema de design. Embora existam muitos motivos para criar um sistema de design, há momentos em que o retorno para uma tarefa tão trabalhosa é muito pequeno.
Por exemplo, se você estiver construindo um site para um projeto pessoal, uma pequena empresa ou um empreendedor, talvez não precise de um sistema de design.
Para descobrir isso, você precisará considerar quantas páginas precisa, bem como o potencial de crescimento do negócio e do site. Se o site permanecer mais ou menos do mesmo tamanho e escopo ao longo do tempo, um sistema de design provavelmente será desnecessário.
Você também pode não achar muita utilidade para um sistema de design se trabalhar sozinho. Os sistemas de design são uma ótima maneira de preencher a lacuna entre o design e o desenvolvimento da web. Eles também são úteis para fornecer às equipes digitais (com profissionais de marketing, redatores e outros não designers) uma única fonte de verdade para trabalhar.
Outra coisa a considerar é o orçamento. Se o seu cliente não está oferecendo muito dinheiro para construir um site ou aplicativo, um sistema de design pode ser muito caro e demorado para ser feito. No entanto, isso não significa que você não possa apresentar isso a eles no futuro, à medida que suas necessidades e orçamento mudarem.
Conclusão
A introdução acima aos sistemas de design cobre todos os princípios básicos de que você precisa para começar a usar sistemas de design.
Em suma, um sistema de design é mais do que apenas uma biblioteca de componentes visuais que você usa ao projetar um produto digital. É uma estrutura que detalha a linguagem visual de uma marca e fornece regras e diretrizes sobre como usá-la.
Se você está construindo sites e aplicativos grandes e escaláveis, um sistema de design é essencial atualmente.
