material design ruby conf 2015
TRANSCRIPT
![Page 2: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/2.jpg)
A Visual & Interactive Design Concept.
![Page 3: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/3.jpg)
Principles of Material Design
![Page 4: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/4.jpg)
1. Material is Metaphor.
![Page 5: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/5.jpg)
So, What is Material?
• Material provides context in design.
• The surface and edge provides us visual cues.
• Material has some attributes.
![Page 6: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/6.jpg)
Surfaces & Edges
![Page 7: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/7.jpg)
2. Bold, graphic, intentional.
![Page 8: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/8.jpg)
The foundational elements of print-based design:
1. Typography( Font Size, Font Family),
2. Grids(Structure),
3. Color.
![Page 9: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/9.jpg)
Typography
![Page 10: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/10.jpg)
Grid
![Page 11: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/11.jpg)
Color
![Page 12: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/12.jpg)
The Elements create Hierarchy,
Meaning & Focus.
![Page 13: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/13.jpg)
![Page 14: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/14.jpg)
When these elements are properly amalgamated....
![Page 15: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/15.jpg)
3. Motion provides meaning.
![Page 16: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/16.jpg)
Motion provides meaning
● Motion respects and reinforces the user as the prime mover.
![Page 17: Material Design ruby conf 2015](https://reader035.vdocument.in/reader035/viewer/2022062412/5888c15e1a28ab200f8b5613/html5/thumbnails/17.jpg)