Dentro de um sistema de design: o que você precisa saber e por quê

Tarif Kahn em UX Planet Seguir 11 de jul · 7 min ler

Se você está prestando atenção ao mundo do design, provavelmente já ouviu falar sobre os sistemas de design. Eles são o último trending topic no mundo do design, talvez para o desânimo (ou deleite) de designers em todos os lugares. “Outra coisa a aprender?” Alguns designers podem chorar, mas os sistemas de design têm grandes benefícios.

Para demonstrar a relevância dos sistemas de design, vamos imaginar um cenário típico ao projetar uma nova interface para um produto.

Para começar, primeiro você reúne os requisitos, conversa com sua equipe, começa a fazer brainstorming e, eventualmente, você se senta e começa a projetar. Mas espere, em que fonte decidimos? Que cor precisamos escolher e qual é o tom que o design quer transmitir? Se eu escolher azul, o tom é diferente de se eu escolher vermelho, decidimos o tom do site? E quanto aos componentes em si, concordamos com as dimensões dos elementos do cartão?

Como você pode ver, quando se trata de projetar produtos, muitas peças diferentes de todo o produto devem ser levadas em consideração.

Este é um dos problemas que os sistemas de design visam resolver.

Além de simplificar o processo de design para todos os envolvidos, os sistemas de design fornecem muitos mais benefícios.

O que é um sistema de design?

Jeremy Keith, um web designer e autor, define um sistema de design como:

“… Engloba bibliotecas de padrões, guias de estilo e quaisquer outros artefatos. Mas há algo mais. Só porque você tem uma coleção de padrões de design não significa que você tenha um sistema de design. Um sistema é um framework. É um livro de regras. É o que te diz como esses padrões funcionam juntos ”.

Nesse contexto, um sistema de design pode ser entendido como o nome de uma infra-estrutura que define as ferramentas e processos completos de um produto. É mais do que as cores, fontes, imagens, layouts e guias de estilo. Um sistema de design é a filosofia e a linguagem que direcionam os designers de produto a criar projetos de maneira intencional.

Benefícios dos sistemas de design

uma. Capacitar desenvolvedores

A implementação da interação com o usuário pode ser um processo lento para os desenvolvedores. Às vezes, os designs não são claros ou há casos de borda que não são abordados. Por exemplo, um designer pode ter apenas uma página projetada, mas o desenvolvedor também precisa dos designs de tela de carregamento e erro. Se o desenvolvedor puder fazer referência ao sistema de design para qualquer um desses elementos de design ausentes, eles poderão implementar códigos com confiança. Isso ocorre porque a origem da verdade do design do aplicativo está no sistema de design, que pode ser visualizado por qualquer pessoa. O desenvolvedor não precisa enviar uma mensagem ao designer para confirmar se o design é a maneira correta de implementar, porque a equipe concordou com os elementos do sistema de design.

b. Centralize o conhecimento

Dependendo de sua equipe e de como o seu produto funciona, o conhecimento de como o design funciona pode estar dentro da cabeça de um membro. A extração desse conhecimento exige que as pessoas perguntem a uma pessoa por sua opinião sobre as decisões de design. Este pode ser um processo tedioso que diminui a produtividade e é arriscado. E se esse membro sair em condições ruins? Seu conhecimento se torna inacessível.

Ao extrair o conhecimento de design das mentes das pessoas para um documento como um sistema de design, você tornou o conhecimento de design facilmente acessível por qualquer pessoa a qualquer momento.

c. Prestígio e marketing para a empresa

Sistemas de projeto são pressionados. Se você criar um sistema de design para sua empresa, abrir o código e escrever sobre ele, você fará com que as pessoas falem sobre você.

A maioria das grandes empresas, como Shopify, Google, IBM, Atlassian, etc., possui seus próprios sistemas de design, que são de código aberto e apresentados de maneira moderna como esta.

Crédito da imagem: atlassian.design

Você precisa de um sistema de design?

Tudo tem suas compensações e construir um sistema de design não é uma exceção. Um dos principais tradeoffs será o custo de oportunidade.

Se você faz parte de um projeto pequeno em que poucas pessoas estão trabalhando no projeto, talvez não seja tempo bem gasto para construir um sistema de design.

