الإنفوجرافيك Infographic : بين إشكالية التعريف ومبادئ التصميم.

لا يوجد متخصص في تكنولوجيا التعليم لا يعرف ما هي اللوحات التعليمية ، ويعلم أنها جسم ثنائي الأبعاد صنع ليعلق يحمل رسالة في داخله ، وقد تطورت النظرة للوحات التعليمية منذ القرن الماضي مع دخول تكنولوجيا العروض الضوئية والعروض متعددة الوسائل فقل استخدام بعض أشكال اللوحات وتغير استخدام البعض الآخر إلى أن برز على الساحة اسلوبا جديدا لتمثيل البيانات بطريقة مصورة تقدم بأسلوبين اسلوب ثابت على هيئة لوحات تعرض مطبوعة أو بشكل رقمي ، ونوع آخر متحرك. وما عزز انتشار هذا الأسلوب ظهور شبكات اجتماعية قائمة على مشاركة هذا النوع من مصادر المعلومات مثل Pinterest . ولا يمكن اعتبار الإنفوجرافيك وسيلة جديدة تماما لكنها لأنها ببساطة تعتمد على تجميع من عدد من الرسومات المعروفة من قبل كالرسومات الكاريكاتورية ، والمخططات المسارية ، والرسومات البيانية لكن جمعها بهذا الأسلوب الذي خالف بعض القواعد المتعارف عليها في التصميم البصري كمبدأ الوحدة Unity ، والتركيز على المركز البصري ، ومبدأ البساطة Simplicity ، إلا أن الإمكانات الرقمية التي أتاحت بناء هذه الرسومات جزءا بعد آخر ، وعرضها رقميا بطرق مختلفة بدءا من أجهزة عرض البيانات انتقالا إلى الشاشات الرقمية عالية التحديد وصولا إلى شاشات الأجهزة الجوالة والحاسبات اللوحية ساعد على انتشارها إلى حد بعيد .

عرف الإنسان البدائي كيف يصور الأحداث على جدران الكهف مما يعدها البعض بداية الإنفوجرافيك

عرف الإنسان البدائي كيف يصور الأحداث على جدران الكهف مما يعدها البعض بداية الإنفوجرافيك

ثمة خط رابط بين رسومات الكهوف ، والرسومات القصصية في العصور المصرية القديمة والإنفوجرافيك الحديث

ثمة خط رابط بين رسومات الكهوف ، والرسومات القصصية في العصور المصرية القديمة والإنفوجرافيك الحديث

يعزو البعض الإنفوجرافيك إلى أصول في العصر الحجري تمثلت في رسومات جدارية على جدران الكهوف تمثل قصصا لمعارك ولعمليات صيد وغير ذلك ، ويرون أن هذا الفن عاد إلى الظهور مع بداية ولادة وسائل التواصل الاجتماعي بين عامي 2005 و عام 2006 لتظهر فقط 5 صور انفوجرافيك ,وتطورت حتى انتشرت وقفزت بشكل سريع مع عام 2011 إلى 2000.000 صورة !

تنامي أعداد الإنفوجرافيك

تنامي أعداد الإنفوجرافيك

infographics_beforandafter

تمثيل المعلومات قبل الإنفوجرافيك وبعده

لقد أضاف الإنفوجرافيك بأسلوبه الحديث بعدا حيويا للرسومات التوضيحية والخرائط التقليدية التي كانت تعرض سابقا ، فلو نظرنا إلى المثال التالي لشاهدنا نفس الموضوع بالإنفوجرافيك ، وبالأسلوب السابق للإنفوجرافيك :

عادة ما يستخدم المصمم في الانفوجرافيك 

  •  الصور بنسبة 60%
  •  الرموز والأسهم الدلالات 38%
  •  والكتابة 13% 

 إذا ما هو الإنفوجرافيك ؟

الانفوجرافيك هو فن تحويل البيانات والمعلومات الى صور ورسوم يسهل فهمها بوضوح ، هناك العديد من المسميات لهذا الفن و الذي نفتقر له في العالم العربي بشكل عام . ومن هذه المسميات ( انفوجرافيكس / Infographics ) أو ( البيانات التصورية “التفاعلية” / Data Visualization ) وايضاً يطلق عليها ( التصاميم المعلوماتية / Information Design ) ، عندما نستخدم مصطلح ( البيانات التصورية / Data Visualization ) فهي تعبر عن هذه الفئة ككل . قد تتسائل ما هي هذه الفئات ؟! نحن نتحدث عن أي رسم يحتوي على بيانات/معلومات أو نصوص .عندما نستخدم مصطلح ( البيانات التصورية / Data Visualization ) ما معناه بأنه مصطلح عام يستخدم لوصف البيانات المعروضة بطريقة مرئية .

