SlideShare a Scribd company logo
1 of 12
Material Design
Introduction
MaterialDesign is avisual language thatis createdtosynthesizetheprinciplesof gooddesign along
withthe development andpossibilityoftechnologyandscience.
The design iscreatedin simple, clear andforpeopleto
understand.
Thetechnologyisnowapprovedby Google.
Material is the metaphor
Material is a metaphor of a rationalized space and a system of
motion grounded by reality.
Layers are the main division for UI development by materialize
Next Generation 3D User Interface
A very cool implementation of Z Depth
• light, surface and
movement convey objects
in moving, interact and
exist in space in relation to
each other
• The z-depth controls how
paper can behave and not
flip over.
Importance of Layers
Some Amazing Features
Typography , Grids-Space , Color , depth effects such as lightening and
shadows.
Emphases on user actions makes core functionality immediately
apparent and provides waypoints for the user.
Motion Is What All Needed
Material Design implements all what you dream of…
Not A ‘Big Deal’
Mind me… With Material Design such implementation
are easier than ever.
Touch Is The Best Sense
The new design has a responsive interaction that encourages user to have
deeper exploration of an application.
Delightful Details
Hierarchical timing and Responsive interaction
Available Resources
Imagery, cards, responsive grids ,featuring icons
color pallet and many more.
Objective Of Workshop
Covering basics of material design
application of the Materialize-CSS.

More Related Content

What's hot

Google Material Design
Google Material Design Google Material Design
Google Material Design Kamal Ganwani
 
Design guidelines announced in I/O 2014. Material Design by Google by Betaglide
Design guidelines announced in I/O 2014. Material Design by Google by BetaglideDesign guidelines announced in I/O 2014. Material Design by Google by Betaglide
Design guidelines announced in I/O 2014. Material Design by Google by BetaglideManan Shah
 
Material Design - Høgskolen Ringerike 2017
Material Design - Høgskolen Ringerike 2017Material Design - Høgskolen Ringerike 2017
Material Design - Høgskolen Ringerike 2017Konstantin Loginov
 
Google Material Design
Google Material DesignGoogle Material Design
Google Material Designsara stanford
 
10 Best Current Design Trends
10 Best Current Design Trends10 Best Current Design Trends
10 Best Current Design Trends[x]cube LABS
 
Gamification: from hype to hope in the online experience
Gamification: from hype to hope in the online experienceGamification: from hype to hope in the online experience
Gamification: from hype to hope in the online experiencecsfaust
 
Jesscel Marie Taneo
Jesscel Marie TaneoJesscel Marie Taneo
Jesscel Marie Taneocres13
 
User Experience fundamentals: 6 questions to ask yourself
User Experience fundamentals: 6 questions to ask yourselfUser Experience fundamentals: 6 questions to ask yourself
User Experience fundamentals: 6 questions to ask yourselfSkyron
 
Hi-Tech Green Screen Technique From Disney
Hi-Tech Green Screen Technique From DisneyHi-Tech Green Screen Technique From Disney
Hi-Tech Green Screen Technique From DisneyAnimation Kolkata
 
Concept School for a better world.
Concept School for a better world.Concept School for a better world.
Concept School for a better world.Hardik Dhanak
 
Material Design on Android
Material Design on Android Material Design on Android
Material Design on Android droidcon Dubai
 
Mcdowellpatrick Finalproject
Mcdowellpatrick FinalprojectMcdowellpatrick Finalproject
Mcdowellpatrick FinalprojectPATRICKMCDOWELL
 

What's hot (20)

Material design
Material designMaterial design
Material design
 
Google Material Design
Google Material Design Google Material Design
Google Material Design
 
Design guidelines announced in I/O 2014. Material Design by Google by Betaglide
Design guidelines announced in I/O 2014. Material Design by Google by BetaglideDesign guidelines announced in I/O 2014. Material Design by Google by Betaglide
Design guidelines announced in I/O 2014. Material Design by Google by Betaglide
 
Material Design - Høgskolen Ringerike 2017
Material Design - Høgskolen Ringerike 2017Material Design - Høgskolen Ringerike 2017
Material Design - Høgskolen Ringerike 2017
 
Android Material Design
Android Material DesignAndroid Material Design
Android Material Design
 
Google Material Design
Google Material DesignGoogle Material Design
Google Material Design
 
Hololens
HololensHololens
Hololens
 
10 Best Current Design Trends
10 Best Current Design Trends10 Best Current Design Trends
10 Best Current Design Trends
 
