O Design System já é uma realidade em grandes empresas porque acelera o processo de design e preenche a lacuna entre as equipes envolvidas na construção de um produto final. Confira nessa apresentação o que está faltando para o seu time de designers, desenvolvedores e gerentes de produto ser mais rápido e ágil e coloque em prática os passos inicias dessa aplicação.

1. DESIGN SYSTEM
Criando padrões de design para
tomadas de decisões mais alinhadas

2. Design System é um conceito que está cada vez mais popular, despertando
muito interesse na agenda dos executivos das grandes corporações.
● É uma coleção de componentes gráficos reutilizáveis,
padrões de design e guias de estilo que definem uma
linguagem visual comum para equipes de produtos.
● Acelera o processo de design e preenche a lacuna
entre as equipes envolvidas na construção de um
produto final com padrões gráficos claros.
Não é um simples guia de estilo ou uma biblioteca de padrões;
é muito mais.
Entenda o que é Design System, por que ele é fundamental em
sua estratégia de User Experience (UX) e quais são os passos
iniciais para implementar na sua empresa!

3. Design
System
● A diferença está nos padrões e na documentação que acompanha os ativos.
● Os sistemas de design estão sempre evoluindo e a maneira como o time
compartilha e incentiva a adoção de novas iterações também evolui.
● As equipes precisam acessar uma única fonte que permita uma linguagem de
interface do usuário escalável e diretrizes de UX simplificadas.
● A criação de uma biblioteca de padrões de design, regras e diretrizes de UX evita
inconsistências nos pontos de contato da marca em vários canais e plataformas
≠ um guia de estilo ou
biblioteca de padrões
À medida que o número de dispositivos, navegadores e ambientes
continua a aumentar, a necessidade de criar sistemas de design de
interface ponderados e deliberados fica mais aparente.

4. Para quem serve
o Design System?
● Designers: divide o processo de
design em partes menores,
mais fáceis de trabalhar, gerenciar e
alterar.
● Desenvolvedores: para que tenham
uma visão clara de como criar os
componentes necessários para manter
os estilos unificados.
● Proprietários / Gerentes
de produtos: a abordagem baseada
em componentes torna a solicitação
de equipes de desenvolvimento para
elementos adicionais da página um
processo super fácil.

5. 1O Design System torna todo o processo
mais eficiente: planejamento, design,
teste e codificação. Isso elimina o
desperdício de tempo.
Menor tempo de
colocação no mercado 2 O Design System facilita o acompanhamento
das escolhas dos seus usuários e garante
que todos os produtos/serviços usem
apenas elementos UX que eles preferirem.
Melhor experiência
e satisfação do cliente
3Um documento padronizado minimiza
falhas de comunicação e mantém
todos na mesma página. Esse fluxo de
trabalho melhora a comunicação entre
designers e desenvolvedores pela troca
de conhecimento e experiência.
Melhor
comunicação interna 4 Seus clientes esperam excelência em todos
os produtos/aplicativos/sites que você entrega.
Ofereça qualidade e usabilidade familiar em
cada produto usando componentes idênticos.
Consistência em
todos os produtos
7 razões para criar um Design System

6. 5A atualização do mesmo bug em produtos
diferentes pode ser irritante e demorada.
Com um Design System, você atualiza uma
vez e preenche todas as ocorrências.
Menos problemas de
controle de versão
6 Com um design modular e reutilizável, os
profissionais têm tempo e liberdade para criar
novos recursos. Em projetos modulares, apenas
uma área precisa ser atualizada e pode ser
testada em um local, em vez de verificar,
atualizar e testar páginas individuais.
Projetos modulares
e reutilizáveis
7Quando um novo recurso é necessário,
o designer pode copiar o que precisa e
o desenvolvedor pode construir com
facilidade, pois código e teste são
integrados ao sistema de design.
Mais eficiência para
criar novos recursos
7 razões para criar um Design System

