البحث في الموقع

على مدى السنوات القليلة الماضية، أصبحت الرسوم البيانية شائعة بشكل متزايد لأسباب كثيرة منها سهولة مشاركتها وقدرتها على إيصال المعلومة والرسالة بسهولة ووضوح، حيث تختصر الكثير من الجمل والشروحات ببضع كلمات ورسومات جميلة أخّاذة. عرّف موقع القاموس الإنجليزي Infographic على أنه عرض تقديمي مرئي للمعلومات في شكل مخطط أو رسم بياني أو صورة أخرى مصحوبة بحد أدنى من النصوص، تهدف إلى تقديم نظرة عامة سهلة الفهم، وغالبًا ما تكون لموضوع معقد. ويمكن تعريفها أيضًا على أنها طريقة لتبسيط مشكلة التواصل النصي واللفظي عبر استخدام أسلوب التصميم الرسومي. أهم القواعد والمبادئ نظرًا لأن المزيد من العلامات التجارية وفرق التسويق التابعة لهم تعمل على إنشاء ومشاركة رسوم بيانية عالية الجودة عبر الإنترنت، فإن مجرد وصف بعض الحقائق معًا وتسميتها مخطط معلومات أو رسوم بيانية، لا يكفي لتعد نفسك مصمم رسوم بيانية، بل يجب إتقان هذا الفن عبر اتباع قواعد وتطبيق مبادئ معينة لتبرز بين الكم الهائل من المنافسين، ويجب أن تكون رسوماتك البيانية غنية بالمعلومات المفيدة ومصممة بطريقة جميلة. لذلك إليك أهم القواعد والمبادئ الواجب اتباعها للحصول على رسومات بيانية متفوقة. البساطة دائمًا ما يتكرر هذا المبدأ في جميع أنواع اختصاصات تصميم الرسوميات وهو أساسًا من أهم المبادئ العامة لتصميم الرسوميات. يمكنك تطبيق هذا المبدأ عبر اختصار النصوص إلى كلمات أو عبارات قصيرة وسهلة الفهم، ويجب أن تكون الألوان المستخدمة في التصميم متناسقة لجذب انتباه المشاهدين. محاولة إظهار الكثير من التفاصيل في الرسوم البيانية تجعل الناس يشعرون بالملل والتعب من قراءتها. رسم بياني يوضح مجموعة نصائح للتسويق بالمحتوى بطريقة بسيطة وسلسلة من مقال قائمة لأهم مصطلحات التسويق بالمحتوى. العنوان أولًا الرسومات البيانية تحتاج دائمًا إلى عنوان في بداية ورأس كل تصميم، على عكس الكثير من اختصاصات التصميم الأخرى التي قد لا تحتاج لعناوين، لذلك أفضل وسيلة لإقناع للمشاهد بمتابعة مشاهدة الرسم البياني هو العنوان المقنع والجذّاب، حيث يمكن للعنوان المدروس أن يثير اهتمام المشاهد ويدفعه لمتابعة تصفح باقي أجزاء التصميم، وقد يؤدي العنوان الممل الذي لا يثير الاهتمام إلى دفع المشاهد إلى العزوف عن متابعة تصفح الرسم. رسم بياني يبرز العنوان بشكل واضح أعلى التصميم من الهيئة العامة للإحصاء في السعودية. المحاذاة هو من العناصر المؤثرة في هذا النوع من التصاميم، ويمنح المنظر العام للتصميم الأناقة والجمالية، وفي حال عدم الالتزام به سيبدو التصميم فوضويًا وغير احترافي. أفضل طريقة لتطبيق هذا المبدأ في التصميم هو تفعيل أداة عرض الشبكة Grid في برنامج التصميم المستخدم ومن ثم تفعيل خاصية المطابقة إلى الشبكة Snap to Grid وبذلك تتحقق المحاذاة بسهولة ويسر ودون بذل أي مجهود في محاولة تطبيقها. رسم بياني يوضح بروتوكولات الحج من تصميم سلمى العُمر. التباين استخدم التباين دومًا في تصاميمك وخصوصًا التباين في الألوان ولعل مخطط الألوان التكميلي قد يقدم تباينًا مميزًا وبارزًا للعناصر (راجع مقال اللون في تصميم الرسوميات ونظرية اللون لفهم مخطط الألوان التكميلي). ولكن اللون ليس الطريقة الوحيدة لتطبيق التباين في التصميم، إذ يمكن استخدام أحجام النصوص لتطبيق ذلك، فعادةً ما يكون العنوان هو أكبر نص في الرسم البياني، متبوعًا بالعنوان الفرعي ثم الفقرات. يجب أن يكون العنوان دائمًا الأكبر حجمًا حتى يعرف المشاهد موضوع الرسم البياني مباشرة بمجرد النظر إليه. استخدم المصمم تباين ألوان جميل ومريح مع تباين واضح للخطوط في تصميم أنيق من موقع الخليج أونلاين. التوازن تطبيق التوازن في تصميم الرسومات البيانية يريح العينين لأن جميع العناصر ومواضعها تتناسب بسلاسة معًا، كما يحافظ التوازن على التكوين العام للتصميم خصوصًا في الرسومات البيانية الطويلة. وهناك نوعين من التوازن، توازن متماثل وتوازن غير متماثل. التوازن المتماثل هو عندما يكون لكل جانب من جوانب التصميم وزن بصري متساوٍ، هذا التصميم فعّال في الرسومات البيانية المتعلقة بالموازنة بين أمرين أو أكثر. التوازن غير المتماثل طبيعي أكثر وأقل تجانسًا من التوازن المتماثل، إذ ينشئ علاقة أكثر تعقيدًا بين العناصر ويجعل الرسم البياني أكثر ديناميكية لأن أسلوب التركيب لا يتكرر بشكل مفرط وممل. لاحظ التوازن المتماثل بين طرفي التصميم في الرسم البياني الذي يشرح الهلع للمصمم محمد السعيدي. الهرمية يساعد تطبيق هذا المبدأ على توجيه سير المخطط البياني وتدفقه، حيث يعمل هذا المبدأ على تنظيم العناصر حسب الأهمية، وبهذا النمط يقع عنوان الرسم البياني دائمًا في الجزء العلوي من التصميم حتى يسهل رؤيته وقراءته وفهمه من النظرة الأولى، ثم تتبعه عناوين فرعية وفقرات وأيقونات ورسومات أخف من ناحية الوزن البصري بالتسلسل بحسب الأهمية. يظهر تطبيق مبدأ الهرمية بوضوح في تصميم رسم بياني يوضح رحلة الموظف الجديد للمصممة بثينة العودة. التناغم اللوني تتميز تصاميم الرسومات البيانية بتناغم ألوانها دائمًا لذلك يجب على المصمم العمل على اختيار مخطط الألوان الجيد للتصميم مع مراعاة التأثيرات اللونية وعلاقتها بمحتوى ومعاني التصميم، ثم عليه أن ينشأ لوحة الألوان الخاصة بالرسم البياني والتقيد بها للحصول على تناغم لوني مذهل ومتكامل وغير شاذ. الرسم البياني يطبق التناغم اللوني الأحادي من موقع الأمم المتحدة. مطابقة الخطوط من المعروف في قواعد التصميم الالتزام بعدم استخدام أكثر من ثلاثة خطوط مختلفة في أي تصميم. يميل المصممون المبتدؤون إلى الإفراط في استخدام الخطوط، بسبب وجود الكثير من الخطوط للاختيار من بينها ويريدون دائمًا البحث عن شيء جديد ومثير للاهتمام. ولكننا بحاجة إلى التأكد من إقرانه بشيء مألوف وقابل للتطبيق، وعادة ما يكون هناك خط مهيمن وخط مساعد. استخدم في هذا الرسم البياني نوعان متناغمان من الخطوط من موقع الأناضول. الوحدة تطبيق الوحدة البصرية للتصميم يحتاج إلى تناغم وتجانس كافة العناصر معًا، إذ يجب تلوين كافة عناصر التصميم باستخدام لوحة ألوان واحدة لتحقيق التناغم اللوني، ويجب أن تكون الأحجام متناسقة عبر تطبيق الهرمية من جهة والتوازن من جهة أخرى، ويجب أن تكون الأيقونات بذات الحجم وكذلك خطوط نصوص الفقرات والعناوين الفرعية، من الأفضل أن تكون العناوين الفرعية بنفس نوعية الخط وحجمه ولونه وكذلك الأمر بالنسبة لبقية العناصر. يوضح هذا الرسم البياني كيفية تطبيق الوحدة على جميع عناصر التصميم – تصميم نصائح للاسترخاء للمصمم وتر التصميم. أشهر الأدوات والتطبيقات لتصميم الرسومات البيانية هناك تطبيقات ويب وسطح مكتب تحتوي العديد من القوالب الجاهزة للتعديل والمعالجة لإنشاء رسومات بيانية جميلة، وقد تحوي أيضًا على عناصر رسومية وخطوط جاهزة لتختار من بينها وتضيفه إلى التصميم. وهناك برامج تصميم عالية المستوى لا توفر كل هذه المزايا إلا أنها تستطيع إنشاء أي تصميم لرسم بياني مهما كان، ويعود الأمر كليًا إلى مهارات المصمم في استخدام هذه البرامج والتي لا غنى عنها لأي مصمم رسوميات حقيقي. برامج التصميم الاحترافية برامج التصميم الاحترافية مثل الفوتوشوب والإليستريتور وكورل درو وإنكسكيب وغيرها، حيث أن إمكانات هذه البرامج غير محدودة، يمكنك تطبيق كل المبادئ والقواعد بطريقتك، ويمكنك اختيار الألوان التي تريد، لا قوالب أو عناصر جاهزة تربطك بنمط محدد في التصميم، بل على العكس فأنت تتمتع بمطلق الحرية في ابتكار قوالبك وعناصرك الخاصة، حتى وإن عنى ذلك بذل جهد مضاعف ومزيدًا من الوقت إلا أن النتائج ستكون مميزة وخاصة وتحمل بصمتك بكل تأكيد. يستطيع الفوتوشوب وجيمب وأمثالهما تصميم رسومات بيانية طبعًا، ولكن الرسومات الشعاعية أفضل بكثير لهذه المهمة، لذلك يعد الإليستريتور والإنكسكيب وكورل درو وأمثالها أفضل التطبيقات التي تستخدم لإنشاء رسومات بيانية مميزة ومبتكرة. Adobe Spark وفرت أدوبي كعادتها حلولًا لتصميم الرسومات البيانية عبر تطبيق الويب والهاتف المحمول وهو تطبيق أدوبي سبارك Adobe Spark، ويتضمن التطبيق قوالب عديدة لتصميم قصص ومنشورات ثابتة ومتحركة لمختلف وسائل التواصل الاجتماعي، وكذلك لمواقع الإنترنت والتطبيقات. يحوي العديد من العناصر والأدوات إضافة إلى القوالب القابلة للتعديل. Snappa ستمكنك أداة الرسوميات Snappa من عمل رسوم بيانية جذابة حقًا تجذب انتباه الجمهور، فقد حصلت على معدلات مرتفعة في المراجعات والتقييمات. إنها سهلة الاستخدام للغاية مع وفرة من القوالب المعدة مسبقًا ومكتبة مليئة بملايين الصور عالية الدقة. تتيح خاصية إزالة خلفيات الصور بنقرة واحدة، ولديها مجموعة من تأثيرات النص والرسومات لاستخدامها، ويمكنك حتى المشاركة على وسائل التواصل الاجتماعي مباشرة من التطبيق. Piktochart يعد تطبيق Piktochart بسيطًا وسهلًا أكثر من سواه من التطبيقات لتصميم الرسوم البيانية، حيث يحتوي على قوالب سهلة التخصيص، بمجرد إضافة بياناتك ستتمكن من تعديل التخطيط ونظام الألوان وغيرها. Visme يمتلك Visme إمكانات إنشاء عروض تقديمية جيدة، ولكنه موجه بشكل خاص نحو إنشاء رسوم بيانية جذابة، ويشتمل على أكثر من 100 خط وملايين الصور المجانية وآلاف الرموز عالية الجودة، وهناك خيارات لتضمين الفيديو والصوت (بما في ذلك القدرة على تسجيل تعليق صوتي مباشرة في المحرر، وهو أمر مفيد)، كما يمكنك أيضًا تحريك المحتوى لتوضيح الأمور. من أهم ما يميز هذه الأداة عن غيرها هو أنها تسمح للمستخدمين بإعداد رسم بياني في بضع دقائق، وذلك بفضل مكتبة عناصر يمكن سحبها وإسقاطها بسهولة في مكانها. كما يتيح أيضًا إنشاء رسوم بيانية تفاعلية ومتحركة. خاتمة الرسوم البيانية شعبية للغاية والجميع يحب مشاهدتها، إنها تنقل المعلومة الثقيلة الكثيفة بأسلوب بسيط خفيف وسهل، وأصبحت الشركات الكبرى والصحف والمجلات تستخدمها لنقل المعلومات والأفكار والرسائل بصورة لطيفة ومحببة إلى جمهورها. فقد أصبح لهذا الاختصاص من تصميم الرسوميات مجال واسع وطلب كبير في الأسواق، وهذه فرصة جيدة لك لتستغلها وتنمي مهاراتك وتثري خبرتك من خلال إنشاء تصاميم جميلة تتماشى مع المبادئ ومطابقة للقواعد للوصول إلى الاحترافية في هذا العمل.

