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

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

اليوم الرابع

ميس أبوصالح

abusalah@promosteer.com

@maisabusalah

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

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

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

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

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

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

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

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

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

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

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

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

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

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

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

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

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

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

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

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

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

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

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

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

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

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

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

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

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

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

.بتفاعلك معه

:مثال• http://avalaunchmedi

-of-a.com/history-social

media/Main.html

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

By: Mais AbuSalah abusalah@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 AbuSalah abusalah@promosteer.com @maisabusalah

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

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

(:جيدة

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

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

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

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

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

:بريزي•

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

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

https://capsidea.com

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

:أنيماترون•

https://www.animatron.com

:إنفو أكتيف•

https://infoactive.co

تشارتس جي اس•

http://www.chartjs.org/

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

(فيديو)

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

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

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

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

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

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

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

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

نماذج جاهزة

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

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

أسئلة وأجوبة

By: Mais AbuSalah abusalah@promosteer.com @maisabusalah

شكرا لكم