Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Material Design Everywhere
Search
Rafael Toledo
May 14, 2016
Technology
1
160
Material Design Everywhere
Apresentada no Mobile Brazil Conference 2016
Rafael Toledo
May 14, 2016
Tweet
Share
More Decks by Rafael Toledo
See All by Rafael Toledo
Gamedev com Kotlin Native
rafaeltoledo
0
60
Kotlin Multiplataforma: Compartilhando código entre Android e iOS
rafaeltoledo
0
290
Motion Layout
rafaeltoledo
1
120
Pipeline Android
rafaeltoledo
3
140
Android Architecture Components
rafaeltoledo
7
140
What's New in Kotlin 1.3
rafaeltoledo
0
130
An Overview of Multiplatform Kotlin
rafaeltoledo
2
110
Compartilhando Código com Kotlin Multiplataforma
rafaeltoledo
2
240
Android Assíncrono
rafaeltoledo
3
200
Other Decks in Technology
See All in Technology
ライフステージの変化を乗り越える 探索型のキャリア選択
tenshoku_draft
2
160
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
27
17k
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
570
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
110
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
2
190
困難を「一般解」で解く
fujiwara3
8
2.4k
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
240
事業を差別化する技術を生み出す技術
pyama86
2
550
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
180
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Documentation Writing (for coders)
carmenintech
69
4.6k
Become a Pro
speakerdeck
PRO
26
5.2k
Faster Mobile Websites
deanohume
306
31k
What's in a price? How to price your products and services
michaelherold
244
12k
A designer walks into a library…
pauljervisheath
205
24k
Adopting Sorbet at Scale
ufuk
75
9.2k
Git: the NoSQL Database
bkeepers
PRO
429
65k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
540
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Transcript
Material Design Everywhere Rafael Toledo @_rafaeltoledo
Eu Chapter Lead de Android www.rafaeltoledo.net twitter.com/_rafaeltoledo github.com/rafaeltoledo blog.concretesolutions.com.br
Ajudamos empresas a criar produtos digitais de sucesso
Android Dev BR slack.androiddevbr.org
Nos primórdios...
None
...amadurecimento do design
e então no Google I/O 2014
Material é a metáfora
uma noção racional do espaço e movimento
Inspirado no estudo do papel e tinta, mas tecnologicamente aberto
a imaginação e magia
None
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
None
Corajoso, gráfico e intencional
Tipografia Grids Espaçamento Escala Cor Ilustrações Princípios do design impresso
Roboto
Hierarquia, significado e foco
Ênfase nas ações do usuário
O movimento cria o significado
Respeita e reforça o usuário como o mecanismo primário
Todos os elementos fazem parte do mesmo ambiente
Os objetos são apresentados sem quebrar a continuidade. Eles se
transformam e se reorganizam
O mundo é 3D...
...e tem sombras e luz
O material tem profundidade...
... mas seu conteúdo não
o conteúdo pode se comportar de forma independente
pode se transformar...
...se dividir e se rearranjar...
...e reagir à interação
O Guideline é vivo, evolui
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
Launch Screens
Launch Screens
Bottom navigation bars
Bottom navigation bars
Material Design não é somente FAB
Movimento
Empty State
Estado de Erro
Descoberta de conteúdo
Carregamentos Longos
Transformação
Transformação
Ícones
design.google.com/spec
e o Branding?
Apps todos iguais?
Material Design é um guia, não uma regra!
None
Bring! Fabulous VEVO
Robinhood Todoist Plaid
B&H Pocket Casts Trello
Implementação?
Support Libraries
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+
Visual consistente
None
Toolbar CardView Coordinator Layout Floating Action Button SnackBar Navigation View
Tab Layout Text Input Layout Raised Button Flat Button Dialog Bottom Sheet
e mais vindo por aí?
<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
<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
public class MainActivity extends AppCompatActivity { ... startActivity(intent, options.toBundle()); utilizar
sempre versões de Suporte
public class MainActivity extends AppCompatActivity { ... ActivityCompat.startActivity(this, intent, options.toBundle());
utilizar sempre versões de Suporte
github.com/rafaeltoledo/material-chef
Para Web
Material Design Lite
getmdl.io
Project Polymer
polymer-project.org
Angular Material
material.angularjs.org
...e até pra Swift cosmicmind.io/material
Material Design Everywhere OBRIGADO! Rafael Toledo @_rafaeltoledo