InfographicUNDERSTAND

[                            ]วาดวยอินโฟกราฟกการสื่อสารขอมูลผานกราฟก

r

JSTPMEDIA Pat Pataranutaporn JSTP Scholar, JSTPMEDIA.org

2Introduction

70%¢ขÍอ§ง sensory receptors

ÍอÂยÙู�‹ãใ¹นµตÒา¢ขÍอ§งàเÃรÒา

MÁมÒา¡ก¡กÇว�‹Òา 50%¢ขÍอ§งÊสÁมÍอ§ง¾พÑั²ฒ¹นÒาÁมÒาàเ¾พ×ื่Íอ

visual processing

pàเÃรÒาÊสÒาÁมÒาÃร¶ถ»ปÃรÐะÁมÇวÅล¼ผÅล

¢ข�ŒÍอÁมÙูÅลÀภÒา¾พäไ´ด�ŒàเÃร็Çว¡กÇว�‹Òา 1/10 ÇวÔิ¹นÒา·ท∙Õี

R

ทำไมตอง อินโฟกราฟก ?

Merieb, E. N. & Hoehn, K. (2007). Human Anatomy & Physiology 7th Edition,

Pearson International Edition.

Merieb, E. N. & Hoehn, K. (2007). Human Anatomy & Physiology 7th Edition,

Pearson International Edition.

Semetko, H. & Scammell, M. (2012). The SAGE Handbook of Political

Communication, SAGE Publications.

It only takes us 150ms for a symbol to be processed + 100ms to attach a meaning to it.

3Introduction

Researchers found that colour visuals increase the willingness to read by 80%.

Green, R. (1989). The Persuasive Properties of Color, Marketing Communications.

4Introduction

Dowse, R. & Ehlers, M. (2005). Medicine labels incorporating pictograms: Do they influence understanding and adherence?, Patient Education and Counseling, Vol 58, Issue 1.

¡กÒาÃรàเ¢ข�ŒÒา¶ถÖึ§ง·ท∙Õี่§ง�‹ÒาÂย¢ขÖึ้¹น

5Introduction

Levie, W. J. & Lentz, R. (1982). Effects of text illustrations: A review of research, Educational Communication and Technology.

6Introduction

Wharton School of Business. ‘Effectiveness of Visual Language’.

7Introduction

McCabe, D. & Castel, A. (2008). Seeing is believing: The effect of brain images on judgments of scientific reasoning, Cognition 107.

8Introduction

9History of infographic

เปนการแสดงผลของขอมูลหรือความรูโดยภาพที่อานและเขาใจงาย งานกราฟกสประเภทนี้นิยมใชสำหรับขอมูลที่มีความซับซอน ตัวอยางเชน ปาย แผนที ่ งานวิจัย โดยอินโฟกราฟกสนี้ยังคงนิยมใชในสายงานด าน ว ิ ทยาการคอมพ ิ ว เตอร คณิตศาสตร สถิติศาสตร เพื่อใหแสดงถึงขอมูลที่ซับซอนใหงายขึ้น

Pie chart from Playfair's Statistical Breviary (1801) The Pioneer Plaque.

Polar area diagram by Florence Nightingale illustrating causes of

mortality during the Crimean War (1857).

10Most popular infographics

MOST

POPU

LAR

INFO

GRAP

HIC

11Methodology

aDATAp

123

¢ข�ŒÍอ¤คÇวÒาÁม ÃรÙู»ปÀภÒา¾พ

¢ข�ŒÍอÁมÙูÅลµตÑัÇวàเÅล¢ข

Information

v

L

pg_

*¤คÇวÒาÁมÊสÃร�ŒÒา§งÊสÃรÃร¤ค�

áแ¼ผ¹น¼ผÑั§ง

ÊสÃรØุ»ป¡กÃรÒา¿ฟ�¡ก

ÃรÙู»ปÀภÒา¾พ

¡กÃรÒา¿ฟ

l¡กÒาÃร»ปÃรÐะÁมÇวÅล¼ผÅล k

¨จÑั´ดÇวÒา§ง¢ข�ŒÍอÁมÙูÅล

FãใËห�ŒÊสÕี

*ÊสÃร�ŒÒา§ง¨จØุ´ดÊสÑั§งàเ¡กµต

¡กÓำËห¹น´ด Font

A

?ÊสÓำàเÃร็¨จ

1

2

3

4

5THEME

12Methodology

MAC OS Windows

Adobe(Cross platform)

