كيف تصمم
ليس المقصود بهذا القسم تعليم فريق التصميم الرسومي كيف يستخدمون أدوات التصميم الرسومي وإنما المقصود ماهي النقاط التي يجب الحرص عليها دائماً في إخراج التصميم الرسومي بأفضل طريقة ممكنة بحيث تصبح عملية تطبيق التصميم سهلة وسريعة لفريق التطوير, ويمكن اختصار هذه النقاط بما يلي:القائمة العلويةالمقصود بالقائمة العلوية هو قائمة الروابط التي تظهر دائماً في أعلى الصفحة والتي تُسمى Top Navigation Bar وما يلي مثال على ذلك:
نلاحظ كيف أن العنصر الأول له لون مختلف (اللون الأبيض) عن العناصر الأخرى وهذا يدل على أن المستخدم موجود في العنصر الحالي وهذا يعطي متصفح الموقع انطباعاً جيداً بأن الموقع يتفاعل مع تحركاته ضمن الموقع. أما الصورة التالية فتبين لون العنصر عندما يضع الزائر مؤشر الفأرة عليه:
طبعاً نلاحظ أن العنصر المؤشر عليه هو عنصر نحدد وقد أخذ اللون الأبيض عند وضع مؤشر الفأرة عليه وهذا غير مفضل حيث تم استخدام اللون الأبيض لتحديد العنصر الحالي والعنصر المؤشر عليه ويفضل استخدام لونين مختلفين. إذاً ماهي النقاط التي يجب مراعاتها أثناء تصميم القائمة العلوية للموقع:
- محاولة إخراج تصميم القائمة العلوية بما لا يؤثر على سرعة وحجم الصفحة, أي بحيث تكون العناصر (ألوان – صور ...) المستخدمة في تشكيل القائمة العلوية بسيطة وذات حجم صغير.
- وجود إطار بسيط يميز كل عنصر من عناصر القائمة (في المثال السابق نلاحظ أن الإطار هو عبارة عن مستطيل بحواف علوية غير حادة) كما في الشكل التالي, طبعاً لون الإطار يختاره المصمم بما يتناسب مع ألوان التصميم, مع مراعاة تحديد لون نص الرابط أيضاً:
تحديد لون مختلف للعنصر الحالي من عناصر القائمة العلوية وقد أشرنا إلى ذلك أعلاه حيث تم اختيار مستطيل أبيض بحواف علوية غير حادة كما في الشكل التالي, أيضاً يختار المصمم اللون بما يراه مناسباً, مع مراعاة تحديد لون نص الرابط أيضاً.
تحديد لون مختلف للعنصر الذي يتم التأشير عليه بالفأرة وأيضاً أشرنا إلى ذلك أعلاه حيث أيضاً تم اختيار مستطيل أبيض بحواف علوية غير حادة وقد أكدنا على أنها غير مفضلة بسبب تشابه اللون مع لون العنصر الحالي في القائمة, وأيضاً يتم اختيار اللون بما يراه المصمم مناسباً, مع مراعاة تحديد لون نص الرابط أيضاً.
- يجب أن يعلم المصمم بأن القائمة العلوية تتكون من عناصر يتم توليدها تلقائياً ويمكن أن تزيد وتنقص حسب مايراه العميل أو حسب مايراه المطور مناسباً أيضاً, لذلك يجب عدم التقيد بعدد محدد من العناصر في القائمة العلوية.
- محاولة المصمم الابتعاد قدر الإمكان عن استخدام خطوط خاصة لتصميم عناصر القائمة العلوية والاعتماد بشكل رئيسي على الخطوط الافتراضية مثل Tahoma للغة العربية و Verdana للغة الانجليزية. إلا إن طلب العميل خطوطاً معينة عندها ستكون عناصر القائمة ثابتة لا يمكن تغييرها إلا باستخدام الشيفرة.
- من النقاط الهامة جداً والتي يجب عدم نسيانها أثناء تصميم القائمة العلوية هو إمكانية وجود قائمة فرعية من القائمة العلوية, أي عندما يؤشر المستخدم على أحد عناصر القائمة العلوية تظهر قائمة فرعية كما في الشكل التالي, حيث تظهر القائمة الفرعية عندما يؤشر المستخدم على أقسام الموقع:
وفي تصميم القائمة الفرعية يجب مراعاة النقاط التالية:
- أولاً البساطة في التصميم حيث يجب أن تكون عناصر القائمة الفرعية متسمة ببساطة التصميم وعدم التعقيد لأنها تؤثر على سرعة تحميل الصفحة كما تؤثر على حجم الصفحة.- مراعاة وجود تأثير مختلف للعنصر الحالي (لون خلفية مختلف مثلاً مع مراعاة تغيير لون نص الرابط), أي كما تم شرحه أعلاه في عناصر القائمة الحالية.
- مراعاة وجود تأثير مختلف للعنصر الذي يؤشر عليه المستخدم بالفأرة.القائمة الجانبيةتعتبر القائمة الجانبية من أهم عناصر معظم المواقع والتي لا يمكن الاستغناء عنها في معظم الأحيان وذلك لم توفره من مرونة لزائر الموقع في تصفح وزيارة صفحات الموقع. لذلك يجب عدم إغفالها أبداً في أي تصميم حتى لو طلب العميل عدم وجود قائمة جانبية, عندها سيتجاهل المطور وجود القائمة الجانبية في حال تأكيد العميل عدم وجودها, وتتشابه القائمة الجانبية مع القائمة العلوية في معظم الملاحظات التي أوردناها أعلاه مع وجود ميزة إضافية في القائمة الجانبية سيتم ذكره في هذا القسم, وكمثال على القائمة الجانبية:
وأيضاً الشكل التالي هو مثال آخر عن القائمة الجانبية:
لاحظ مما سبق وجود شكلين ممكنين للقائمة الجانبية حيث أن الشكل الأول يعبر عن وجود عناصر رئيسية للقائمة (مثل القسم الأول – القسم الثاني ...) مع إمكانية ظهور عناصر فرعية لكل عنصر رئيسي عند تحريك مؤشر الفأرة فوقه. أما الشكل الثاني فيعبر عن وجود عناصر رئيسية (مثل القسم الأول – القسم الثاني ...) مع وجود عناصر فرعية تظهر مباشرة تحت العنصر الرئيسي عندما تظهر الصفحة. إذاً ماهي النقاط التي يجب مراعاتها أثناء تصميم القائمة الجانبية:
- شكل العنصر الرئيسي الحالي وقد تمت الإشارة إليه في شرح القائمة العلوية حيث يجب أن يتميز العنصر الحالي (العنصر الحالي يشير إلى مكان وجود الزائر في الموقع) على الأقل بلون نص مختلف ويفضل أن يختلف لون خلفية العنصر الحالي حيث يبين للزائر مكان وجوده ضمن القائمة الجانبية بشكل واضح يعطي المتصفح انطباعاً بتفاعل الموقع معه أثناء تحركه ضمن صفحات الموقع, وهنا يترك للمصمم اختيار اللون المناسب بما يتناسب مع ألوان القائمة ككل.
- شكل العنصر المؤشر عليه بالفأرة حيث يفضل أن يختلف عن العنصر العادي على الأقل بلون نص الرابط, وهنا يترك للمصمم اختيار اللون المناسب بما يتناسب مع ألوان القائمة ككل.- شكل القائمة الفرعية سواء القائمة الفرعية التي تظهر عند التأشير فوق أحد العناصر الرئيسية بالفأرة كما في الشكل الأول أو القائمة الفرعية التي تظهر مباشرة تحت عنصر القائمة الرئيسية عند ظهور الصفحة, وفي الحالتين نلاحظ بساطة تصميم كل من القائمتين واختيار حجم خط أصغر في الحالتين مع مراعاة تغير تأثير العنصر الحالي في القائمة الفرعية (لون نص الرابط على الأقل) وتأثير العنصر المؤشر عليه بالفأرة (لون نص الرابط على الأقل).
- من النقاط الهامة التي يجب التركيز عليها أثناء التصميم هي أن عناصر القائمة الجانبية سواء الرئيسية منها أو الفرعية يتم توليدها بشكل تلقائي ويمكن أن يزيد عددها أو ينقص حسب رغبة العميل أو حسب مايراه المطور مناسباً ويجب عدم التقيد بعدد محدد من العناصر الرئيسية أو الفرعية.
- محاولة المصمم الابتعاد قدر الإمكان عن استخدام خطوط خاصة لتصميم عناصر القائمة الجانبية والاعتماد بشكل رئيسي على الخطوط الافتراضية مثل Tahoma للغة العربية و Verdana للغة الانجليزية. إلا إن طلب العميل خطوطاً معينة عندها ستكون عناصر القائمة ثابتة لا يمكن تغييرها إلا باستخدام الشيفرة.
مسار خريطة الموقع
و ما يسمى بـ Bread Crumb وهو عبارة عن طريقة معتمدة في معظم المواقع لتبين لزائر الموقع مكان وجوده مع تقديم إمكانية التصفح العكسي بحيث يستطيع الزائر العودة إلى الصفحة التي كان بها قبل الصفحة الحالية, ويظهر بالشكل التالي:
حيث يعبر آخر قسم منه عن عنوان الموقع الحالي أو عنوان الصفحة الحالية, مع ملاحظة أن العنصر الأول والثاني (الصفحة الرئيسية و الصفحة الفرعية) هما عبارة عن روابط يمكن لزائر الموقع الضغط عليهما للعودة إلى الخلف, مما يسهل على الزائر عملية تصفح الموقع, يوجب مراعاة ما يلي أثناء وضعه ضمن التصميم:
- لا يظهر هذا العنصر أبداً في الصفحة الرئيسية للموقع.
متاح للمطور تخصيص العنصر الأخير (لون – خط – حجم خط) بشكل مستقل وتخصيص العناصر التي تسبقه كمجموعة ولا يمكن تخصيص العناصر التي تسبق العنصر الأخير كل على حدة, والصورة أعلاه توضح ذلك.- يظهر هذا العنصر دائماً في بداية جسم الصفحة قبل بداية ظهور محتوى الصفحة, كما في الشكل التالي:
الصفحات الداخلية
معظم مصممي المواقع حتى المحترفين منهم يهملون تصميم الصفحات الداخلية ويركزون كل جهودهم على الصفحة الرئيسية للموقع والتي لا شك يجب أن تظهر بأفضل شكل لأنها المدخل الأهم إلى باقي صفحات الموقع, لكن لا شك أيضاً بأن الصفحات الداخلية للموقع بنفس أهمية الصفحة الرئيسية لأنها تشكل الجزء الأكبر من الموقع, لذلك يجب إرفاق تصميم للصفحات الداخلية مع التصميم الكلي للموقع وإلا يعتبر عمل المصمم غير مكتمل ويجب التأكيد على إعادة طلب تصميم الصفحات الداخلية. ومن أهم النقاط التي يجب مراعاتها أثناء تصميم الصفحات الداخلية هي:
- عادة تظهر عناصر أخرى في الصفحات الداخلية لم تكون موجودة في الصفحة الرئيسية ومن أبرزها القائمة الجانبية أو القائمة العلوية حيث تظهر عليها روابط مختلفة تسهل على زائر الموقع عملية التصفح.
- إحاطة بيانات الصفحة ضمن قالب مصمم بشكل بسيط حيث يتم وضع العنوان ضمن ترويسة القالب كما في الشكل التالي:
عرض البياناتالمقصود بعرض البيانات هو طريقة عرض النصوص والصور والروابط ضمن صفحات الموقع وكذلك ألوان النصوص والروابط وأحجام الصور وأنواع الخطوط المستخدمة وأحجامها والأيقونات ومدى توافقها مع طبيعة الموقع والرسومات المستخدمة فيه.
روابط الموقع
لا شك بأن أكثر مكونات أي موقع هي الروابط Links التي تسمح للزائر بالتنقل من صفحة إلى أخرى داخل الموقع أو حتى الانتقال إلى مواقع أخرى, وهذه الروابط قد تكون عبارة عن نص قابل للنقر أو صورة يمكن النقر عليها. وللرابط 3 ألوان لثلاث حالات:
- لون الرابط الذي يظهر على الصفحة.- لون الرابط عندما يضع المستخدم مؤشر الفأرة فوقه, حيث يتغير لون النص ويظهر خط تحت الرابط.
- لون الرابط الذي تمت زيارته من قبل المتصفح, أي في حال أن زائر الموقع ضغط على أحد روابط الموقع فإن الرابط يتغير لونه.صحيح بأن مسألة ألوان روابط الموقع قد ينظر إليها البعض على أنها مسألة بسيطة لكنها في حقيقة الأمر من الأمور الهامة التي تميز المواقع التي تم الاعتناء بتصميمها والانتباه إلى أدق التفاصيل في بنية وتصميم الموقع, كما تساعد الزائر وتسهل عليه عملية تصفح الموقع.وفي حالة أن الرابط كان عبارة عن صورة يمكن النقر عليها لفتح صفحة أخرى عندها يفضل إما أن تكون الصورة تشرح نفسها وذلك بوجود نص مكتوب عليها مثل (اضغط هنا, المزيد ...) أو يجب على المطور كتابة تلميح يظهر للمستخدم عند وضع مؤشر الفأرة فوق الرابط وأيضاً هذا ينطبق على الرابط النصي أيضاً.
أنواع الخطوط المستخدمة
وأحجامهالاشك بأن الخطوط في أي موقع تعتبر من الأمور الأساسية المكونة للموقع وأسماء الخطوط وأحجامها تلعب دوراً هاماً في إظهار الموقع بشكل جيد أو بشكل سيئ وطبعاً يعتمد اختيار اسم الخط وحجمه على النص وطبيعة النص (عنوان – رابط – مقطع نصي ...) كما يعتمد على اللغة المستخدمة (عربي – انجليزي ...) ولعل أشهر أمساء الخطوط المستخدمة هي:
- Tahoma بحجم 12 بيكسل أو 9 نقاط, حيث يستخدم هذا الخط للغة العربية ويعتبر من أجملها في حال استخدم بحجوم صغيرة, كما أنه من الخطوط المتوفرة على جميع الأنظمة بشكل افتراضي لذلك فإن أي مستخدم يستطيع تصفح الموقع الذي يستخدم خط Tahoma (تاهوما) بدون الاضطرار إلى تحميل الخط على جهازه.
- Verdana بحجم 12 بيكسل أو 9 نقاط, حيث يستخدم هذا الخط للغة الانجليزية ويعتبر من أجملها في حال استخدم بحجوم صغيرة, كما أنه من الخطوط المتوفرة على جميع الأنظمة بشكل افتراضي لذلك فإن أي مستخدم يستطيع تصفح الموقع الذي يستخدم خط Verdana بدون الاضطرار إلى تحميل الخط على جهازه.
ولا شك بأنه توجد أسماء خطوط أخرى مناسبة لللاستخدام في المواقع لكنني على الأقل أفضل استخدام الخطين السابقين بأحجام مختلفة. وبما يتعلق بالخطوط المستخدمة في الموقع أعتقد أنه يجب عدم الإكثار من أسماء الخطوط في الموقع الواحد والاكتفاء باسمين أو ثلاثة على الأكثر وذلك للحفاظ على وحدة وتكامل نصوص الموقع, كما يجب الأخذ بعين الاعتبار استخدام نفس الخط للعناصر التي تنتمي لنوع واحد مثل استخدام نفس الخط للروابط, العناوين, والفقرات النصية (كنصوص الأخبار – الإعلانات ...).
بعاً وأثناء حديثنا عن الخطوط يجب ألا ننسى لون الخط المستخدم الذي أيضاً يلعب دوراً هاماً جداً في المظهر الرسومي للموقع, حيث يجب الابتعاد قدر الإمكان عن الألوان الفاقعة مثل الأصفر والأحمر وغيرها كما يجب عدم استخدام الألوان الباهتة التي تصعب رؤيتها أو استخدامها على خلفية فاتحة مثل الأبيض على خلفية رمادية.الصورلا يوجد موقع لا يوجد فيه سواء صور صغير أم كبيرة, صورة تدخل ضمن التصميم الرسومي أم محتويات الموقع كصور الأخبار, الإعلانات, الصور التي تكون على شكل رابط, أو الصور التي قد توجد في معرض للصور في الموقع, أو حتى في محتوى آخر المهم أن 99.99% من المواقع توجد فيها صورة واحدة على الأقل, ونوع الصور الموجودة في الموقع تختلف باختلاف وظيفتها ومكانها والتصميم الذي يجب أن تظهره. وأشهر 3 أنواع هي GIF, JPEG, PNG إن لم تكن الأنواع الوحيدة المستخدمة في المواقع (على حد علمي على الأقل). وكما ذكرنا آنفاً فإن نوع الصورة المستخدمة يختلف باختلاف الوظيفة التي تؤديها. ويمكن تقسيمها كما يلي:
- GIF: هذا النوع من الصور يدعم 256 لون فقط.
- JPEG: يدعم أكثر من 16 مليون لون. ويستخدم لعرض الصور الضوئية (صور وجوه – أشخاص ...), الخلفيات, والصور التي تحتوي على أشكال وألوان معقدة.
- PNG: تستخدم لعرض باقي أنواع الصور ومايميزه هو دعمه للشفافية, أي أن الصورة من النوع PNG يمكن أن تعرض فوق صورة ثانية بحيث تظهر الصورة الثانية وكأن الصورة شفافة.
طبعاً لا يكفي استخدام النوع المناسب للصورة وحسب وإنما يجب معالجة الصورة بحيث يكون حجمها أصغر مايمكن وذلك باستخدام أي برنامج تراه مناسباً لضغط الصورة بحيث تحصل على أقل حجم ممكن للصورة بدون التأثير على دقة وجودة الصورة. وقد لاحظت من خلال عملي الطويل مع البوابات الإلكترونية والمواقع الضخمة أنه ليس من الضروري إغراق الموقع بالصور حتى يظهر بشكل جذاب وملفت للنظر وإنما تناسق الألوان وطريقة توزيع النصوص والروابط ضمن أجزاء الموقع بشكل عام وكل صفحة بشكل خاص.