Media Design #16

(1)

Media Design

#16

(2)

학습목표

본 과목에서는 Interactive Infographic의 개념과 기능적 확장성에 대하여 알아보고 공공디자인으로서 Info graphic의 활용성과 가치 를 탐구한다.

Infographic의 정보전달성 즉 커뮤니케이션적인 측면 뿐 아니라 상 호작용을 통한 Interaction과 사용성의 측면을 활용한 공공디자인 의 기능적 측면을 학습하고 개발에 필요한 기초적인 개념 정립을 유도한다.

Interactive Infographic의 개요

(3)

학습내용 Infographic의 개요

Infographics 또는 Information graphics는 News graphics에서 의 미확장이 되어 현재는 다양한 분야에서 활용하는 정보디자인으로 발전하고 있다.

Infographics는 정보, 자료, 상황, 지식등의 시각화이다. 정보를 구 체적이고 정확하게 전달한다는 점에서 일반적인 그림이나 사진 등 과는 그별된다. 복잡한 정보를 빠르고 명확하게 설명해야하는 기 호, 지도, 기술 문서 등에서 사용된다.

차트, 지도, 다이어그램, 흐름도, 달력, 일러스트레이션 등이 Infographics에 포함된다.

최근 네트웍과 휴대형디바이스, 디스플레이의 발전에 의해 단지

커뮤니케이션의 목적 뿐아니라 하나의 기능으로서 안내자역할을

하며 좀더 적극적인 사용자 접근을 유도하여 필요한정보를 본다는

의미로 접근하는 것을 넘어 사용이라는 과정을 통해 취득하는 양

상으로 전개되고 있다.

(4)

학습내용 Infographic의 개요

차트

이미지 출처: Naver.com

(5)

학습내용 Infographic의 개요

지도

(6)

학습내용 Infographic의 개요

다이어그램

(7)

학습내용 Infographic의 개요

흐름도

(8)

학습내용 Infographic의 개요

달력

(9)

학습내용 Infographic의 개요

일러스트레이션

(10)

학습내용 Infographic의 개요

내용찰고: http://www.instantshift.com/2011/03/25/what-are-infographics-and-why-are-they-important/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+iShift+

%28instantShift%29

Infographics는 정보를 명백하게 전달 하지만 디자이너의 독창성 이 바탕이 되어야 한다. 인터넷을 이용한 온라인 미디어들은 과학, 기술, 사회, 문화등의 다양한 분야와 연결된 Infographics으로 가득 차 있다.

정보와 지식의 공공성을 확장하기 위해 효과적인 Infographics 디 자인의 디자인 가이드라인은 다음과 같다.

1. 최대한 단순함을 추구한다.

2. 명확한 메시지를 표현한다.

3. 바운더리(경계)를 설정한다.

4. 컬러의 선정에 주의한다.

5. 레이아웃의 효과를 활용한다.

6. 시각적인 임펙트를 통한 전달력을 확보한다.

7. 신뢰할 수 있는 정보와 표현력을 추구한다.

(11)

학습내용 Infographic의 개요

%28instantShift%29 이미지 출처: naver.com

1. 최대한 단순함을 추구한다.

Infographics는 단순하고 깨끗하고 간결하고 명확해야 한다.

정보들이 잘 조직되어 전달될 수 있도록 반드시 확인한다.

시각적인 단순함은 그래픽이 수신자들에게 쉽게 이해될 수 있다는 것을 보장한다.

(12)

학습내용 Infographic의 개요

%28instantShift%29

2. 명확한 메시지를 표현한다.

이미지에서 논점과 효과적인 관계를 강조한다.

사실에 대한 인지력을 높이기 위한 핵심적인 이미지를 기호화 한다.

(13)

학습내용 Infographic의 개요

%28instantShift%29

3. 바운더리(경계)를 설정한다.

정보의 범위를 한정하고 그에따라 스타일을 적용한다.

평균적인 수신자의 지적 수준을 넘어서는 표현을 자제한다.

Infographics의 표현에 있어서 디자이너의 독창적 감각을 표현한다.

메타포를 활용한다.

(14)

학습내용 Infographic의 개요

%28instantShift%29

4. 컬러의 선정에 주의한다.

색은 디자이너의 의도를 표현하는 가장 효과적인 도구중 하나이다.

색은 수신자로 하여금 개념적, 감성적으로 다양한 인상을 줄 수 있다.

