Soumettre la recherche
Mettre en ligne
머티리얼 디자인(material design)
•
18 j'aime
•
9,432 vues
W
Woncheol Lee
Suivre
구글에서 제공하는 머티리얼 디자인 가이드라인에 대한 '주요' 특징을 요약한 문서. 여기서 '주요'라 함은 개인적인 관점에 근거한 주요특징을 말함.
Lire moins
Lire la suite
Design
Signaler
Partager
Signaler
Partager
1 sur 31
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
도트클리커 게임만들기
도트클리커 게임만들기
Yunjeong Kim
개발자를 위한 도트디자인입문(2017. 03, 09.)
개발자를 위한 도트디자인입문(2017. 03, 09.)
Yunjeong Kim
주니어 디자이너들에게 알려주고 싶은 2D게임그래픽 실무팁
주니어 디자이너들에게 알려주고 싶은 2D게임그래픽 실무팁
Yunjeong Kim
활동가를 위한 속성 일러스트 워크샵 AI 워크샵(2013년)
활동가를 위한 속성 일러스트 워크샵 AI 워크샵(2013년)
여성환경연대
나만의 세상 색칠하기(Coloring your world)
나만의 세상 색칠하기(Coloring your world)
인제 박
[IGC 2017] 유유자적라이프 김윤정 - 개발자를 위한 도트 디자인
[IGC 2017] 유유자적라이프 김윤정 - 개발자를 위한 도트 디자인
강 민우
파워포인트 애니메이션
파워포인트 애니메이션
Taekyoung Kim
GameMath-Chapter 08 고급렌더링
GameMath-Chapter 08 고급렌더링
Mark Choi
Recommandé
도트클리커 게임만들기
도트클리커 게임만들기
Yunjeong Kim
개발자를 위한 도트디자인입문(2017. 03, 09.)
개발자를 위한 도트디자인입문(2017. 03, 09.)
Yunjeong Kim
주니어 디자이너들에게 알려주고 싶은 2D게임그래픽 실무팁
주니어 디자이너들에게 알려주고 싶은 2D게임그래픽 실무팁
Yunjeong Kim
활동가를 위한 속성 일러스트 워크샵 AI 워크샵(2013년)
활동가를 위한 속성 일러스트 워크샵 AI 워크샵(2013년)
여성환경연대
나만의 세상 색칠하기(Coloring your world)
나만의 세상 색칠하기(Coloring your world)
인제 박
[IGC 2017] 유유자적라이프 김윤정 - 개발자를 위한 도트 디자인
[IGC 2017] 유유자적라이프 김윤정 - 개발자를 위한 도트 디자인
강 민우
파워포인트 애니메이션
파워포인트 애니메이션
Taekyoung Kim
GameMath-Chapter 08 고급렌더링
GameMath-Chapter 08 고급렌더링
Mark Choi
Material design 3분 만에 살펴보기
Material design 3분 만에 살펴보기
Doran Hwang
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
Booseol Shin
앱 디자인 시작하기
앱 디자인 시작하기
Sangho Lee
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
Booseol Shin
iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)
Sun Jin Choi
iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)
Theodore(Yongbin) Cha
모바일UX디자인 Essential
모바일UX디자인 Essential
Junsang Dong
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
mosaicnet
[2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
[2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
Nts Nuli
일신오토클레이브 초임계 소개서
일신오토클레이브 초임계 소개서
ilshinautoclave
3D터치가 뭐길래!
3D터치가 뭐길래!
Woncheol Lee
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
yamoo9
Deferred decal
Deferred decal
민웅 이
[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)
[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)
YoungSu Son
[리치 인터페이스 디자인] 검색 패턴
[리치 인터페이스 디자인] 검색 패턴
sunhee kim
Support Design Library
Support Design Library
Taeho Kim
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
keesung kim
안드로이드 메테리얼 디자인 transition, cardview 맛보기
안드로이드 메테리얼 디자인 transition, cardview 맛보기
flashscope
HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기
정현 황
소소하지만 재미있는 UX, 트랜지션과 애니메이션 (@UX월드/2014)
소소하지만 재미있는 UX, 트랜지션과 애니메이션 (@UX월드/2014)
keesung kim
Android design guideline overview
Android design guideline overview
Geonu Choi
파이어몽키 3D 애플리케이션 만들기
파이어몽키 3D 애플리케이션 만들기
Devgear
Contenu connexe
En vedette
Material design 3분 만에 살펴보기
Material design 3분 만에 살펴보기
Doran Hwang
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
Booseol Shin
앱 디자인 시작하기
앱 디자인 시작하기
Sangho Lee
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
Booseol Shin
iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)
Sun Jin Choi
iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)
Theodore(Yongbin) Cha
모바일UX디자인 Essential
모바일UX디자인 Essential
Junsang Dong
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
mosaicnet
[2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
[2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
Nts Nuli
일신오토클레이브 초임계 소개서
일신오토클레이브 초임계 소개서
ilshinautoclave
3D터치가 뭐길래!
3D터치가 뭐길래!
Woncheol Lee
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
yamoo9
Deferred decal
Deferred decal
민웅 이
[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)
[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)
YoungSu Son
[리치 인터페이스 디자인] 검색 패턴
[리치 인터페이스 디자인] 검색 패턴
sunhee kim
Support Design Library
Support Design Library
Taeho Kim
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
keesung kim
안드로이드 메테리얼 디자인 transition, cardview 맛보기
안드로이드 메테리얼 디자인 transition, cardview 맛보기
flashscope
HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기
정현 황
소소하지만 재미있는 UX, 트랜지션과 애니메이션 (@UX월드/2014)
소소하지만 재미있는 UX, 트랜지션과 애니메이션 (@UX월드/2014)
keesung kim
En vedette
(20)
Material design 3분 만에 살펴보기
Material design 3분 만에 살펴보기
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
앱 디자인 시작하기
앱 디자인 시작하기
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)
iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)
모바일UX디자인 Essential
모바일UX디자인 Essential
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
[2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
[2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
일신오토클레이브 초임계 소개서
일신오토클레이브 초임계 소개서
3D터치가 뭐길래!
3D터치가 뭐길래!
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
Deferred decal
Deferred decal
[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)
[NEXT] Android 개발 경험 프로젝트 1일차 (Widget, Linear Layout)
[리치 인터페이스 디자인] 검색 패턴
[리치 인터페이스 디자인] 검색 패턴
Support Design Library
Support Design Library
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
안드로이드 메테리얼 디자인 transition, cardview 맛보기
안드로이드 메테리얼 디자인 transition, cardview 맛보기
HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기
소소하지만 재미있는 UX, 트랜지션과 애니메이션 (@UX월드/2014)
소소하지만 재미있는 UX, 트랜지션과 애니메이션 (@UX월드/2014)
Similaire à 머티리얼 디자인(material design)
Android design guideline overview
Android design guideline overview
Geonu Choi
파이어몽키 3D 애플리케이션 만들기
파이어몽키 3D 애플리케이션 만들기
Devgear
Devtree illu
Devtree illu
SangYun Yi
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
SangYun Yi
Smart Phone + Smart Watch : Coloring App UI Design
Smart Phone + Smart Watch : Coloring App UI Design
Seunghun Yoo
[Gpg2권]4.7 인쇄해상도의 스크린샷 만들기
[Gpg2권]4.7 인쇄해상도의 스크린샷 만들기
KyeongWon Koo
Practical methods for texture design web
Practical methods for texture design web
CARROTCG
이미지와 애니메이션 효과 적용하기
이미지와 애니메이션 효과 적용하기
Devgear
[데브루키]노대영_프린이를 위하여(프로그래밍 어린이)
[데브루키]노대영_프린이를 위하여(프로그래밍 어린이)
대영 노
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법
mosaicnet
플랫 디자인의 역사와 미래
플랫 디자인의 역사와 미래
from designer
셰이더 만들기 실습
셰이더 만들기 실습
Jungsoo Park
[안드앱콘] 1.다양한스크린사이즈
[안드앱콘] 1.다양한스크린사이즈
Neoroid
다양한 Device 대응_방법
다양한 Device 대응_방법
운용 최
Gametech2015
Gametech2015
SangYun Yi
Similaire à 머티리얼 디자인(material design)
(15)
Android design guideline overview
Android design guideline overview
파이어몽키 3D 애플리케이션 만들기
파이어몽키 3D 애플리케이션 만들기
Devtree illu
Devtree illu
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Smart Phone + Smart Watch : Coloring App UI Design
Smart Phone + Smart Watch : Coloring App UI Design
[Gpg2권]4.7 인쇄해상도의 스크린샷 만들기
[Gpg2권]4.7 인쇄해상도의 스크린샷 만들기
Practical methods for texture design web
Practical methods for texture design web
이미지와 애니메이션 효과 적용하기
이미지와 애니메이션 효과 적용하기
[데브루키]노대영_프린이를 위하여(프로그래밍 어린이)
[데브루키]노대영_프린이를 위하여(프로그래밍 어린이)
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법
플랫 디자인의 역사와 미래
플랫 디자인의 역사와 미래
셰이더 만들기 실습
셰이더 만들기 실습
[안드앱콘] 1.다양한스크린사이즈
[안드앱콘] 1.다양한스크린사이즈
다양한 Device 대응_방법
다양한 Device 대응_방법
Gametech2015
Gametech2015
Plus de Woncheol Lee
Material design update 3 Backdrop
Material design update 3 Backdrop
Woncheol Lee
Material design update 2: Bottom app bar
Material design update 2: Bottom app bar
Woncheol Lee
Material design_update 1_material system and motion
Material design_update 1_material system and motion
Woncheol Lee
사용자와의 커뮤니케이션을 위한 Haptic 기술
사용자와의 커뮤니케이션을 위한 Haptic 기술
Woncheol Lee
Placeholder
Placeholder
Woncheol Lee
iphone x 대응현황 및 미대응 사례를 통한 이슈사항 예측
iphone x 대응현황 및 미대응 사례를 통한 이슈사항 예측
Woncheol Lee
바이오 정보보호 가이드라인
바이오 정보보호 가이드라인
Woncheol Lee
상품 및 제품 제시방법에 따른 사용자 태도조사
상품 및 제품 제시방법에 따른 사용자 태도조사
Woncheol Lee
스마트폰 앱 접근권한 개인정보보호 안내서
스마트폰 앱 접근권한 개인정보보호 안내서
Woncheol Lee
주의(Attention)에 따른 컨텐츠의 가치
주의(Attention)에 따른 컨텐츠의 가치
Woncheol Lee
Frog design & mobile entertainment system
Frog design & mobile entertainment system
Woncheol Lee
Floating action button
Floating action button
Woncheol Lee
조작 가능한 시간
조작 가능한 시간
Woncheol Lee
안드로이드 기본 컴퍼넌트 커스터마이징
안드로이드 기본 컴퍼넌트 커스터마이징
Woncheol Lee
2017 디자인 트렌드 from adobe
2017 디자인 트렌드 from adobe
Woncheol Lee
대문(大門)
대문(大門)
Woncheol Lee
프로그레시브 웹앱(Pwa)
프로그레시브 웹앱(Pwa)
Woncheol Lee
Wi-Fi certified miracast
Wi-Fi certified miracast
Woncheol Lee
Plus de Woncheol Lee
(18)
Material design update 3 Backdrop
Material design update 3 Backdrop
Material design update 2: Bottom app bar
Material design update 2: Bottom app bar
Material design_update 1_material system and motion
Material design_update 1_material system and motion
사용자와의 커뮤니케이션을 위한 Haptic 기술
사용자와의 커뮤니케이션을 위한 Haptic 기술
Placeholder
Placeholder
iphone x 대응현황 및 미대응 사례를 통한 이슈사항 예측
iphone x 대응현황 및 미대응 사례를 통한 이슈사항 예측
바이오 정보보호 가이드라인
바이오 정보보호 가이드라인
상품 및 제품 제시방법에 따른 사용자 태도조사
상품 및 제품 제시방법에 따른 사용자 태도조사
스마트폰 앱 접근권한 개인정보보호 안내서
스마트폰 앱 접근권한 개인정보보호 안내서
주의(Attention)에 따른 컨텐츠의 가치
주의(Attention)에 따른 컨텐츠의 가치
Frog design & mobile entertainment system
Frog design & mobile entertainment system
Floating action button
Floating action button
조작 가능한 시간
조작 가능한 시간
안드로이드 기본 컴퍼넌트 커스터마이징
안드로이드 기본 컴퍼넌트 커스터마이징
2017 디자인 트렌드 from adobe
2017 디자인 트렌드 from adobe
대문(大門)
대문(大門)
프로그레시브 웹앱(Pwa)
프로그레시브 웹앱(Pwa)
Wi-Fi certified miracast
Wi-Fi certified miracast
머티리얼 디자인(material design)
1.
머티리얼 디자인
2.
머티리얼(material)?
3.
머티리얼 디자인(material design) 아름답고
직관적인 사용자 경험을 위한 자연스러운 애니메이션 질감이 느껴지는 표면 대담하고 선명한 그래픽
4.
지향점 1 지금까지의 디자인
원리와 현대 과학기술을 융합한 디자인 언어의 생성
5.
지향점 2 디바이스의 크기
및 플랫폼의 특성을 떠나 하나의 통합된 경험을 제공
6.
3D세상 평면의 X, Y축을
비롯하여 높낮이가 있는 Z축을 포함한 환경을 의미 Z축에는 각각의 머티리얼이 쌓이며 각 머티리얼은 1dp의 두께를 가짐
7.
빛과 그림자 그림자 효과는
Z축에 쌓여진 머티리얼의 높낮이 및 방향을 제공함
8.
물리적 특성 머티리얼은 다양한
평면크기를 가지나 높이는 1dp의 두께로 일관적임 하지만 0dp의 두께를 가질 수 없음
9.
그림자 효과 머티리얼은 Z축의
높낮이에 따라 그림자 효과를 제공함
10.
컨텐츠 표현 각 컨텐츠는
머티리얼 표면을 기준으로 제공됨
11.
모양 바꾸기 각 머티리얼은
모양이 바뀔 수 있음
12.
합치기 각 머티리얼은 분리되거나
결합할 수 있음
13.
재결합 하나의 머티리얼에서 분리된
머리티얼은 다시 재결합 됨
14.
상대적 높이 각 머티리얼은
Z축을 기준으로 상대적 높이를 가짐
15.
높/낮이 복구 높낮이가 변경된
머티리얼은 빠르게 원래 상태로 돌아감
16.
타이포그래피 화면 내 텍스트는
일정 수준의 크기 및 줄 간격을 가짐
17.
핵심 가이드라인 및
간격 모바일 레이아웃은 핵심 가이드라인 및 간격을 준수함 24dp 56dp 48dp 72dp
18.
핵심 가이드라인 및
간격 모바일 레이아웃은 핵심 가이드라인 및 간격을 준수함 48dp 8dp 56dp
19.
터치영역 크기 터치영역은 최소
48dp의 크기를 가지며 아이콘의 경우 24dp, 아바타의 경우 40dp를 준수
20.
터치영역 크기 터치영역은 최소
48dp의 크기를 가지며 팝업 내 버튼의 경우 36dp를 권장
21.
기본 레이아웃 모바일의 기본
레이아웃은 앱바와 돌출된 액션버튼으로 구성됨 사이드 메뉴는 레이어된 상태로 제공하며, 우측 사이드 메뉴도 활용 가능
22.
레이아웃 경계 카드형태의 머티리얼
또는 돌출된 액션 버튼은 특정 레이아웃에 구속될 필요 없음
23.
컨텐츠 그룹핑 컨텐츠는 동일
속성끼리 카드형태로 그룹핑하여 제공하며 각 카드 간의 경계를 분명히 함
24.
앱바 앱바는 전형적인 형태
뿐만 아니라 확장된 형태로 사용가능
25.
앱바 앱바의 형태에 따라
다음의 가이드라인을 권장함
26.
시스템바 화면 내 콘텐츠와
어울리는 시스템바를 구성 콘텐츠에 기반한 시스템바 색상 #000000(검정색)의 투명도 20% 검정색 시스템바 앱바보다 어두운 톤의 시스템바
27.
즉각적인 반응 사용자 인터랙션을
통한 즉각적인 반응이 애니메이션으로 표현됨
28.
즉각적인 반응 사용자 인터랙션을
통한 머티리얼 생성 시 애니메이션 효과 제공 인터랙션을 가한 지점으로부터 머티리얼을 확장시켜 해당 지점과의 관련성 제공
29.
시각적 연속성 콘텐츠 전환은
분리되어 표현되지 않고 연속된 느낌을 제공해야 함
30.
시각적 연속성 기존 안드로이드의
Pop in/out 대신 Sliding left/right 등의 연속된 효과 제공
31.
더 알아보기 (http://www.google.com/design)
Télécharger maintenant