View
949
Download
3
Category
Preview:
DESCRIPTION
ว่าด้วย Infographic by JSTPMEDIA
Citation preview
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.
Recommended