SlideShare a Scribd company logo
1 of 30
Material Design
2 
This is Material Design
3 Introduction 
Classic principles of good design + Innovation of technology and science
4 
Single underlying system 
Unified experience across platforms and device sizes
5 Principles 
Material is the metaphor 
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic. 
Surfaces and edges provide visual cues 
Using familiar tactile attributes helps users quickly understand affordances 
Flexibility of the material creates new affordances that supersede those in the physical world, without breaking the rules of physics.
6 Principles 
Bold, graphic, intentional Foundational elements of print-based design: 
•Typography 
•Grids 
•Space 
•Scale 
•Color 
•Imagery 
Create hierarchy, meaning, and focus 
Emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user
7 
Principles Motion provides meaning 
Respects and reinforces the user as the prime mover. All action takes place in a single environment 
Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize 
Smooth transitions
8 
Animation Authentic Motion 
Motion tells us whether an object is light or heavy, flexible or rigid, small or large Animation with abrupt starts /stops or rapid can be unpleasant for the user 
Important to retain the feeling of physicality without sacrificing elegance, and keeping a seamless user experience 
Avoid linear motion
9 
Animation Responsive Interaction 
Responsive interaction builds trust with the user and engages them Encourages deeper exploration of an app 
Important to retain the feeling of physicality without sacrificing elegance, and keeping a seamless user experience 
Avoid linear motion 
Fig. Surface Reaction on touch
10 Animation 
Responsive Interaction Fig. Radial Action
11 
Animation 
Meaningful Transitions 
Carefully choreographed motion design can effectively guide the user’s attention and focus through multiple steps of a process or procedure Focus on elegance + functionality 
In a transition, consider the order in which elements move and the timing of their movement
12 
Animation 
Meaningful Transitions
13 Animation 
Delightful Details Most basic use of animation is in transitions
14 
Style 
Color 
It’s okay to be a little adventurous and vibrant!
15 Style 
Color 
Toolbars and large blocks will be the main colors 
Accent colors for primary actions (PRIORITY)
16 Style 
Color Light Theme 
Dark Theme
17 
Style 
Typography Roboto 
Standard styles
18 
Style 
Icons 
Symbolizes a command, file, device, or directory 
Used to represent common actions Ensure readability and clarity
19 
Style 
Icons 
Grids, Proportion and Size 
Round corners 
Consistency
20 Style 
Imagery
21 
Style 
Imagery Choose images that express personal relevance, information and delight
22 Style 
Imagery 
Ensure images are dynamic, context- intelligent, and context-relevant (PREDICT what the user would like to see) 
Don’t shy away. Confidently use content overlays.
23 Style 
Imagery Maintain the integrity of the image 
 
X 
 
X
24 
Style Imagery 
Use Multiple Mediums
25 
Style 
Imagery Avoid Stock 
 X
26 
Style 
Imagery 
Have a Point of Focus  
X
27 
Layout 
Designed to scale across different screen sizes 
Encourage apps to have a consistent look and feel using the same visual elements, structural grids, and spacing rules across platforms and screen sizes 
A larger screen DOES NOT mean, a greater capacity to comprehend!
Material Design in Google Play 28
Resources 29 
http://www.google.com/design/spec/material-design/introduction.html
@arya_padte 
+AryaPadte

More Related Content

What's hot

언리얼4 플레이어 컨트롤러의 이해.
언리얼4 플레이어 컨트롤러의 이해.언리얼4 플레이어 컨트롤러의 이해.
언리얼4 플레이어 컨트롤러의 이해.Wuwon Yu
 
[NDC14] 모바일 게임의 다음 혁신 - 야생의 땅 듀랑고의 계산 프로세스 중심 게임 디자인
[NDC14] 모바일 게임의 다음 혁신 - 야생의 땅 듀랑고의 계산 프로세스 중심 게임 디자인[NDC14] 모바일 게임의 다음 혁신 - 야생의 땅 듀랑고의 계산 프로세스 중심 게임 디자인
[NDC14] 모바일 게임의 다음 혁신 - 야생의 땅 듀랑고의 계산 프로세스 중심 게임 디자인승명 양
 
[Gaming on AWS] AWS와 함께 한 쿠키런 서버 Re-architecting 사례 - 데브시스터즈
[Gaming on AWS] AWS와 함께 한 쿠키런 서버 Re-architecting 사례 - 데브시스터즈[Gaming on AWS] AWS와 함께 한 쿠키런 서버 Re-architecting 사례 - 데브시스터즈
[Gaming on AWS] AWS와 함께 한 쿠키런 서버 Re-architecting 사례 - 데브시스터즈Amazon Web Services Korea
 
