Material Design for Rails By Sam Hon Founder,

2

Topics ● ● ● ● ● ● ● ● ●

About Material Design Who are the target audience? Principles of Material What Material Design isn’t Material Design UI Why Material Design? Comparison with Bootstrap Materialize-sass gem for Rails Resources and credits

3

About Material Design ●

Google announced Material Design on June 25, 2014, at the 2014 Google I/O conference

●

Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

●

Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all firstclass input methods.

4

Who are the target audience? 1. 2. 3. 4.

Application users Software developers UX / UI designers Visual communication designers

5

Principles of Material 1.

3D world: light + shadows give depth

8.

Material can change shape

2.

Width and height may vary but the thickness is always 1dp

9.

Material can shrink and grow only along its plane

3.

Only elevation casts shadows

10.

Material never bends or folds

4.

Content behave independently of material but limited by its bounds

11.

Material can join together or split

12.

Material can be spontaneously generated or destroyed

13.

Material can move along any axis

14.

Z-axis motion as a result of user interaction

5.

Input events cannot pass through material

6.

No 2 material can occupy the same overlapping XYZ point in space

7.

Material cannot pass through material

6 https://www.google.com/design/spec/what-is-material/material-properties.htm

What Material Design isn’t ✘ A bootstrap theme ✘ Just a css or Android theme ✘ Just a concept without implementation ✘ Just for the web, it can work on watches too! 7

Material Design UI

8

Grid System

9

Shadows

10

Colors

11

Responsive framework

12

Responsive typography

13

Responsive truncating text

14

Floating buttons

15

Navbar

16

Toasters

17

And many other features... ● ● ● ● ● ● ● ● ● ●

Waves Sidebar Parallax Pushpin Modal Transitions Tabs ScrollFire ScrollSpy Collapsible

● ● ● ● ● ● ● ● ● ●

Badges Buttons Cards Collections Modal Sticky Footer Forms Preloader Pagination Mobile gestures

● ● ● ● ● ● ● ● ● ●

Tables Alignments Media box Collections Sass Variables Sass Mixins Sass prefixers Preloader Pagination Mobile gestures 18

SHOWCASE

19

Why Material Design? 1.

Conform to visual hierarchy design

2.

Material metaphor is a natural approach

3.

Motion provides meaning

4.

Less user training with standardized UX

5.

A design spec rather than framework for responsive design

6.

Consistent icons + UI elements look / feel

7.

Size, color and depth for emphasis

8.

From desktop to watch

20

Comparison with Bootstrap Material Design

Bootstrap

●

Conforms to Visual Hierarchy and responsive design

●

Allows conformity to responsive design

●

A responsive set of layouts, UI elements and UX interactions

●

A responsive grid system, with some default UI look and feel

●

Opinionated UX

●

Opinionated Implementation

●

No popular implementation (yet)

●

1 official implementation

●

Designer ecosystem mainly

●

Designer + developer ecosystem

●

Transitions, typography, icons, UI elements, tables, colors, layouts, and navigation

●

Layouts, icons, form elements and navigation Bootstrap 4 is now Alpha

21

Materialize-sass gem 1. 2. 3. 4. 5. 6. 7.

gem ‘materialize-sass’ gem ‘rails-utils’ include icons font include materialize-sprockets initialize js to bind events use built-in css classes use sass variables/mixins/prefixers 22

Resources

Credits

●

Materializecss.com

●

Material_Design on Wikipedia

●

Materialup.com

●

Material Design VS Bootstrap

●

Material design spec

●

●

Material Icons for Rails

15 awesome material design logo examples

●

Material Icons guide from Google

●

Avatars

●

Material Design Iconic Font

●

Inbox icon

●

Classroom icon

●

Grocery shopping list icon

●

Play Game icon

●

Material watch face

Showcase ● ● ● ●

Parallax Android Kiosk Absurdo Burger Visit Sarasota

23

Thank You Any questions?

@kopisam coffeesam

24

Bonus slide: When not to use? ✘ ✘ ✘ ✘

Canvas only access Single layered frame-buffer Not enough color or shades to depict depth GPU or CPU cannot render natural motion and transition

25