Material Design Everywhere

Apresentada no Mobile Brazil Conference 2016

Transcript

1. Material Design Everywhere Rafael Toledo @_rafaeltoledo
2. Eu Chapter Lead de Android www.rafaeltoledo.net twitter.com/_rafaeltoledo github.com/rafaeltoledo blog.concretesolutions.com.br
3. Ajudamos empresas a criar produtos digitais de sucesso
4. Android Dev BR slack.androiddevbr.org
5. Nos primórdios...
7. ...amadurecimento do design
8. e então no Google I/O 2014
9. Material é a metáfora
10. uma noção racional do espaço e movimento
11. Inspirado no estudo do papel e tinta, mas tecnologicamente aberto a imaginação e magia
13. Superfícies e arestas fornecem dicas visuais de como as coisas se comportam, flexíveis o suficiente para criar novas experiências, sem quebrar as regras do mundo físico
15. Corajoso, gráfico e intencional
16. Tipografia Grids Espaçamento Escala Cor Ilustrações Princípios do design impresso
17. Roboto
18. Hierarquia, significado e foco
19. Ênfase nas ações do usuário
20. O movimento cria o significado
21. Respeita e reforça o usuário como o mecanismo primário
22. Todos os elementos fazem parte do mesmo ambiente
23. Os objetos são apresentados sem quebrar a continuidade. Eles se transformam e se reorganizam
24. O mundo é 3D...
25. ...e tem sombras e luz
26. O material tem profundidade...
27. ... mas seu conteúdo não
28. o conteúdo pode se comportar de forma independente
29. pode se transformar...
30. ...se dividir e se rearranjar...
31. ...e reagir à interação
32. O Guideline é vivo, evolui
33. Navigation Notifications Fingerprint Permissions Steppers Bottom navigation bars Split Screens Movimento Crescimento/comunicação Painéis expansíveis Data Tables Units & measurement Floating Action Button Component sticker sheet Data truncation & redaction Settings Adaptative UI Empty state Launch Screens
34. Launch Screens
35. Launch Screens
36. Bottom navigation bars
37. Bottom navigation bars
38. Material Design não é somente FAB
39. Movimento
40. Empty State
41. Estado de Erro
42. Descoberta de conteúdo
43. Carregamentos Longos
44. Transformação
45. Transformação
46. Ícones
47. design.google.com/spec
48. e o Branding?
49. Apps todos iguais?
50. Material Design é um guia, não uma regra!
52. Bring! Fabulous VEVO
53. Robinhood Todoist Plaid
54. B&H Pocket Casts Trello
55. Implementação?
56. Support Libraries
57. compile 'com.android.support:appcompat-v7:23.4.0' compile 'com.android.support:cardview-v7:23.4.0' compile 'com.android.support:design:23.4.0' compatível com Android 2.1+
58. Visual consistente
60. Toolbar CardView Coordinator Layout Floating Action Button SnackBar Navigation View Tab Layout Text Input Layout Raised Button Flat Button Dialog Bottom Sheet
61. e mais vindo por aí?
62. <Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" /> utilizar sempre versões de Suporte
63. <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" /> utilizar sempre versões de Suporte
64. public class MainActivity extends AppCompatActivity { ... startActivity(intent, options.toBundle()); utilizar sempre versões de Suporte
65. public class MainActivity extends AppCompatActivity { ... ActivityCompat.startActivity(this, intent, options.toBundle()); utilizar sempre versões de Suporte
66. github.com/rafaeltoledo/material-chef
67. Para Web
68. Material Design Lite
69. getmdl.io
70. Project Polymer
71. polymer-project.org
72. Angular Material
73. material.angularjs.org
74. ...e até pra Swift cosmicmind.io/material
75. Material Design Everywhere OBRIGADO! Rafael Toledo @_rafaeltoledo