موقع Piktochart لتصميم الإنفوجرافيك للمبتدئين :

موقع متخصص في تصميم وتطوير مواد انفوجرافيكية موقع جيد للمبتدئين في عالم التصاميم الانفوجرافيكية , يمتاز الموقع بخاصية Drag & Drop للأشكال مع اتاحة عدد ( 4 ) قوالب مجانية للبدء في تصميم الانفوجرافيك الخاص بك , يقدم الموقع خدمات مبسطة في تصميم المواد الانفوجرافيكة ذات الأداء المبسط في الأخراج الفني ( Digital Design ) , مع امكانية استخراج التصميم ضمن مقاسات عالية الجودة بعدة صيغ منها PNG , SVG , JPG , في الشرح التالي طريقة انشاء تصاميم انفوجرافيكية عبر Piktochart .

أترككم مع هذا الفيديو لمعرفة كيف يستخدم الموقع في عمل إنفوجرافيك

مواقع أخرى مفيدة في عمل أنفوجرافيك :

 

مواقع عمل انفوجرافيك اونلاين

1- الموقع [ Visual.ly ].

يوفر الموقع خاصية عمل تصاميم انفوجرافيكية وذلك بتحليل مواقع التواصل الإجتماعية كـ “تويتر” و ” الفيس بوك ” , يعتبر كأول مجتمع الكتروني تفاعلي عبر الشبكة العنكبوتية يهتم بالتصاميم الإنفوجرافيكية الهادفة , ينصح به.

٢- الموقع [ Inkscape ].

برنامج مفتوح يدعم خاصية الصور ذات الإمتداد SVG , تساعد النسخة الجديدة في عمل تصاميم جرافيكية والذي تمكنك بحفظها بامتدادات مختلفة أهما SVG .

٣- الموقع [ Hohli ].

موقع متخصص بعمل الرسوم البيانية , لا يحتاج إلى تسجيل بإمكانك تزويد الموقع بالبيانات ويقوم بدوره عمل رسوم بيانية ذات طابع ثلاثي الأبعاد وحفظها بصيغة Jpeg , مع امكانية ادراج اللغة البرمجية بالموقع مباشرة لعرض الرسوم البيانية.

 

٤- الموقع [ Many Eyes ].

موقع من تطوير شركة IBM يقدم الموقع خاصية متطورة في حفظ البيانات مع امكانية الرجوع إليها في وقت , يقدم الموقع خصائص جرافيكية تفاعلية ذات طابع احترافي يقوم الموقع باقتراح انسب التصاميم للبيانات المستخدمة من قبل المزود , يعتبر الموقع احد رواد التصاميم التفاعلية الإحترافية, ينصح باستخدامه.

٥- الموقع [ Google Public Data ].

اداة متطور من مطوري شركة جوجل , مجانية ومتاحة للجميع , الإداة متطورة وداعمة للغة العربية , توفر هذه الإداء كمية مذهلة من التصاميم والتي لديها قدرة كبيرة في اخراج الرسوم و التصاميم التفاعلية , ينصح باستخدامه.

6- الموقع [ Tableau ].

برنامج متطور في عمل تصاميم تفاعلية , يوفر الموقع مجموعة من الفيديوهات التعليمية لعمل هذه التصاميم عبر موقعهم , يتوجب عليك التسجيل عبر الموقع لعمل التصاميم الجرافيكية / التفاعلية, ينصح باستخدامه .

 

مبادئ تصميم الإنفوجرافيك :

1. ركز على فكرة رئيسية واحدة يتم التواصل معها عبر العمل : من السهل تحديد مجموعة من الأفكار يتم عرضها في ملصق تعليمي لكن المشكلة ستظهر عند محاولة التواصل معها ، حيث سيصعب على القارئ الوصول إلى الفكرة الرئيسية للعمل ، لذلك يجب أن يتم تحديد فكرة رئيسية واحدة للعمل ككل.

