모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)keesung kim
모바일과 같이 작은 화면을 가진 디바이스를 디자인할 때 고민해야할 점들은 어떤 것들이 있을까요?
모바일 스크린 디자인 원칙을 10가지정도로 정리해보았습니다.
* 시간이 지나면서 이제는 업데이트가 필요한 이미지들도 꽤 있네요.
하지만 기본 원칙들은 아직 유효하기에.. :D
모바일 고려사항 (Context, Device, Interaction)
모바일 스크린 디자인 원칙
1. Diet Information (Pareto's Law)
2. Reduce Drill Down (Strolling Around)
3. Contents over Navigation (Occam's Razor)
4. Focus on Primary Task (Step by Step)
5. Economize Labor (Real Nature)
6. Keep Contents Seamlessly (Seamless)
7. Design for Input Method (Fitt's Law)
8. Select Optimal User Interface (Mental Model)
9. Choose Natural Transition (Mapping)
10. Show Emotional Animation (Mimicry)
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)keesung kim
2012년 웹월드컨퍼런스 발표자료,
이미 꽤 시간이 지나버리긴 했지만 '포털'이라는 서비스에 대해 다시금 생각해보게 된 계기, 그리고 모바일에서의 '포털'이란 어떤 역할을 해야할지에 대한 고민.
초기 자료라 공유하긴 쑥스럽지만 히스토리 정리차원에서.. :D
[Content]
Portal
Portal @Mobile
Pattern: Daily, Weekly = Chance
Context: on/offline, in/out = Experience
Device: Button size, GPS, etc. = Focus
Portal @PC = Start-page (Browser)
Portal @Mobile = Main-page (Shortcut)
앱 디자인 시작하기
Starting App Design
2014. 9. 11
이 강의는 앱 디자인을 시작하는
디자이너를 위한 강의입니다.
강의 순서
1. 강의에 들어가며
2. 앱 디자인 시작하기
3. Case Study
4. 작업하기
5. 마치며
- 강의 페이지: http://isangho.com/study/appdesign
- SlideShare: https://www.slideshare.net/SanghoLee1/ss-38908104
- 비트코인 기부하기: http://daramghaus.com/donate/bitcoin
- 이메일: isangho@me.com
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)keesung kim
모바일과 같이 작은 화면을 가진 디바이스를 디자인할 때 고민해야할 점들은 어떤 것들이 있을까요?
모바일 스크린 디자인 원칙을 10가지정도로 정리해보았습니다.
* 시간이 지나면서 이제는 업데이트가 필요한 이미지들도 꽤 있네요.
하지만 기본 원칙들은 아직 유효하기에.. :D
모바일 고려사항 (Context, Device, Interaction)
모바일 스크린 디자인 원칙
1. Diet Information (Pareto's Law)
2. Reduce Drill Down (Strolling Around)
3. Contents over Navigation (Occam's Razor)
4. Focus on Primary Task (Step by Step)
5. Economize Labor (Real Nature)
6. Keep Contents Seamlessly (Seamless)
7. Design for Input Method (Fitt's Law)
8. Select Optimal User Interface (Mental Model)
9. Choose Natural Transition (Mapping)
10. Show Emotional Animation (Mimicry)
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)keesung kim
2012년 웹월드컨퍼런스 발표자료,
이미 꽤 시간이 지나버리긴 했지만 '포털'이라는 서비스에 대해 다시금 생각해보게 된 계기, 그리고 모바일에서의 '포털'이란 어떤 역할을 해야할지에 대한 고민.
초기 자료라 공유하긴 쑥스럽지만 히스토리 정리차원에서.. :D
[Content]
Portal
Portal @Mobile
Pattern: Daily, Weekly = Chance
Context: on/offline, in/out = Experience
Device: Button size, GPS, etc. = Focus
Portal @PC = Start-page (Browser)
Portal @Mobile = Main-page (Shortcut)
앱 디자인 시작하기
Starting App Design
2014. 9. 11
이 강의는 앱 디자인을 시작하는
디자이너를 위한 강의입니다.
강의 순서
1. 강의에 들어가며
2. 앱 디자인 시작하기
3. Case Study
4. 작업하기
5. 마치며
- 강의 페이지: http://isangho.com/study/appdesign
- SlideShare: https://www.slideshare.net/SanghoLee1/ss-38908104
- 비트코인 기부하기: http://daramghaus.com/donate/bitcoin
- 이메일: isangho@me.com
질병관리본부(충북 오성읍, 2014.11.11) 특강 교육자료.
일반 공무원 대상으로 현 시대의 트렌드를 짚어주고, 질병관리본부 서비스(웹/앱)에 대해 검토한 후, 발전 방향 제시. 마지막으로 고해상도 디스플레이 시대 도래에 따른 비트맵 콘텐츠 품질 향상 방법과 플랫폼에 따른 준비 방법을 기술.
본 강의자료는 한국디자인진흥원 UXUI 전략직종 인력양성을 돕기위한 강의자료입니다. 초상권 및 자료 저작권과 관련된 부분이 있어 파일형태의 배포는 금지하며, 자료관리를 위해서 본 URL을 통해서만 공유합니다. 본 자료는 학습을 위한 용도로 사용하실 것을 부탁드립니다. 감사합니다.
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
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
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">