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

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

اليوم الرابع

ميس أبوصالح

[email protected]

@maisabusalah

mailto:[email protected]

By: Mais AbuSalah [email protected] @maisabusalah

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

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

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

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

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

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

، والتي تقوم (بروموستير)تعمل حالياً على إدارة شركتها الخاصة •

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

.وتصميم اللوجو واالنفوجرافيك للعمالء• maisabusalah@: يمكن متابعة تغريداتها عن طريق تويتر•

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



أجندة اليوم الرابع


تعريف اإلنفوجرافيك المتحرك• برمجيات تصميم اإلنفوجرافيك المتحرك• مواقع ويب للتصميم• مدخل إلى البريزي• برمجيات رسومية لتصميم اإلنفوجرافيك المتحرك•




أجندة اليوم الرابع


برمجيات رسومية لتصميم اإلنفوجرافيك المتحرك• مدخل إلى الفالش•

مدخل إلى اإليدج أنيميت•

التصميم باستخدام الكود البرمجي• ماذا بعد هذه الدورة•

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




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

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

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

.يكون لها سيناريو كامل إلخراج النهائي لهذا النوع

:أمثلةhttp://www.webbymonks.com/infographic/webtesting/infograph.html

http://animagraffs.com/flat-screen-displays/

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


http://www.webbymonks.com/infographic/webtesting/infograph.html



















فيديو عادي ويوضع عليه البيانات و : إنفوجرافيك الفيديو

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

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

: مثال2&index=5DF78441FFD6559&list=PLE8https://www.youtube.com/watch?v=oMtjZkrTiJ

Swoo2B9m7https://www.youtube.com/watch?v=Qh


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










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








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

إنفوجرافيك يتغير

.بتفاعلك معه

:مثال• http://avalaunchmedi

-of-a.com/history-social

media/Main.html



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/

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


http://www.simplybusiness.co.uk/microsites/hungry-tech/




http://autodesk360innovates.com/landing/social-collaboration-infographic/










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.evanshalshaw.com/more/bondcars/

http://www.informationisbeautiful.net/visualizations/worlds-biggest-data-breaches-hacks/










http://www.google.com/insidesearch/howsearchworks/thestory/

http://www.google.com/insidesearch/howsearchworks/thestory/


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

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

(:جيدة

ينتج عنه ملفات : اإليدج أنمات -1و جافا 5اتش تي ام ال )ويب

(.سكريبت ينتج عنه ملفات فالش: الفالش -2

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



:جوجل تشارتس•https://google-

developers.appspot.com/chart/interactive/docs/quick_start

:بريزي•

http://prezi.com سبرايتس آب•

https://spritesapp.com كابس آيديا•

https://capsidea.com

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


https://google-developers.appspot.com/chart/interactive/docs/quick_start




http://prezi.com/

https://spritesapp.com/

https://capsidea.com/


:أنيماترون•

https://www.animatron.com

:إنفو أكتيف•

https://infoactive.co

تشارتس جي اس•

http://www.chartjs.org/

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


https://www.animatron.com/

https://infoactive.co/

http://www.chartjs.org/


(فيديو)

مدخل إلى البريزي


https://prezi.com/t3juzxgelbl0/do-it-yourself-prezi-tutorial-beginner/


عرض فيديوهات توضيحية

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



عرض فيديوهات توضيحية

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



تجربة كود الرسومات البيانية من جوجل على أجهزة الحضور

التصميم باستخدام الكود البرمجي



ماذا بعد هذه الدورة؟



استخدام بريزي أو أحد المواقع المختارة للتعديل على قوالب أو

نماذج جاهزة

(التعديل على نموذج انفوجرافيك متحرك)تطبيق



أسئلة وأجوبة



شكرا لكم


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

Education