소소하고 재미있는 웹ux -  · service ux design for multi-screen . size context content...

57
소소하고 재미있는 UX 다음카카오 임정화

Upload: others

Post on 18-Jan-2020

10 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

소소하고 재미있는 웹UX

다음카카오 임정화

Page 2: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

UX/브랜드팀 리서치파트 IoT UX셀

Page 3: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Service UX design for Multi-screen

Page 4: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의
Page 5: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

SIZE

CONTEXT

CONTENT

FUNCTION

Page 6: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Hamburger vs. Tab Bar

Page 7: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의
Page 8: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

건축가

스토리텔러

라이프매니저

Page 9: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의
Page 10: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Mobile First

Page 11: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Web Design Trend

Page 12: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Card UI

Less Text

One Page Design

Simple Navigation

Page 13: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

디바이스 상관없이 목적에 충실

Page 14: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의
Page 15: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의
Page 16: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

몰입은 더 강하게

Page 17: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

QuickTime쥉곜 AVC Coding ?쫯 ?《콆겙

올 교릨역 쓲콆 욀? 쳽?쳮쪣쪦.

Tom Clancy’s The Division

Page 18: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

QuickTime쥉곜 AVC Coding ?쫯 ?《콆겙

올 교릨역 쓲콆 욀? 쳽?쳮쪣쪦.

Quechua Lookbook 2014

Page 19: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

QuickTime쥉곜 AVC Coding ?쫯 ?《콆겙

올 교릨역 쓲콆 욀? 쳽?쳮쪣쪦.

Market Street Catch

Page 20: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

ELI Portfolio: weareeli.dk

Page 21: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

새로운 탐색방식

Page 22: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

QuickTime쥉곜 AVC Coding ?쫯 ?《콆겙

올 교릨역 쓲콆 욀? 쳽?쳮쪣쪦.

Greenpeace

Page 23: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의
Page 24: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

쿠팡

Page 25: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Quarterly

Page 26: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

방금그곡

Page 27: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

다양한 디바이스에서

적은 인지적인 노력으로

Page 28: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Spotify

Page 29: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

medici.tv

Page 30: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의
Page 31: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

개별 컨텐츠의 UX실험

Page 32: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

QuickTime쥉곜 AVC Coding ?쫯 ?《콆겙

올 교릨역 쓲콆 욀? 쳽?쳮쪣쪦.

Buzzfeed:Quiz

Page 33: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

QuickTime쥉곜 AVC Coding ?쫯 ?《콆겙

올 교릨역 쓲콆 욀? 쳽?쳮쪣쪦.

Buzzfeed:Contrast

Page 34: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

QuickTime쥉곜 AVC Coding ?쫯 ?《콆겙

올 교릨역 쓲콆 욀? 쳽?쳮쪣쪦.

Snowfall

Page 35: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

건축가

스토리텔러

라이프매니저

Page 36: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Be the One, 1st Oct

Page 37: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Be the One, 1st Oct

Page 38: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의
Page 39: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의
Page 40: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Air Dog

Page 41: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

No Screen

Beyond the Screen

Page 42: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Bossy

Page 43: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Launch Here

Page 44: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Thermal Touch

Page 45: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Thingful

Page 46: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의
Page 47: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의
Page 48: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Creative Vision for Android Wear

Page 49: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Invisible

No Attention

Page 50: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의
Page 51: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Understanding

Page 52: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의
Page 53: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Designing with Data

Page 54: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

Nest Rush Hour Rewards

Page 55: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

건축가

스토리텔러

라이프매니저

Page 56: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

목적에 충실

몰입은 더 강하게

유연한 컨텐츠

컨텐츠 실험

순간에 집중

데이터 기반의 디자인

개인과 맥락을 이해

더 나은 세상

IN OUT

Page 57: 소소하고 재미있는 웹UX -  · Service UX design for Multi-screen . SIZE CONTEXT CONTENT FUNCTION . Hamburger vs. Tab Bar . 건축가 스토리텔러 ... 데이터 기반의

감사합니다