Machine Translated by Google

Por que
construir um sistema de design
O Guia de Bolso para Equipes de Produto
Machine Translated by Google

Por que
construir um sistema de design
O Guia de Bolso para Equipes de Produto

Copyright © 2017 da UXPin Inc.

Todos os direitos reservados. Nenhuma parte deste texto de publicação pode

ser carregada ou postada online sem a permissão prévia por escrito do editor.

Para pedidos de permissão, escreva para o editor, endereçado “Atenção:

Pedido de Permissões,” para hello@uxpin.com.
Machine Translated by Google

Índice

Os desafios enfrentados pelas equipes de produtos hoje 5

Conclusão 7

Entre no sistema de design 8

A única fonte da verdade 9

O ROI dos Sistemas de Design 9

Construindo o Sistema de Design 11

Recursos recomendados 17
Machine Translated by Google

Autores

Marcin Treder

Desde a fundação da UXPin em 2010, ele ajudou a construir e liderar equipes

de produtos no escritório da Polônia e do Vale do Silício. Anteriormente, foi UX
Manager na Grupa Nokaut, uma plataforma de comércio eletrônico empresarial.
Ele possui um mestrado em Psicologia pela Universidade de Gdansk.

Jerry Cao

Jerry Cao é um estrategista de conteúdo na UXPin, onde ele coloca sua

imaginação excessivamente ativa no papel todos os dias. Em uma vida passada,
ele desenvolveu estratégias de conteúdo para clientes na Brafton e trabalhou
em publicidade tradicional na DDB San Francisco. Em seu tempo livre, ele gosta
de tocar guitarra elétrica, assistir a filmes de terror estrangeiros e expandir seu
conhecimento sobre fatos aleatórios. Siga me no twitter
Machine Translated by Google

Os desafios enfrentados
Equipes de produtos hoje

À medida que uma equipe de produto cresce, seus processos se tornam mais difíceis de

gerenciar.

Sem um fluxo de trabalho ou kit de ferramentas padronizado, as ineficiências da equipe

e as inconsistências acabarão voltando para o produto.

O software geralmente é construído por equipes incrivelmente grandes de

pessoas. O desafio de criar experiências coerentes se multiplica exponencialmente

à medida que mais pessoas são adicionadas à mistura. Com o tempo, não

importa quão consistente ou pequena seja uma equipe, pessoas diferentes

contribuirão com novas soluções e estilos, causando divergências nas experiências.

Construindo uma Linguagem Visual, Karri Saarinen,

Designer principal e criador do sistema de design do Airbnb

Com base no trabalho com milhares de clientes em todo o mundo, vimos quatro

padrões surgirem ao longo dos anos.

Machine Translated by Google

Os desafios enfrentados pelas equipes de produtos hoje 6

1. Inconsistências entre produtos e plataformas

As inconsistências de UX reduzem a eficiência do usuário, o que desvaloriza o

produto.

Especialmente comum em produtos corporativos que abrangem diferentes

pilhas de tecnologia, dispositivos e grupos de usuários, a inconsistência do

produto é quase impossível de resolver até que os fluxos de trabalho da empresa sejam
primeiro abordado.

2. A falta de recursos centralizados leva a problemas de controle de versão

Como equipes de design diferentes usam ferramentas diferentes que nem sempre

se integram, ninguém pode realmente garantir que os recursos certos estejam

sendo usados em projetos em um determinado momento.

Se as ferramentas forem baseadas em desktop, os problemas de controle de versão

tornam-se ainda mais complicados. Os designers devem seguir uma convenção de

nomenclatura estrita, caso contrário, os recursos errados acabarão chegando ao desenvolvimento.

3. Ampliando as lacunas de conhecimento entre as equipes de produto

Sem uma “fonte de ouro” de ativos e melhores práticas, diferentes equipes trabalham

com diferentes diretrizes e suposições. Com o tempo, a inconsistência do produto é

inevitável.

4. Processos ineficientes levam a trabalho repetitivo ou desperdiçado

Sem um kit de ferramentas comum para design e desenvolvimento, soluções

pontuais e trabalho repetitivo drenam a eficiência de uma equipe.

Machine Translated by Google

Os desafios enfrentados pelas equipes de produtos hoje 7

Os ciclos de iteração planejados para 1 a 2 semanas podem exigir 2 a 3 vezes

mais tempo porque os designers se veem criando elementos e páginas comuns

a partir do zero. A ineficiência se multiplica à medida que os designers limitam

esses ativos para transferência e os desenvolvedores codificam novas soluções.

Conclusão

Todos os pontos de dor acima estão interconectados.

Para melhorar a consistência do produto e a eficiência da equipe, ajuda a consolidar

ativos e fluxos de trabalho entre designers e desenvolvedores.

