Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode –...

35
Globalcode – Open4education TDC POA 2018 - Leonardo Merlin Design Systems Como, quando e por quê?

Transcript of Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode –...

Page 1: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

TDC POA 2018 - Leonardo Merlin

Design SystemsComo, quando e por quê?

Page 2: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Sono?

Page 3: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Olá, mundo!

Page 4: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Tem Designer disponível sobrando aí?

Page 5: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Fonte: https://techcrunch.com/2017/05/31/here-are-some-reasons-behind-techs-design-shortage/ - 31/05/2017

Times e proporção

https://techcrunch.com/2017/05/31/here-are-some-reasons-behind-techs-design-shortage/
Page 6: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

1:1102012

1:1162017

Page 7: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Consistência e Linguagem

Page 8: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Problemas? Labels

Page 9: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Bootstrap, lembram?

Page 10: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Design System você

Page 11: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

As opiniões apresentadas aqui são do autor e não necessariamente refletem os interesses desta empresa.

Page 12: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Changelog

- em Dez/2014 - Princípios, LibUI, Site...

Page 13: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Changelog (resumido)

- em Dez/2014 - Princípios, LibUI, Site...

- em Ago/2015 - Prefixo css

Page 14: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Changelog (resumido)

- em Dez/2014 - Princípios, LibUI, Site...

- em Ago/2015 - Prefixo css

- (Angular, Vue, React)

Page 15: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Changelog (resumido)

- em Dez/2014 - Princípios, LibUI, Site...

- em Ago/2015 - Prefixo css

- (Angular, Vue, React)

…agora, Design System!?

Page 16: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Design System

Page 17: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

"

principles guides components

"— Yaili de León, Microsoft

Page 18: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

"

designers and developers to build consistent products and experiences

"— Yaili de León, Microsoft

Page 19: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

"

is a product

"— Yaili de León, Microsoft

Page 20: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Modelos de Time

Fonte: https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0

https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
Page 21: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

De uma Lib UI

Page 22: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Modelos de Interação Estados

Para fluxos e comportamentos

Page 23: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

https://www.uxpin.com/studio/ebooks/by UXPin

https://www.uxpin.com/studio/ebooks/
Page 24: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

https://www.designbetter.co/design-systems-handbookby InVision

https://www.designbetter.co/design-systems-handbook
Page 25: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

https://www.amazon.com/Frontend-Architecture-Design-Systems-Sustainable-ebook/dp/B01B6WS868(recomendado por )

Page 26: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

CASE: 1. (problemas)

2. Inventário: cores, tipografia, ícones, grid...

3. Montamos o time de ataque!

4. “Pitch”

5. 1º MVP (4 sprints = 1mês).

6. (sustentação)

Page 27: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Receita Federal Brasileira

“Design System da teoria à prática - um case com aplicações da suíte RFB”— Paulo André

http://assiste.serpro.gov.br/supde/video.php?nome=230638

http://assiste.serpro.gov.br/supde/video.php?nome=230638
Page 28: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Quando?

Diana Mounter - Github (PrimeCSS)Fonte: https://www.youtube.com/watch?v=Hx02SaL_IH0

https://www.youtube.com/watch?v=Hx02SaL_IH0
Page 29: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Lições Aprendidas

Page 30: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Page 31: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Page 32: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Page 33: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Page 34: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Design System você

Page 35: Como, quando e por quê? Design Systems...2019/01/08  · Como, quando e por quê? Globalcode – Open4education Sono? Globalcode – Open4education Olá, mundo! Globalcode – Open4education

Globalcode – Open4education

Obrigado! bit.ly/tdc-ds

http://bit.ly/tdc-ds

Introducao Java Web Globalcode

Introducao Java Web Globalcode

Trilha Agile Coaching - Amazon S3...2018/12/12  · INTRO REVISE Globalcode –Open4education PLAN-DRIVEN FEEDBACK-DRIVEN LEAN CHANGE MANAGEMENT Co-criação da mudança Pessoas primeiro

Trilha Agile Coaching - Amazon S3...2018/12/12  · INTRO REVISE Globalcode –Open4education PLAN-DRIVEN FEEDBACK-DRIVEN LEAN CHANGE MANAGEMENT Co-criação da mudança Pessoas primeiro

Você tem sede de quê? Você tem fome de quê?

Você tem sede de quê? Você tem fome de quê?

Talento, pra quê? Talento, pra quê?

Talento, pra quê? Talento, pra quê?

JPA Passo a Passo - thedevelopersconference.com.br · Suporta herança, polimorfismo. 7 Globalcode –Open4Education Você pode utilizar seu ... > Depois injete o DAO nos seus EJB’s

JPA Passo a Passo - thedevelopersconference.com.br · Suporta herança, polimorfismo. 7 Globalcode –Open4Education Você pode utilizar seu ... > Depois injete o DAO nos seus EJB’s

Entregando Bons Resultados com BDD...Apr 24, 2019  · Behavior Driven Development Behat Mink. Globalcode – Open4education Contexto da Aplicação Arquitetura Infraestrutura Documentação

Entregando Bons Resultados com BDD...Apr 24, 2019  · Behavior Driven Development Behat Mink. Globalcode – Open4education Contexto da Aplicação Arquitetura Infraestrutura Documentação

