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

Mcdowellpatrick Finalproject
Mcdowellpatrick FinalprojectMcdowellpatrick Finalproject
Mcdowellpatrick Finalproject
PATRICKMCDOWELL
 

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

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
KIIT University
 
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
Marco Ajovalasit
 
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
Salvatore 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

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Recently uploaded (20)

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
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
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_...
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
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...
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
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
 
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...
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
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...
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 

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.