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
OPENLOGI Company Profile for engineer
hr01
1
20k
Introduction to OpenSearch Project - Search Engineering Tech Talk 2025 Winter
tkykenmt
2
220
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
180
開発者体験を定量的に把握する手法と活用事例
ham0215
0
140
IAMのマニアックな話2025
nrinetcom
PRO
6
1.4k
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4.1k
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
12k
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.3k
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
260
User Story Mapping + Inclusive Team
kawaguti
PRO
2
380
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
130
Featured
See All Featured
Building Adaptive Systems
keathley
40
2.4k
Designing Experiences People Love
moore
140
23k
How to Ace a Technical Interview
jacobian
276
23k
Gamification - CAS2011
davidbonilla
80
5.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Producing Creativity
orderedlist
PRO
344
40k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Six Lessons from altMBA
skipperchong
27
3.6k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
We Have a Design System, Now What?
morganepeng
51
7.4k
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