Unconference2019
Unconference2019Unconference2019
Unconference2019
 
Tangible 3D Tabletops
Tangible 3D TabletopsTangible 3D Tabletops
Tangible 3D Tabletops
 
Material Design for Android
Material Design for AndroidMaterial Design for Android
Material Design for Android
 
Gamification: from hype to hope in the online experience
Gamification: from hype to hope in the online experienceGamification: from hype to hope in the online experience
Gamification: from hype to hope in the online experience
 
Jesscel Marie Taneo
Jesscel Marie TaneoJesscel Marie Taneo
Jesscel Marie Taneo
 
A complete interior design solution with diminished reality
A complete interior design solution with diminished realityA complete interior design solution with diminished reality
A complete interior design solution with diminished reality
 
User Experience fundamentals: 6 questions to ask yourself
User Experience fundamentals: 6 questions to ask yourselfUser Experience fundamentals: 6 questions to ask yourself
User Experience fundamentals: 6 questions to ask yourself
 
Queenie power
Queenie powerQueenie power
Queenie power
 
Hi-Tech Green Screen Technique From Disney
Hi-Tech Green Screen Technique From DisneyHi-Tech Green Screen Technique From Disney
Hi-Tech Green Screen Technique From Disney
 
Concept School for a better world.
Concept School for a better world.Concept School for a better world.
Concept School for a better world.
 
Material Design on Android
Material Design on Android Material Design on Android
Material Design on Android
 
Mcdowellpatrick Finalproject
Mcdowellpatrick FinalprojectMcdowellpatrick Finalproject
Mcdowellpatrick Finalproject
 

Similar to Material design

Automated UI & UX Framework
Automated UI & UX FrameworkAutomated UI & UX Framework
Automated UI & UX FrameworkIJARIIT
 
Design, Do You Speak It
Design, Do You Speak ItDesign, Do You Speak It
Design, Do You Speak ItFaiz Malkani
 
Reach into the computer & grab a pixel
Reach into the computer & grab a pixelReach into the computer & grab a pixel
Reach into the computer & grab a pixelKIIT University
 
Surface computing ppt
Surface computing pptSurface computing ppt
Surface computing pptJayati Tiwari
 
UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?DariaPersell
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsTunde Ojediran
 
Design Strategy for Cross-Device User Experience
Design Strategy for Cross-Device User ExperienceDesign Strategy for Cross-Device User Experience
Design Strategy for Cross-Device User ExperienceAshutosh Kumar
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideBabajide Aroyewun
 
The artificiality of natural user interfaces alessio malizia
The artificiality of natural user interfaces   alessio maliziaThe artificiality of natural user interfaces   alessio malizia
The artificiality of natural user interfaces alessio maliziaMarco Ajovalasit
 
2015-04-29 research seminar
2015-04-29 research seminar2015-04-29 research seminar
2015-04-29 research seminarifi8106tlu
 
User Experience: An Industry (Always) in Transition
User Experience: An Industry (Always) in TransitionUser Experience: An Industry (Always) in Transition
User Experience: An Industry (Always) in TransitionGino Zahnd
 
Surfacecomputerppt 130813063644-phpapp02
Surfacecomputerppt 130813063644-phpapp02Surfacecomputerppt 130813063644-phpapp02
Surfacecomputerppt 130813063644-phpapp02Ankit Singh
 
426 lecture 7: Designing AR Interfaces
426 lecture 7: Designing AR Interfaces426 lecture 7: Designing AR Interfaces
426 lecture 7: Designing AR InterfacesMark Billinghurst
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designInVision App
 
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders: Collective Dream...
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders:  Collective Dream...David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders:  Collective Dream...
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders: Collective Dream...RSD Relating Systems Thinking and Design
 
Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1
Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1
Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1Salvatore Iaconesi
 

Similar to Material design (20)

Automated UI & UX Framework
Automated UI & UX FrameworkAutomated UI & UX Framework
Automated UI & UX Framework
 
Man-Made Humans
Man-Made HumansMan-Made Humans
Man-Made Humans
 
Use Qualities
Use QualitiesUse Qualities
Use Qualities
 
Design, Do You Speak It
Design, Do You Speak ItDesign, Do You Speak It
Design, Do You Speak It
 
Reach into the computer & grab a pixel
Reach into the computer & grab a pixelReach into the computer & grab a pixel
Reach into the computer & grab a pixel
 
Material design
Material designMaterial design
Material design
 
