علي التركي يكتب: العناصر التيبوغرافية الرقمية لتصميم المواقع الإخبارية «85»

شكل التصميم ليس فنًا سريانيًا أو «عروسة مولد»، لكنه إطار تنظيمي يحافظ على التوازن بين العناصر المختلفة المكونة له، لذا دائمًا ضعها قاعدة تحاشي الإسراف في استخدام عناصر بعينها.
ويعتمد الشكل المثالي للتصميم على مدى قدرة مديري الموقع على إيصال رؤيتهم الخاصة بشكل توافقي مع عين المستخدمين، وذلك باستخدام العناصر التيبوغرافية الرقمية والأشكال الهندسية.
وهناك عدد من العناصر التيبوغرافية التي يعتمد عليها شكل التصميم، على النحو التالي:
v الخطوط
الخطوط عنصر تيبوغرافي مشترك بين التصميم الطباعي، وتصميم المواقع، ورغم وجود عشرات الأنواع من الخطوط، لكن ليس جميعها يصلح للاستخدام في المواقع الإخبارية.
وتعتبر الخطوط؛ المعبر الرئيسي والعنصر التيبوغرافي الذي يبرز المحتوى الصحفي، مثلما في الإخراج الطباعي التقليدي بالمشاركة مع الصور.
ويتحكم في نوعية الخط عدد من العوامل التي تؤثر على مساحة الرؤية للمستخدمين، ودفعهم إلى الاستمرار في القراءة إذا شعروا براحة في ذلك، وهي على النحو التالي:
v حجم الحرف
وهو المساحة التي يحتلها على صفحة الموقع، وينعكس حجم الحرف على انقرائية المادة المنشورة، ومدى وضوحها.
v البنط
وحدة قياس حجم الحرف ويساوي 1/72 من البوصة، ويظهر ذلك بوضوح في برنامج «Word».
v كثافة الحرف
سمك الحرف وأسنانه وحوافه التي تميزه عن غيره من حروف، وإذا كان سميكًا وأكثر ثقلاً ورسوخًا أطلق عليه «Bold»، وإذا كان نحيفًا وأكثر هدوءًا قيل عليه .«Light»
v شكل الحرف
الهيئة التي يبدو ويظهر عليها الحرف، ومنظره المتفرد، ويميز بين عناصر الموضوع، وأشكال العناوين الرئيسية والفرعية والمتن.
ويساعد شكل الحرف القارئ في التمييز بين عناصر المادة الصحفية، كما يقضي على الملل والرتابة، وترسيخ شخصية الموقع وتمييزه عن باقي المواقع المنافسة.
v العناوين
الكلمات الأكبر حجمًا من المتن، وتكون في أعلى الخبر، وهو أول العناصر التي تستدعي بصر القارئ في بحثه عن الجديد.
ويمثل العنوان الدليل، وعنصر الإغراء؛ لإقناع الزوار بالإقبال على الموضوع، فهو لب المتن، والمختصر المفيد الذي لا يستغرق وقت القارئ، فيمده بالمعلومات في وقت قصير جدًّا.
ويختلف نوع الخط المستخدم، وفقًا لأنواع العناوين المختلفة وللتفرقة بينها، فلكل نوع حجم وشكل خاص، سواء كان «رئيسيًّا، أو ثانويًّا، أو تمهيديًّا، أو فرعيًّا».
v المتن
المتن هو النص الداخلي للمادة الصحفية التي تظهر أسفل العناوين والصور، ويختلف نوع وحجم وشكل الخطوط من موقع إلى آخر حسب رؤية كل موقع وأسلوبه الخاص في تسهيل القراءة.
ويتكون من سطور، كل خبر أو تقرير أو تحقيق أو مقال.. إلخ، ووحدات صغيرة وحروف متراصة بجوار بعضها؛ لتكون عبارات مفيدة.
وهو أهم العناصر التيبوغرافية لدى القارئ، والمعيار الرئيسي الذي يقاس به مستوى الموقع ومصداقيته وسياسته التحريرية وأهدافه وتوجهاته، وهو صاحب الجاذبية الأولى لأي قارئ للتصفح، لما يحمله من معلومات.
ويعتبر المتن، العنصر التيبوغرافي الوحيد الذي ينفرد بتوظيفه لكل العناصر الأخرى، فجميعها تهدف إلى إبرازه وتمييزه
إرشادات الخطوط والمتن
هناك بعض الإرشادات التي يجب أن تأخذها في عين الاعتبار قبل الاستقرار على الخطوط المناسبة التي ستستخدمها في موقعك على النحو التالي:
v كلما كان التصميم بسيطًا ويتسم بالثبات والوضوح، كان عرض المحتوى أفضل وسهلت مهمة الحصول على المعلومات وقراءة المحتوى.
v يجب ألا يكون التصميم عائقا للقراءة السلسة للمحتوى، ما يؤدي إلى إرباك القارئ، ودفعه إلى النفور من استكمال قراءة بقية المعلومات.
v قم باستخدام برامج معالجة الكلمات قبل نشر المحتوى، وذلك لضمان تنسيق أفضل، وأن تكون أطراف النصوص متساوية حتى لا يظهر سطر طويل وآخر قصير.
v قم بإضافة خاصية المدقق اللغوي للمساعدة في التأكد من خلو الموقع من الأخطاء الإملائية والنحوية، فهذه الإضافة تسرع من دورة العمل، وأصبحت متاحة بشكل مجاني وبأسعار رخيصة.
v يجب أن يسمح التصميم بتقسيم النصوص الطويلة، باستخدام الصور والفيديوهات بداخله بشكل لا يقطعه، فضلاً عن العناوين الفرعية وعناوين للفقرات.
v استخدم الخطوط المعروفة للمتصفحين في الدراسات تشير إلى أن 85% من متصفحي الإنترنت يستخدمون 4 أنواع فقط، وهي: «Arial»، و«Times New Roman»، و«Simplified»، و«Tahoma»
v الدراسات تشير إلى تأثر القراء بشكل كبير بنوع الخط وحجمه، وقد يعزفون عن القراءة إذا لم يشعروا براحة مهما كان المحتوى جيدًا ومهما.
v الدراسات تشير إلى أن حجم الخطوط الشائعة في المواقع الإخبارية تكون بين 8 إلى 14 بكسل، وأي زيادة أو نقصان يؤثر على عملية القراءة.
v احرص على أن يوضح حجم الخطوط محتويات الموقع وجميع النصوص المنشورة، ويتوافق مع لون الأرضية.
v استخدم أحجام الحروف الشائعة في المواقع الإخبارية التي تعود القراء على مشاهدتها، لأن أي تغيير سيحتاج إلى مزيد من الوقت لكي يتعودوا عليها.
v يجب أن يكون هناك تناسق وتوازن بين حجم الأحرف في العناوين والمتن والقوائم، والصفحة الرئيسية والصفحات الداخلية.
v حاول أن يتناسب حجم الأحرف مع قياسات الشاشات المختلفة التي يستخدمها القراء في التصفح سواء كان «هاتف محمول، تابلت، كمبيوتر شخصي».
v يفضل استعمال نوع واحد من الخطوط في كل الموقع، يختلف حجمه بشكل متناسب بين العناوين والمتن، وذلك لكي لا يحدث ارتباكا لدى القارئ.
v تجنب وضع خطوط أسفل الكلمات لأنها لا تحقق الهدف المرجو، وقد يظنها القارئ روابط تشعبية أو وصلات «Links»
v تجنب استخدام الأحرف الملونة التي تظهر وتختفي، لأنها تفتقر إلى الوضوح اللازم وتمثل عامل تشويش للقراءة.
v تجنب استخدام الأحرف المائلة، لأنها صعبة القراءة وترهق نظر المتصفحين، ولا جدوى منها نهائيًّا حتى في الجانب الجمالي.
الصور والمرئيات
هي المظهر الجمالي الثاني في التصميم، وتكتسب أهمية كبيرة خصوصًا إذا كانت جزءًا ثابتًا في التصميم، وهنا لا نتحدث عن الصور المرفقة في الأخبار فحسب، بل عن التي يتم استخدامها في جميع أقسام التصميم.
ويشمل هذا العنصر كل الصور، والخرائط والرسوم البيانية، وأي شيء يمثل شكلاً مختلفًا عن أشكال الحروف والكلمات.
والمرئيات هي الصور المتحركة كملفات «Gif»، والمصممة عبر برامج فلاش، وملفات الصوت والفيديو.
وتلعب الصور والمرئيات دورًا حيويًا في توصيل المعلومات للقراء وتأكيدها، والأداة الأولى لجذب محدودي التعليم والثقافة، وتعمل على توطيد العلاقة مع الموضوع.
كما أن الصور والمرئيات، تمثل العنصر الجمالي الذي يزين الموضوعات والأخبار داخل الموقع، وأداة فصل جيدة بين عناصر الصفحة.
إرشادات الصور والمرئيات
هناك بعض الإرشادات التي يجب مراعاتها، وهي كالتالي:
v حافظ على تناسق الصور مع التصميم بشكل عام والمحتوى الذي ينشره الموقع.
v قم باستعمال صور واضحة، تجذب القارئ وتصدر له طاقة إيجابية أثناء دخوله الموقع.
v لا تستخدم الرسوم المتحركة «Animation»، لأنها ستؤدي إلى بطء تحميل الصفحات، خصوصًا أن سرعة الإنترنت في مصر متدنية للغاية، وبالتالي ستخسر الكثير من الزيارات على الرغم من مظهرها الجمالي.
v اعتمد في المقام الأول على الصور التي بصيغة «JPG»، ثم ملفات «GIF» الثابتة فقط، وتجنب تمامًا المتحركة منها.
v تجنب برمجة الجافا «Java»، وفلاش «Flash»، لأنها ستجعل تصفح الأخبار بطيئًا جدًّا.
v اجعل مقاس الصور بشكل عام صغير الحجم لتسهيل تحميل الصفحات وضمان سرعة معالجتها وحفظها بعد الانطلاق، والحجم المثالي هو «600/338».
v اجعل معالج الصور في لوحة التحكم يخرجها في مساحة لا تزيد على 75 «Pixels» لتكون سهلة في التنزيل.
v حدد مكانًا ثابتًا لإضافة الصور داخل الأخبار، وأضف مربعًا أسفلها، للسماح بكتابة تعليق أو شرح.
v تجنب قطع النصوص بالصور أو الرسوم حتى لا يظهر المحتوى الواحد كأنه يعبر عن أكثر من نص.
v تجنب عرض الصور على أنها وصلات إلا إذا كانت بنرات إعلانية أو للانتقال إلى الخبر نفسه، ويحظر استخدامها داخل النصوص، لأنها ستؤدي إلى نتائج سلبية.
v بالنسبة للفيديوهات والصوتيات اجعل الموقع قادرًا على عرضها سواء كانت عبر روابط خارجية من «يوتيوب»، أو مواقع الفيديوهات الأخرى، مع إمكانية إضافة الفيديوهات المنشورة على مواقع التواصل الاجتماعي.
وسائل الفصل
هي العناصر التي تسعى للتحديد والفصل بين المواد المختلفة داخل الصفحة الواحدة على الموقع، وتأتي أهمية هذه الوسائل في كون صفحات المواقع الإخبارية تتداخل فيها المواد بشكل كبير جدًّا، فلا يمكن أن تستأثر مادة واحدة بكل مساحة الصفحة مثلما يحدث أحيانًا في الصحافة الورقية، فتجد حوارًا يستحوذ على صفحة كاملة.
وهناك أدوات كثيرة للفصل بين المواد داخل المواقع سواء في الصفحة الرئيسية أو صفحة الخبر نفسه أو داخله أو صفحات الأقسام تتشابه تمامًا مع ما يحدث في الصحافة الورقية، مثل: «الخطوط الطولية والعرضية، والجداول، والفواصل، والزوايا، والبياض والخلفيات.. إلخ».
ويجب الاهتمام بأن التقسيمات العرضية أفضل كثيرًا من التقسيمات الطولية والأعمدة، لكن التصميم الأفضل هو الذي يعتمد على التقسيمات الطولية والعرضية معًا لإحداث التباين اللازم.
إرشادات وسائل الفصل
هناك بعض النصائح التي يجب العناية بها، على النحو التالي:
v يجب أن تراعي التناسق في استخدام أدوات الفصل المختلفة، والاهتمام بالتنوع لإضافة ميزة جمالية.
v لا تستخدم البراويز والعلامات المائية الخاصة بموقعك بشكل مبالغ فيه، لأن ذلك يشعر الجمهور بأنه في معتقل.
v لا تسرف في استخدام الرسوم والأشكال الهندسية دون سبب لمجرد شد الانتباه بعيدًا عن وجود أهمية حقيقية لوجودها.
v تجنب استخدام الأشكال الهندسية الغريبة في التصميم التي قد تنفر الجمهور ف«البساطة مفتاح الجمال».
v لا تبالغ في استخدام رسوم الجرافيك كأدوات فصل، لأنها تبطئ عملية التصفح، وتجعل تحميل الصفحات بطيئا، خصوصًا للمتصفحين عبر الهاتف.
v استخدم الصور والفيديوهات كأدوات فصل لتقسيم المتن الطويل لتسهيل عملية القراءة، لكن يمكن استخدامها كأدوات فصل أيضًا بين الأقسام.
v تجنب استعمال الخلفيات ذات النسق الشبكي، لأنها تجعل قراءة النص صعبة للغاية، وتسبب إرهاقًا للقارئ.
v لا تملأ الشاشة بالنص، بل اجعل دائمًا مساحات بياض وصور على الجانبين الأيمن والأيسر، وبين الفقرات.
v استخدم البياض بشكل متوازن كأداة فصل خصوصًا إذا كان اللون الرئيسي غير الأبيض.
v حاول استخدام الروابط والوصلات كأدوات فصل وانتقال وفي تجزئة الموضوعات.
الألوان
هي أحد أهم العناصر في تكوين أي تصميم للموقع، وأكثرها إضفاء للحيوية والنشاط والراحة، والمعبر الأصيل عن شخصية المؤسسة الإعلامية.
وتعتبر الألوان المظهر الجمالي الأول الذي يدفع القارئ إلى الإعجاب بالتصميم، وإعطاء انطباع إيجابي والتعاطي معه بفاعلية.
ولكل لون دلالة خاصة به وحالة نفسية يصدرها لكل من يشاهدها، وذلك وفقًا لتقارير وأبحاث علمية.
إرشادات اختيار اللون
هناك عدد من الإرشادات التي قد تساعدك في اختيار الألوان التي تخدم أهداف موقعك ورؤيتك التحريرية، وهي كالتالي:
v استعمل الألوان بحكمة، فأنت لست مصمم أزياء ولا القراء سيتصفحون داخل معرض فن تشكيلي.
v يجب أن تتسم الألوان بالحيوية، لكي تؤثر بإيجاب على الحالة النفسية لمتصفح الموقع، ويجعله يتفاعل مع النصوص المنشورة.
v لكل لون دلالة وانطباع يمنحه للقارئ، فاحرص على اختيار اللون المناسب الذي يعطي الدلالة التي تريدها، والإحساس الذي ترغب في تصديره.
v اختر ألوانًا مألوفة للجميع، ولا تحاول ابتكار ألوان جديدة غريبة، لأنها في الغالب ستبهر القراء في المرة الأولى فقط.
v ضع في تصورك عددًا من الألوان، واطلب من أصدقائك العاديين إبداء الرأي ومشاركتك في الاختيار باعتبارهم قراء.
v حاول تصفح عدد كبير من المواقع الإخبارية، خصوصًا العالمية، سيساعدك ذلك في حسم قرارك بشأن اللون الرئيسي.
v هناك عشرات المواقع التي تمنحك خدمة تجربة الألوان، وتساعدك في اختيار المناسب لك، وتتيح لك تركيب ألوان مختلفة، وتطبيقها على تصميمك.
v يجب أن تكون ألوان الموقع بسيطة ومتناسقة، والمفضل استخدام 3 ألوان على الأكثر، فأنت لا ترسم لوحة فن سريالي، بل موقعًا إخباريًّا يتصفحه أصحاب أذواق مختلفة ومستويات تعليمية متعددة، وكلما كانت الألوان قليلة تناسبت مع عدد أكبر من المتصفحين.
v لا تسرف في استخدام الألوان الحادة، فأهم المواقع الإخبارية في مصر والعالم تتسم بالهدوء، وتعطي انطباعا بالراحة حتى يستطيع المتصفح الاستمرار في الموقع أكبر وقت ممكن.
v حاول إحداث تباين واضح بين ألوان النص والخلفية، بحيث تكون الفروقات بينهما واضحة تمامًا حتى لا تعوق القارئ عن التصفح وتلقي المعلومات.
v تجنب وضع ألوان في خلفيات الموقع، لأنها قد تؤثر سلبيًّا على وضوح النصوص، واحرص دائمًا على التباين الإيجابي بينهما.
v يفضل أن تكون لون الخلفية فاتحة إذا كان الموقع يعتمد على ألوان «داكنة»، أو «رمادية» إذا كانت ألوان الموقع «فاتحة».
v بعض المواقع تمنح القارئ حرية اختيار اللون الذي يناسبه، وقد يكون خيارًا مهمًا بالنسبة لك ومريحًا إذا كان قرارك يتأرجح بين تصورين أو ثلاثة.
v تجنب إحداث تغييرات على الألوان في المستقبل، لأنها ستكون شخصية الموقع فيما بعد، وما تفعله ليس تجربة عندما تفشل ستحاول مرة أخرى.
للتواصل:
علي التركي
مدير عام تحرير موقع «البوابة نيوز»
Ali_turkey2005@yahoo.com