Trilha Node - Amazon S3 · 2019-07-19 · Globalcode – Open4education Chatbots em Node.js com Bot Framework Alefe Souza Trilha Node.js @alefesouza

Trilha Node - Amazon S3 · 2019-07-19 · Globalcode – Open4education Chatbots em Node.js com Bot Framework Alefe Souza Trilha Node.js @alefesouza

TRANSFORMAÇÃO - Amazon S3...2019/12/02  · transformação digital para mais de 180 mil pessoas Globalcode –Open4education Treinamentos online Globalcode –Open4education Material

TRANSFORMAÇÃO - Amazon S3...2019/12/02  · transformação digital para mais de 180 mil pessoas Globalcode –Open4education Treinamentos online Globalcode –Open4education Material

Java Enterprise De monolito para microserviços · 2019/07/18  · De monolito para microserviços-e algumas descobertas de performance ... Globalcode –Open4education O que vocês

Java Enterprise De monolito para microserviços · 2019/07/18  · De monolito para microserviços-e algumas descobertas de performance ... Globalcode –Open4education O que vocês

Atividades básicas dos Comitês O quê? Como? O quê? Como? O quê? Como? O quê? Como? O quê? Como?

Atividades básicas dos Comitês O quê? Como? O quê? Como? O quê? Como? O quê? Como? O quê? Como?

ou como eu automatizo coisas chatas - Amazon S3 · 2019-05-17 · aprendendo como que se automatiza na vida real ... Trilha: Python. Globalcode – Open4education Então te dão aquela

ou como eu automatizo coisas chatas - Amazon S3 · 2019-05-17 · aprendendo como que se automatiza na vida real ... Trilha: Python. Globalcode – Open4education Então te dão aquela

Globalcode – Open4Education 1 Aguardando o JSF 2.0 Vinícius Rodrigues Nunes.

Globalcode – Open4Education 1 Aguardando o JSF 2.0 Vinícius Rodrigues Nunes.

Trilha Análise de Negócios - Amazon S3 · A Transformação da Análise de Negócios frente às Mudanças de Metodologias Alexandre Xavier / Fernanda Matzenbacher. Globalcode –Open4education

Trilha Análise de Negócios - Amazon S3 · A Transformação da Análise de Negócios frente às Mudanças de Metodologias Alexandre Xavier / Fernanda Matzenbacher. Globalcode –Open4education

Análise de Requisitos, Estimativas e Métricasthedevconf.com/arquivos/TDC2008_RequisitosEstimativasMetricas.pdf1 Globalcode – Open4Education Análise de Requisitos, Estimativas

Análise de Requisitos, Estimativas e Métricasthedevconf.com/arquivos/TDC2008_RequisitosEstimativasMetricas.pdf1 Globalcode – Open4Education Análise de Requisitos, Estimativas

Agile Toolcase - O Que você carrega na bagagem …...2019/11/29  · Globalcode –Open4education Trilha –Management 3.0 e Gestao Ágil Márcia Guarnieri Agile Toolcase - O Que

Agile Toolcase - O Que você carrega na bagagem …...2019/11/29  · Globalcode –Open4education Trilha –Management 3.0 e Gestao Ágil Márcia Guarnieri Agile Toolcase - O Que

5 Por quês - portal.tcu.gov.br · Iniciativa Parceiro técnico Por quê? Por quê? Por quê? Por quê? Por quê? 5 Por quês

5 Por quês - portal.tcu.gov.br · Iniciativa Parceiro técnico Por quê? Por quê? Por quê? Por quê? Por quê? 5 Por quês

Arquitetura Orientada a eventos em ambientes complexos · Arquitetura distribuída Arquitetura Microserviços Volumetria dos dados Responsividade Escalabilidade. Globalcode –Open4education

Arquitetura Orientada a eventos em ambientes complexos · Arquitetura distribuída Arquitetura Microserviços Volumetria dos dados Responsividade Escalabilidade. Globalcode –Open4education

Trilha – Kotlin · 2019. 7. 18. · Globalcode – Open4education Um pouco de história fev/2016 Kotlin 1.0 Spring + Kotlin mai/2017 Android + Kotlin jul/2011 Kotlin é anunciado

Trilha – Kotlin · 2019. 7. 18. · Globalcode – Open4education Um pouco de história fev/2016 Kotlin 1.0 Spring + Kotlin mai/2017 Android + Kotlin jul/2011 Kotlin é anunciado

Trilha Inteligência Artificial Como embarcar uma IA?...2019/07/18  · Globalcode –Open4education Trilha –Inteligência ArtificialComo embarcar uma IA? Luiz Calaça Professor,

Trilha Inteligência Artificial Como embarcar uma IA?...2019/07/18  · Globalcode –Open4education Trilha –Inteligência ArtificialComo embarcar uma IA? Luiz Calaça Professor,

Trilha Análise de Negócios - Amazon S3...2019/10/10  · 8 passos para a melhoria do seu negócio: Globalcode –Open4education Casos de sucesso Transformação de merchandising

Trilha Análise de Negócios - Amazon S3...2019/10/10  · 8 passos para a melhoria do seu negócio: Globalcode –Open4education Casos de sucesso Transformação de merchandising