الباب الأول : القواعد الأساسية - الفصل الخامس
 

لتحميل الملخص للفصول السابقة : إضغط هنا

الباب الأول : القواعد الأساسية - الفصل الخامس : مقدمة عن التصميم
 

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

إن المصممين المحترفين بشكل عام ومصممي المواقع الإلكترونية على الشبكة العنكبوتية (Internet) يعتمدون على مقاييس عالمية (Standard) أثناء قيامهم بالعمل.

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

المقاييس الدولية (1-1) :
*********************

كما نعلم جميعنا أن شاشة العرض للحاسب الآلي تخضع لمقاييس العرض الدولية والتي تظهر من خلال أنظمة التشغيل المختلفة ، مثلاً في نظام التشغيل (Windows Vista) ومن خلال :

الضغط على الزر الأيمن على سطح المكتب في مكان فارغ – اختيار ( Personalize ) من القائمة المنسدلة ستظهر لنا هذه النافذة:


ومن ثم نقول باختيار (Display Settings) من خلال ضغط عليها بزر الفأرة ، كما هو موضح من الصورة أعلاه .

ستظهر لنا هذه النافذة الجديدة :


لاحظ من السهم الأحمر وكلمة ( Resolution ) وهي خاصة بتحديد مقاس العرض والطول لشاشة الحاسب الآلي (Display Screen).

وكما هو مبين فإن وحدة القياس المستخدمة هي (Pixels ) وهي تعني : أصغر عنصر في الصورة والتصوير الإلكتروني وتستخدم في أجهزة التلفاز ( TVs ) وشاشات الحاسب الآلي ( Monitors ) وهي تكون على شكل مربعات متجاورة متمازجة الألوان.

ومن خلال هذه الخصائص نستطيع التحكم بمقاس الشاشة المعروضة من خلال اختيار قائمة من المقاسات المحددة في الخيارات الموجودة وفيما يلي جدول بكل المقاسات المعروفة :


ملاحظة : كلما زادت دقة الشاشة (Resolution) كلما كانت الصورة أكثر دقة وصفاء.

مقاييس التصميم الأساسية (2-1) :
****************************

من خلال التعريف بالمقاييس الدولية (1-1) ، يتضح لنا أهمية تحديد مقاس عرض وطول التصميم لصفحة الإنترنت ، وإن كان العرض هو الأهم فيما الطول يعتبر أمر ثانوياً يمكن حله بالكثير من الطرق والأساليب.

فيتضح من الجدول السابق أن أقصر عرض موجود هو : 800 Pixel ، وعليه يجب أن لا يزيد عرض الصفحة عن ذلك لكي لا يظهر الموقع في صورة أكبر من حجم شاشة العرض ، لكي لا يظهر شريط التمرير العرضي في متصفح الإنترنت ، مما قد يسبب الإزعاج لزوار الموقع الإلكتروني ونفورهم منه.

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

إذاً المقاس الأفضل لتصميم صفحات الإنترنت هو:


بحيث نطرح 20 Pixel من كل من القيمة الدنيا للعرض وهي : 800 Pixel ومن القيمة الدنيا من الطول وهي : 600 Pixel فيصبح لدينا العرض والطول المناسب :


مقاييس التصميم التفصيلية (3-1) :
****************************

لقد تعلمنا من الجزئيين (1-1) و (1-2) فكرة مقاييس الرؤية المستخدمة وعليه استطعنا تحديد أفضل المقاييس الخاصة بتصميم صفحات الإنترنت بحيث تظهر بصورة صافية وفق حجم مستعرض الإنترنت لجميع مستخدمي الحاسب الآلي في العالم.

ربما لاحظتم قصر الطول المستخدم وهو 580 Pixel ، فيجب عدم القلق من هذه الناحية بالتحديد ، فسوف نرى في الأبواب والفصول القادمة ما يجعل طول الصفحة مناسب جداً من خلال نظام الترتيب بالجداول والذي سيتم شرحه بالتفصيل لاحقاً.

من خلال هذا الجزء سوف نركز على بعض المقاييس العالمية المستخدمة بشكل أكثر تفصيلاً ، فسوف نتحدث بالتفصيل الدقيق عن :

* مقاييس الشعارات ( Logos ).

* رايات الموقع ( Banners ).

* الحواشي السفلية ( Footers ).

* مقاييس الأزرار ( Buttons ).

* أجسام التصميم (Display Bodies).

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

مقاييس الشعارات Logos 1-3-1 :
****************************

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

إن المقياس الدولي المعتمد لأي شعار في مواقع الإنترنت هو 100 * 100 Pixels ، بحيث يكون مربع الشكل كما في الصور التالية:


ملاحظة : ليس المقصود بأن يكون شكل الشعار مربعاً ، وإنما المحيط الأقصى له يجب أن يكون في حدود : 100 * 100 Pixels .

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

مقاييس الرايات Banners 2-3-1 :
***************************

إن الراية العلوية لأي موقع تعد من أهم الأمور والأكثر حساسية في جذب الانتباه وإضفاء الروح الحقيقية لمحتوى الموقع ، لذا يجب اختيار التصميم المناسب لفكرة الموقع ككل ، وانتقاء الصور والألوان والخطوط المناسبة لذلك ، وسوف نشرح في الأبواب القادمة طرق وأساليب تصميم الرايات.

إن الرايات The Banners تنقسم إلى ثلاثة أقسام :

