56
시각디자인 트렌드 10 인터랙션 디자인 II

시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

시각디자인 트렌드 10

인터랙션 디자인 II

Page 2: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

The – Interface 인터랙션의 기본에 대한 강의

Page 3: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Apple Human Interface Guideline (HID)

- 전체화면을 적극적으로 이용하라

Page 4: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Apple Human Interface Guideline (HID)

- 테두리가 없는 버튼을 사용하고 색상으로 구분하라

Page 5: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Apple Human Interface Guideline (HID)

- 화면전환 애니메이션을 통해 연관성을 유지하라

Page 6: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Apple Human Interface Guideline (HID)

- 장식보다는 색상반전을 통해 중요한 맥락을 강조하라

Page 7: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Apple Human Interface Guideline (HID)

- 시각적 중요성에 따라 배치하라

Page 8: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Apple Human Interface Guideline (HID)

- 빠르게 출발하라. 로딩이 필요없을 경우 시작화면은 필요없다.

Page 9: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Apple Human Interface Guideline (HID)

- 간단명료하게 색상을 통해 브랜딩하라.

Page 10: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Google material design

1dp의 동일한 판으로 구성된 물리적인 개념의 디자인

실제 디자인에서 물리적인 개념을 적극도입

Page 11: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Google material design

1dp의 동일한 판으로 구성된 물리적인 개념의 디자인

실제 디자인에서 물리적인 개념을 적극도입

Page 12: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Google material design

1dp의 동일한 판으로 구성된 물리적인 개념의 디자인

실제 디자인에서 물리적인 개념을 적극도입

Page 13: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

design.google.com/icons

Page 14: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

모바일 OS 개발사에서는 되도록 시스템 UI의 스타일을 권장

> 스타일링의 중요도는 점차 낮아지고 있는 상황

상대적으로 > 사용자의 맥락 파악이 중요

Page 15: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

2020년 전 세계 모바일 폰 보유자 54억명

2020년 전 세계 인구 77억명

2020년 전 세계 모바일 기기 114억 개

Page 17: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Google skybender – 태양광으로 작동하는 드론으로 오지에 인터넷 공급

Page 18: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

인터랙션디자인의 미래

사용자는 2초 이상 기다리기 싫어하고 기존 앱들은 더

욱 빠르고 효율적인 방향으로 진화한다.

오프라인 사물/서비스와의 결합.

가상현실과 같은 스마트폰이 아닌 아예 새로운 디바이

스차원에서의 인터랙션이 등장한다.

Page 19: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입
Page 20: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입
Page 21: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입
Page 22: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입
Page 23: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

IoT

Wearable

Healthcare

VRAR

Betterapp

공유경제

ContextAware

Page 24: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입
Page 25: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Better App

네트웍, 빅데이터의 분석을 통해 사용자의 맥락에 대응

Page 27: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Clover dating app

Page 31: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

IoT : Internet of Things

온도, 습도, 먼지, 조도, 영상, 날씨 등 환경관련 센서를 통해 맥락을 감지 / 분석

Page 32: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

IoT: 센서 – 보드 – 인터넷의연결을통해생활(사회)과 네트웍을연결

Page 33: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입
Page 34: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Sengled : IoT전구 + 스피커

Page 35: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입
Page 36: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

BloomSky

Page 37: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

BloomSky

Page 38: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

MR. SAM – Sodium sensor

Page 39: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

SIGNUL – Beacon – 거리감지 / 실내위치파악

Page 40: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입
Page 41: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

샌프란시스크 공항 설치예정인 비콘기반 실내위치안내 서비스

Page 42: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Smappee

Page 43: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Wearable

맥박, 체온, 압력, 성분 등 인체와 관련된 미시데이터 측정을 통해 맥락 파악

Page 44: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Stridalyzer

Page 45: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Sensotrack

Page 47: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Tellspec scanner

Page 48: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

New Interaction

스마트폰을 넘어선 인터랙션을 시도

Page 49: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Pizzahut Subconscious Menu

Page 52: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Google glass shore

Page 54: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

The future of Adobe creative applications

Page 56: 시각디자인트렌드 10 - leebh.netleebh.net/trend/pdfs/10.pdf · Google material design. 1dp. 의동일한판으로구성된물리적인개념의디자인. 실제디자인에서물리적인개념을적극도입

Microsoft Holoportation