Design System: Dominando o Design at Scale
•
5 gefällt mir•1,386 views
O documento discute a importância de se ter um design system para organizar e padronizar os elementos de design de uma empresa de forma a facilitar o trabalho de designers e desenvolvedores. Ele explica o que é um design system, quais são seus componentes e como ele pode ajudar a melhorar a colaboração entre times e agilizar o processo de design. Também aborda mitos comuns sobre design systems e apresenta exemplos de sistemas bem-sucedidos.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Design System: Dominando o Design at Scale
Ähnlich wie Design System: Dominando o Design at Scale (20)
Design System: Dominando o Design at Scale
- 2. Design System Dominando o Design at Scale.
- 3. Who amI? Guilherme Gonzalez Eu sou um designer de produtos, passei por diversas startups, agências de publicidade e algumas multinacionais. Amo trabalhar com o desenvolvimento de produtos que melhoram a vida das pessoas e geram novos negócios. Meu LinkedIn:
- 4. O que é um Design System?
- 6. Manual da Marca da Nasa de 1970
- 7. Guia da Marca da MasterCard versão de Jul/2016
- 9. Material Design uma linguagem unificada de Design Visual para Interfaces criada pela Google em 2014
- 10. VOZ & TOM
- 11. voiceandtone.com / Site da Mailchimp explicando todos os tons de voz de mensagens e formas de se posicionar.
- 13. Semantic UI - Biblioteca de Componentes de Interface de fácil uso e aplicação.
- 14. Um Design System é tudo isso e pode ser muito mais!
- 15. Design System não é um projeto, é um produto servindo outros produtos. NATHAN CURTIS - EIGHTSHAPES
- 16. Colaborar não é colar post-it’s na parede, é o comprometimento do time inteiro na construção de um produto de qualidade
- 17. Porém, se você trabalha em uma empresa muito grande com muitos produtos, gerenciar o trabalho pode ser muito cansativo.
- 19. Embora designers sejam responsáveis pelas decisões de design, eles não tem total controle sobre os produtos.
- 20. Vamos ver como funciona na prática:
- 21. O designer decide mudar a cor e borda de um botão na interface de um botão Esta atualização de design é compartilhada com o desenvolvedor por uma especificação de interface O desenvolvedor atualiza no código, coloca em homologação e notifica o designer. O designer pode ver o resultado final, aprovar ou reprovar ou mandar novos ajustes para o desenvolvedor O QA precisa fazer verificação se não quebrou nenhuma página para subir em produção.
- 22. Tudo parece correr bem, certo?
- 23. Mas ao analisar calmamente, vemos diversas armadilhas nesse processo.
- 24. O designer depende do desenvolvedor para uma atualização de estilo. Logo, ele fica estagnado até o desenvolvedor atender ele.
- 25. Atualizar uma variável no CSS não consome muito. No entanto, o tempo necessário para fazer isso significa menos tempo para um desenvolvedor trabalhar em algo valioso para a empresa.
- 26. Como utilizamos um gerenciador estilo o Jira, essa alteração significa mais uma tarefa no backlog, que pode implicar em atrasos ou queda de performance de um time.
- 27. De um ponto de vista geral, esse tempo perdido pela empresa também atrasa a entrada no mercado de seus produtos
- 28. Hora de corrigir isso! 💪
- 29. Specs de Interface (Zeplin?)
- 30. #SQN
- 31. Páginas ou Telas
- 33. Faça a sua pesquisa com usuários.
- 35. Ter uma visão clara irá ajudar a alinhar os esforços do seu time
- 36. Trazendo os designers, engenheiros e stakeholders para debaixo de um único objetivo.
- 37. Em comum acordo, todos precisam definir os princípios de design que devem guiar suas decisões de design.
- 39. #1: Solitário Um modelo solitário em que uma equipe disponibiliza um sistema parcial, mas com esforços voltados principalmente para as necessidades das equipes.
- 40. #2: Centralizado Uma única equipe central de projeto produz e suporta um sistema usado por outros como parte de seu trabalho.
- 41. #3: Federado Alguns os times podem contribuir com um único sistema central, que é consumido por todos os times da empresa.
- 42. Mitos de um Design System
- 44. Os designers muitas vezes acabam criando soluções personalizadas para melhorar áreas distintas de um produto. Com um Design System, novas soluções podem ser criadas e inseridas no sistema, tornando essas melhorias disponíveis para todos os times e produtos de uma única vez. Mito #1
- 46. Os componentes de um Design System são interdependentes. Isso significa que quando uma alteração é feita em um local, a alteração será herdada em todo o sistema. Isso torna as atualizações de estilo com um esforço quase trivial, mas muito maiores no impacto final. O que uma vez foi semanas de trabalho, agora pode ser realizado em uma tarde. Mito #2
- 48. Um Design System é vivo, o que significa que vai exigir manutenção e melhorias contínuas conforme as necessidades. Como seu aplicativo é composto de código 100% reutilizável, o aplicativo herda quase que automaticamente as melhorias no sistema, diminuindo o esforço para manter o aplicativo. Esse é o poder de dimensionamento que um Design System oferece. Mito #3
- 49. Alguém usando o Bootstrap ou Foundation? Essas coisas são ótimas. O design responsivo é difícil. O design da Web com vários dispositivos é difícil. E aqui estão essas soluções, esses UI Kits Tools, que podemos costurar da maneira que quisermos. Brad Frost - Atomic Design
- 50. Atomic Design é uma abordagem proposta pelo Brad Frost para reimaginou a forma de trabalho de um designer ao pensar em sistemas. Quebrando os elementos de uma tela até o mínimo átomo possível.
- 51. Mas Atomic Design não é um Design System!
- 52. Atomic Design é um princípio muito similar, mas não é o final. Design System não é uma biblioteca de símbolos no Sketch ou Adobe XD
- 53. Design System é formado de uma série de componentes codados, a partir de semânticas de design.
- 54. Uma biblioteca de componentes base compartilhada com designers e desenvolvedores, que permite que os desenvolvedores construam páginas partindo de direcionamentos, sem perder a qualidade do design. Acesso aos Laudos Digite seus dados para acessar seus laudos Esqueci minha senha Digite aqui o seu e-mail Seu e-mail Digite aqui sua senha Sua senha Lembre-se de mim ENTRAR
- 55. Legal, mas como funciona essas Decisões de Design?
- 56. Ferramenta de Design Gerador de Design Tokens XML JSON CSS SassStylusJs Product 1Product #1 Product #2 Product #3 Product #4 Product #5 Transmite Dados em YAML Tech Agnostic Tech Spec Best Practice Security (OWASP) Scripts Componentes
- 57. Design Systems estão criando a API para design. Isso nos permitirá novos métodos e maneiras de trabalhar. Karri Saarinen - Airbnb
- 58. Carbon Design System - IBM
- 59. Lightning Design System - Salesforce
- 60. Airbnb Design
- 61. Healthy Design System - Dasa
- 63. Mas final, como é formado um Design System?
- 64. Fluxo de Design System Automatizado
- 66. O que? Button Card Primary Product Small Focus Color Font Brand Weight Primary Bold Semântica Variável Regra Semântica Space Inline Medium Input Search Disabled Tokens Componentes
- 67. Tokens Aa 12px Componentes BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON Button Primary - Brand Button Error - Base Button Sucess - Base Button Secondary - Brand Button Primary - Outlined Button Secondary - Outlined BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON Busca color: $color_brand_primary; font-weight: $weight_light; margin-right: $space_m; <button class="button small primary”>… <div class=“card product focus”>… <input class=“search disabled”>… Aurora Boreal BUTTON Regra Semântica
- 68. Pergunta Difícil
- 69. Eu preciso de um Design System? 🤔
- 70. Se seu produto já existe, existe um exercício muito útil.