SlideShare a Scribd company logo
1 of 44
실무중심의
Mobile Web UI&UX
설계 디자인

김영아
gun@ubizvalley.com
Hello!!

                        Name. 김영아
Company. (주)유비즈밸리 SPD 서비스 기획팀 팀장
What is Mobile Web UI Design?


It doesn’t start with Photoshop
WEB UI vs. Mobile Web UI




                           VS.
WEB UI vs. Mobile Web UI

1.   화면이 작다.
2.   화면이 다양하다.
3.   다양한 화면이 계속 나온다.
4.   앞으로도 계속 나온단다. 쭈욱-
WEB UI vs. Mobile Web UI

  심플          기능           터치

          1          2            3
  pivot       표준           Navigation


          4          5            6
  시선추적        템플릿          벤치마킹

          7          8            9
Getting Started Mobile Web UI Design


                       Rule 01

            항상 심플하라
                모든 것을 다 가져갈 순 없다
Getting Started Mobile Web UI Design


        Mobile Service IA
Getting Started Mobile Web UI Design


                 Title
                                               Title
               Category


                                             category


   추천 상품        Event      Category   my
                                           Mobile Event




                                           Event 및 기획젂
             Event 및 기획젂
Getting Started Mobile Web UI Design


                       Rule 02

  기능을 알고 시작하라
            단말기능, 브라우저 기능, 등등등…
Getting Started Mobile Web UI Design

                                       브라우저의 기능




      http://en.wikipedia.org/wiki/Comparison_of_web_browsers
Getting Started Mobile Web UI Design

                                       단말의 기능




 http://www.mobilexweb.com/emulators
Getting Started Mobile Web UI Design

                             GUI
Getting Started Mobile Web UI Design


                       Rule 03

         터치를 고려하라
                 손가락 굵은 사람은 서럽다
Getting Started Mobile Web UI Design

                         스마트폰과 테블릿PC의 Icon Size Guide
                               114                         110                                                 72




                                                                                                                               72
                                      114
                                                                 55




                 [ iPhone4 ]                 [ iPhone4 ]



                                                                                                 [ iPad ]


APP Store Icon     Application Icon               Spotlight Search Result and Setting Icon                  Document Icon
                                                                                                            320 x 320 (iPad)
                   114 x 114 (iPhone 4)           58 x 58 (iPhone)
                                                                                                            64 x 64 (iPad)
512 x 512          57 x 57 (Older iPhones)        50 x 50 (Spotlight results for iPad)
                                                                                                            44 x 58 (iPhone4)
                   72 x 72 (iPad)                 29 x 29 (Setting for iPad and older iPhones)
                                                                                                            22 x 29 (older iPhones)
Getting Started Mobile Web UI Design




                                        Top bar
                                        44px
                                Touch



                                        Table view
              Touch                     42px




                                        Tab bar
                                        49px

                                        Safari bottom
                                        44px
Getting Started Mobile Web UI Design


                       Rule 04

        Pivot을 고려하라
                    N-Screen은 뭔데??
Getting Started Mobile Web UI Design
Getting Started Mobile Web UI Design

                  뼈저린 시행착오의 기억들…




                                       ?
Getting Started Mobile Web UI Design

                  뼈저린 시행착오의 기억들…




                                       ?
Getting Started Mobile Web UI Design




iPhone 3G/
HTC Magic

                                                          302 x480
                                       iPhone 3G          3,5”
                                                          163 ppi
Galaxy Tab
                                                          640 x 960
                                       iPhone 4           3,5”
                                                          326 ppi
iPad/
iPad2                                                     1024 x 768
                                       iPad/iPad 2        9,7”
Google
Nexus One                                                 132 ppi
                                                          480 x 800
                                       Google Nexus One   3,7”
                                                          254 ppi
iPhone 4

                                                          320 x 480
                                       HTC Magic          3,5”
                                                          181 ppi
                                                          1024 x 600
                                       Galaxy Tab         7”
                                                          171 ppi
Getting Started Mobile Web UI Design

                              Responsive web UI




      http://mediaqueri.es/
Getting Started Mobile Web UI Design

                                     Using Conditional CSS




 http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Optimizingfor
 SafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW1