레퍼런스만 알면 언리얼 엔진이 제대로 보인다
레퍼런스만 알면 언리얼 엔진이 제대로 보인다레퍼런스만 알면 언리얼 엔진이 제대로 보인다
레퍼런스만 알면 언리얼 엔진이 제대로 보인다Lee Dustin
 
Engineering Software Products: 6. microservices architecture
Engineering Software Products: 6. microservices architectureEngineering Software Products: 6. microservices architecture
Engineering Software Products: 6. microservices architecturesoftware-engineering-book
 
전형규, SilvervineUE4Lua: UE4에서 Lua 사용하기, NDC2019
전형규, SilvervineUE4Lua: UE4에서 Lua 사용하기, NDC2019전형규, SilvervineUE4Lua: UE4에서 Lua 사용하기, NDC2019
전형규, SilvervineUE4Lua: UE4에서 Lua 사용하기, NDC2019devCAT Studio, NEXON
 
[우리가 데이터를 쓰는 법] 모바일 게임 로그 데이터 분석 이야기 - 엔터메이트 공신배 팀장
[우리가 데이터를 쓰는 법] 모바일 게임 로그 데이터 분석 이야기 - 엔터메이트 공신배 팀장[우리가 데이터를 쓰는 법] 모바일 게임 로그 데이터 분석 이야기 - 엔터메이트 공신배 팀장
[우리가 데이터를 쓰는 법] 모바일 게임 로그 데이터 분석 이야기 - 엔터메이트 공신배 팀장Dylan Ko
 
NDC 2018 '야생의 땅: 듀랑고' 초반 플레이 변천사
NDC 2018 '야생의 땅: 듀랑고' 초반 플레이 변천사 NDC 2018 '야생의 땅: 듀랑고' 초반 플레이 변천사
NDC 2018 '야생의 땅: 듀랑고' 초반 플레이 변천사 Imseong Kang
 
7. 게임 스트리밍 서비스를 위한 아키텍처 - 언리얼 엔진을 중심으로! [레벨 300] - 발표자: 하흥수, 솔루션즈 아키텍트, AWS :...
7.	게임 스트리밍 서비스를 위한 아키텍처 - 언리얼 엔진을 중심으로! [레벨 300] - 발표자: 하흥수, 솔루션즈 아키텍트, AWS :...7.	게임 스트리밍 서비스를 위한 아키텍처 - 언리얼 엔진을 중심으로! [레벨 300] - 발표자: 하흥수, 솔루션즈 아키텍트, AWS :...
7. 게임 스트리밍 서비스를 위한 아키텍처 - 언리얼 엔진을 중심으로! [레벨 300] - 발표자: 하흥수, 솔루션즈 아키텍트, AWS :...Amazon Web Services Korea
 
마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트)
마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트) 마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트)
마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트) Amazon Web Services Korea
 
테라로 살펴본 MMORPG의 논타겟팅 시스템
테라로 살펴본 MMORPG의 논타겟팅 시스템테라로 살펴본 MMORPG의 논타겟팅 시스템
테라로 살펴본 MMORPG의 논타겟팅 시스템QooJuice
 
빌드 속도를 올려보자
빌드 속도를 올려보자빌드 속도를 올려보자
빌드 속도를 올려보자KyeongWon Koo
 
UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1Hong-Gi Joe
 
게임 프레임워크의 아키텍쳐와 디자인 패턴
게임 프레임워크의 아키텍쳐와 디자인 패턴게임 프레임워크의 아키텍쳐와 디자인 패턴
게임 프레임워크의 아키텍쳐와 디자인 패턴MinGeun Park
 
취미로 엔진 만들기
취미로 엔진 만들기취미로 엔진 만들기
취미로 엔진 만들기Jiho Choi
 
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games Conference
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games ConferenceKGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games Conference
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games ConferenceXionglong Jin
 
What is REST API? REST API Concepts and Examples | Edureka
What is REST API? REST API Concepts and Examples | EdurekaWhat is REST API? REST API Concepts and Examples | Edureka
What is REST API? REST API Concepts and Examples | EdurekaEdureka!
 
게임서버프로그래밍 #4 - 멀티스레드 프로그래밍
게임서버프로그래밍 #4 - 멀티스레드 프로그래밍게임서버프로그래밍 #4 - 멀티스레드 프로그래밍
게임서버프로그래밍 #4 - 멀티스레드 프로그래밍Seungmo Koo
 

What's hot (20)

