웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UX Planner & Designer


웹을 통해 새로운 창조를 꿈꾸는 인간
Humans dreaming of new creation through the web
WEBDESK
Webdesign Report
HOME WEBDESK Webdesign Report
안드로이드 롤리팝과 Material Design
Posted by kimdirector | 2015.04.08 | Hit : 1852
목록보기이전보기
작년 6월 즈음 구글과 애플에서 대세로 밀고 있는 flat 디자인에 대해서 포스팅을 한 적이 있었습니다.(링크)
 
구글에서 안드로이드 롤리팝 버젼을 내면서 Material Design이라는 이름의 디자인이 어떤 스타일의 디자인인지 한번 살펴 보고 몇가지 특징점을 나열해 볼까 합니다.
 
 
특징1. Material Design은 1dp의 통일된 두께를 가집니다.


버튼 / 프레임 / 리스트 등 다양한 종류의 UI 구성요소들이 1dp의 통일된 두께를 가진다는 것은, 플렛 디자인의 '심플함' 을 유지하겠다는 의도로 해석할 수 있습니다. 완벽한 2차원의 플렛에서 3차원의 형태로 변경하긴 했지만, 두께를 제한함으로써 두께의 차이에서 올 수 있는 복잡성을 최대한 배제하겠다는 것이지요.
 
 
특징2. 모든 ui요소는 높이와 그림자를 가집니다.


기존의 Flat디자인이 완전한 평면상에서 색채와 폰트, 폰트 크기만으로 정보를 구별하는데 한계점을 느꼈는지 Material Design에서는 모든 요소에 높이를 부여하고, 이에 따른 그림자를 부여하였습니다. 높이와 그림자를 부여함으로써 아래와 같이 UI각 요소간의 구별성을 확고히 하고 이를 통해 UI의 직관성을 향상시켰습니다.


 
Material 디자인은 Flat디자인의 진화형
 
새로운 Material 디자인은 기존의 Flat디자인과 상반되는 디자인 스타일은 아닙니다. Flat디자인의 단점을 보완하고 발전시킨 디자인이라고 할 수 있습니다. Flat 디자인은 각 요소의 배치, 폰트의 가독성/크기/색상을 중요한 디자인 요소로서 활용합니다.(종이로 출간되는 신문, 잡지를 디자인하는 편집디자인이라고 할 수 있을 것 같습니다.) 기존 종이매체에서 편집디자인은 유용하게 사용되었지만 인터액션이 존재하고 다차원적인 정보와 요소가 혼재되어 있는 스마트 디바이스 환경에서는 2% 부족한 면이 존재합니다.
 
구글은 기존의 편집디자인이 추구하던 정보의 가독성을 유지하면서 다차원적인 정보와 요소들을 효과적으로 보여주기 위해 Flat 디자인에 두께와 높이를 부여하여 Material 디자인으로 발전시켰다고 할 수 있을 것 같습니다.
 
아이폰 4, 5, 5s / 아이패드 2, 미니 / 맥북에어 등을 사용해 본 애플 유저로서 이번 구글의 Material 디자인은 '드디어 구글이 애플보다 한발짝 앞서 가는가!' 라는 생각이 듭니다. 과연 애플은 Flat 디자인을 어떤 식으로 발전 시킬까요 ?
 
 
관련 예전글
 
 
참고자료
 
추천영상

 
Posted by kimdirector | 2015.04.08 | Hit : 1852
Origin http://cuzkus.blog.me/220228472151
Tags 안드로이드 롤리팝 Material Design
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webdesign&no=438

COMMENT
Commented by kimdirector
2015.04.08 12:49:30 X
머트리얼 디자인에 대한 개념과 정의를 나열한 수준입니다. 머트리얼 디자인이 처음 도입되었을 때의 개념적인 정보 수준입니다.
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Tags
매력 로고 프로젝트 기획서 플러그인 CIP 친숙성 디자인 Button Design 메일폼 애니메이션 접근성 위젯 윈도우 HTML5 Pixel Ruler 디자이너 HTML5 로고디자인 홈페이지 MAC 웹기획자 삽화 디자인 워드 모바일 모바일 인터뷰 온라인 PR 패러다임 MS Office 개발 웹사이트 디자인DB 홈페이지 무료 개발자 광고수익 조직 IT 웹디자인 CSS 아이포느 안드로이드 HTML 쇼핑몰 아이콘 폰트 성공 덕목 평면 웹페이지 커리어 특허 웹진 커뮤니케이션 2014 블로그 인간관계 직원
Tags
워드 kimdirector 로고 존중 몰입도 셔터스톡 디자인 쇼핑몰 UX 미래 기업 최적화 자바스크립트 아이콘 아이덴티티 메타포 기획 브레인스토밍 브라우저 메일폼 계획 산업 디자인 구축 Google 웹 접근성 전자칠판 HTML5 리더 아이폰 GUI SNS 웹기획자 접근성 emeco UI 포트폴리오 웹사이트 모바일 앱 사용성 모바일 비평 로고
Category Cloud
About us Review Portfolio Design Review 
Leaders Story Mobile UXD IT Information
Web Identity Everyday Story Mobile Life
Webdesign Report Web Standard Homepage Work
Web Plan Report Practical Use Tip Design Inspiration
Dowmload Review Recommend Site
Search
Contact us
Phone : 010-8555-0503
E-mail : kimdirector@gmail.com