القسم الذهبي في تصميم المواقع

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

هيكل عظمي لصفحة الويب

هذه هي العناصر الرئيسية لصفحات الويب. هناك العديد من الطرق المختلفة لتنظيمها، ولكن ربما يكون هذا التخطيط هو الأكثر استخدامًا.

حاوية

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

نوع الحاوية:

السائل: املأ حسب عرض المتصفح.

ثابت: لن يتغير العرض المحدد وفقًا لعرض المتصفح.

رأس

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

الشعار

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

ملاحة

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

نوع الملاحة:

أفقي: عرض أفقي، يسمى "الملاحة"

عمودي: عرض عمودي، يسمى "القائمة"

المحتوى الرئيسي

(يجب) على الجميع أن يعرفوا أن المحتوى هو الملك عندما يأتي الأشخاص لزيارة موقعك، فهو العنصر الرئيسي الذي يريدون رؤيته. وينبغي أن تكون النقطة المحورية لصفحة الويب، حتى يتمكن الزوار من العثور بسرعة على ما يبحثون عنه.

الشريط الجانبي

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

تذييل

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

"مسافة بيضاء"

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

ما ورد أعلاه هو الهيكل العظمي لصفحة الويب. الآن دعونا نلقي نظرة على كيفية تقسيم هذه العناصر إلى أقسام ذهبية.

القسم الذهبي واستخدام الشبكات

هل تتذكر عندما قلت سابقًا أن الرياضيات جميلة؟ نعتقد أن الجاذبية البصرية تعتمد على النسب (على سبيل المثال، القسم الذهبي). منذ آلاف السنين، استخدم الفنانون والمصممون والمهندسون المعماريون وما إلى ذلك، بوعي أو بغير وعي، نسبة مشتركة لزيادة جمال أعمالهم. ما هو هذا الرقم السحري 1.62 (في الواقع 1.618...) لن أخبرك بأصل هذا الرقم، ولكن سأخبرك بكيفية استخدامه.

استخدام القسم الذهبي بسيط للغاية. على سبيل المثال، قد ترغب في العثور على عرض المحتوى الرئيسي وقوائم الشريط الجانبي. ستأخذ العرض الإجمالي لمنطقة المحتوى الخاصة بك وتقسمه على 1.62، مما يمنحك 555.55 بكسل. لا نحتاج إلى الدقة، لذلك سنستخدم 555 بكسل فقط. أنت تعلم الآن أن عنصر المحتوى الرئيسي الخاص بك يبلغ عرضه 555 بكسل وأن الشريط الجانبي الخاص بك يبلغ عرضه 345 بكسل. ترى كم هو سهل؟!

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

استخدام الشبكات

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

لإنتاج شبكة أكثر تفصيلاً، ما عليك سوى الاستمرار في تقسيمها إلى أثلاث. إذا قرأت المقالة السابقة "الاتصال الحميم مع إطار عمل Blueprint CSS"، فسترى أن إطار عمل Blueprint CSS يستخدم نظام شبكي مفصل. ليس تصميم الشبكة أسهل وأسرع فحسب، بل إنه ينشئ أيضًا تخطيطًا جميلاً. إذا لم تكن قد استخدمت تصميم الشبكة بعد، فهذه فرصة رائعة لتجربته. يمكنك تنزيل قوالب الشبكة للألعاب النارية أو Photoshop أو البرامج الأخرى من http://960.gs.

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

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