تخطيط وتصميم الانفوجرافيك - ورشة عمل تدريبية - اليومان...

transcript

تخطيط وتصميم االنفوجرافيك

اليومان الثاني والثالث

ميس أبوصالح

abusalah@promosteer.com

@maisabusalah

By: Mais AbuSalahabusalah@promosteer.com@maisabusalah

وى ميس أبوصالح تعمل في مجال التسويق االلكتروني والمحت•مديرة تسويق . سنوات10المرئي على اإلنترنت منذ أكثر من

سط وشمال الكتروني سابقاّ في مكتوب، و مديرة تسويق للشرق األومت شاركات بعدة مشاريع رقمية كبيرة و ساه. افريقيا في ياهو

رة في بإطالق العديد من الحمالت التسويق على اإلنترنت، مستشاو دراسة سلوك مجال تحليل الزيارات للمواقع اإللكترونية

ب خبيرة في آلية عمل محركات البحث و أساليالمستخدمين ،ور وحائزة على شهادات استخدام وتطوي, الكتابة الرقمية الذكية

وتسويق المواقع على محركات البحث من جوجل و من كلية Search Engineي عضو في نادي اإلعالم االجتماع. في استراليا

متحدثة في منتدى اإلعالم االجتماعي . فرع اإلمارات–الدولي البحرين–لرواد اإلعالم

ي تقوم ، والت(بروموستير)تعمل حالياً على إدارة شركتها الخاصة •بإنشاء وتسويق مواقع وأنظمة الكترونية تخدم حاجات جديدة ب للشركات واألفراد، ، باإلضافة إلى خدمات التسويق والتدري

.وتصميم اللوجو واالنفوجرافيك للعمالء

maisabusalah@: يمكن متابعة تغريداتها عن طريق تويتر•

نبذة عن المدرب

3و 2أجندة اليومين

رك، اإلنفوجرافيك المتح, اإلنفوجرافيك الثابت: أنواع اإلنفوجرافيك•اإلنفوجرافيك التفاعلي

مفهوم البيانات•

الكتابة لإلنفوجرافيك•

العرض المصور للبيانات لإلحصائية•

تعريف اإلنفوجرافيك الثابت •

تصميم برمجيات رسومية ل)برمجيات تصميم اإلنفوجرافيك الثابت •(اإلنفوجرافيك الثابت

مواقع ويب للتصميم •

مدخل إلى البكتوشارت•

مدخل إلى برنامج الفوتوشوب•

مدخل إلى برنامج اإللوستريتور•

التعديل على نموذج انفوجرافيك ثابت: تطبيق•

3و 2أجندة اليومين

أنواع اإلنفوجرافيك (:من حيث العرض)

إنفوجرافيك ثابت1)

:إنفوجرافيك متحرك2)

صورة متحركة -أ

فيديو متحرك–ب

إنفوجرافيك تفاعلي( 3

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

من)أنواع اإلنفوجرافيك (:حيث التخطيط

شعاعي1)تدرج عمليات2)جداول3)رسوم توضيحية4)مخطط بياني5)خرائط6)عالقات7)قوائم8)

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

اإلنفوجرافيك الثابت

تصميم بمحتوى ثابت يشرح بعض: االنفوجرافيك الثابت.المعلومات عن موضوع معين يختاره صاحب االنفوجرافيك

الصورة-اإلنفوجرافيك المتحرك

تصميم : (الصورة)اإلنفوجرافيك المتحرك ك البيانات والتوضيحات والمعلومات بشكل متحر

.كامليتطلب هذا النوع الكثير من االبداع واختيار

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

.إلخراج النهائي لهذا النوع:أمثلة

http://www.webbymonks.com/infographic/webtesting/infograph.htmlhttp://animagraffs.com/flat-screen-displays/

http://animagraffs.com/how-a-car-engine-works/

الفيديو-اإلنفوجرافيك المتحرك

يحات فيديو عادي ويوضع عليه البيانات و التوضبشكل جرافيك متحرك إلظهار بعض الحقائق

. والمفاهيم على الفيديو نفسه

: مثالhttps://www.youtube.com/watch?v=oMtjZkrTiJ8&list=PLE6559FFD78441DF5&index=2

https://www.youtube.com/watch?v=Qh7m9B2Swoo

اإلنفوجرافيك •: التفاعلي

ير إنفوجرافيك يتغ.بتفاعلك معه

:مثال•

http://avalaunchmedia.com/history-of-social-media/Main.html

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

:أمثلة أخرى•• http://www.simplybusiness.co.uk/microsites/hungry-tech/• http://autodesk360innovates.com/landing/social-collaboration-

infographic/#scene-pre1960• http://www.visioncritical.com/evolution-of-insight/• http://inception-explained.com/• http://www.theguardian.com/world/ng-interactive/2014/aviation-

100-years• http://www.evanshalshaw.com/more/bondcars/• http://www.informationisbeautiful.net/visualizations/worlds-biggest-

data-breaches-hacks/• http://www.google.com/insidesearch/howsearchworks/thestory/

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

مفهوم البيانات

:المعطياتأوالبياناتهي سلسلة غير مترابطة من الحقائق •

الموضوعية التي يمكن الحصول عليها عن طريق المالحظة أو عن طريق البحث

.والتسجيل

هي مجموعة من الحروف أوالكلمات أو األرقام •المتعلقة بموضوع ( الخام)أوالرموز أوالصور

.معين