2. ركز على المركز البصري للعمل ما أمكن : ليس كل الإنفوجرافيك تتبع مبدأ المحافظة على المركز البصري للعمل نظرا لكن إن أمكن أن تنبع الفكرة من المنتصف فإن ذلك سيسهل بشكل كبير قراءة التصميم.

3. أعرض بياناتك بدقة ووضوح : يشمل ذلك اختيار الأساليب الأمثل لتمثيل البيانات التي يعرضها الرسم ، وتصميمها بشكل واضح يسهل قراءته. أحيانا تكون البيانات شديدة التعقيد وتتطلب من المشاهد تتبعها والتركيز في التفاصيل حتى يمكن فهمها.

4. استخدم اسلوب الطبقات في تصميم الإنفوجرافيك : يميل المصممون لتصور الإنفوجرافيك مكن من ثلاث طبقات ، الطبقة الأولى هي ما يجب أن تشاهده ، والطبقة الثانية هي ما يفضل أن تشاهده ، أما الثالثة فهي ما يمكن أن تشاهده. الطبقة الأولى التي يجب أن تشاهدها تكون كبيرة وفي مركز الرؤية وسهلة القراءة ، أما طبقة ما يفضل مشاهدته فتحتوي على المعلومات الشارحة للطبقة الأولى والمفسرة لها ، وترتبط معها بوسائل بصرية وتكون أصغر من الطبقة الأولى وأكثر من حيث التفاصيل ، الطبقة الثالثة هي ما تقود المشاهد لأجزاء بعينها من الرسم ، وتحتوي على تعليقات نصية وشروح واستشهادات وجداول بيانية .

5. احرص على توافر وسائل تيسير الإبحار في الرسم : يجب مراعاة الوسائل التي تؤثر على سهولة الإبحار مثل اللون ، توزيع الكتل Layout ، وتفاوت أحجام الكتل وفقا للأهمية بالشكل الذي يجعل التصميم أشبه بالتوزيع الهرمي للعناصر الذي يساعد على تمييزها وفقا لأهميتها والربط فيما بينها بعناصر بصرية مناسبة.

6. حافظ على جمال التصميم : يجب اللا يبعدنا الهدف الأكاديمي وحتى الدعائي من وراء تصميم الإنفوجرافيك عن مراعاة أن يكون التصميم صديقا للعين ، يمتلك نسب الجمال المتعارف عليها في اللوحات بشكل عام . حافظ على الاستغلال الجيد للظل والضوء ، وراعي استخدام الألوان الجذابة المتسقة فيما بينها واختر خطوطا مريحة في القراءة .

7. استخدم وسائل الإبراز highlighting بشكل يقود عين المستخدم ويساعده على تلخيص المحتوى.

8. الإنفوجرافيك ليس مجرد لوحة ، لذا يجب أن يتضمن الجهة المسئولة عن المعلومات الواردة به ، وتوثيق تلك المعلومات ما أمكن.

أخيرا أدعوكم لمشاهدة الإنفوجرافيك التالي الذي يتناول مبادئ تصميم الإنفوجرافيك العامة :
Golden Rules of Visual Hierarchy

 

مصادر :

ما هو الإنفوجرافيك ولم هو الأفضل في تسويق المنتجات (2015) ، http://taqana.net/what-is-an-infographic

Infographic World (2015), Evolution of Graphics, http://infographicworld.com/evolution-of-graphics/

سامي المطيري (2015) ما هو الإنفوجرافيك : http://arinfographic.net/?p=71

الإمارات إنفوجرافيك (2015) ما هو الإنفوجرافيك : http://uaeinfographics.blogspot.com/p/what-is-infographics.html

SMALL, EDAHN(2015) 5 Principles of Great Infographic Design, http://www.hypothesisgroup.com/blog/2014/11/13/5-principles-of-great-infographic-design

Brown, Evan(2014)15 Golden Principles of Visual Hierarchy ,http://www.designmantic.com/blog/infographics/15-golden-principles-of-visual-hierarchy/

عن د مصطفى جودت

أستاذ تكنولوجيا التعليم المشارك بجامعة الملك سعود ، وجامعة حلوان مدير تطوير المحتوى الرقمي بجامعة الملك سعود
error: Content is protected !!
التخطي إلى شريط الأدوات