material design 3분만에 살펴보기

37
3분 만에 알아보는 Material Design

Upload: seokin-hwang

Post on 25-May-2015

5.767 views

Category:

Mobile


2 download

DESCRIPTION

구글의 '안드로이드 L', 새로운 디자인 'Material design' 에 대해서 스마트스터디 내에 공유한 내용입니다. slideshare에 업로드하기 위해 동영상 자료는 제외되었습니다. material design에 대한 자료 출처는 'http://www.google.com/design/spec/material-design/introduction.html' 임을 밝힙니다.

TRANSCRIPT

Page 1: Material design 3분만에 살펴보기

3분����������� ������������������  만에����������� ������������������  알아보는����������� ������������������  Material����������� ������������������  Design

Page 2: Material design 3분만에 살펴보기

Material����������� ������������������  Design?

전세계����������� ������������������  일관된����������� ������������������  교통����������� ������������������  표지판

누구나����������� ������������������  알아볼����������� ������������������  수����������� ������������������  있는

http://www.google.com/design/spec/material-design/introduction.html모든����������� ������������������  출처����������� ������������������  :

Page 3: Material design 3분만에 살펴보기

주차����������� ������������������  장소? 똻?…⋯뱀����������� ������������������  조심?Was����������� ������������������  ist����������� ������������������  das?

STOP

멈추세요!

Page 4: Material design 3분만에 살펴보기

Material����������� ������������������  Design?

일관된����������� ������������������  UI/UX를����������� ������������������  제공하는����������� ������������������  것직관적이면서

Page 5: Material design 3분만에 살펴보기

어떤����������� ������������������  것이����������� ������������������  직관적인데?

쓰기쉬운����������� ������������������  UI/UX를����������� ������������������  정하려면����������� ������������������  매우����������� ������������������  깊이����������� ������������������  연구해야합니다.

색,����������� ������������������  크기,����������� ������������������  모양,����������� ������������������  움직임,����������� ������������������  폰트,����������� ������������������  반응성����������� ������������������  그리고����������� ������������������  사람…⋯…⋯.

=쓰기����������� ������������������  쉬운,����������� ������������������  쉽게����������� ������������������  이해되는

Page 6: Material design 3분만에 살펴보기

구글이����������� ������������������  만든����������� ������������������  가이드

Material����������� ������������������  Design

Page 7: Material design 3분만에 살펴보기

설명이����������� ������������������  많네…⋯…⋯.

가장����������� ������������������  쉽고����������� ������������������  빠르게����������� ������������������  

‘예시’로����������� ������������������  이해하기

Page 8: Material design 3분만에 살펴보기

Bad Good

Page 9: Material design 3분만에 살펴보기

다음����������� ������������������  탭은����������� ������������������  어떻게����������� ������������������  움직이면����������� ������������������  나올까요?

Page 10: Material design 3분만에 살펴보기

더����������� ������������������  멋있는,����������� ������������������  입체감����������� ������������������  있는����������� ������������������  아이콘����������� ������������������  ����������� ������������������   VS����������� ������������������   ����������� ������������������   ����������� ������������������  단순하지만����������� ������������������  명확한����������� ������������������  아이콘

Page 11: Material design 3분만에 살펴보기

도대체����������� ������������������  어떤게����������� ������������������  버튼이야?

Page 12: Material design 3분만에 살펴보기

굳이����������� ������������������  저����������� ������������������  버튼이����������� ������������������  내����������� ������������������  시선을����������� ������������������  끌어야해요?����������� ������������������  난����������� ������������������  리스트를����������� ������������������  보고����������� ������������������  있다고!

Page 13: Material design 3분만에 살펴보기

리스트에선����������� ������������������  더����������� ������������������  많은����������� ������������������  걸����������� ������������������  보고����������� ������������������  싶은데����������� ������������������  왜����������� ������������������  저렇게����������� ������������������  나누어둔거야?

Page 14: Material design 3분만에 살펴보기

파일명…⋯����������� ������������������  그렇게����������� ������������������  중요하지����������� ������������������  않은데,����������� ������������������  저렇게����������� ������������������  공간을����������� ������������������  차지해?

Page 15: Material design 3분만에 살펴보기

개발자가����������� ������������������  부릅니다.����������� ������������������  ‘자동정렬이����������� ������������������  그렇게����������� ������������������  어려운����������� ������������������  거였니?’

Page 16: Material design 3분만에 살펴보기

알림은����������� ������������������  알림에����������� ������������������  충실합시다.����������� ������������������  많은����������� ������������������  정보,����������� ������������������  많은����������� ������������������  욕심은����������� ������������������  좀����������� ������������������  넣어둬~

Page 17: Material design 3분만에 살펴보기

어떤����������� ������������������  것을����������� ������������������  쓰실래요?����������� ������������������  오른쪽?����������� ������������������  왼쪽?

Page 18: Material design 3분만에 살펴보기