언리얼4 플레이어 컨트롤러의 이해.
언리얼4 플레이어 컨트롤러의 이해.언리얼4 플레이어 컨트롤러의 이해.
언리얼4 플레이어 컨트롤러의 이해.
 
[NDC14] 모바일 게임의 다음 혁신 - 야생의 땅 듀랑고의 계산 프로세스 중심 게임 디자인
[NDC14] 모바일 게임의 다음 혁신 - 야생의 땅 듀랑고의 계산 프로세스 중심 게임 디자인[NDC14] 모바일 게임의 다음 혁신 - 야생의 땅 듀랑고의 계산 프로세스 중심 게임 디자인
[NDC14] 모바일 게임의 다음 혁신 - 야생의 땅 듀랑고의 계산 프로세스 중심 게임 디자인
 
[Gaming on AWS] AWS와 함께 한 쿠키런 서버 Re-architecting 사례 - 데브시스터즈
[Gaming on AWS] AWS와 함께 한 쿠키런 서버 Re-architecting 사례 - 데브시스터즈[Gaming on AWS] AWS와 함께 한 쿠키런 서버 Re-architecting 사례 - 데브시스터즈
[Gaming on AWS] AWS와 함께 한 쿠키런 서버 Re-architecting 사례 - 데브시스터즈
 
레퍼런스만 알면 언리얼 엔진이 제대로 보인다
레퍼런스만 알면 언리얼 엔진이 제대로 보인다레퍼런스만 알면 언리얼 엔진이 제대로 보인다
레퍼런스만 알면 언리얼 엔진이 제대로 보인다
 
Engineering Software Products: 6. microservices architecture
Engineering Software Products: 6. microservices architectureEngineering Software Products: 6. microservices architecture
Engineering Software Products: 6. microservices architecture
 
전형규, SilvervineUE4Lua: UE4에서 Lua 사용하기, NDC2019
전형규, SilvervineUE4Lua: UE4에서 Lua 사용하기, NDC2019전형규, SilvervineUE4Lua: UE4에서 Lua 사용하기, NDC2019
전형규, SilvervineUE4Lua: UE4에서 Lua 사용하기, NDC2019
 
[우리가 데이터를 쓰는 법] 모바일 게임 로그 데이터 분석 이야기 - 엔터메이트 공신배 팀장
[우리가 데이터를 쓰는 법] 모바일 게임 로그 데이터 분석 이야기 - 엔터메이트 공신배 팀장[우리가 데이터를 쓰는 법] 모바일 게임 로그 데이터 분석 이야기 - 엔터메이트 공신배 팀장
[우리가 데이터를 쓰는 법] 모바일 게임 로그 데이터 분석 이야기 - 엔터메이트 공신배 팀장
 
NDC 2018 '야생의 땅: 듀랑고' 초반 플레이 변천사
NDC 2018 '야생의 땅: 듀랑고' 초반 플레이 변천사 NDC 2018 '야생의 땅: 듀랑고' 초반 플레이 변천사
NDC 2018 '야생의 땅: 듀랑고' 초반 플레이 변천사
 
7. 게임 스트리밍 서비스를 위한 아키텍처 - 언리얼 엔진을 중심으로! [레벨 300] - 발표자: 하흥수, 솔루션즈 아키텍트, AWS :...
7.	게임 스트리밍 서비스를 위한 아키텍처 - 언리얼 엔진을 중심으로! [레벨 300] - 발표자: 하흥수, 솔루션즈 아키텍트, AWS :...7.	게임 스트리밍 서비스를 위한 아키텍처 - 언리얼 엔진을 중심으로! [레벨 300] - 발표자: 하흥수, 솔루션즈 아키텍트, AWS :...
7. 게임 스트리밍 서비스를 위한 아키텍처 - 언리얼 엔진을 중심으로! [레벨 300] - 발표자: 하흥수, 솔루션즈 아키텍트, AWS :...
 
마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트)
마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트) 마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트)
마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트)
 
테라로 살펴본 MMORPG의 논타겟팅 시스템
테라로 살펴본 MMORPG의 논타겟팅 시스템테라로 살펴본 MMORPG의 논타겟팅 시스템
테라로 살펴본 MMORPG의 논타겟팅 시스템
 
빌드 속도를 올려보자
빌드 속도를 올려보자빌드 속도를 올려보자
빌드 속도를 올려보자
 
UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1
 
게임 프레임워크의 아키텍쳐와 디자인 패턴
게임 프레임워크의 아키텍쳐와 디자인 패턴게임 프레임워크의 아키텍쳐와 디자인 패턴
게임 프레임워크의 아키텍쳐와 디자인 패턴
 