Getting Started Mobile Web UI Design

                                         Using Conditional CSS




  http://css-tricks.com/examples/ResolutionDependantLayout/example-one.php

  <link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css">
  <link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css">
  <link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css">
Getting Started Mobile Web UI Design


                       Rule 05

         표준을 참고하라
                    W3C에 다나오더라..
Getting Started Mobile Web UI Design




          http://www.w3c.or.kr/Translation/mwbp_flip_cards/
Getting Started Mobile Web UI Design


                       Rule 06

Navigation을 제공하라
             네비없인 한발짝도 움직일수 없다!
Getting Started Mobile Web UI Design

                     여긴 어디? 난 누구?
Getting Started Mobile Web UI Design

              네비게이션이 뭐고 콘텐츠는 뭔가요?
Getting Started Mobile Web UI Design

                     집에는 어떻게 가죠?



                홈       홈
Getting Started Mobile Web UI Design

                   정직한 네비게이션의 사례
Getting Started Mobile Web UI Design

                      네비게이션의 변화




                        http://m.airport.co.kr
Getting Started Mobile Web UI Design


                       Rule 07

          시선을 추적하라
          나는 니가 1초젂에 본 것을 알고 있다…
Getting Started Mobile Web UI Design

                      웹사이트의 경우…
Getting Started Mobile Web UI Design

                        모바일웹은…
Getting Started Mobile Web UI Design

                       UX 측면에서는…
Getting Started Mobile Web UI Design


                       Rule 08

            템플릿화 하라
              당신만의 라이브러리가 있는가?
Getting Started Mobile Web UI Design
 portal




                                       >

                                       >

                                       >

                                       >
  Shopping




                                           <   >
  community




              ▼
Getting Started Mobile Web UI Design

                             재밌는 Mockup




                 http://iphonemockup.lkmc.ch/
Getting Started Mobile Web UI Design


                       Rule 09

   숨쉬듯 벤치마킹하라
         시장조사? 할 줄 몰라서 안하는거 아니다
Getting Started Mobile Web UI Design
END
END




       UI는 U&I입니다.
너와 나의 관계를 만드는 것이 UI 입니다.

                  - 관계디자인 中
Q&A

More Related Content

What's hot

모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)keesung kim
 
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)Saltlux zinyus
 
모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)
모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)
모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)keesung kim
 
웹접근성캠프서울 반응형웹에서의접근성확보방법
웹접근성캠프서울 반응형웹에서의접근성확보방법웹접근성캠프서울 반응형웹에서의접근성확보방법
웹접근성캠프서울 반응형웹에서의접근성확보방법선영 박
 
모바일UX디자인 Essential
모바일UX디자인 Essential모바일UX디자인 Essential
모바일UX디자인 EssentialJunsang Dong
 
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128jinwook shin
 
C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까
C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까
C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까NAVER D2
 
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)keesung kim
 
Widget Market Overview Mar 2008
Widget Market Overview Mar 2008Widget Market Overview Mar 2008
Widget Market Overview Mar 2008Min Seok Kang
 
모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부NAVER D2
 
위젯 마케팅의 모든 것 - 2008년판 (All about Widget Marketing - 2008 Edition)
위젯 마케팅의 모든 것 - 2008년판 (All about Widget Marketing - 2008 Edition)위젯 마케팅의 모든 것 - 2008년판 (All about Widget Marketing - 2008 Edition)
위젯 마케팅의 모든 것 - 2008년판 (All about Widget Marketing - 2008 Edition)guest08dc84
 
반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2Lee Ji Eun
 
모바일앱개발 교육자료
모바일앱개발 교육자료모바일앱개발 교육자료
모바일앱개발 교육자료JinHyuck Churn
 
모바일웹Ui개발 저자세미나 2부
모바일웹Ui개발 저자세미나 2부모바일웹Ui개발 저자세미나 2부
모바일웹Ui개발 저자세미나 2부NAVER D2
 
누구나 만드는 모바일앱 하이씨엘
누구나 만드는 모바일앱 하이씨엘누구나 만드는 모바일앱 하이씨엘
누구나 만드는 모바일앱 하이씨엘VentureSquare
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기정혁 권
 