7. Design
System
e UX
● Reúne contribuições que garantem
qualidade, consistência e padrões.
● Facilita oficinas e sessões de
trabalho colaborativo para
identificar “como é a aparência”,
reconhecer inconsistências, saber o
que fazer e não fazer etc.
● É um hub onde todos os
envolvidos podem relatar e
visualizar bugs e problemas a
serem resolvidos.
● Auxilia na criação da cultura
centrada no usuário.

8. Ebook DESIGN SYSTEM:
Criando padrões de design para
tomadas de decisões mais alinhadas
Que tal baixar o ebook “Design System: Criando padrões
de design para tomadas de decisões mais alinhadas”?
Você poderá se aprofundar no assunto para engajar
sua equipe e implementar uma estratégia ainda mais
assertiva na sua empresa!
Baixe aqui!

9. 1Revise todos os ativos digitais e materiais de
referência existentes. O objetivo final é criar
um guia universal e uma biblioteca de recursos.
Avalie a atual interface do usuário
e observe inconsistências 2 E aproveite para destacar os
bônus de eficiência em usar
um Design System centralizado.
Junte toda
a equipe
3Identifique os tons para cada cor usada
repetidamente e escreva diretrizes sobre como
usá-las. Isso inclui cores de marca primárias,
mas também preste atenção nas secundárias.
Escolha a paleta
de cores 4 Revise e finalize suas escolhas tipográficas.
Se você já possui um guia de estilo, a maior
parte do trabalho está feito. Caso contrário,
busque um modelo pronto, disponível na web.
Revise os
elementos tipográficos
7 passos para construir seu próprio Design System

10. 5Um Design System bem
feito permite que você
simplesmente arraste e
solte componentes visuais
no protótipo. Quanto mais
ativos, mais rápido será o
seu fluxo de trabalho.
DICA: Não esqueça de
incluir trechos de código
que os desenvolvedores
possam precisar. Isso é uma
ajuda enorme durante o
desenvolvimento.
Recursos de
design gráfico
6 Por fim, inclua uma biblioteca de padrões de todos os seus
elementos de design comuns, especialmente os interativos.
DICA: Não se esqueça, mais uma vez, de incluir trechos de
código e qualquer outra documentação de desenvolvimento.
Inclua uma biblioteca
de padrões
7Carregue os elementos da interface do usuário em um documento do
Design System. De preferência, em um lugar conveniente e facilmente
acessível. Use uma plataforma criada para isso, onde tudo o que você
precisa fazer é inserir seus componentes no espaço apropriado.
Aloje seu Design System
7 passos para construir seu próprio Design System

11. BÔNUS: ESCOLHA AS
FERRAMENTAS CERTAS!
● A MJV aplica conceitos de Ágil e Lean em
tudo o que faz. Isso nos permite trabalhar
de maneira bastante flexível e interativa,
resultando em entregas mais eficientes e
produtos com mais alinhamento estratégico.
● O primeiro passo de todos os nossos
projetos é Design Thinking. A abordagem
criativa que soluciona problemas
envolvendo experimentação contínua ao
longo das suas quatro fases: imersão,
análise, ideação e prototipagem.
Esse é o nosso DNA e o nosso jeito de
fazer. E casa perfeitamente com
empresas que veem a inovação como um
caminho a percorrer e valorizam o design,
mas não querem perder tempo ou
dispender muito dinheiro para a criação
de produtos e serviços sempre belos,
funcionais e que proporcionam as
melhores experiências aos clientes.
Você está pronto para entrar no
maravilhoso mundo do Design System?
Como podemos ajudar?

12. www.mjvinnovation.com
Mauricio Vianna, CEO
mvianna@mjvinnovation.com
Ysmar Vianna, Chairman
yvianna@mjvinnovation.com
Atlanta Houston Rio de Janeiro Sao Paulo Alphaville Curitiba London Paris Lisbon Rome