Transferir como PDF, PPTX
Carregado porGuilherme Gonzalez
Design System: Dominando o Design at Scale
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.
Design System: Dominando o Design at Scale
- 2. Design System Dominando oDesign at Scale.
- 3. Who amI? Guilherme Gonzalez Eu souum 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?
- 5.
- 6. Manual da Marcada Nasa de 1970
- 7. Guia da Marcada MasterCard versão de Jul/2016
- 8.
- 9. Material Design umalinguagem unificada de Design Visual para Interfaces criada pela Google em 2014
- 10.
- 11. voiceandtone.com / Siteda Mailchimp explicando todos os tons de voz de mensagens e formas de se posicionar.
- 12.
- 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.
- 18.
- 19. Embora designers sejamresponsáveis pelas decisões de design, eles não tem total controle sobre os produtos.
- 20. Vamos ver comofunciona na prática:
- 21. O designer decidemudar 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 correrbem, certo?
- 23. Mas ao analisarcalmamente, vemos diversas armadilhas nesse processo.
- 24. O designer dependedo desenvolvedor para uma atualização de estilo. Logo, ele fica estagnado até o desenvolvedor atender ele.
- 25. Atualizar uma variávelno 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 gerenciadorestilo 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 pontode vista geral, esse tempo perdido pela empresa também atrasa a entrada no mercado de seus produtos
- 28. Hora de corrigirisso! 💪
- 29. Specs de Interface(Zeplin?)
- 30.
- 31.
- 32.
- 33. Faça a suapesquisa com usuários.
- 34.
- 35. Ter uma visãoclara irá ajudar a alinhar os esforços do seu time
- 36. Trazendo os designers, engenheiros e stakeholderspara debaixo de um único objetivo.
- 37. Em comum acordo, todosprecisam definir os princípios de design que devem guiar suas decisões de design.
- 38.
- 39. #1: Solitário Um modelosolitário em que uma equipe disponibiliza um sistema parcial, mas com esforços voltados principalmente para as necessidades das equipes.
- 40. #2: Centralizado Uma únicaequipe central de projeto produz e suporta um sistema usado por outros como parte de seu trabalho.
- 41. #3: Federado Alguns ostimes podem contribuir com um único sistema central, que é consumido por todos os times da empresa.
- 42. Mitos de um DesignSystem
- 43.
- 44. Os designers muitasvezes 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
- 45.
- 46. Os componentes deum 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
- 47.
- 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 oBootstrap 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 Designnã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 é formadode uma série de componentes codados, a partir de semânticas de design.
- 54. Uma biblioteca decomponentes 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 comofunciona essas Decisões de Design?
- 56. Ferramenta de Design Geradorde 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ãocriando 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.
- 61. Healthy Design System- Dasa
- 62.
- 63. Mas final, comoé formado um Design System?
- 64. Fluxo de DesignSystem Automatizado
- 65.
- 66. O que? Button Card Primary Product Small Focus Color Font Brand Weight Primary Bold Semântica Variável Regra Semântica SpaceInline 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.
- 69. Eu preciso deum Design System? 🤔
- 70. Se seu produtojá existe, existe um exercício muito útil.
- 71.
- 72.
- 73.