Se você faz parte de uma grande empresa com muitas equipes diferentes, todas trabalhando em um único produto, um sistema de design pode ser um ótimo investimento para todos os envolvidos.

Fazer parte de uma equipe grande nem sempre significa que um sistema de design é a resposta certa. Por exemplo, a equipe do Shopify pode estar lamentando sua decisão de construir o Polaris , seu sistema de design pelo motivo explicado neste artigo : “O esforço necessário para construir um sistema de projeto é pequeno se comparado ao esforço necessário para mantê-lo.” o artigo descreve a luta da equipe de design com a manutenção de seu grande projeto, que é o Polaris.

No entanto, se você decidiu construir um, depois de muita deliberação, então veja como proceder.

Como implementar um sistema de design

Imagem: istock.com/chombosan

Passo 0. Obtenha o buy-in da sua organização

O pré-requisito para a construção de um sistema de design para o seu produto fará com que todos em sua organização tenham a ideia. Essa pode ser uma tarefa difícil, pois as grandes empresas são notórias por tomar decisões lentamente.

O primeiro passo para tomar nota de tudo o que você está criando. Isso significa que todas as fontes, ícones, cores, layouts, componentes, cartões e qualquer peça envolvida no design do produto devem ser organizados e reunidos.

Isso facilita a compreensão de suas necessidades, colocando todos os seus ativos em um único local. Parte da construção de um sistema de design está organizando todos os seus ativos para facilitar o acesso.

Etapa 2. Crie princípios para o seu produto

Imagem: Princípios do Shopify Polaris

Qual é a direção do seu produto? Como você deve projetar cada peça? Qual é a intenção de cada elemento?

Criar princípios com os quais sua equipe pode concordar é crucial e um pilar dos sistemas de design. Os princípios podem ser pensados como direções para onde ir com seu design.

Um exemplo de um princípio está no sistema de gerenciamento de conteúdo do Medium . O princípio de Medium para o editor de conteúdo é fornecer uma ferramenta fácil de publicar em vez de personalização.

Imagem: Captura de tela do editor de conteúdo do Medium

Em vez de ter muitas opções para personalizar o texto com cores e tamanhos de fonte infinitos, o Medium escolheu 7 opções principais para o seu texto. Essa é uma decisão deliberada de design que ajuda os escritores a finalizar seu conteúdo mais rapidamente, em vez de personalizar tudo.

Etapa 3. Escolha o idioma e o tom

Tudo visual transmite uma mensagem. Seja uma página em branco com texto em preto, uma página de destino ou um produto empresarial de SaaS, você está comunicando seu idioma e tom com seus recursos visuais.

Imagem: Dinosaur.Design Image: Página de destino para o iPhone XS

Comparando as páginas de destino do dinosaur.design e do iPhone XS, você pode ver qual tom e mensagem cada empresa está tentando transmitir. Dinosaur.design tem cores brilhantes, ilustrações e fontes casuais para dar uma vibe alegre. A página de destino do iPhone XS é escura, com fotos em alta resolução e fontes comerciais que oferecem um tom mais sério e de prestígio.

Etapa 4. Criar Componentes e Padrões

Imagem: Material.io card component De Stock: Estúdio do projeto no projeto do logotipo

Este é o passo que seus desenvolvedores vão se importar. Criar componentes e padrões reutilizáveis em seu sistema de design é a forma final e é o que seus usuários finais verão. Todas as etapas criadas anteriormente levam a esse ponto, que está criando os componentes que serão usados em todo o aplicativo.

Padrões são as instruções de como implementar componentes. Por exemplo, se você tiver um cartão que mostre uma postagem no blog, o padrão pode descrever como estruturar e escrever o título, a legenda, onde a imagem deve ir e orientar a implementação total do cartão.

Pensamentos finais

Os sistemas de design são um grande passo em frente no mundo do design. As empresas que têm um sistema de design podem se posicionar como líderes e colher os benefícios das horas de produtividade salvas, coordenação e marketing.

É importante considerar os prós e contras de investir tempo e energia na criação de um sistema de design.

Se um sistema de design estará ou não por perto durante os próximos 10 anos, não está claro. O que está claro é que eles estão aqui e o impulso não está diminuindo tão cedo.