يمكن أن تكون البيانات جذّابة، وإذا اضطررت إلى التعامل مع الرسومات البيانية والإحصائيات في عملك في تصميم الويب، فأنت تعلم أن تمثيل البيانات مرئيًا هو أفضل بكثير من الاقتصار على الاستدلال ببعض الأرقام فقط. سواء أردت كتابة تدوينة، أو أردت إنشاء مخططّ لمشروع خاص بعميل، أو مجرد ترتيب بياناتك الشخصية، توفّر الأدوات المجانية لعرض البيانات رسوميًا ما تحتاجه لتشكيل المخططات، والرسوم البيانية، والمخططات المعلوماتية البيانية (infographics) والتي تكون جميلة المنظر وسهلة الفهم معًا. Chartist "مخططات متجاوبة بسيطة"، لا أكثر ولا أقل. نزّل هذا البُريمج وأنشئ مخططات دائرية متجهة (vector pie charts)، ورسوم بيانية خطية (line graphs)، وغيرها من المخطّطات التي ستتسع لحجم أي شاشة. يمكنك كذلك إضافة حركات(animations)! هذه المخطّطات متوافقة مع معظم متصفحات الويب، لذلك لا يوجد سبب يمنعك من استخدامها. ومع ذلك ستحتاج لتعلّم القليل من JavaScript و CSS. يمكنك تعلّم هذه اللغات من خلال موسوعة حسوب والتي تحتوي على توثيقٍ شاملٍ ل CSS و JavaScript وغيرها. أو يمكنك الالتحاق بدورات أكاديمية حسوب الاحترافية كدورة تطوير واجهات المستخدم ودورة تطوير التطبيقات باستخدام لغة JavaScript. RAWGraphs إذا كنت تبحث عن التنوّع، فلدى RAWGraphs كل ما تحتاج له من خيارات بين يديك. ما عليك سوى لصق بيانات جدول البيانات (spreadsheet) أو رفع ملف، وستكون قادرًا على تحويل الأرقام إلى أي نوع من المخططات، من نوع المخطّطات العمودية (bar graph) إلى نوع المخطّطات التي تقيس مدى التغيّرات خلال الوقت وهو ما يسمّى مخطّط النتوء (bump chart)! يمكنك أيضًا إضافة نوع المخطط الذي تريد إذا كنت تجيد JavaScript. عند الانتهاء من التخصيص، يمكنك تنزيل المخططات التي أنشأتها بصيغة SVG أو PNG أو JSON. أو قم بمجرد تضمين المتجّه (vector) في موقعك ببساطة. هذا البرنامج المتقدّم ليس أسهلها استخدامًا، ولكن لديه الكثير من الإمكانيات. Datawrapper إذا أردت تضمين جدول بيانات (spreadsheet) في مقال، فسوف تُسهّلُ Datawrapper تحويله إلى رسم بياني جميل. هذا ليس صعبًا على الإطلاق، وكما أن الرسوم البيانية قابلة للتخصيص بالكامل وصولًا إلى محاذاة النص (text alignment) وتخصيص اللون عند الانتهاء (يوجد كذلك مرشّحات للمصابين بعمى الألوان!)، تحتاج فقط إلى التسجيل وستحصل على شيفرة التضمين (embed code) للمخطّط. Tableau أتحتاج شيئًا احترافيًا؟ تعدُّ Tableau Public أداة قابلة للتّنزيل تتيح لك تمثيل البيانات مرئيا (visualize data) بعدة طرق. تُعدّ هذه الأداة مناسبة لأي نوع من الرسوم البيانية من المخطّطات الصغيرة (small charts) إلى المخططات المعلوماتية البيانية المخصّصة (dedicated infographic)، يُعدّ هذا التطبيق اختيارًا عظيمًا لمصممي الويب. ChartBlocks "أسهل باني مخطّطات في العالم" هو كما يقول عن نفسه تمامًا. أدرِج بعض البيانات لجدول البيانات (spreadsheet)، وعدِّل بعض الأشياء البسيطة، واختر قالبًا، وبهذا حصلتَ على مخطّط في أقلّ من دقيقة. يمكنك تعديل المظهر أكثر إن أردت ذلك، أو يمكنك تنزيله ببساطة، أو تضمينه، أو مشاركته على مواقع التواصل الاجتماعي! Beam أكلّ هذه البرامج معقّدة أكثر من اللازم؟ أتريد تحويل حفنةٍ من البيانات إلى رسم بياني بسيط دون استيراد مجموعة من الملفات؟ عدّل بعض الأسماء ونقاط البيانات فقط (data points)، واختر واحدًا من بين أربعة أنواع من المخطّطات البسيطة، واختر ملفات تخصيص اللون (color profile). بهذه السهولة سيكون مخطّطك جاهزًا! Visualize Free يعدّ برنامج السحب والإفلات هذا صاحب طريقة رائعة لإنشاء مخططات معلوماتية بيانية (infographics) جميلة تتضمن الكثير من البيانات. ستحتاج إلى التسجيل لاستخدام هذا التطبيق، ولكن هناك العديد من الأمثلة في الصفحة الرئيسية التي يمكنك تخصيصها بحريّة حتى تعتاد على لوحة التحكم. OpenHeatMap هذا التطبيق مذهل ببساطة لأنه سهل الاستخدام! ارفع جدول بيانات (spreadsheet) أو ملف إكسل (Excel) لتحصل على خريطة حرارية (heatmap) مع الشيفرة المضمنّة. العملية أنيقة وانسيابية تمامًا. Timeline إعداد هذا الموقع أصعب نوعًا ما، إذ أنّك تحتاج إلى اتّباع الخطوات حرفيًا وإنشاء جدول بيانات (spreadsheet) جديد. ولكن إذا كنت بحاجة إلى جدول زمنيّ تفاعليّ قابلٍ للتضمين لمشروعك فهذا هو التطبيق المنشود. بيانات جميلة يُعدّ التفريق بين النصوص بصورٍ جذابة طريقةً رائعةً لمنع ظهور صفحة الويب ظهورا جافًّا. ستتمكن من إنشاء رسوم بيانية ومخططات مثيرة للاهتمام باستخدام هذه الأدوات التي ستشدّ انتباه كلّ من يراها، وفي دقائق. لا مزيد من إهدار الساعات في محاولة إنشاء الرسوم البيانية بنفسك! ترجمة -وبتصرف- للمقال ‎9 Free Data Visualization Tools لصاحبته Brenda Stokes Barron