Design Systems: o que é e como iniciar

“Design System é um produto que serve a outros produtos” Nathan Curtis


Essa é uma descrição bastante comum quando você colocar no Google “O que é design system”. Isso porque descreve bem o que significa.

Quando estamos falando de produto digital (sistemas, sites e aplicativos) é muito comum termos problemas com o que é projetado, o que é programado e o controle de novas funcionalidades – do ponto de vista de estética e interação.

O design system é um conjunto de entregáveis que reúne princípios do produto, biblioteca de componentes e padrões de comportamento. Isso é apresentado em uma documentação e disponibilizado para toda a equipe envolvida no produto, com o intuito de garantir que qualquer envolvido no desenvolvimento desse produto mantenha a uniformidade na entrega de experiência do usuário.

O designer de interfaces – aqui é um misto de disciplinas entre UX e UI – é o responsável por produzir e manter essa documentação.

Basicamente, o trabalho começa com as definições globais do produto e o designer, juntamente com a equipe técnica e gestores do projeto e “finaliza” com a publicação da biblioteca de componentes para o sistema.

Bom… sem mais conceitos e vamos para um entendimento mais prático.

DEFINIÇÃO DE CONCEITOS

Design Systems by NN/g

Produto: sistema, site ou aplicativo. Existe uma diferença entre produto e projeto que é a definição de ciclo de vida. Se você possui algo que será continuado, é um produto. Caso contrário, é um projeto. Geralmente não se cria um design system para um projeto pela quantidade de esforço que é necessário, mas quado se cria para um produto ele é utilizado nos projetos 😉

Princípios: definição de adjetivos e valores que regem a construção dos padrões para o design system.

Componente: é um item de interface que carrega consigo as definições do design system. Existe uma definição do processo de criação de componentes chamada Design Atômico (Brad Frost).

Biblioteca de componentes: é a reunião desses componentes, tanto na documentação (projeto gráfico) quanto nos entregáveis de front-end.

DO PRINCÍPIO AO ENTREGÁVEL

Design Systems em 7 passos

Primeiramente, como todo projeto de design, é necessário definir o escopo, prazos e entregáveis. Um design system precisa ser viável, por isso é sempre bom se perguntar se vale mesmo a pena criar um (isso merece outro post, mas não vamos levantar esse assunto aqui).

Depois de saber quais os limites e as necessidades, é necessário definir os princípios de design que serão seguidos para a criação. Um bom exemplo disso é encontrado nas definições da primeira página das documentações. como o Ant Design.

Depois de definir o escopo e os princípios, é necessário fazer o discovery do produto. Isso significa fazer um inventário do que existe no produto atual e executar processos de documentação de melhorias necessárias.

A próxima fase é a de proposta de componentes. Tem duas formas de fazer isso: sendo original ou baseado em algum já existente. A primeira é muito mais difícil, porém fará seu produto único. Geralmente parte-se de algo pré-existente, um design system como o do Google Merial, por exemplo e se faz adaptações. Se você possui um material de design, como um manual de identidade criado para o produto ou para a empresa, já ajuda muito pois ali estão as definições que você deverá seguir para manter uma consistência.

Essa etapa de criação de componentes é estreitamente alinhada com as expectativas e know how da equipe de front-end que materializará esses componentes, codificando e definindo questões técnicas para seu compartilhamento.

É necessário ter atenção aos detalhes na hora de definir os componentes, pois eles possuem estados, interações e caber no layout final (tendo como referência o design atômico). Essas definições incluem o grid, hovers, tipografia, espaçamentos e cores – resumidamente, o que chamamos de styleguide.

O tempo estimado para construção de um design system é muito variável, pois depende do quanto você precisa criar do zero, o quanto de verba você possui para se dedicar. O importante é que você precisa ter em mente uma coisa, desde o início: quais os ganhos esperados com a criação de um design system para esse produto (ou para a empresa).

CONCLUINDO…

Um design system é muito mais que um projeto, é uma produção de mais um produto que possui todas as fases que um design de produto deve ter, incluindo um P.O para guiar o roadmap. Não deve ser tratado como um projeto isolado, apesar de possuir um processo próprio para construção.

Alguns exemplos de design systems para inspirar

Atlassian //atlassian.design/
Audi UI //www.audi.com/ci/en/guides/user-interface/introduction.html
Governo da Austrália //designsystem.gov.au/
IMB //www.carbondesignsystem.com/

Um repositório para encontrar diversos design systems
//designsystemsrepo.com/design-systems/

2 Comments

  • 29 de outubro de 2018

    Rosalina Pong

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • 29 de outubro de 2018

    Arista Williamson

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Leave A Reply