Online(Cross platform)Keynote

Pages

Photoshop

Illustrator

Indesign

Powerpoint

Words

Software

13DESIGN Elements

horizontal

Layout

vertical

Layout äไÁม�‹ÁมÕีáแºบºบáแ¼ผ¹นµตÒาÂยµตÑัÇวáแµต�‹¤คÇวÃรÁมÕีÅลÑั¡กÉษ³ณÐะÊสÍอ´ด¤คÅล�ŒÍอ§ง¡กÑัºบàเ¹น×ื้ÍอËหÒา

áแµต�‹µต�ŒÍอ§งÁมÕี 7 ËหÅลÑั¡กãใ¹น¡กÒาÃรÍอÍอ¡กáแºบºบ

1. Balance

2. Contrast

3. Movement

4. Emphasis

5. Pattern

6. Proportion

7. Unity

14DESIGN Elements

Header designHeaderby JSTPMEDIA

Headerby JSTPMEDIA

HEADERlHeaderby JSTPMEDIA

Headerby JSTPMEDIA

HEADER

HEADER

HEADERby JSTPMEDIA

Headerby JSTPMEDIA

Headerby JSTPMEDIA

15DESIGN Elements

Font design

BEBAS NEUEBree Serif

Century GothicFutura L!"#$r

Albertino

Kentucky fried chicken font

Supermarket - àเ¨จàเÍอÊส·ท∙Õี¾พÕี

ThaiSans Neue - เจเอสทีพี

Maxcellent

Quark - เจเอสทีพีSP SoftText - àเ¨จàเÍอÊส·ท∙Õี¾พÕี

SP ThunderFox - àเ¨จàเÍอÊส·ท∙Õี¾พÕี

International font Thai font

16DESIGN Elements

Data design¡กÒาÃรÍอÍอ¡กáแºบºบ¡กÃรÒา¿ฟ·ท∙Õี่ÁมÕี¡กÒาÃรãใÊส�‹

¤คÇวÒาÁม¤คÔิ´ดÊสÃร�ŒÒา§งÊสÃรÃร¤ค�Åล§งäไ»ป

âโ´ดÂย¡กÒาÃร´ดÑั´ดáแ»ปÅล§งµตÑัÇวºบ�‹§ง

»ปÃรÔิÁมÒา³ณáแ·ท∙¹น´ด�ŒÇวÂยÃรÙู»ปÍอÂย�‹Òา§งÍอ×ื่¹น

17DESIGN Elements

Data design

¡กÒาÃร¤คØุÁม Theme áแÅลÐะâโ·ท∙¹นÊสÕีÁมÕี¤คÇวÒาÁมÊสÓำ¤คÑั­Þญãใ¹น¡กÒาÃรÊส�‹§ง¢ข�ŒÍอ¤คÇวÒาÁม

áแÅลÐะÊสÃร�ŒÒา§ง first impression ·ท∙Õี่¶ถÙู¡กµต�ŒÍอ§งáแ¡ก�‹¼ผÙู�ŒÃรÑัºบÊสÒาÃร

18DESIGN Elements

Data designâโ·ท∙¹นÊสÕีÁมÕี¤คÇวÒาÁมÊสÓำ¤คÑั­Þญãใ¹น¡กÒาÃร

Êส�‹§ง¢ข�ŒÍอ¤คÇวÒาÁม¶ถÖึ§ง¼ผÙู�ŒÃรÑัºบÊสÒาÃร

âโ´ดÂยÁมÕี¤คÇวÒาÁมËหÁมÒาÂยáแ½ฝ§งÍอÂยÙู�‹

19Sharing

VS

แชรเปนรูป

แชรเปน LINK

Different size

Different like & shared

20Reference

- Merieb, E. N. & Hoehn, K. (2007).Human Anatomy & Physiology 7th Edition, Pearson International Edition.- Semetko, H. & Scammell, M. (2012). The SAGE Handbook of Political Communication, SAGE Publications.- Green, R. (1989). The Persuasive Properties of Color, Marketing Communications.- Dowse, R. & Ehlers, M. (2005). Medicine labels incorporating pictograms: Do they influence understanding

and adherence?, Patient Education and Counseling, Vol 58, Issue 1.- Levie, W. J. & Lentz, R. (1982). Effects of text illustrations: A review of research, Educational

Communication and Technology- McCabe, D. & Castel, A. (2008). Seeing is believing: The effect of brain images on judgments of scientific

reasoning, Cognition 107.