정보를 강화하기 위해 색을 선정하고 이미지와의 밀착도를 고려한다.

(15)

학습내용 Infographic의 개요

%28instantShift%29

5. 레이아웃의 효과를 활용한다.

Infographics는 미디어의 레이아웃에 지배될 필요가 없다.

독자적 프레임을 가지고디자인 한다.

타이포그래피, 일러스트레이션, 이미지, 차트, 다이어그램, 아이콘 등의 색다른 조

합을 시도하고 최대 2~3개정도의 폰트를 사용한다.

(16)

학습내용 Infographic의 개요

%28instantShift%29

6. 시각적인 임펙트를 통한 전달력을 확보한다.

한눈에 핵심정보를 확인 할 수 있도록 수신자의 경험을 이용한다.

이미지의 기호적 의미를 파악하고 의미작용의 깊이를 낮게한다.

텍스트의 의존도를 최대한 낮게 하도록 디자인한다.

(17)

학습내용 Infographic의 개요

%28instantShift%29

7. 신뢰할 수 있는 정보와 표현력을 추구한다.

정확한 정보와 신뢰도 높은 데이터를 사용하고 표현범위를 넘어선 확장의 정보를

손쉽게 취득 할 수 있는 배려를 한다.

(18)

학습내용 Infographic의 사례

(19)

학습내용 Infographic의 사례

(20)

학습내용 Infographic의 사례

(21)

학습내용 Infographic의 사례

(22)

학습내용 Infographic의 사례

(23)

학습내용 Infographic의 사례

(24)

학습내용 Infographic의 사례

(25)

학습내용 Infographic의 사례

(26)

학습내용 Infographic의 사례

(27)

학습내용 Infographic의 사례

(28)

학습내용 Infographic의 사례

(29)

학습내용 Infographic의 사례

(30)

학습내용 Infographic의 사례

(31)

학습내용 Infographic의 사례

(32)

학습내용 Infographic의 사례

(33)

학습내용 Infographic의 사례

(34)

학습내용 Infographic의 사례

(35)

학습내용 Infographic의 사례

(36)

학습내용 Infographic의 사례

(37)

학습내용 Infographic의 사례

(38)

학습내용 Infographic의 사례

(39)

학습내용 Interactive Infographics의 개요

Interactive Infographics는 한장의 그래픽작업에 의존 하는것이 아

니라 정보를 나누고, 나뉘어진 정보의 덩어리를 연결하여 서사적 인구조를 반영하여 정보를 순차적으로 노출하고 디자이너의 의도 에 따라 정보의 밀도와 기억의 잔존시간을 늘려 정보의 효용과 가 치를 높이는 것을 말한다.

기존

Interactive Infographic의 가이드라인을 따르며 몇가지 추가 적인 가이드라인을 가지고있다.

1. 서사구조를 설정한다.

2. 정보노출의 위계를 결정한다.

3. 대상의 움직이과 모션피드백의 기획이 필요하다.

4. 감성적인 움직임으로 전달하고자 하는 정보의 의미를 강조.

5. 사용시 일관된 사용메뉴얼을 적용하여 사용편의성을 높인다.

(40)

학습내용 Interactive Infographics의 사례

이미지 출처: youtube.com

(41)

학습내용 Interactive Infographics의 사례

(42)

학습내용 Interactive Infographics의 사례

(43)

학습내용 Interactive Infographics의 사례

(44)

학습정리 Motion Infographics의 사례

Interactive Infographics는 궁극적으로 이전에 행해지던 정보커뮤

니케이션 디자인의 맥락에서 출발한다. infographic이 이전의 다이 어그램의 확장형이라면 여기에 모션이 반영된 Motion infographic 이 등장하였고 모바일 컴퓨팅과 네트웍 확장은 정보의 효율적인 관리와 전달이라는 요구에 다라 Interactive infographic으로 발전 하게 되었다.

Interactive Infographics는 GUI환경을 이용하면서 사용자들이 선

택적 혹은 순차적으로 정보를 취한다는 측징을 가지고있다.

기존의 GUI환경이 해당 소프트웨어의 기능적인 측면인 목적 완료 의 의미였다면

Interactive Infographics의 GUI 환경은 정보취득의

목적이 큰점이 다른 점이다.

즉 정보의 전달 방식이 커뮤니케이션보다는 인터랙션에 비중을 두

어야 한다.

(45)