1. الراية العلوية الرئيسية (Main Banners) : وهي موجودة في 95% من المواقع الإلكترونية ، وتمثل المتغير الثابت في جميع الصفحات.
2. الراية العلوية المتغيرة (Moving Banners) : وهي الجيل الجديد من الرايات التي تتغير مع مرور الوقع حسب الوقت أو بلد الدخول.
3. الرايات التفاعلية (Dynamic Banners) : وهي النوع المعتمد على التصميم الحركة المتوالي والذي يحتوي على روابط لصفحات أخرى.

إن المقياس الدولي المعتمد لأي شعار في مواقع الإنترنت هو 760 * 150 Pixels ، بحيث يكون مربع الشكل كما في الصور التالية :


ملاحظة : إن هذا المقاس ليس إلزامياً على الإطلاق ، ولكنها من المقاسات المفضلة لدى الكثير من المصممين.

مقاييس الحواشي السفلية Footers 3-3-1 :
***********************************

تنقسم الحواشي السفلية إلى ثلاثة أنواع :

1. الحاشية السفلية الرئيسية ( Main Footer ) : وهي التي تحتوي على رابط حقوق الملكية الفكرية ، وغالباً ما تكون في قاع الصفحة.
2. الحاشية السفلية للروابط المكملة ( Links Footer ) : وهي التي تحتوي على روابط مختصرة لصفحات الموقع الثانوية.
3. الحاشية السفلية للصور ( Images Footer ) : وهي التي تحتوي على صور متحركة أو خلافة للإعلان عن مواقع أو أمور مستحدثة جديدة في الموقع الإلكتروني.

إن المقاس المعتمد للحاشية السفلية الرئيسية في ميزان المصممين العالميين هي : 20 إلى 25 Pixel فيما يخص الارتفاع ، فيما يخص العرض فهو كما شرحنا سابقاً أنه يجب أن يكون : 760 Pixel ، كما هو موضح في الصورة التالية :


مقاييس الأزرارButtons 4-3-1 :
**************************

إن مقاييس الأزرار تختلف في مفهومها عن باقي المقاييس الأخرى ، فكما هو معروف بأن الأزرار غالباً ما تكون كثيرة ومتتالية ولها تأثيرات بصرية متحركة في أغلب الأحيان.

لذا يجب مراعاة أن يتوافق المقاس مع نوع الخط المستخدم ومع عرض وطول الأزرار بطريقة متساوية ، بحيث تكون على الجانب الأيمن أو الأيسر أو حتى الجانب العلوي للتصميم.

فمقياس الأزرار مرن ، ويحدده حجم التصميم وحجم المحتويات الموجودة في الموقع ككل ، من خلال الروابط المختلفة أو الصفحات الموجودة في المشروع.

وسوف يتم شرح فكرة المقياس الخاص بالأزرار في الأبواب والفصول اللاحقة.


مقاييس جسم التصميمDisplay Body 5-3-1 :
**************************************

من الممكن أن يكون المقياس الأولي للعرض 760 Pixel (ولكن غالباً ما يكون القياس هو 780 Pixel من أجل إضافة بعض المؤثرات الجمالية على برواز التصميم – يأتي شرحها لاحقاً).

وفيما يخص الطول ، فهو 400 Pixel ، ويمكننا التحكم بطول الصفحة لاحقاً من خلال نظام الجداول في برنامج Expression Web (سوف يتم شرح الطريقة لاحقاُ).

وكما قلنا من قبل أن طول صفحة الإنترنت ليس بذات أهمية عرض الصفحة ، وبالتالي يجب مراعاة أن لجسم التصميم (جسم الصفحة) صفات خاصة وهامة فيما يتعلق بالخلفية المتكررة (الصورة الخلفية) أو الجوانب المتكررة (الحواف الجانبية) وذلك عبر تحديد مقاسات دقيقة وسلسة للتحكم فيها وإضفاء اللمسات الجمالية على التصميم العام .

يعتبر جسم التصميم من أهم أجزاء تصميم المواقع ، فهو الجزء الذي سيحتوي على البيانات والمعلومات (الصور والنصوص وغيرها من الأمور) بشكل أساسي.

وكما سنري في الفصول القادمة أننا سوف ننشأ نموذجين إثنين ، وهما :

1- نموذج التصميم لصفحة البداية.
2- نموذج التصميم لباقي الصفحات الأخرى.

لاحظ الشكل التالي :


من أجل تحميل ملخص هذا الدرس : الباب الأول : القواعد الأساسية - الفصل الخامس : مقدمة عن التصميم : إضغط هنا

يعطيك العافيه اخوي عالشرح :)

بس مافهمت هذولي وشي؟

أهلاً بك أخي الكريم s60s

Moving Banners هي الصور المتحركه من نوع GIF وأيضاً الصور الفلاشية (وهي عروض متحركة قد تكون متكررة من أجل تجميل الموقع)

Dynamic Banners هي الرايات التفاعلية التلي تحتوي على أزرار وأوامر برمجية ... وهي تتغير بطريقة مستمرة عن طريق الكود البرمجي من قواعد البيانات.

سوف يتم الشرح لاحقاً إن شاء الله تعالى s60s

^^^^^^^^^^^^^

مشكور عالرد اخوي :)

ان شاء الله بتابع دروسك s60s

:alzaeem:

الله يعطيك العافيه ومتابعين معك بإذن الله

لي عووده ان شاء الله .. :)

لي عووده ان شاء الله ..
00