What's hot (17)

모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)
 
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
반응형, 적응형 웹, 그 다음은? (지훈 Ux pd)
 
모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)
모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)
모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)
 
웹접근성캠프서울 반응형웹에서의접근성확보방법
웹접근성캠프서울 반응형웹에서의접근성확보방법웹접근성캠프서울 반응형웹에서의접근성확보방법
웹접근성캠프서울 반응형웹에서의접근성확보방법
 
모바일UX디자인 Essential
모바일UX디자인 Essential모바일UX디자인 Essential
모바일UX디자인 Essential
 
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
 
C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까
C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까
C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까
 
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
 
Widget Market Overview Mar 2008
Widget Market Overview Mar 2008Widget Market Overview Mar 2008
Widget Market Overview Mar 2008
 
모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부
 
Responsive web
Responsive webResponsive web
Responsive web
 
위젯 마케팅의 모든 것 - 2008년판 (All about Widget Marketing - 2008 Edition)
위젯 마케팅의 모든 것 - 2008년판 (All about Widget Marketing - 2008 Edition)위젯 마케팅의 모든 것 - 2008년판 (All about Widget Marketing - 2008 Edition)
위젯 마케팅의 모든 것 - 2008년판 (All about Widget Marketing - 2008 Edition)
 
반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2
 
모바일앱개발 교육자료
모바일앱개발 교육자료모바일앱개발 교육자료
모바일앱개발 교육자료
 
모바일웹Ui개발 저자세미나 2부
모바일웹Ui개발 저자세미나 2부모바일웹Ui개발 저자세미나 2부
모바일웹Ui개발 저자세미나 2부
 
누구나 만드는 모바일앱 하이씨엘
누구나 만드는 모바일앱 하이씨엘누구나 만드는 모바일앱 하이씨엘
누구나 만드는 모바일앱 하이씨엘
 
HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기HTML5 로 iPhone App 만들기
HTML5 로 iPhone App 만들기
 

Viewers also liked

실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step up실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step upAmy Young Ah Kim
 
2016 커머스 ux 트랜드
2016 커머스 ux 트랜드2016 커머스 ux 트랜드
2016 커머스 ux 트랜드RightBrain inc.
 
HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기정현 황
 
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽웹데브모바일
 
Mobile UX Design Essential
Mobile UX Design EssentialMobile UX Design Essential
Mobile UX Design EssentialJunsang Dong
 
U&i insight2012스터디설명회
U&i insight2012스터디설명회U&i insight2012스터디설명회
U&i insight2012스터디설명회Amy Young Ah Kim
 
EMS Software: Enabling the Workplace of the Future
EMS Software: Enabling the Workplace of the FutureEMS Software: Enabling the Workplace of the Future
EMS Software: Enabling the Workplace of the FutureEMS Software
 
프로젝트실무와 기획의 역할
프로젝트실무와 기획의 역할프로젝트실무와 기획의 역할
프로젝트실무와 기획의 역할Amy Young Ah Kim
 
Design Operations mural - 8 mar 2017
Design Operations   mural - 8 mar 2017Design Operations   mural - 8 mar 2017
Design Operations mural - 8 mar 2017Dave Malouf
 
트렌드와 사례연구를 통한 모바일 커머스 차별화 UI/UX 전략 모델 통찰
트렌드와 사례연구를 통한모바일 커머스 차별화 UI/UX 전략 모델 통찰트렌드와 사례연구를 통한모바일 커머스 차별화 UI/UX 전략 모델 통찰
트렌드와 사례연구를 통한 모바일 커머스 차별화 UI/UX 전략 모델 통찰Billy Choi
 
3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장
3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장 3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장
3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장 ideaguide
 
웹사이트 벤치마킹
웹사이트 벤치마킹웹사이트 벤치마킹
웹사이트 벤치마킹JooWan
 