Caso contrário, a dor contínua do design não escalonável continua sendo a realidade.

Quando entrei para a equipe de design do Spotify em 2012, o nível de

inconsistência e fragmentação me chocou. De perto, o tratamento de tipo,

cor, imagens, layout, IA e interações simplesmente não parecia se alinhar

em lugar nenhum. Concluímos que a fragmentação no produto estava

apenas refletindo a fragmentação na equipe, que os designers espalhados

por tantos projetos diferentes, fusos horários e cronogramas concorrentes,

simplesmente não tiveram chance.

Design não escala, Stanley Wood, diretor de design do Spotify

Machine Translated by Google

Entre no sistema de design

Popularizados por empresas como Salesforce e Airbnb, os sistemas de design oferecem

às equipes de produtos uma abordagem reutilizável e baseada em componentes para o

desenvolvimento de produtos.

Um sistema de design pode criar valor em pelo menos dois níveis.

No nível da equipe, pode criar um processo mais simplificado e
previsível que reduz o tempo de projeto e engenharia. No nível
UX, ajuda a fornecer consistência e previsibilidade na interface e
a aumentar a qualidade da experiência geral quando designers e
engenheiros ficam livres para pensar em tarefas de ordem superior.

Vendendo sistemas de design em sua empresa,

Nick Stamas, líder criativo da WeWork

Machine Translated by Google

Entre no Sistema de Design 9

A única fonte da verdade

Um sistema de design é mais do que apenas um guia de estilo ou uma biblioteca de

padrões – é o modelo para o desenvolvimento do produto.

Todos os princípios de design, ativos visuais e padrões são completamente

documentados. Todas as referências de código estão incluídas para cada peça de design.

Como resultado, o design pode escalar junto com o desenvolvimento.

O ROI dos Sistemas de Design

1. Maior velocidade e tempo de lançamento no mercado

Um kit de ferramentas baseado em componentes acessível em um só lugar

permite um processo Agile mais segmentado, acelerando os lançamentos sem

comprometer a qualidade.
Machine Translated by Google

Entre no Sistema de Design 10

2. Aumento do valor do produto

Os componentes reutilizáveis são construídos uns sobre os outros, o que cria uma

aparência, sensação e comportamento consistentes para o produto. À medida que a

consistência aumenta, também aumenta a eficiência do usuário.

3. Maior colaboração e compartilhamento de conhecimento

Como o sistema de design compartilhado inclui ativos e convenções aprovados ,

designers e desenvolvedores são mais autônomos sem fechar em silos.

4. Menos tempo e dinheiro desperdiçados

Como designers e desenvolvedores não ficam presos em perguntas redundantes ou

trabalho repetitivo, eles ficam livres para projetos que

entregar mais valor de negócio.

Uma economia anual estimada em mais de US$ 1,5 milhão ou 21,25% de economia

de tempo para um orçamento anual típico de desenvolvimento de produto (com base

em uma equipe onshore/ offshore de 100 recursos)

O que é um sistema de design e quais são seus benefícios?

Projeto 202
Machine Translated by Google

Construindo o Sistema de Design

Aqui está a verdade simples: você não pode inovar em produtos sem primeiro

inovar a maneira como os constrói.

A forma como construímos, Karri Saarinen,

Designer principal e criador do sistema de design do Airbnb

1. Crie seu inventário de interface Para

identificar rapidamente as inconsistências atuais, comece criando um inventário de

tudo na interface do usuário do produto: paleta de cores, estilos de texto e padrões

de interface do usuário. O inventário é sua ferramenta mais forte para vender a

necessidade de um sistema de design.

1. Revise a interface e o código e liste todas as cores e textos

estilos que você pode encontrar.

2. Faça capturas de tela de padrões de IU ou copie padrões de seu

projetos. Coloque todas as capturas de tela em um só lugar.

Machine Translated by Google

Construindo o Sistema de Design 12

3. Categorize seus padrões por sua finalidade (por exemplo, botões, formulário

campos, navegação etc).

4. Marque inconsistências entre os padrões e crie um pré

sentação para sua equipe.

2. Obtenha a adesão da equipe

Ao apresentar as inconsistências refletidas em seu inventário de interface,

enfatize o ROI do sistema de design.

Os engenheiros respondem bem ao controle de fonte, modularidade aprimorada

e maior autonomia. As partes interessadas nos negócios respondem bem ao

tempo mais rápido de lançamento no mercado, maior valor do produto e

menos recursos desperdiçados.
Machine Translated by Google

Construindo o Sistema de Design 13

3. Defina seus princípios de design

Antes de construir seu novo sistema, crie um conjunto de princípios
gerais para uma experiência coerente. Que valores universais os
designers devem ter em mente?

Crédito da foto: Os princípios de design por trás do Salesforce Lightning