مقالات تهمك:-
مبادرة لإنقاذ الصحافة الإلكترونية «1»
لماذا «جوجل» منقذ الصحافة الإلكترونية؟ «2»
لماذا تخسر المواقع الإخبارية مع «جوجل»؟ «3»
كيف تربح المواقع الإخبارية؟ «4»
الكيان المؤسسي في المواقع الإخبارية.. الفريضة الغائبة «5»
فن صناعة المواقع الإخبارية.. «التخطيط» «6»
تصور مبدئي لإنشاء موقع إخباري ناجح «7»
شركات الإنترنت وتدمير «صحافة الفيديو».. «8»
كيف تحمي موقعك من النصابين؟ «9»
7 يفسدون موقعك الإخباري «10»
«مسمار جحا» في قانون الصحافة «11»
«أنا منافق إذا أنا موجود».. «12»
عن أزمة الصحافة.. كيف تصنع بطلًا من ورق؟ «13»
العلاقة بين الصحفي والمصدر «تجارة رقيق».. «14»
«التصميم التجاوبي» والمواقع الإخبارية «15»
«الذهنية الورقية» تحرق المواقع الإخبارية «16»
الصحافة الورقية «ماتت».. والإلكترونية مريضة ب«التوحد»! «17»
«الصحافة» و«فيس بوك» صراع دائم وهدنة مؤقتة «18»
عبدالله كمال ونبوءة المحتوى المتعمق في المواقع الإخبارية «19»
هل تستطيع «الذهنية الإلكترونية» صناعة صحيفة ورقية؟ «20»
كيف جعلت الصحافة الإلكترونية «العلم في الراس والكراس»؟ «21»
لماذا تلجأ المواقع الكبرى إلى «الزيارات الوهمية»؟! «22»
المعايير الرئيسة لتقييم جودة المواقع الإخبارية «23»
لماذا كتاب «صناعة المواقع الإخبارية»؟ «24»
"صناعة المواقع الإخبارية".. مهام فريق التسويق «25»
صناعة المواقع الإخبارية.. التسويق لا يعني الزيارات فقط! «26»
10 أخطاء تسويقية تقع فيها المواقع الإخبارية؟ «27»
الخطة التسويقية للمواقع الإخبارية «28»
كيف نختار المعلومات الصالحة للنشر؟ «29»
دراسة السوق وتحديد الأهداف التسويقية للمواقع الإخبارية «30»
استراتيجيات ومحاور خطة التسويق في المواقع الإخبارية «31»
6 مهام رئيسة لقيادات المواقع الإخبارية «32»
«دورة النشر» في المواقع الإخبارية «33»
هل اجتماعات التحرير مضيعة للوقت؟ «34»
المشكلات التحريرية في المواقع الإخبارية «35»
السياسة التحريرية.. لعنات وتجاوزات «36»
4 عناصر تتحكم في السياسة التحريرية «37»
كيف نضع السياسة التحريرية للموقع؟ «38»
المحتوى الصحفي القصير.. المشكلات والتحديات «39»
المحتوى المتعمق.. نكون أو لا نكون! «40»
كيف نختار موضوعات ال«Top Story»؟ «41»
المراجع التحريري.. المهام والصلاحيات والمسئوليات «42»
المراجع اللغوي.. المهام والمسئوليات والصلاحيات «43»
سكرتير التحرير.. المهام والصلاحيات والمواصفات «44»
رئيس القسم ونوابه.. المهام والصلاحيات والمواصفات «45»
مدير التحرير.. الواجبات والمسئوليات «46»
رئيس التحرير.. المهام والمسئوليات والصلاحيات «47»
الاستراتيجيات الصغيرة.. كيف يفكر مديرو المواقع الإخبارية؟ «48»
كيف يفكر مديرو المواقع الإخبارية الكبرى «49»
كيف يفكر مديرو المواقع الإخبارية المتوسطة؟ «50»
الميزانيات الكبيرة تصنع مواقع صغيرة أحيانًا! «51»
كيف تعمل المواقع الإخبارية متناهية الصغر؟ «52»
كيف تدار المواقع الإخبارية الصغيرة؟ «53»
كيف تدار المواقع الإخبارية المتوسطة؟ «54»
التنظيم المؤسسي للمواقع الإخبارية «55»
10 خطوات لإعداد الهيكل التنظيمي للمواقع الإخبارية «56»
بعد 7 سنوات.. نتائج هجرة المصريين إلى «فيس بوك» «57»
التسويق عبر محركات البحث «58»
تقييم التسويق في المواقع الإخبارية.. حجم الجمهور «59»
هل زيادة الزيارات تعني نجاح المنظومة التسويقية للمواقع الإخبارية؟ «60»
تقييم الجوانب التحريرية في المواقع الإخبارية «61»
عفوًا.. السياسة التحريرية لا تعني تنفيذ رغبات الملاك؟! «62»
«المحتوى هو الملك».. تقييم المواد الصحفية في المواقع الإخبارية «63»
6 محاور رئيسية لتقييم المواقع الإخبارية «64»
المواقع الإخبارية.. الفارق بين «التطوير» و«التغيير» و«التنمية الإدارية» «65»
عوامل نجاح استراتيجية تطوير المواقع الإخبارية «66»
5 عوامل تفرض التطوير على المواقع الإخبارية «67»
أنواع عمليات التطوير في المواقع الإخبارية «68»
أهمية التخطيط لعملية «التطوير» في المواقع الإخبارية «69»
عوامل إنجاح عملية التطوير في المواقع الإخبارية «70»
لماذا تفشل عملية التطوير في المواقع الإخبارية؟ «71»
4 محاور لعملية «التطوير» في المواقع الإخبارية «72»
10 مراحل لإجراء عملية «التطوير» داخل المواقع الإخبارية «73»
مزايا وعيوب تطوير المواقع الإخبارية بواسطة إدارة التحرير «74»
مزايا وعيوب تطوير المواقع الإخبارية بواسطة خبير من الخارج «75»
التقييم.. أولى مراحل تطوير المواقع الإخبارية «76»
6 محاور رئيسة لتقييم الجوانب التحريرية في المواقع الإخبارية «77»
مؤشرات قصور وعجز الهيكل الإداري داخل المواقع الإخبارية «78»
قياس الإنتاجية في المواقع الإخبارية ب«الكم» أم «الكيف» «79»
سمات وخصائص جمهور المواقع الإخبارية «80»
لماذا فرص نجاح المواقع الإخبارية في مصر ضعيفة جدا؟! «81»
8 وظائف رئيسية لتصميم المواقع الإخبارية «82»
أهمية الصفحة الرئيسية في المواقع الإخبارية «83»
الصفحات الداخلية في المواقع الإخبارية «84»
العناصر التيبوغرافية الرقمية لتصميم المواقع الإخبارية «85»