http://msd2013.jylee6977.com/tc
KGIT 2013 SPRING CLASS @ JYLEE
Mobile
Service
Design
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
App Design Process (after service strategy)
IDEA WIREFRAME DESIGNING
Information Architecture(IA) User Interface Design(UI) Graphic User Interface Design(GUI) Sourcing(XML)
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
App Design Process (after service strategy)
Information Architecture(IA) User Interface Design(UI) Graphic User Interface Design(GUI) Sourcing(XML)
Mobile
Service
Design
0. Systemizing Informations
Sitemap
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
1. Converting Information to Screen
User Interface Basics
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Nature
Culture Society
Human
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Nature
Culture
Cyber
Society
Human
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Cyber
Interface : Human Cyber ( )
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
An interface is a point of interaction between two systems or work groups. In the manufacturing environment, the interaction and coordination between a number of work groups communicate plans and control production activity.
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
+
+
세 분야간 긴밀한 작업 필요
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
필수적인 요소를 제공하는 최소한의 레벨 : 유용성
논리적인 설계 : 사용성, 편의성
일관성, 흥미로운 설계 : 심미성
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
–
Navigation bar Action bar
Multi-pane layouts Selection
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Touch Press, Lift
Long Press Press, Wait, Lift
Swipe Press, Move, Lift
Drag Long press, Move,
Lift
Double Touch Pinch Open /Close
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Top Level View
Category View
Detail/Edit View
Top Level View Category View Detail/Edit View
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Put content forward
Set up action bars for navigation and actions
Create an identity for your app
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Use tabs to combine category selection and data display
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Allow cutting through hierarchies
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Layout : View + Action Lights-out mode
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Make navigation between detail views efficient
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
UP
back
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
App Icon View Control Action Button Action Overflow
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Main Action Bar
Top Bar
Bottom Bar
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Main Action Bar
Top Bar
Bottom Bar
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Tab
Spinners
Drawers
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
F — Frequent Will people use this action at least 7 out of 10 times they visit the screen? Will they typically use it several times in a row? Would taking an extra step every time truly be burdensome? I — Important Do you want everyone to discover this action because it's especially cool or a selling point? Is it something that needs to be effortless in the rare cases it's needed? T — Typical Is it typically presented as a first-class action in similar apps? Given the context, would people be surprised if it were buried in the action overflow?
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
2. Schematic Your User Interfaces
Wireframe
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Proto : only 5 proto free | Interactive Moqups : Iphone (Non- Interactive) UXPin : 30days Free | Interactive
Balsamiq : Download App Justinmind : Download App | Interactive Fluid : Interactive Free
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Axure : Download App | Interactive High Mockflow : 5pages free | Interactive Protoshare : Fee Included
Wireframe : So simple Wireframe Sketcher : Download Pidoco : Fast and Interactive
Mobile
Service
Design
http://msd2013.jylee6977.com/tc
Invision : Share Your Prototype Mock.me (simplest to check) iPLOTZ : Share your project
Pencils : Download GUI
Mobile
Service
Design
FOR NEXT WEEK
1. SCENARIO 2. SELECT KEY IDEA & IA PATTERN 3. PAPER PROTOTYPE 4. SITEMAP (LIST OF FUNCTIONS&SPECS)
5. UI WIREFRAME