Use seus princípios como uma heurística de revisão para cada novo
padrão proposto para o sistema de design e cada novo projeto.
Machine Translated by Google

Construindo o Sistema de Design 14

4. Unifique seu design visual

Pense nos padrões mais fundamentais e repetitivos em sua
interface.

Cores, estilos de texto e ícones provavelmente virão à mente primeiro.

Talvez também alguns padrões interativos (passe o mouse sobre elementos
clicáveis), propriedades visuais de borda ou talvez animações? Discuta
com a equipe para decidir qual versão desses elementos será canônica. Então,
documentá-los como parte do sistema.

Crédito da foto: Nosso sistema de design interno criado no UXPin.

5. Crie sua biblioteca de componentes interativos

Depois de ter a base bem definida, comece a adicionar seus padrões de
interface aprovados à biblioteca compartilhada. Mantenha-os atualizados
e incentive a equipe a usá-los em todos os projetos subsequentes - sua
eficiência e consistência melhorarão drasticamente.
Machine Translated by Google

Construindo o Sistema de Design 15

Por fim, planeje um processo de sugestão de novos padrões para

garantir que todos na equipe de produto tenham voz na evolução
do sistema de design.

Crédito da foto: Uma biblioteca de sistemas de design interativo no UXPin

Machine Translated by Google

Sistemas de Design em UXPin

Uma plataforma para design e desenvolvimento consistentes.

SISTEMAS
PROJETO
DE

Linguagem de design Padrões de IU Documentação Automatizada

Sincronize o Sketch com o UXPin para Dimensionar projetos de forma consistente com A documentação é sincronizada em todos os lugares

uma linguagem de design consistente: fontes, Símbolos e componentes interativos. e viaja com elementos da biblioteca.

cores, ícones, ativos e muito mais.

Design modular Uma fonte de verdade Documentação indolor

e o desenvolvimento para todos e mão de desenvolvedor

Escale rapidamente com o sistema de design Feche suas lacunas de conhecimento. Elimine o trabalho ocupado. Gerar estilo
bibliotecas. Formalize seu design e código guias, especificações e documentação.
convenções.

Minha produtividade e a produtividade do desenvolvedor aumentaram.

Eles adoram poder colaborar e mover-se rapidamente para um poderoso
Tracy Dendy experiência.
HBO

Para agendar uma demonstração, ligue para +1 (855) 223-9114 ou envie um e-mail para sales@uxpin.com
Machine Translated by Google

Recursos recomendados

Nathan Curtis

Líderes e gerentes de sistemas de design

Os Princípios de Projetar Sistemas

O que seus sistemas de design fornecerão?

Contribuições para sistemas de design

Controle de qualidade de componentes em sistemas de design

Padrões ÿ Componentes

Sistemas de cores claras e escuras

Projetos de referência para sistemas

Tokens em Sistemas de Design

Botões em sistemas de design

Cor em sistemas de design

Escolher peças, produtos e pessoas: uma atividade de equipe para iniciar um sistema de design

Dimensionando corretamente o retângulo: lutando contra a hierarquia em sistemas de design

Um Design System não é um projeto, é um produto servindo produtos

Reduza, Reutilize e Recicle

Alcance de um sistema de design

O Workshop de Corte de Componentes

Balanceamento de plataformas em um sistema de design

Brad Frost

Projeto atômico: o guia on-line

Machine Translated by Google

Recursos recomendados 18

Dan Mall

Pesquisando Sistemas de Design

Vendendo sistemas de design

Cozinhar com sistemas de design

Nós trabalhamos

Vendendo um sistema de design em sua empresa

O sistema de design de plasma

Força de vendas

Sistemas de design de vida

O Lightning Design System é a próxima geração de guias de estilo de vida

Apresentando as operações do sistema de design

React JS e o Lightning Design System

Airbnb

Operações de design no Airbnb

Construindo uma Linguagem Visual

A maneira como construímos

Spotify

Design não escala

GE

O sistema de design Predix

intuito

Visão geral do sistema de design Intuit

Machine Translated by Google

Recursos recomendados 19

Tecnologias Finais

Criação e dimensionamento de sistemas de design corporativo

Belas costuras: criando uma experiência coerente em todos os produtos

Outro

Como construir um sistema de design

Sistemas de Design em 2016

O estado atual dos sistemas de design

Sistemas de Design e Lei dos Correios

Como os designers podem usar o teste de unidade para criar um design resiliente e feliz

Sistemas

O que é Design Operations e por que você deveria se importar?

Workshops de componentes: nosso golpe duplo para dar início a um novo design

Sistema

UX Orientado a Objetos

Os sistemas de design mais emocionantes são chatos

O sistema de design de pilha completa

Machine Translated by Google