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
48
Kotlin Multiplataforma: Compartilhando código entre Android e iOS
rafaeltoledo
0
270
Motion Layout
rafaeltoledo
1
110
Pipeline Android
rafaeltoledo
3
130
Android Architecture Components
rafaeltoledo
7
130
What's New in Kotlin 1.3
rafaeltoledo
0
110
An Overview of Multiplatform Kotlin
rafaeltoledo
2
110
Compartilhando Código com Kotlin Multiplataforma
rafaeltoledo
2
210
Android Assíncrono
rafaeltoledo
3
190
Other Decks in Technology
See All in Technology
20分で完全に理解するGrafanaダッシュボード
hamadakoji
5
910
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
340
Max out Local LLM in Challenging Environments
sashimimochi
1
130
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
35k
認知症フレンドリーテックとスタックチャン
naokiuc
0
280
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
5
740
Next.js に疲れた私は Vue3 に癒やされた
akagire
0
140
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
150
Building Dashboards as a Hobby
egmc
0
380
社内アプリで Cloudflare D1を プロダクト運用してみた体験談(Tokyo)
haochenx
0
120
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
270
Amplify 🩷 Bedrock 〜生成AI入門〜
minorun365
PRO
8
940
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
What the flash - Photography Introduction
edds
64
11k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
How STYLIGHT went responsive
nonsquared
92
4.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
A Tale of Four Properties
chriscoyier
152
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Unsuck your backbone
ammeep
663
57k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
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