Principles and dimension of a design system
•Télécharger en tant que PPTX, PDF•
0 j'aime•58 vues
Talk apresentada para o time da empresa Sisand, logo após de ter finalizado o curso do Grande Aurelio Jota - youseSeguros(descanse em paz), o bootcamp foo orquestrado pela escola How Education e logo após o término do curso vi grande necessidade de repassar o conhecimento adquirido para o time, realizei então uma rápida enquete para saber se todos conheciam o conceito e para minha surpresa ninguém conhecia, me prontifiquei então a repassar o que havia aprendido para todos e iniciarmos a montagem do Design System, foi analisado as telas atuais aonde o sistema opera e detectado várias inconsistências no layout, temos também a necessidade de deixar o design escalonável para ter mais agilidade nas entregas deixando o designer incubido de entender realmente o problema/requisição gastando mais tempo em pesquisas e conversar com os usuários, e deixando ágil a confecção de telas, todo o processo foi feito através de cocriação com a equipe pois todos precisavam estar alinhados em qual etapa o seu trabalho era impactado. Foi um grande aprendizado e pude fixar melhor todo o conteúdo abordado no curso. Se fosse resumir em uma palavra todo o aprendizado seria: COCRIAÇÃO, pois só mantendo todo o time alinhado sobre as decisões de design + validação do que é possível ou não fazer entregamos soluções voltadas ao negocio e com mais valor para o usuário final. “Design System não é um projeto, é um produto servindo outros produtos.”
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Principles and dimension of a design system
Similaire à Principles and dimension of a design system (20)
Dernier
Dernier (9)
Principles and dimension of a design system
- 1. Design System - Vision conjunto de padrões estabelecidos consensuais que serve de instrumento de comunicação entre várias pessoas que estão desenvolvendo um produto digital.
- 2. 1. Design Operations 2. Design Ops 3. Design System Ops 4. Design System 5. Principles 6. Style Guides 7. Pattern Libraries 8. Pattern Discovery
- 6. Design Ops
- 8. Why do that? ● Velocidade: Aumentando a velocidade de exigência para entrega; ● Otimização: remover impedimentos, diminuir humanos (recursos / despesas); ● Responsabilidade: Seja a autoridade final para o código que você desenvolve como engenheiro; ● Foco: Como você está fazendo mais por linha de código, é necessário reduzir a quantidade de linhas de código criadas, o que se traduz também no número de recursos / histórias pelos quais você é responsável. (isso limita a otimização). Arquiteturas como microsserviços ajudam no outro lado;
- 12. “Design Systems are creating the API for design. This will enable us with new methods and ways of working.” Design Lead - Airbnb
- 18. Principles - Vision Manter constantemente esses princípios básicos em mente para tomada de decisões mais concisas para desenvolvimento do produto/sistema.
- 19. Principles ● Brand ● Voice and Tone ● Design ● Development ● Product ● Customer Experience
- 20. Brand (5 itens que transmitem propósito da marca) ● Confiança ● Agilidade ● Segurança ● Consistência ● Facilidade de Uso/Usabilidade
- 21. Voice and Tone (5 itens que transmitem propósito do texto e tom de voz) ● Utilizar sempre em primeira pessoa ● Amigável ● Didático ● Claro e Direto ● Coerente
- 23. Development (5 itens que transmitem propósito do desenvolvimento) ● Modular ● Ágil ● Escalável ● Teste unitário ● Performance
- 24. Design (5 itens que transmitem propósito do Design) ● Simplicidade ● Consistência ● Moderno ● Modular ● Organizado
- 25. Design (5 itens que transmitem propósito do Design) ● Simplicidade ● Consistência ● Moderno ● Modular ● Organizado
- 26. Product (5 itens que transmitem propósito do produto) ● User First ● Fluxos Coerentes ● Realizar a melhor solução para a dor do cliente ● Sistema Ágil ● Tratamento de erros ● Definição de cada persona do sistema
- 27. Customer Experience (5 itens que transmitem propósito da experiência) ● Experiência UAU, TOP ● Gamification ● Ilustrações e Motion ● Atalhos ● Comunicação Linear interno e externo
- 28. Style Guides estabelece e reforça o estilo dos layout para melhoria da comunicação
- 29. Style Guides ● Identity ● Illustration ● Imagery ● Microcopy ● Design Tokens
- 30. Pattern Libraries code standards documents and content style guides
- 31. Pattern Libraries ● Ilustrations and Icons ● Photos and Videos ● Components ● Templates ● Experiences
- 33. Pattern Discovery Encontre todas as soluções gerais repetíveis que podem ser usadas em situações diferentes. Exclua inconsistências. ● Cut-up elements ✂️ ● Group by function 👫👭👬 ● Do's and Dont's ✅⛔️ ● Tasks 📝
- 35. 2. Group by functions
- 36. 3. Do's and Dont's
- 37. 4. Tasks
- 38. Design system 1. Cards 2. Buttons 3. Lists 4. Menus 5. Tabs 6. Sections 7. Breadcrumb 8. Collapse 9. Foms 10. Dropdown 11. Modal 12. Notification 13. Pagination 14. Search 15. Navs 16. Navbar 17. Popover 18. Tooltips
Notes de l'éditeur
- A DigitalOcean estará presente e sua equipe poderá encontrar valor ao se reunir com um amplo grupo de pessoas interessadas em cultivar uma mentalidade operacional para ampliar o valor de suas conjunto de padrões pre estabelecidos consensuais e quer serve de instrumento de comunicação entre as varias pessoas q estão desenvolvendo um produto digital, de projeto. Esperamos ver você lá!
- a definição funciona melhor quando é iterativa.
- Há várias maneiras de analisar operações de design (DesOps), mas provavelmente a mais importante é como uma forma de mapear o trabalho de design em relação à mentalidade e aos objetivos das operações do desenvolvedor (DevOps). Como uma pessoa recentemente me disse recentemente, o DevOps foi criado como uma forma de remover o QA e o SysAdmin da equação de operações. Os desenvolvedores possuíam seu próprio controle de qualidade, além de fornecerem meios e autoridade para implantar seu código diretamente no (s) sistema (s) de entrega.
- https://labs.spotify.com/2014/03/27/spotify-engineering-culture-part-1/
- https://medium.com/design-contaazul/como-come%C3%A7amos-a-estruturar-ux-writing-na-conta-azul-com-um-guia-de-reda%C3%A7%C3%A3o-5dd516315ee3
- A Design Systems Ops é uma pessoa que faz parte de uma equipe de sistemas de design, que precisa entrar no lugar do designer e ter uma ideia do que está tentando conceituar. Ao mesmo tempo, o Design Systems Ops precisa entender os requisitos de engenharia e definir métodos que ajudarão no envio e dimensionamento do Design System. De certa forma, um Design Systems Ops é o tradutor entre esses dois mundos.
- Ds - conjunto de padrões pre estabelecidos consensuais e quer serve de instrumento de comunicação entre as varias pessoas q estão desenvolvendo um produto digital, o objetivo de se estabelecer um design system é justamente estreitar essa relação e criar um idioma em comum para que a equipe se comunique de forma mais clara
- Princípios guiam toda equipe a cada decisão seja de design, desenvolvimento, suporte, ela serve como uma north star a sempre se perguntar se os princípios definidos no início estão sendo cumpridos. A importância de definir uma north star
- They're specific BAD (Generic): "Simple. Enjoyable. Useful." Good (Specific): "Lagom. Content First. Do Less." They're actionable BAD (Generic): "Make It Clear." Good (Specific): "Only One Number 1 Priority." They're impressionable Between 3-5 words Acronyms help Display them in team rooms and design critiques They have a point of view Tips: Thinking about tension points and don't simply put a positive against a negative. For example, "Beautiful over Ugly" is not a useful principle. "Appropriate over Consisten" is a stronger principle. They're Living They're not static and can evolve based on new discovery, tension points, etc. http://bradfrost.com/blog/post/atomic-web-design/
- https://designsystemsrepo.com/
- Um Design System bem empregado no desenvolvimento aumenta a qualidade das interfaces e consequentemente melhora a interação humano-computador. As bases de um Design System são padronizar e escalar (ganhar escala). Como consequência o consumidor aprenderá mais rápido a "usar" a Interfacecompletando tarefas mais rapidamente e de forma assertiva. Tornando, assim, a experiência única.
- A DigitalOcean estará presente e sua equipe poderá encontrar valor ao se reunir com um amplo grupo de pessoas interessadas em cultivar uma mentalidade operacional para ampliar o valor de suas equipes de projeto. Esperamos ver você lá!
- Dinâmica: escrever 3 a 5 principais atributos no post it. Tempo de 30min: eggtime. Use o dicionário de sinônimos quando estiver preso. Sinta-se à vontade para anotar palavras com frases para dar mais definição. Quando o grupo terminar, peça ao indivíduo para explicar o pensamento e a razão para o grupo. Documente o quadro branco como uma entrada para gerar princípios de experiência.
- Brand Cuidado e seguranca (4x) Adocao (3x) Comunidade (3x) Nao a comercilizacao (2x) Divertido e alegre (2x) Acessivel e simples (2x) Empatia Amor Diversidade
- Voice and Tone Direto ao ponto Acessível² Amig@ "Da galera pet" Protagonista Otimista Em um teste conduzido por Michael Aagaard (Otimizador de conversões sênior da Unbounce), ele descobriu que mudar a cópia do botão de CTA da segunda pessoa para a primeira pessoa resultou em um aumento de 90% na taxa de cliques.
- Tech Cultura Ágil Modular e escalável Design Patterns Inteligencia Artificial para discovery e acompanhamento
- Design Foco no usuário Simplicidade Design emocional Inteligência
- Design Foco no usuário Simplicidade Design emocional Inteligência
- Product Animal First Presente no dia-a-dia Reputação dos usuários Sustentável
- “A style guide is an artifact of the design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.” — Nathan Curtis
- Sim, na parte dos Style Guides Tbm é possível por do's e dont's para a documentação dos componentes caso veja necessidade
- Post it amarelo: Define template pattern Post it verde: Create template in Sketch