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