The Beautiful Design Collection- 좋은 앱을 넘어 위대한 앱으로

김준호,소프트웨어 엔지니어, (주)모글루

# GDG Korea Android Conference

The Beautiful Design Collection?

the goal of this collection is to highlight beautiful apps with masterfully crafted design details

such as beautiful presentation of photos, crisp and meaningful layout and typography, and delightful yet intuitive gestures and transitions.

The Beautiful Design Collection

2013 w 2014 s2013 s

Gogobot

Yahoo Digest

Lumosity

…

Yahoo Weather

Etsy

Timely

…

NYTimes

Pocket

Timer

…

What’s good about it?

- 사용자 경험의 극대화

What’s good about it?

- 끊김없는 사용 경험

- 맥락 전환의 최소화

- 사용자 경험의 극대화

- 끊김없는 사용 경험

What’s good about it?

- 맥락 전환의 최소화

듀오링고 - 상태 & 네비게이션 바 감추기

사용자 경험의 극대화

경험을 분산시키는 알림 아이콘들

듀오링고 - 상태 & 네비게이션 바 감추기

사용자 경험의 극대화

상태 & 네비게이션 바 감추기 구현

사용자 경험의 극대화

사용자 경험의 극대화 Etsy - 배경 블러 처리 (1)

사용자가 현재 관심 있는 콘텐츠에 오롯이 집중할 수 있도록

사용자 경험의 극대화 Etsy - 배경 블러 처리 (2)

사용자가 현재 관심 있는 콘텐츠에 오롯이 집중할 수 있도록

사용자 경험의 극대화 야후 날씨 - 배경 블러

사용 흐름에 최적화된 화면 변화

사용자 경험의 극대화 FIFA - 배경 블러 & 텍스트 페이드 인

부드럽게 관심을 환기하는 화면 변화

http://nicolaspomepuy.fr/blur-effect-for-android-design/

사용자 경험의 극대화

https://github.com/PomepuyN/BlurEffectForAndroidDesign

블러 효과 구현

사용자 경험의 극대화 블러 효과 구현

1. 원본 이미지, 블러처리된 이미지 준비

사용자 경험의 극대화 블러 효과 구현

2. 스크롤에 맞춰 블러처리된 이미지의 알파 값을 조정

What’s good about it?

- 사용자 경험의 극대화

- 끊김없는 사용 경험

- 맥락 전환의 최소화

끊김없는 사용 경험 페이스북 - 이미지 줌 애니메이션

사용자의 시선, 집중을 한 순간도 잃지 않는다.

끊김없는 사용 경험 대조 - 트위터, 포스퀘어

끊김없는 사용 경험 에어비엔비 - 이미지 애니메이션

사용 흐름의 자연스러운 연결

What’s good about it?

- 사용자 경험의 극대화

- 끊김없는 사용 경험

- 맥락 전환의 최소화

맥락 전환의 최소화Etsy - 웹뷰 사용

경험의 맥락이 끊어지지 않도록

맥락 전환의 최소화링크 버블 - 플로팅 버튼

감사합니다

김준호

여러분 생각을 들려주세요

pungrue26@gmail.com

- 혹시 재밌는 사례를 더 알고 계신가요?- 제 발표 내용은 어땠나요?