بسم الله الرحمن الرحيم

وبه نستعين

التصميم الجرافيكي / ألوان وخطوط صفحة الويب

Web Page Colors and Fonts

 

الألوان وتقنيات الخطوط

Color and Typography

يجب على مصممي الطباعة الذين ينتقلون إلى تصميم الويب أن يكونوا على دراية بمختلف التحديات والاختلافات والقيود المتعلقة بإخراج الملفات. أحد هذه الاختلافات الرئيسية هو مساحة ألوان RGB الموسعة (وهي نظام ألوان العرض على الشاشات)، وإن كانت غير متوقعة؛ وهناك اختلاف آخر يتمثل في القيود الطباعية لـ HTML ومتصفحات الويب.

ألوان الويب

Web Color

بالنسبة للمتمرسين في مجال التصميم للطباعة، تقدم بيئة الويب بعض المفاهيم والممارسات الجديدة في استخدام الألوان. بشكل عام، يتعين على مصمم الويب التفكير في الألوان بمصطلحات تقنية دقيقة للغاية. لا تنطبق القواعد والتقنيات التقليدية التي تتضمن ألوان CMYK (وهي نظام ألوان المخصص للطباعة) وPANTONE.

من خلال مزج الضوء الأحمر والأخضر والأزرق (وهي الألوان الأساسية في نظام RGB) بشكل تراكمي، يمكن لشاشات الكمبيوتر اليوم عرض ملايين الألوان المختلفة. لم يكن هذا هو الحال دائمًا: فقبل بضع سنوات، لم يكن بإمكان العديد من أجهزة الكمبيوتر سوي إدارة لوحة ألوان من 256 لونًا، وحتى الألوان ضمن هذا النطاق قد تُعرض بشكل غير صحيح في بعض الأحيان بواسطة متصفح الويب.

كان لكلٍّ من نظامي ماك وويندوز لوحة ألوان قياسية خاصة به تتكون من ٢٥٦ لونًا، ولكنها لم تكن متطابقة. أدى ذلك إلى ظهور لوحة ألوان "آمنة للويب Web-safe" مكونة من ٢١٦ لونًا، وهي ألوان يُفترض أن تظهر بشكل صحيح على كلٍّ من أجهزة ماك والكمبيوتر الشخصي.

مع زوال شاشات ٨ بت bit (٢٥٦ لونًا)، أصبحت لوحة الألوان الآمنة للويب قديمة إلى حد كبير - على الرغم من أن الفكرة أصبحت الآن ذات صلة ببعض المصممين بفضل شاشات الألوان الأقل كفاءةً المُجهزة بالأجهزة المحمولة، مثل الهواتف وأجهزة المساعد الرقمي الشخصي (PDA)، والتي تتضمن إمكانيات تصفح ويب أساسية.

عند العمل على صفحات الويب، يختار معظم المصممين الآن الألوان بحرية من مُختار الألوان color picker المُعتاد في تطبيقات الرسومات والجرافيك. وللمساعدة في ضمان ظهور الألوان بنفس الشكل تقريبًا على شاشة المستخدم، ويعملون في مساحة ألوان sRGB، وهو المعيار الذي يُرجَّح أن تتوافق معه أنظمة المستهلكين بشكل متزايد.

مع ذلك، تجدر الإشارة إلى أنه لا يزال يتعين عليك اختبار المحتوى على منصات متعددة لمعرفة تأثير اختلافات العرض المذكورة سابقًا. من المرجح أن تضيع التفاصيل في مناطق الظلال على شاشة الكمبيوتر الشخصي، بينما قد تكون درجات الألوان الفاتحة جدًا المرئية في نظام ويندوز Windows ضعيفة جدًا بحيث يصعب رؤيتها بوضوح على شاشة ماك Mac.

الخطوط على صفحة الويب

Web Type

إن لغة HTML أداة فعّالة لترميز تعليمات التنسيق الأساسية. كان هدفها الأصلي هو الترميز الدلالي، مما يوفر بنية للمعلومات. لاحقًا، اكتسبت وسومًا tags موجهة للعرض، والتي وفرت قدرًا ضئيلًا من التحكم في الطباعة، بما في ذلك القدرة على تحديد لون النص والفئة التي ينتمي إليها وحجمه. أزالت أوراق الأنماط المتتالية Cascading style sheets وهي اختصار لاسم لغة (CSS) البرمجية العديد من قيود هذه الوسوم الأساسية، لكن المصممين لا يستخدمون هذا المعيار على أكمل وجه إلا تدريجيًا.

على الرغم من أنه من المعروف أن CSS تُمكّنك من تحديد لون النص وعائلته وحجمه، غالبًا عن طريق تحديد قاعدة تُطبق على وسم HTML مُحدد، إلا أنها تُوفر أيضًا التحكم في المسافة البادئة، والتباعد بين الأسطر، وتباعد الكلمات، وحالة الأحرف (كبيرة، صغرى، أو عادية). يُمكن جعل النص غامقًا أو مائلًا، كما يُمكن ضبط المحاذاة لتناسب النص.