[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유
[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유
[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유Nts Nuli
 
매출 성장 공식
매출 성장 공식매출 성장 공식
매출 성장 공식saymi76 lee
 
신규앱제안서
신규앱제안서신규앱제안서
신규앱제안서Yun Su Lee
 
모바일 UX디자인의 개요
모바일 UX디자인의 개요모바일 UX디자인의 개요
모바일 UX디자인의 개요Junsang Dong
 
당신이 UX Design Project에 참여할 때 알아야 할 것들
당신이 UX Design Project에 참여할 때 알아야 할 것들당신이 UX Design Project에 참여할 때 알아야 할 것들
당신이 UX Design Project에 참여할 때 알아야 할 것들Dongsik Yang
 
해외 150여 개 커머스 웹사이트 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
해외 150여 개 커머스 웹사이트 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토해외 150여 개 커머스 웹사이트 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
해외 150여 개 커머스 웹사이트 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토Billy Choi
 
[비즈스프링] 웹로그분석은 무엇인가?
[비즈스프링] 웹로그분석은 무엇인가?[비즈스프링] 웹로그분석은 무엇인가?
[비즈스프링] 웹로그분석은 무엇인가?BizSpring Inc.
 
제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검
제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검
제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검dgmit2009
 

Viewers also liked (20)

실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step up실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step up
 
2016 커머스 ux 트랜드
2016 커머스 ux 트랜드2016 커머스 ux 트랜드
2016 커머스 ux 트랜드
 
HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기
 
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
 
Mobile UX Design Essential
Mobile UX Design EssentialMobile UX Design Essential
Mobile UX Design Essential
 
U&i insight2012스터디설명회
U&i insight2012스터디설명회U&i insight2012스터디설명회
U&i insight2012스터디설명회
 
EMS Software: Enabling the Workplace of the Future
EMS Software: Enabling the Workplace of the FutureEMS Software: Enabling the Workplace of the Future
EMS Software: Enabling the Workplace of the Future
 
프로젝트실무와 기획의 역할
프로젝트실무와 기획의 역할프로젝트실무와 기획의 역할
프로젝트실무와 기획의 역할
 
Design Operations mural - 8 mar 2017
Design Operations   mural - 8 mar 2017Design Operations   mural - 8 mar 2017
Design Operations mural - 8 mar 2017
 
트렌드와 사례연구를 통한 모바일 커머스 차별화 UI/UX 전략 모델 통찰
트렌드와 사례연구를 통한모바일 커머스 차별화 UI/UX 전략 모델 통찰트렌드와 사례연구를 통한모바일 커머스 차별화 UI/UX 전략 모델 통찰
트렌드와 사례연구를 통한 모바일 커머스 차별화 UI/UX 전략 모델 통찰
 
3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장
3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장 3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장
3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장
 
웹사이트 벤치마킹
웹사이트 벤치마킹웹사이트 벤치마킹
웹사이트 벤치마킹
 
[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유
[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유
[2014널리세미나] 접근성과 사용성, 기획자가 챙겨야 하는 이유
 
매출 성장 공식
매출 성장 공식매출 성장 공식
매출 성장 공식
 
신규앱제안서
신규앱제안서신규앱제안서
신규앱제안서
 
모바일 UX디자인의 개요
모바일 UX디자인의 개요모바일 UX디자인의 개요
모바일 UX디자인의 개요
 
당신이 UX Design Project에 참여할 때 알아야 할 것들
당신이 UX Design Project에 참여할 때 알아야 할 것들당신이 UX Design Project에 참여할 때 알아야 할 것들
당신이 UX Design Project에 참여할 때 알아야 할 것들
 
해외 150여 개 커머스 웹사이트 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
해외 150여 개 커머스 웹사이트 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토해외 150여 개 커머스 웹사이트 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
해외 150여 개 커머스 웹사이트 사례 연구를 통한 온라인 커머스 UX/UI 방향성 검토
 
[비즈스프링] 웹로그분석은 무엇인가?
[비즈스프링] 웹로그분석은 무엇인가?[비즈스프링] 웹로그분석은 무엇인가?
[비즈스프링] 웹로그분석은 무엇인가?
 
제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검
제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검
제 4회 DGMIT UI&UX 컨퍼런스 : 2014 UX/UI 디자인 트렌드 중간점검
 

Similar to 웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아

모바일어플디자인
모바일어플디자인모바일어플디자인
모바일어플디자인lovemarkj
 
OS vi : Smart Pad UI Design (2011 Graduation Project)
OS vi : Smart Pad UI Design (2011 Graduation Project)OS vi : Smart Pad UI Design (2011 Graduation Project)
OS vi : Smart Pad UI Design (2011 Graduation Project)Wooseok Jeon
 
아이스크림 샌드위치(Android 4.0) UI Review
아이스크림 샌드위치(Android 4.0) UI Review아이스크림 샌드위치(Android 4.0) UI Review
아이스크림 샌드위치(Android 4.0) UI Reviewdelver
 
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0KTH
 
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0_앱스프레소팀_한기태
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0_앱스프레소팀_한기태H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0_앱스프레소팀_한기태
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0_앱스프레소팀_한기태KTH, 케이티하이텔
 
HTML5 on mobile
HTML5 on mobileHTML5 on mobile
HTML5 on mobile정혁 권
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다yamoo9
 
앱드론을 활용한 손쉬운 모바일 매쉬업 개발 | Devon 2012
앱드론을 활용한 손쉬운 모바일 매쉬업 개발 | Devon 2012앱드론을 활용한 손쉬운 모바일 매쉬업 개발 | Devon 2012
앱드론을 활용한 손쉬운 모바일 매쉬업 개발 | Devon 2012Daum DNA
 
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경mosaicnet
 
메타버스 서비스에 Android 개발자가 할 일이 있나요?
메타버스 서비스에 Android 개발자가 할 일이 있나요?메타버스 서비스에 Android 개발자가 할 일이 있나요?
메타버스 서비스에 Android 개발자가 할 일이 있나요?Myungwook Ahn
 
UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)
UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)
UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)Billy Choi
 
강의 개요 및 교안 2013 4차수_font
강의 개요 및 교안 2013 4차수_font강의 개요 및 교안 2013 4차수_font
강의 개요 및 교안 2013 4차수_fontYoung Choi
 
Limepaper 회사소개서 2014
Limepaper 회사소개서 2014Limepaper 회사소개서 2014
Limepaper 회사소개서 2014Limepaper, Inc.
 
앱이냐?웹이냐?
앱이냐?웹이냐?앱이냐?웹이냐?
앱이냐?웹이냐?Chulgyu Shin
 
앱이냐?웹이냐?
앱이냐?웹이냐?앱이냐?웹이냐?
앱이냐?웹이냐?Chulgyu Shin
 
최영현 강의 개요 및 교안샘플 배포용_font
최영현 강의 개요 및 교안샘플 배포용_font최영현 강의 개요 및 교안샘플 배포용_font
최영현 강의 개요 및 교안샘플 배포용_fontYoung Choi
 
강의 개요 및 교안 2014 1차수_font
강의 개요 및 교안 2014 1차수_font강의 개요 및 교안 2014 1차수_font
강의 개요 및 교안 2014 1차수_fontYoung Choi
 
Mobile ux design_for_ck_univ
Mobile ux design_for_ck_univMobile ux design_for_ck_univ
Mobile ux design_for_ck_univJunsang Dong
 

Similar to 웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아 (20)

모바일어플디자인
모바일어플디자인모바일어플디자인
모바일어플디자인
 
OS vi : Smart Pad UI Design (2011 Graduation Project)
OS vi : Smart Pad UI Design (2011 Graduation Project)OS vi : Smart Pad UI Design (2011 Graduation Project)
OS vi : Smart Pad UI Design (2011 Graduation Project)
 
아이스크림 샌드위치(Android 4.0) UI Review
아이스크림 샌드위치(Android 4.0) UI Review아이스크림 샌드위치(Android 4.0) UI Review
아이스크림 샌드위치(Android 4.0) UI Review
 
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
 
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0_앱스프레소팀_한기태
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0_앱스프레소팀_한기태H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0_앱스프레소팀_한기태
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0_앱스프레소팀_한기태
 
HTML5 on mobile
HTML5 on mobileHTML5 on mobile
HTML5 on mobile
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
 
앱드론을 활용한 손쉬운 모바일 매쉬업 개발 | Devon 2012
앱드론을 활용한 손쉬운 모바일 매쉬업 개발 | Devon 2012앱드론을 활용한 손쉬운 모바일 매쉬업 개발 | Devon 2012
앱드론을 활용한 손쉬운 모바일 매쉬업 개발 | Devon 2012
 
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
스마트폰 전문 개발사가 바라보는 급변하는 모바일 환경
 
메타버스 서비스에 Android 개발자가 할 일이 있나요?
메타버스 서비스에 Android 개발자가 할 일이 있나요?메타버스 서비스에 Android 개발자가 할 일이 있나요?
메타버스 서비스에 Android 개발자가 할 일이 있나요?
 
UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)
UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)
UI/UX의 변화와 방향성 사색 (차세대 인터페이스 및 터치리스 UI를 위한 인터랙션 개발기술 세미나)
 