Ansible과 CloudFormation을 이용한 배포 자동화
Ansible과 CloudFormation을 이용한 배포 자동화Ansible과 CloudFormation을 이용한 배포 자동화
Ansible과 CloudFormation을 이용한 배포 자동화
 
Rest API
Rest APIRest API
Rest API
 
취미로 엔진 만들기
취미로 엔진 만들기취미로 엔진 만들기
취미로 엔진 만들기
 
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games Conference
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games ConferenceKGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games Conference
KGC 2016: HTTPS 로 모바일 게임 서버 구축한다는 것 - Korea Games Conference
 
What is REST API? REST API Concepts and Examples | Edureka
What is REST API? REST API Concepts and Examples | EdurekaWhat is REST API? REST API Concepts and Examples | Edureka
What is REST API? REST API Concepts and Examples | Edureka
 
게임서버프로그래밍 #4 - 멀티스레드 프로그래밍
게임서버프로그래밍 #4 - 멀티스레드 프로그래밍게임서버프로그래밍 #4 - 멀티스레드 프로그래밍
게임서버프로그래밍 #4 - 멀티스레드 프로그래밍
 

Similar to Material Design

Summary of Material Design Guidelines
Summary of Material Design GuidelinesSummary of Material Design Guidelines
Summary of Material Design GuidelinesAmit Kumar Tiwari
 
Design Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - PresentationDesign Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - PresentationMobileNepal
 
Game interface design part 2
Game interface design part 2Game interface design part 2
Game interface design part 2Durgesh Pandey
 
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 Systems that supports inclusive experiences
Design Systems that supports inclusive experiencesDesign Systems that supports inclusive experiences
Design Systems that supports inclusive experiencesIntopia
 
Usability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt AcademyUsability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt AcademyDániel Góré
 
Design in UI: Visuals and Aesthetics - Swapnil Acharya
Design in UI: Visuals and Aesthetics - Swapnil AcharyaDesign in UI: Visuals and Aesthetics - Swapnil Acharya
Design in UI: Visuals and Aesthetics - Swapnil AcharyaMobileNepal
 
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and LayoutGames Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and LayoutDavid Farrell
 
TDC 2014 - Trilha Mobile - Material design
TDC 2014 - Trilha Mobile - Material designTDC 2014 - Trilha Mobile - Material design
TDC 2014 - Trilha Mobile - Material designJackson F. de A. Mafra
 
Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Tania Schlatter
 
Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora Designing for Multiple Devices - Sarit Arora
Designing for Multiple Devices - Sarit AroraSTC India UX SIG
 
The top 10 UI Design Trends for 2016
The top 10 UI Design Trends for 2016The top 10 UI Design Trends for 2016
The top 10 UI Design Trends for 2016Idean France
 
Flat Design - A Primer
Flat Design - A PrimerFlat Design - A Primer
Flat Design - A Primerwedu, Inc
 
Introduction into User Experience
Introduction into User ExperienceIntroduction into User Experience
Introduction into User ExperienceAbdullah Al Nady
 
eBook-Principles-of-UX_PepperSquare (1).pdf
eBook-Principles-of-UX_PepperSquare (1).pdfeBook-Principles-of-UX_PepperSquare (1).pdf
eBook-Principles-of-UX_PepperSquare (1).pdfSophiaJasper
 
Material design full topics_animation
Material design full topics_animationMaterial design full topics_animation
Material design full topics_animationAnup Majumder
 

Similar to Material Design (20)

Summary of Material Design Guidelines
Summary of Material Design GuidelinesSummary of Material Design Guidelines
Summary of Material Design Guidelines
 
Design Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - PresentationDesign Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - Presentation
 
Game interface design part 2
Game interface design part 2Game interface design part 2
Game interface design part 2
 
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 Systems that supports inclusive experiences
Design Systems that supports inclusive experiencesDesign Systems that supports inclusive experiences
Design Systems that supports inclusive experiences
 
Usability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt AcademyUsability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt Academy
 
Design in UI: Visuals and Aesthetics - Swapnil Acharya
Design in UI: Visuals and Aesthetics - Swapnil AcharyaDesign in UI: Visuals and Aesthetics - Swapnil Acharya
Design in UI: Visuals and Aesthetics - Swapnil Acharya
 
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and LayoutGames Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
 
TDC 2014 - Trilha Mobile - Material design
TDC 2014 - Trilha Mobile - Material designTDC 2014 - Trilha Mobile - Material design
TDC 2014 - Trilha Mobile - Material design
 
Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...
 
Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora Designing for Multiple Devices - Sarit Arora
Designing for Multiple Devices - Sarit Arora
 