ام األرق-األسماء )بيانات الموظفين : مثال ذلكنتج بدون ترتيب، وي( الصور-المهن -الوظيفية

ه عن هذه البيانات بعد المعالجة ما يطلق عليمعلوماتمصطلح

:مصادر ومواقع التي تساعدنا في ايجاد البياناتاحصائيات عالمية في جميع المجاالت•

www.statista.com

بيانات جوجل •www.google.com/publicdata/directory

احصائيات عربية•www.discoverdigitalarabia.com

مواقع تساعد في التصميم•http://www.statsilk.com

تكوين الخرائط والرسوم واالشكال البيانية•www.hohli.com

مفهوم البيانات

الكتابة لإلنفوجرافيك

كيف تبني هيكل جيد يناسب اإلنفوجرافيك؟

.كل قصة تحتاج إلى بناء جيد وتسلسل سلس•

البداية، الوسط، : القصة تبنى على أساسات ثالث•.النهاية

داث يجب أن تعرف العنوان، البداية والنهاية وسلسلة األح•التي يجب أن تسرتدها من أول جملة إلى آخر جملة، لكي

.تصل إلى الهدف أو المعنى الذي ترغب بإيصاله

:العنوان-1

العنوان الجيد يحفز القارىء على •ء استكشاف االنفوجرافيك، والعنوان السي

فض لذلك ي. قد يفقد القارْى االهتمام فيهأن تتبع اإلرشادات التالية فيما يتعلق

:بالعنوان

.كلمات6الطول األمثل للعنوان هو •

وإذا كان هناك عنوان ثانوي أو شرح يتبع •.حرف55العنوان فإن الطول األمثل له

يجب أن يكون ملفتاً للغنتباه ومثيراً •لالهتمام

يجب أن يؤخذ باالعتبار موضوع التسويق•ه لكي يسهل العثور علي)لمحركات البحث

(.من قبل الشريحة المستهدفة

عنوان قبل أن 25حاول أن تعمل على كتابة •.تستقر على واحٍد منها

د أضف شرحاً مختصرا عن اإلنفوجرافيك بع•.العنوان

:الوسط-2

مهارة سرد األحداث ورواية القصة •التي ترغب في إيصالها مهمة جدا فيهذا الجزء، إلن القراء يتذكرون القصص

.بشكل أفضل من الحقائق الجامدة

يز تحقيق هذا الهدف يتطلب نقطة ترك•تبني عليها أو حولها المحتوى الذي

:أنواعها. ترغب بوضعه

:نقطة تركيز تقليدية( أ

4ح ابدأ قصتك بمقدمة وصورة كبيرة توضنقاط تدعم فرضيتك، وانهها بملخص

.مع إحصائيات

:نقطة تركيز واحدة( ب

تحتاج في هذا النوع إلى أيصال •. معلومة واحدة

كل الحقائق واألرقام الموجودة في هذا•مة النوع تكون مبنية لدعم تلك المعلو

.أو توضيحها

اجعل المعلومة التي تتحدث عنها •أسهل للفهم باستخدام الصور

.والمرئيات

أمين اإلنفوجرافيك التالي عن تكلفة الت•الصحي حسب الوالية في الواليات

درج استخدم فيها ت. المتحدة األمريكيةاأللوان للداللة على األغلى واألرخص،

قبل والتأييد والرفض للنظام الحالي من(.السيناتورز في الوالية)الشيوخ

(:أ مقابل ب)نقطة تركيز على المقارنة ( ت

أو تحتاج في هذا النوع أن تقارن بين عاملين•ن أكثر، وذلك بإدراج الخصائص والقيم لكل م.تلك العوامل ومقارنتها إليصال هدف معين

:نقطة تركيز على عملية معينة( ث

الرسالة التي ترغب في إيصالها من خالل•هذا اإلنفوجرافيك يجب أن تكون على

أو ،Process Flowشكل تدفق عملية مجموعة من اإلرشادات والتوجيهات،

بطريقة تبين أن كل شيء أو مرحلة تؤدي.أو تقود إلى مرحلة أخرى

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

والذي يكون عادة على شكل أسهم وخطوط ومساعدات مرئية

(: النهاية)الخالصة -3

ء النهاية الجيدة هي التي تغرق القارى•في أفكار متمحورة حول موضوع داء اإلنفوجرافيك أو القيام بتنفيذ الن

Call to action الذي وضعته في. اإلنفوجرافيك

كما هو الحال في العنوان، يجب أن •تكون الخاتمة معبرة ومحفزة، مثل

سؤال معين متعلق بموضوع ر اإلنفوجرافيك أو حتى نداء لتنفيذ أم

(.مثل زيارة موقعك)معين

العرض المصور للبيانات الصحفية

مذكور في تدريب اليوم األول

تعريف اإلنفوجرافيك الثابت

والتي )أهم هذه البرمجيات •يتطلب استخدامها شراء

نسخة منها وتنزيلها على الجهاز، باإلضافة إلى وجود

(:ذاكرة جهاز جيدة

اإللوستريتور-1

الفوتوشوب-2

برمجيات تصميم اإلنفوجرافيك الثابت(برمجيات رسومية لتصميم اإلنفوجرافيك الثابت)

بيكتوشارت•www.piktochart.com

انفوجرام•https://infogr.am/

فيجوالي•http://visual.ly/twitter

فيزمي•www.visme.co

:إيزيلي•http://www.easel.ly/

مواقع ويب للتصميم

(تطبيق عملي)

مدخل إلى البيكتوتشارت

عرض فيديو توضيحي

مدخل إلى برنامج اإللوستريتور

عرض فيديو توضيحي

مدخل إلى برنامج الفوتوشوب

عرض فيديو توضيحي أو من خالل مواقع الويب السابق

ذكرها

إنفوجرافيك جاهزالتعديل على نموذج

أسئلة وأجوبة

شكرا لكم

تخطيط وتصميم الانفوجرافيك - ورشة عمل تدريبية - اليومان...

Education