강의 개요 및 교안 2013 4차수_font
강의 개요 및 교안 2013 4차수_font강의 개요 및 교안 2013 4차수_font
강의 개요 및 교안 2013 4차수_font
 
Limepaper 회사소개서 2014
Limepaper 회사소개서 2014Limepaper 회사소개서 2014
Limepaper 회사소개서 2014
 
앱이냐?웹이냐?
앱이냐?웹이냐?앱이냐?웹이냐?
앱이냐?웹이냐?
 
앱이냐?웹이냐?
앱이냐?웹이냐?앱이냐?웹이냐?
앱이냐?웹이냐?
 
Hybrid app and app store
Hybrid app and app storeHybrid app and app store
Hybrid app and app store
 
최영현 강의 개요 및 교안샘플 배포용_font
최영현 강의 개요 및 교안샘플 배포용_font최영현 강의 개요 및 교안샘플 배포용_font
최영현 강의 개요 및 교안샘플 배포용_font
 
2013 app design trends
2013 app design trends2013 app design trends
2013 app design trends
 
강의 개요 및 교안 2014 1차수_font
강의 개요 및 교안 2014 1차수_font강의 개요 및 교안 2014 1차수_font
강의 개요 및 교안 2014 1차수_font
 
Mobile ux design_for_ck_univ
Mobile ux design_for_ck_univMobile ux design_for_ck_univ
Mobile ux design_for_ck_univ
 

웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아

  • 1. 실무중심의 Mobile Web UI&UX 설계 디자인 김영아 gun@ubizvalley.com
  • 2. Hello!! Name. 김영아 Company. (주)유비즈밸리 SPD 서비스 기획팀 팀장
  • 3. What is Mobile Web UI Design? It doesn’t start with Photoshop
  • 4. WEB UI vs. Mobile Web UI VS.
  • 5. WEB UI vs. Mobile Web UI 1. 화면이 작다. 2. 화면이 다양하다. 3. 다양한 화면이 계속 나온다. 4. 앞으로도 계속 나온단다. 쭈욱-
  • 6. WEB UI vs. Mobile Web UI 심플 기능 터치 1 2 3 pivot 표준 Navigation 4 5 6 시선추적 템플릿 벤치마킹 7 8 9
  • 7. Getting Started Mobile Web UI Design Rule 01 항상 심플하라 모든 것을 다 가져갈 순 없다
  • 8. Getting Started Mobile Web UI Design Mobile Service IA
  • 9. Getting Started Mobile Web UI Design Title Title Category category 추천 상품 Event Category my Mobile Event Event 및 기획젂 Event 및 기획젂
  • 10. Getting Started Mobile Web UI Design Rule 02 기능을 알고 시작하라 단말기능, 브라우저 기능, 등등등…
  • 11. Getting Started Mobile Web UI Design 브라우저의 기능 http://en.wikipedia.org/wiki/Comparison_of_web_browsers
  • 12. Getting Started Mobile Web UI Design 단말의 기능 http://www.mobilexweb.com/emulators
  • 13. Getting Started Mobile Web UI Design GUI
  • 14. Getting Started Mobile Web UI Design Rule 03 터치를 고려하라 손가락 굵은 사람은 서럽다
  • 15. Getting Started Mobile Web UI Design 스마트폰과 테블릿PC의 Icon Size Guide 114 110 72 72 114 55 [ iPhone4 ] [ iPhone4 ] [ iPad ] APP Store Icon Application Icon Spotlight Search Result and Setting Icon Document Icon 320 x 320 (iPad) 114 x 114 (iPhone 4) 58 x 58 (iPhone) 64 x 64 (iPad) 512 x 512 57 x 57 (Older iPhones) 50 x 50 (Spotlight results for iPad) 44 x 58 (iPhone4) 72 x 72 (iPad) 29 x 29 (Setting for iPad and older iPhones) 22 x 29 (older iPhones)
  • 16. Getting Started Mobile Web UI Design Top bar 44px Touch Table view Touch 42px Tab bar 49px Safari bottom 44px
  • 17. Getting Started Mobile Web UI Design Rule 04 Pivot을 고려하라 N-Screen은 뭔데??
  • 18. Getting Started Mobile Web UI Design
  • 19. Getting Started Mobile Web UI Design 뼈저린 시행착오의 기억들… ?
  • 20. Getting Started Mobile Web UI Design 뼈저린 시행착오의 기억들… ?
  • 21. Getting Started Mobile Web UI Design iPhone 3G/ HTC Magic 302 x480 iPhone 3G 3,5” 163 ppi Galaxy Tab 640 x 960 iPhone 4 3,5” 326 ppi iPad/ iPad2 1024 x 768 iPad/iPad 2 9,7” Google Nexus One 132 ppi 480 x 800 Google Nexus One 3,7” 254 ppi iPhone 4 320 x 480 HTC Magic 3,5” 181 ppi 1024 x 600 Galaxy Tab 7” 171 ppi
  • 22. Getting Started Mobile Web UI Design Responsive web UI http://mediaqueri.es/
  • 23. Getting Started Mobile Web UI Design Using Conditional CSS http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Optimizingfor SafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW1
  • 24. Getting Started Mobile Web UI Design Using Conditional CSS http://css-tricks.com/examples/ResolutionDependantLayout/example-one.php <link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css"> <link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css"> <link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css">
  • 25. Getting Started Mobile Web UI Design Rule 05 표준을 참고하라 W3C에 다나오더라..
  • 26. Getting Started Mobile Web UI Design http://www.w3c.or.kr/Translation/mwbp_flip_cards/
  • 27. Getting Started Mobile Web UI Design Rule 06 Navigation을 제공하라 네비없인 한발짝도 움직일수 없다!
  • 28. Getting Started Mobile Web UI Design 여긴 어디? 난 누구?
  • 29. Getting Started Mobile Web UI Design 네비게이션이 뭐고 콘텐츠는 뭔가요?
  • 30. Getting Started Mobile Web UI Design 집에는 어떻게 가죠? 홈 홈
  • 31. Getting Started Mobile Web UI Design 정직한 네비게이션의 사례
  • 32. Getting Started Mobile Web UI Design 네비게이션의 변화 http://m.airport.co.kr
  • 33. Getting Started Mobile Web UI Design Rule 07 시선을 추적하라 나는 니가 1초젂에 본 것을 알고 있다…
  • 34. Getting Started Mobile Web UI Design 웹사이트의 경우…
  • 35. Getting Started Mobile Web UI Design 모바일웹은…
  • 36. Getting Started Mobile Web UI Design UX 측면에서는…
  • 37. Getting Started Mobile Web UI Design Rule 08 템플릿화 하라 당신만의 라이브러리가 있는가?
  • 38. Getting Started Mobile Web UI Design portal > > > > Shopping < > community ▼
  • 39. Getting Started Mobile Web UI Design 재밌는 Mockup http://iphonemockup.lkmc.ch/
  • 40. Getting Started Mobile Web UI Design Rule 09 숨쉬듯 벤치마킹하라 시장조사? 할 줄 몰라서 안하는거 아니다
  • 41. Getting Started Mobile Web UI Design
  • 42. END
  • 43. END UI는 U&I입니다. 너와 나의 관계를 만드는 것이 UI 입니다. - 관계디자인 中
  • 44. Q&A