지금����������� ������������������  한����������� ������������������  화면에����������� ������������������  카테고리����������� ������������������  버튼이����������� ������������������  8개����������� ������������������  있는거����������� ������������������  맞아요?����������� ������������������  정말?

Page 19: Material design 3분만에 살펴보기

아����������� ������������������  버����������� ������������������  지����������� ������������������  가����������� ������������������  방����������� ������������������  에����������� ������������������  들����������� ������������������  어����������� ������������������  가����������� ������������������  신����������� ������������������  다

Page 20: Material design 3분만에 살펴보기

정신불안증을����������� ������������������  더����������� ������������������  쉽게����������� ������������������  일으키는����������� ������������������  사진은?

Page 21: Material design 3분만에 살펴보기

‘+’를����������� ������������������  누르면����������� ������������������  뭐가����������� ������������������  추가되야하는거����������� ������������������  아니야?����������� ������������������  버튼도����������� ������������������  종류가����������� ������������������  있다!

Page 22: Material design 3분만에 살펴보기

이것����������� ������������������  말고도…⋯

Page 23: Material design 3분만에 살펴보기
Page 24: Material design 3분만에 살펴보기
Page 25: Material design 3분만에 살펴보기
Page 26: Material design 3분만에 살펴보기
Page 27: Material design 3분만에 살펴보기

반응형����������� ������������������  웹

Page 28: Material design 3분만에 살펴보기

COLOR����������� ������������������  Palette

Page 29: Material design 3분만에 살펴보기

Color����������� ������������������  application

Page 30: Material design 3분만에 살펴보기

that����������� ������������������  Guideline…⋯

Page 31: Material design 3분만에 살펴보기

이제����������� ������������������  다음����������� ������������������  단계는…⋯?

3분����������� ������������������  만에����������� ������������������  알아보는����������� ������������������  Material����������� ������������������  Design

Page 32: Material design 3분만에 살펴보기

나의����������� ������������������  것으로����������� ������������������  만들기

앱과����������� ������������������  웹에����������� ������������������  활용하기

Page 33: Material design 3분만에 살펴보기

그전까지의����������� ������������������  고민들…⋯…⋯.

버튼����������� ������������������  아이콘은����������� ������������������  뭘����������� ������������������  써야하는거야?

목록은����������� ������������������  어떻게����������� ������������������  보여주지?

웹뷰어에서는����������� ������������������  어떤����������� ������������������  버튼을����������� ������������������  제공해줘야해?

그냥����������� ������������������  다����������� ������������������  빼고����������� ������������������  기본만����������� ������������������  넣을까?

PC,����������� ������������������  TABLET,����������� ������������������  MOBILE����������� ������������������  

전부����������� ������������������  잘����������� ������������������  보여야하는데…⋯메뉴는����������� ������������������  어디다����������� ������������������  넣어?

어떻게����������� ������������������  배열하지?

카테고리는����������� ������������������  어디서����������� ������������������  묶는게����������� ������������������  좋을까?

썸네일����������� ������������������  이미지는����������� ������������������  어떤����������� ������������������  크기와����������� ������������������  비율로?

ui에����������� ������������������  이미지가����������� ������������������  많아지면����������� ������������������  웹이����������� ������������������  느릴텐데

알림은����������� ������������������  어떻게����������� ������������������  보여줘야해?

Page 34: Material design 3분만에 살펴보기

Material����������� ������������������  Design����������� ������������������  이게����������� ������������������  도움이����������� ������������������  되겠어!

Page 35: Material design 3분만에 살펴보기

웹����������� ������������������  기반인����������� ������������������  서비스에����������� ������������������  녹여넣는����������� ������������������  작업을����������� ������������������  할����������� ������������������  예정

Spacing����������� ������������������  /����������� ������������������  Grids����������� ������������������  /����������� ������������������  Color����������� ������������������  /����������� ������������������  Lists����������� ������������������  /����������� ������������������  List����������� ������������������  controls����������� ������������������  /����������� ������������������  Menus����������� ������������������  ����������� ������������������  

/����������� ������������������  Snackbars����������� ������������������  /����������� ������������������  Tabs����������� ������������������  /����������� ������������������  Buttons����������� ������������������  /����������� ������������������  icon����������� ������������������  /����������� ������������������  Tooltips����������� ������������������  /����������� ������������������  Dialogs����������� ������������������  

/����������� ������������������  Cards����������� ������������������  /����������� ������������������  Dividers����������� ������������������  /����������� ������������������  Switches����������� ������������������  /����������� ������������������  Structure����������� ������������������  /����������� ������������������  Typography����������� ������������������  

…⋯…⋯.

Page 36: Material design 3분만에 살펴보기

잘����������� ������������������  설계된����������� ������������������  UI/UX����������� ������������������  >����������� ������������������  좋은����������� ������������������  서비스����������� ������������������  경험

Page 37: Material design 3분만에 살펴보기

����������� ������������������  Thank����������� ������������������  you2014.07.11����������� ������������������  ALPACA����������� ������������������  

HWANG����������� ������������������  SEOK����������� ������������������  IN