Sistemas de design para interfaces digitais

Um panorama sobre modularidade e sistemas de design, trazendo princípios, referências e dicas para mudança de mindset e workflow no desenvolvimento de interfaces digitais.

Apresentado no 1º Meetup IxDA Floripa + ModularUI, em 30/09/2015.

Transcript

1. para interfaces digitais SISTEMAS DE DESIGN
2. THIAGO FELIPE VICTORINO Formado em Design Gráfico @ UFSC UI Developer @ SumOne
3. ALGUNS CONCEITOS
4. MODULARIDADE Modularidade trata-se do uso de unidades funcionais individualmente distintas na montagem de um sistema mecânico ou eletrônico. http://dictionary.reference.com/browse/modularity
5. DESIGN MODULAR Design modular é uma abordagem de projeto que subdivide um sistema em pequenas partes chamadas de módulos, que podem ser criadas independentemente para então serem usadas em diferentes sistemas. https://en.wikipedia.org/wiki/Modular_design
6. SISTEMA Um sistema é um conjunto de componentes interativos ou interdependentes entre si que formam uma unidade complexa. https://en.wikipedia.org/wiki/System
10. SISTEMAS E DESIGN GRÁFICO
11. SISTEMA DE IDENTIDADE VISUAL Segundo Maria Luísa Peón, um sistema de identidade visual é formado por: logotipo, símbolo, marca, as cores institucionais e o alfabeto institucional, elementos acessórios, bem como todas as aplicações (material de papelaria, letreiros, uniformes, sinalização, folder, revista institucional, site, etc). http://www.trabalhosfeitos.com/ensaios/Resumo-Do-Livro-Sistemas-De-Identidade/45439834.html
19. Um plat estr core edit […] pos elem e po nec PROJETO GRÁFICO EDITORIAL Um projeto gráfico é constituído de uma série de plataformas que formam a sua lógica construtiva. Estas estruturas definem o seu aspecto visual (cores, tipografia, design, etc) bem como seu aspecto editorial (textos, linguagem, e conteúdo). […] As imagens, o tamanho das fontes tipográficas, a posição de títulos, retículas, boxes, fios, enfim, todos os elementos visuais devem ser adequadamente pensados e posicionados com o objetivo de atender a uma necessidade editorial. https://pt.wikipedia.org/wiki/Projeto_gráfico
20. http://byjanelee.com/portfolio/magazine-redesign/
22. http://byjanelee.com/portfolio/magazine-redesign/
24. Definem diretrizes fundamentais (cor, tipografia, layout, etc). Definem os elementos que fazem parte do sistema. Fornecem instruções para a estruturação do sistema.
25. Legal, mas… E INTERFACES DIGITAIS?
26. NO PRINCÍPIO…
30. No começo da web, o mindset de projeto ainda considerava algumas limitações similares às do meio impresso. Pensava-se em como expandir a experiência do impresso no meio digital, utilizando recursos interativos. Foco na singularidade e expressão artística/visual. Trabalhar dessa forma fazia sentido na época, enquanto o panorama da web era mais simplificado. Mas… esse panorama mudou.
31. O QUE MUDOU?
32. Um plat estr core edit […] pos elem e po nec Design responsivo: o mesmo conteúdo, múltiplos outputs. Wake-up call: a web é flexível! Aumento da complexidade de produtos digitais. Influência de disciplinas de orientação a objeto no âmbito da interface (front-end).
33. Se o panorama mudou, PRECISAMOS MUDAR TAMBÉM
34. SISTEMAS DE DESIGN PARA INTERFACES DIGITAIS
35. Definem diretrizes fundamentais (cor, tipografia, layout, etc). Definem os componentes que fazem parte do sistema. Fornecem instruções para a estruturação do sistema.
40. COMPONENTES?
41. Um plat estr core edit […] pos elem e po nec ATOMIC DESIGN http://bradfrost.com/blog/post/atomic-web-design/ Atomic design (ou design atômico) é uma metodologia para a criação de sistemas de design. Faz uma analogia com a química para categorizar os elementos de uma interface e explicar a relação dos mesmos entre si.
43. Átomos
44. Moléculas
45. Organismos
46. Templates
47. Pages
48. POR ONDE COMEÇAR?
49. Um plat estr core edit […] pos elem e po nec PRINCÍPIOS E REFERÊNCIAS Entendendo os princípios por trás desse mindset. Se familiarizando com o conceito de componentes e guias de estilo. Buscando exemplos do que já existe pronto.
50. Leia, leia, leia! PRINCÍPIOS https://github.com/tfvictorino/modular-ui-directory
51. Patterns REFERÊNCIAS http://codepen.io/patterns/
52. UI Kits REFERÊNCIAS
53. UI Kits REFERÊNCIAS http://getbootstrap.com/components/
54. Guias de estilo REFERÊNCIAS https://www.lightningdesignsystem.com
55. Guias de estilo REFERÊNCIAS https://playbook.cio.gov/designstandards/
56. Guias de estilo REFERÊNCIAS https://playbook.cio.gov/designstandards/
57. Guias de estilo REFERÊNCIAS http://styleguides.io/examples.html
58. WORKFLOW Experimentando novas abordagens de projeto. Começando o projeto de forma holística, de dentro pra fora. Estimulando uma maior colaboração entre design e desenvolvimento. E principalmente: letting go!
59. Content Priority Guide WORKFLOW http://seesparkbox.com/foundry/content_priority_guide
60. Style Tiles WORKFLOW http://styletil.es/
61. Ellement collages WORKFLOW http://danielmall.com/articles/rif-element-collages/
62. QUAIS SÃO 
 OS BENEFÍCIOS? Concluindo:
63. Um sistema unificado promove consistência visual e padronização. Mockups estáticos não respondem todas as perguntas. (E além do mais, quem tem tempo e paciência para projetar 40 telas!?) Sistemas prevêem comportamentos. No fim das contas, estamos entregando código rodando no navegador. E código modularizado é sinônimo de boa experiência (tanto para usuários quanto para a equipe de desenvolvimento ).
64. "We’re not designing pages, WE’RE DESIGNING SYSTEMS OF COMPONENTS." – Stephen Hay
65. OBRIGADO! tfvictorino@gmail.com github.com/tfvictorino twitter.com/tfvictorino facebook.com/tfvictorino CONTATOS GRUPO DE DISCUSSÃO NO FACEBOOK https://www.facebook.com/groups/modular.ui/