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