Ana Amorim
Ana AmorimAna Amorim
Ana Amorim
 
Surface computing ppt
Surface computing pptSurface computing ppt
Surface computing ppt
 
UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?UI vs. UX: What’s the difference?
UI vs. UX: What’s the difference?
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
 
Design Strategy for Cross-Device User Experience
Design Strategy for Cross-Device User ExperienceDesign Strategy for Cross-Device User Experience
Design Strategy for Cross-Device User Experience
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
 
The artificiality of natural user interfaces alessio malizia
The artificiality of natural user interfaces   alessio maliziaThe artificiality of natural user interfaces   alessio malizia
The artificiality of natural user interfaces alessio malizia
 
2015-04-29 research seminar
2015-04-29 research seminar2015-04-29 research seminar
2015-04-29 research seminar
 
User Experience: An Industry (Always) in Transition
User Experience: An Industry (Always) in TransitionUser Experience: An Industry (Always) in Transition
User Experience: An Industry (Always) in Transition
 
Surfacecomputerppt 130813063644-phpapp02
Surfacecomputerppt 130813063644-phpapp02Surfacecomputerppt 130813063644-phpapp02
Surfacecomputerppt 130813063644-phpapp02
 
426 lecture 7: Designing AR Interfaces
426 lecture 7: Designing AR Interfaces426 lecture 7: Designing AR Interfaces
426 lecture 7: Designing AR Interfaces
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
 
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders: Collective Dream...
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders:  Collective Dream...David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders:  Collective Dream...
David McKenzie, Darwin Muljono and Elizabeth B.-N. Sanders: Collective Dream...
 
Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1
Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1
Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1
 

Recently uploaded

Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Pooja Bhuva
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxRamakrishna Reddy Bijjam
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxJisc
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfNirmal Dwivedi
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfSherif Taha
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxEsquimalt MFRC
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsMebane Rash
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxJisc
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the ClassroomPooky Knightsmith
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - Englishneillewis46
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...Nguyen Thanh Tu Collection
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSCeline George
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Pooja Bhuva
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Jisc
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxPooja Bhuva
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024Elizabeth Walsh
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...pradhanghanshyam7136
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...Poonam Aher Patil
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and ModificationsMJDuyan
 

Recently uploaded (20)

Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 

Material design

  • 2. Introduction MaterialDesign is avisual language thatis createdtosynthesizetheprinciplesof gooddesign along withthe development andpossibilityoftechnologyandscience. The design iscreatedin simple, clear andforpeopleto understand. Thetechnologyisnowapprovedby Google.
  • 3. Material is the metaphor Material is a metaphor of a rationalized space and a system of motion grounded by reality. Layers are the main division for UI development by materialize
  • 4. Next Generation 3D User Interface A very cool implementation of Z Depth
  • 5. • light, surface and movement convey objects in moving, interact and exist in space in relation to each other • The z-depth controls how paper can behave and not flip over. Importance of Layers
  • 6. Some Amazing Features Typography , Grids-Space , Color , depth effects such as lightening and shadows. Emphases on user actions makes core functionality immediately apparent and provides waypoints for the user.
  • 7. Motion Is What All Needed Material Design implements all what you dream of…
  • 8. Not A ‘Big Deal’ Mind me… With Material Design such implementation are easier than ever.
  • 9. Touch Is The Best Sense The new design has a responsive interaction that encourages user to have deeper exploration of an application.
  • 10. Delightful Details Hierarchical timing and Responsive interaction
  • 11. Available Resources Imagery, cards, responsive grids ,featuring icons color pallet and many more.
  • 12. Objective Of Workshop Covering basics of material design application of the Materialize-CSS.

Editor's Notes

  1. Goals Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.
  2. Inspired by ink and paper the material design takes these classic principles of print design bringing it to life; the materials take energy from the user, from their finger, mouse click and touch and uses it to transform and animate
  3. Dimensionality affords interaction; Every device has a physical z-depth; the distance b/w the front and the back of the device that rests on the palm of your hand. The z-depth controls how paper can behave and not flip over. Generally the paper is presented square moving to the user’s eye; firstly the paper casts a shadow based on its position within its z and when two pieces of paper slightly overlap i.e. one in front that has lighting source and the one behind getting a shadow making sure the shadow isn’t something that’s drawn from ink that comes out; this is the result of the physical relationship of the lightning model that the system gives you.
  4. Click on these animated pictures repeatedly while slide show.
  5. Pause and then speak
  6. Double click on these pics to replay the animation.