Icpc 2011 storey
Icpc 2011 storeyIcpc 2011 storey
Icpc 2011 storey
 
Gestalt
GestaltGestalt
Gestalt
 
Consistency in UX Design
Consistency in UX DesignConsistency in UX Design
Consistency in UX Design
 
The top 10 UI Design Trends for 2016
The top 10 UI Design Trends for 2016The top 10 UI Design Trends for 2016
The top 10 UI Design Trends for 2016
 
Flat Design - A Primer
Flat Design - A PrimerFlat Design - A Primer
Flat Design - A Primer
 
Introduction into User Experience
Introduction into User ExperienceIntroduction into User Experience
Introduction into User Experience
 
eBook-Principles-of-UX_PepperSquare (1).pdf
eBook-Principles-of-UX_PepperSquare (1).pdfeBook-Principles-of-UX_PepperSquare (1).pdf
eBook-Principles-of-UX_PepperSquare (1).pdf
 
Chap12
Chap12Chap12
Chap12
 
Material design full topics_animation
Material design full topics_animationMaterial design full topics_animation
Material design full topics_animation
 

Recently uploaded

ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Jaydeep Chhasatia
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native BuildpacksVish Abrams
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.Sharon Liu
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxJoão Esperancinha
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptkinjal48
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Incrobinwilliams8624
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntelliSource Technologies
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 

Recently uploaded (20)

ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native Buildpacks
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 
Salesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptxSalesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptx
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptx
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.ppt
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in Trivandrum
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Inc
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptx
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 

Material Design

  • 2. 2 This is Material Design
  • 3. 3 Introduction Classic principles of good design + Innovation of technology and science
  • 4. 4 Single underlying system Unified experience across platforms and device sizes
  • 5. 5 Principles Material is the metaphor A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic. Surfaces and edges provide visual cues Using familiar tactile attributes helps users quickly understand affordances Flexibility of the material creates new affordances that supersede those in the physical world, without breaking the rules of physics.
  • 6. 6 Principles Bold, graphic, intentional Foundational elements of print-based design: •Typography •Grids •Space •Scale •Color •Imagery Create hierarchy, meaning, and focus Emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user
  • 7. 7 Principles Motion provides meaning Respects and reinforces the user as the prime mover. All action takes place in a single environment Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize Smooth transitions
  • 8. 8 Animation Authentic Motion Motion tells us whether an object is light or heavy, flexible or rigid, small or large Animation with abrupt starts /stops or rapid can be unpleasant for the user Important to retain the feeling of physicality without sacrificing elegance, and keeping a seamless user experience Avoid linear motion
  • 9. 9 Animation Responsive Interaction Responsive interaction builds trust with the user and engages them Encourages deeper exploration of an app Important to retain the feeling of physicality without sacrificing elegance, and keeping a seamless user experience Avoid linear motion Fig. Surface Reaction on touch
  • 10. 10 Animation Responsive Interaction Fig. Radial Action
  • 11. 11 Animation Meaningful Transitions Carefully choreographed motion design can effectively guide the user’s attention and focus through multiple steps of a process or procedure Focus on elegance + functionality In a transition, consider the order in which elements move and the timing of their movement
  • 12. 12 Animation Meaningful Transitions
  • 13. 13 Animation Delightful Details Most basic use of animation is in transitions
  • 14. 14 Style Color It’s okay to be a little adventurous and vibrant!
  • 15. 15 Style Color Toolbars and large blocks will be the main colors Accent colors for primary actions (PRIORITY)
  • 16. 16 Style Color Light Theme Dark Theme
  • 17. 17 Style Typography Roboto Standard styles
  • 18. 18 Style Icons Symbolizes a command, file, device, or directory Used to represent common actions Ensure readability and clarity
  • 19. 19 Style Icons Grids, Proportion and Size Round corners Consistency
  • 21. 21 Style Imagery Choose images that express personal relevance, information and delight
  • 22. 22 Style Imagery Ensure images are dynamic, context- intelligent, and context-relevant (PREDICT what the user would like to see) Don’t shy away. Confidently use content overlays.
  • 23. 23 Style Imagery Maintain the integrity of the image  X  X
  • 24. 24 Style Imagery Use Multiple Mediums
  • 25. 25 Style Imagery Avoid Stock  X
  • 26. 26 Style Imagery Have a Point of Focus  X
  • 27. 27 Layout Designed to scale across different screen sizes Encourage apps to have a consistent look and feel using the same visual elements, structural grids, and spacing rules across platforms and screen sizes A larger screen DOES NOT mean, a greater capacity to comprehend!
  • 28. Material Design in Google Play 28