قد لا يكون مستوى الحرية مُساويًا لما هو عليه في برامج مثل QuarkXPress أو InDesign، ولكنه بعيد كل البعد عن القيود التي واجهها مصممو الويب في أواخر التسعينيات. ومع ذلك، يبقى قيدٌ أساسيٌّ واحد: نقص الخطوط المُتاحة. فكما يشترط المكتب عادةً نسخةً من الخط في مستندٍ مُرسل للطباعة، يجب على مُتصفح الويب أيضًا تثبيت الخطوط التي اخترتها قبل ظهور الكتابة في موقعك بشكلٍ صحيح.

عمليًا، يُقيدك هذا بالخطوط الشائعة في أنظمة ويندوز وماك مثل: Verdana وTrebuchet MS وArial للخطوط غير المُشَوَّرة sans-serif؛ وGeorgia وTimes New Roman للخطوط المُشَوَّرة serif؛ وCourier New للخطوط أحادية المسافة؛ وArial، وBlack وImpact، والإفراط غير المُبرَّر في استخدام Comic Sans MS للخطوط المُستخدمة في العرض.

على الرغم من إمكانية تعريف خطوط بديلة (تُدرج هذه الخطوط واحدة تلو الأخرى، مفصولة بفواصل، وينتقل المتصفح إلى الخيار التالي إذا لم يكن الخيار السابق مُثبّتًا)، إلا أنه من غير المجدي تحديد خيار أول لن يراه الغالبية العظمى من جمهورك، لذا سيتعين عليك التعود على هذه الخطوط "الآمنة للويب Web-safe".

تجدر الإشارة إلى أنه، كما هو الحال مع الصور، يجب تحديد حجم خطوط الويب بالبكسل pixels (أو النسب المئوية)، وليس بقياسات كالنقاط والمليمترات. بالطبع، هناك أوقات تتطلب فيها أدلة أسلوب الشركات أو الدوافع الإبداعية شيئًا أكثر تفصيلًا، على الأقل للعناوين. في هذه الحالة، يمكنك عرض كل جزء من النص المنضد كملف صورة - صيغة GIF وهي الأنسب لهذا الغرض - والتأكد من ترميزه بشكل صحيح على صفحتك: فقم بتعيّن الصورة كعنوان، وأدرج نصًا بديلًا للمتصفحات غير المرئية.

كما هو الحال مع الصور، هناك بعض الاختلافات الطفيفة بين المنصات في خطوط الويب. يُفعّل نظام تشغيل ماك خاصية التنعيم التلقائي للنصوص anti-aliases text، بينما لا يفعل ويندوز ذلك (مع أن بعض أجهزة الكمبيوتر المحمولة وشاشات TFT تفعل ذلك). هذا يعني أن النص الأساسي قد يبدو أعرض قليلاً على ماك، بينما قد لا تبدو الأحرف سلسة تماماً على ويندوز. مع ذلك، تم حل تناقض رئيسي واحد على الأقل: يعرض كلٌّ من متصفحات ماك وويندوز النص افتراضياً بدقة 96 بكسل لكل بوصة، لذا لم تعد الخطوط تبدو أصغر في متصفحات ماك.

أمثلة عن الألوان وتقنيات الخطوط

Examples of Color and Typography

مثال (1)

يمكن استخدام وظائف إدارة الألوان في فوتوشوب للحصول على فكرة عن كيفية ظهور الصور على أنظمة مختلفة. في هذا المثال، عند العمل على جهاز ماك، تُعرض الصورة على اليسار كما هي، بينما تُعرض النسخة على اليمين باستخدام خيار "ألوان الإثبات Proof Colors" مع ضبط إعدادات الإثبات على Windows RGB.

مثال (2)

في موقع www.mundidesign.com على الرغم من أن لوحة الألوان الآمنة للويب لم تعد مصدر قلق حقيقي لمعظم مصممي الإنترنت، إلا أن عددها المحدود من الدرجات اللونية لا يزال يوفر تبسيطًا مفيدًا لطيف في نظام RGB. يقدم مورد "نظرية ألوان الويب" من موندي ديزاين لوحة الألوان بترتيب متدرج ابتكره بوب شتاين من فيسيبون، ويتيح لك تجربة مجموعات من العينات.

مثال (3)

تتنوع الخطوط المتاحة للنشر المطبوع بشكل كبير؛ لكن خيارات النشر الإلكتروني ليست كذلك. أي محاولة لأسلوب طباعي لائق ستعتمد على بعض التنازلات البارعة. يمكنك العثور على نصائح في عدد من الموارد الإلكترونية، بما في ذلك www.alistapart.com/topics/typography/ . 

مثال (4)

على الرغم من أن لغة CSS لا تضاهي مرونة التنسيق الطباعي الذي تدعمه برامج النشر المكتبي الموجهة للطباعة DTP software، إلا أنها تمنحك تحكمًا كافيًا في طباعة الويب، بما في ذلك التباعد بين الأسطر، والمسافة بين السطور، وفئة أو عائلة الخط، والحجم، واللون، وحالة الأحرف، وغيرها من السمات.

 

أرجو أن تنال التدوينة إعجابكم وإلى لقاء قريب بإذن الله

 

المراجع والمصادر

الدليل الكامل للتصميم الجرافيكي الرقمي.

The Complete Guide to Digital Graphic Design

 

لمزيد من التواصل تابعونا على وسائل التواصل الاجتماعي

حساب "مدونة ألوان" على فيسبوك.

حساب "مدونة ألوان" على انستجرام.

حساب "مدونة ألوان" على تويتر.