Post on 17-Jul-2015
تخطيط وتصميم االنفوجرافيك
اليومان الثاني والثالث
ميس أبوصالح
abusalah@promosteer.com
@maisabusalah
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
وى ميس أبوصالح تعمل في مجال التسويق االلكتروني والمحت•مديرة تسويق . سنوات10المرئي على اإلنترنت منذ أكثر من
سط وشمال الكتروني سابقاّ في مكتوب، و مديرة تسويق للشرق األومت شاركات بعدة مشاريع رقمية كبيرة و ساه. افريقيا في ياهو
رة في بإطالق العديد من الحمالت التسويق على اإلنترنت، مستشاو دراسة سلوك مجال تحليل الزيارات للمواقع اإللكترونية
ب خبيرة في آلية عمل محركات البحث و أساليالمستخدمين ،ور وحائزة على شهادات استخدام وتطوي, الكتابة الرقمية الذكية
وتسويق المواقع على محركات البحث من جوجل و من كلية Search Engineي عضو في نادي اإلعالم االجتماع. في استراليا
متحدثة في منتدى اإلعالم االجتماعي . فرع اإلمارات–الدولي البحرين–لرواد اإلعالم
ي تقوم ، والت(بروموستير)تعمل حالياً على إدارة شركتها الخاصة •بإنشاء وتسويق مواقع وأنظمة الكترونية تخدم حاجات جديدة ب للشركات واألفراد، ، باإلضافة إلى خدمات التسويق والتدري
.وتصميم اللوجو واالنفوجرافيك للعمالء
•
maisabusalah@: يمكن متابعة تغريداتها عن طريق تويتر•
نبذة عن المدرب
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
3و 2أجندة اليومين
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
رك، اإلنفوجرافيك المتح, اإلنفوجرافيك الثابت: أنواع اإلنفوجرافيك•اإلنفوجرافيك التفاعلي
مفهوم البيانات•
الكتابة لإلنفوجرافيك•
العرض المصور للبيانات لإلحصائية•
تعريف اإلنفوجرافيك الثابت •
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
تصميم برمجيات رسومية ل)برمجيات تصميم اإلنفوجرافيك الثابت •(اإلنفوجرافيك الثابت
مواقع ويب للتصميم •
مدخل إلى البكتوشارت•
مدخل إلى برنامج الفوتوشوب•
مدخل إلى برنامج اإللوستريتور•
التعديل على نموذج انفوجرافيك ثابت: تطبيق•
3و 2أجندة اليومين
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
أنواع اإلنفوجرافيك (:من حيث العرض)
إنفوجرافيك ثابت1)
:إنفوجرافيك متحرك2)
صورة متحركة -أ
فيديو متحرك–ب
إنفوجرافيك تفاعلي( 3
أنواع اإلنفوجرافيك
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
من)أنواع اإلنفوجرافيك (:حيث التخطيط
شعاعي1)تدرج عمليات2)جداول3)رسوم توضيحية4)مخطط بياني5)خرائط6)عالقات7)قوائم8)
أنواع اإلنفوجرافيك
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
اإلنفوجرافيك الثابت
تصميم بمحتوى ثابت يشرح بعض: االنفوجرافيك الثابت.المعلومات عن موضوع معين يختاره صاحب االنفوجرافيك
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
الصورة-اإلنفوجرافيك المتحرك
تصميم : (الصورة)اإلنفوجرافيك المتحرك ك البيانات والتوضيحات والمعلومات بشكل متحر
.كامليتطلب هذا النوع الكثير من االبداع واختيار
ة الحركات المعبرة التي تساعد في اخراجه بطريقشيقة وممتعة وكذلك يكون لها سيناريو كامل
.إلخراج النهائي لهذا النوع:أمثلة
http://www.webbymonks.com/infographic/webtesting/infograph.htmlhttp://animagraffs.com/flat-screen-displays/
http://animagraffs.com/how-a-car-engine-works/
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
الفيديو-اإلنفوجرافيك المتحرك
يحات فيديو عادي ويوضع عليه البيانات و التوضبشكل جرافيك متحرك إلظهار بعض الحقائق
. والمفاهيم على الفيديو نفسه
: مثالhttps://www.youtube.com/watch?v=oMtjZkrTiJ8&list=PLE6559FFD78441DF5&index=2
https://www.youtube.com/watch?v=Qh7m9B2Swoo
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
اإلنفوجرافيك •: التفاعلي
ير إنفوجرافيك يتغ.بتفاعلك معه
:مثال•
http://avalaunchmedia.com/history-of-social-media/Main.html
اإلنفوجرافيك التفاعلي
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
:أمثلة أخرى•• 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/
اإلنفوجرافيك التفاعلي
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
مفهوم البيانات
:المعطياتأوالبياناتهي سلسلة غير مترابطة من الحقائق •
الموضوعية التي يمكن الحصول عليها عن طريق المالحظة أو عن طريق البحث
.والتسجيل
هي مجموعة من الحروف أوالكلمات أو األرقام •المتعلقة بموضوع ( الخام)أوالرموز أوالصور
.معين
ام األرق-األسماء )بيانات الموظفين : مثال ذلكنتج بدون ترتيب، وي( الصور-المهن -الوظيفية
ه عن هذه البيانات بعد المعالجة ما يطلق عليمعلوماتمصطلح
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
:مصادر ومواقع التي تساعدنا في ايجاد البياناتاحصائيات عالمية في جميع المجاالت•
www.statista.com
بيانات جوجل •www.google.com/publicdata/directory
احصائيات عربية•www.discoverdigitalarabia.com
مواقع تساعد في التصميم•http://www.statsilk.com
تكوين الخرائط والرسوم واالشكال البيانية•www.hohli.com
مفهوم البيانات
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
الكتابة لإلنفوجرافيك
كيف تبني هيكل جيد يناسب اإلنفوجرافيك؟
.كل قصة تحتاج إلى بناء جيد وتسلسل سلس•
البداية، الوسط، : القصة تبنى على أساسات ثالث•.النهاية
داث يجب أن تعرف العنوان، البداية والنهاية وسلسلة األح•التي يجب أن تسرتدها من أول جملة إلى آخر جملة، لكي
.تصل إلى الهدف أو المعنى الذي ترغب بإيصاله
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
:العنوان-1
العنوان الجيد يحفز القارىء على •ء استكشاف االنفوجرافيك، والعنوان السي
فض لذلك ي. قد يفقد القارْى االهتمام فيهأن تتبع اإلرشادات التالية فيما يتعلق
:بالعنوان
.كلمات6الطول األمثل للعنوان هو •
وإذا كان هناك عنوان ثانوي أو شرح يتبع •.حرف55العنوان فإن الطول األمثل له
يجب أن يكون ملفتاً للغنتباه ومثيراً •لالهتمام
يجب أن يؤخذ باالعتبار موضوع التسويق•ه لكي يسهل العثور علي)لمحركات البحث
(.من قبل الشريحة المستهدفة
عنوان قبل أن 25حاول أن تعمل على كتابة •.تستقر على واحٍد منها
د أضف شرحاً مختصرا عن اإلنفوجرافيك بع•.العنوان
الكتابة لإلنفوجرافيك
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
:الوسط-2
مهارة سرد األحداث ورواية القصة •التي ترغب في إيصالها مهمة جدا فيهذا الجزء، إلن القراء يتذكرون القصص
.بشكل أفضل من الحقائق الجامدة
يز تحقيق هذا الهدف يتطلب نقطة ترك•تبني عليها أو حولها المحتوى الذي
:أنواعها. ترغب بوضعه
:نقطة تركيز تقليدية( أ
4ح ابدأ قصتك بمقدمة وصورة كبيرة توضنقاط تدعم فرضيتك، وانهها بملخص
.مع إحصائيات
الكتابة لإلنفوجرافيك
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
:نقطة تركيز واحدة( ب
تحتاج في هذا النوع إلى أيصال •. معلومة واحدة
كل الحقائق واألرقام الموجودة في هذا•مة النوع تكون مبنية لدعم تلك المعلو
.أو توضيحها
اجعل المعلومة التي تتحدث عنها •أسهل للفهم باستخدام الصور
.والمرئيات
أمين اإلنفوجرافيك التالي عن تكلفة الت•الصحي حسب الوالية في الواليات
درج استخدم فيها ت. المتحدة األمريكيةاأللوان للداللة على األغلى واألرخص،
قبل والتأييد والرفض للنظام الحالي من(.السيناتورز في الوالية)الشيوخ
الكتابة لإلنفوجرافيك
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
(:أ مقابل ب)نقطة تركيز على المقارنة ( ت
أو تحتاج في هذا النوع أن تقارن بين عاملين•ن أكثر، وذلك بإدراج الخصائص والقيم لكل م.تلك العوامل ومقارنتها إليصال هدف معين
الكتابة لإلنفوجرافيك
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
الكتابة لإلنفوجرافيك
:نقطة تركيز على عملية معينة( ث
الرسالة التي ترغب في إيصالها من خالل•هذا اإلنفوجرافيك يجب أن تكون على
أو ،Process Flowشكل تدفق عملية مجموعة من اإلرشادات والتوجيهات،
بطريقة تبين أن كل شيء أو مرحلة تؤدي.أو تقود إلى مرحلة أخرى
هذه الطريقة تناسب اإلنفوجرافيك الذي•. يشرح طريقة عمل األشياء خطوة بخطوة
والذي يكون عادة على شكل أسهم وخطوط ومساعدات مرئية
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
الكتابة لإلنفوجرافيك
(: النهاية)الخالصة -3
ء النهاية الجيدة هي التي تغرق القارى•في أفكار متمحورة حول موضوع داء اإلنفوجرافيك أو القيام بتنفيذ الن
Call to action الذي وضعته في. اإلنفوجرافيك
كما هو الحال في العنوان، يجب أن •تكون الخاتمة معبرة ومحفزة، مثل
سؤال معين متعلق بموضوع ر اإلنفوجرافيك أو حتى نداء لتنفيذ أم
(.مثل زيارة موقعك)معين
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
العرض المصور للبيانات الصحفية
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
العرض المصور للبيانات الصحفية
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
مذكور في تدريب اليوم األول
تعريف اإلنفوجرافيك الثابت
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
والتي )أهم هذه البرمجيات •يتطلب استخدامها شراء
نسخة منها وتنزيلها على الجهاز، باإلضافة إلى وجود
(:ذاكرة جهاز جيدة
اإللوستريتور-1
الفوتوشوب-2
برمجيات تصميم اإلنفوجرافيك الثابت(برمجيات رسومية لتصميم اإلنفوجرافيك الثابت)
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
بيكتوشارت•www.piktochart.com
انفوجرام•https://infogr.am/
فيجوالي•http://visual.ly/twitter
فيزمي•www.visme.co
:إيزيلي•http://www.easel.ly/
مواقع ويب للتصميم
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
(تطبيق عملي)
مدخل إلى البيكتوتشارت
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
عرض فيديو توضيحي
مدخل إلى برنامج اإللوستريتور
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
عرض فيديو توضيحي
مدخل إلى برنامج الفوتوشوب
By: Mais AbuSalahabusalah@promosteer.com@maisabusalah
عرض فيديو توضيحي أو من خالل مواقع الويب السابق
ذكرها
إنفوجرافيك جاهزالتعديل على نموذج