3 طرق لتصميم صورة رسومية تتدفق من الحشد
الرسومات المعلوماتية ليست جديدة. وبالتأكيد ، فالتفاعلات التفاعلية ليست كذلك ، ولكن مع إطلاق مواقع الأخبار الحديثة المبنية على البيانات مثل فوكس،Fivethirtyeight و الصدمة ، أصبحت أكثر شعبية.
ونظرًا لأن المشاهدين يشاهدون هذه الرسوم المعلوماتية على الأجهزة اللوحية والهواتف وأجهزة سطح المكتب ، فإن بناء هذه الرسومات في HTML5 هو الطريق الذي يجب اتباعه ، فمن المرجح أن يطلب منك عملاؤك وزملاؤك في العمل إنشاء هذه الرسومات!
ا خريطة لعشاق لعبة البيسبول بواسطة The Upshot
في ما يلي ثلاث طرق للتأكد من أن الرسوم البيانية التفاعلية المستندة إلى HTML5 تفلت من الفوضى.
1) فكر في سبب إنشاء مخطط المعلومات في المقام الأول باستخدام طريقة FIRED
حتى قبل التفكير في التكنولوجيا ، من المهم التفكير في الرسم من وجهة نظر المشاهد. بينما يوفر لك HTML5 وسيطًا جديدًا تمامًا لعرض قصة بياناتك ، فإنه لا يقدم غرضًا أو سردًا للقطعة تلقائيًا.
من الواضح عندما تم صفعة المشروع في اللحظة الأخيرة ، دون أي اعتبار لجودة الاستخدام أو الجودة. كيف تتجنب القيام بهذا العمل؟ أحب توظيف طريقة "FIRED" - وهي طريقة سهلة لتذكر التفكير بشكل نقدي قبل البدء في استخدام أحدث تقنيات CSS لإنشاء خريطة تفاعلية:
- جديد - كيف سيكون تصميمك متميزًا عن الآخرين؟
- إعلامية - هل تقدم حقائق دقيقة ومثيرة للاهتمام؟
- ذات الصلة - هل المعلومات الخاصة بك تحكي قصة متناغمة؟
- الترفيه - هل يلفت المشاهد و متحمسًا إلى أن يكون جزءًا من قصتك؟
- مختلف - هل رسمك المعلوماتي جديد؟ هل حدث هذا قبل ذالك؟
سيساعدك طرح هذه الأسئلة على تحديد أهداف صفحتك وكيف تريد أن تلقى رسالتك صدىً لدى جمهورك. في نهاية المطاف يجب أن يكون المنتج النهائي الخاص بك إطار فكرتك بطريقة واضحة ومستساغة. كن مبدعًا ، نعم ، ولكن كن منظمًا أيضًا. إن الفن الرسومي هو ما يجب أن يستخلص القارئ ، لكن البيانات المعروضة يجب أن تكون مقتضبة ؛ لا تدع الوسط يتفوق على الرسالة. رسم حيوي ناجح يستقطب جمهورك أكثر وأكثر سهولة في الهضم.
2) اجعلها تتحرك
أدوبي إدج هي عبارة عن أداة رسوم متحركة بتنسيق HTML5 تتيح لك إضافة حركة إلى رسومات الويب ، مما يتيح لك توسيع تصميماتك المخصصة مع التفاعل والحركة. كما أنه يتكامل مع الأدوات الإبداعية الأخرى لتوفير جسر سلس بين التصميم و HTML أثناء إنشاء الويب. هناك بعض النماذج والعينات كبيرة حقا على صفحة العرض لتبدأ. إذا كنت ترغب في الذهاب إلى مستوى أعمق وإضافة عناصر مثل أجهزة تنقية الغاز التي تعمل باللمس والسحب ، هنا هو البرنامج التعليمي مع الأصول لتبدأ.
يمكنك أيضًا أن تنسج رسومات تفاعلية تستفيد من أحدث تحديثات المتصفح إلى CSS و HTML5 لإضفاء بعض التأثيرات الرائعة. CSS الأشكال في المراحل الأخيرة من المواصفات ؛ تحقق من ذلك (جيثوب ريبو هنا ).
ال تطور الويب مخطط المعلومات الرسومي.
3) البيانات والبيانات والبيانات
لا يمثل رسم المعلومات أي شيء بدون مصادر بيانات قوية وأدوات لتوضيحها.
يمكن أن تختلف مصادر البيانات - سواء كان ذلك من خلال البحث الخاص بك أو من خلال برنامج العميل الخاص بك. هناك أيضا قائمة جيدة على Quora من مجموعات البيانات المتاحة للجمهور يمكن أن تعطيك بعض البيانات الخام الجيدة للعب معها.
بعض خدماتي التوضيحية المفضلة (التي تقدم جميع منتجات HTML5 ، بالطبع) لجمع بياناتك وتقييمها هي:
- Piktochart - خدمة مجانية (مع خيار للمحترفين مدفوع الأجر) تقدم مجموعة واسعة من المواضيع القابلة للتخصيص مع أداة استيراد بيانات ناعمة.
- infogr.am - خدمة مجانية (مع خيار مدفوع مقدمًا مدفوع الأجر) يقدم نماذج وجداول بيانات وأدوات مساعدة أخرى لإنشاء رسوم بيانية مرئية.
- visual.ly - مجتمع الرسومات. في حين أن نقطة سعر visual.ly يمكن أن تبدو حادة بعض الشيء (ستجعلك رسمًا بيانيًا مبنيًا على ملخص إبداعي يبدأ من 999 دولارًا) ، فإن مجتمعها ملهمًا عندما تبحث عن بدء مشروع رسم الخرائط الخاص بك.
وإذا كنت طموحًا بشكل خاص وكنت تبحث عن الغوص العميق حقًا في مجال أكبر لعلوم البيانات ، فهناك الكثير من الموارد عبر الإنترنت حول هذا الموضوع. هناك MOOCs مثل هذا دورة علوم البيانات من جامعة واشنطن.