Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Grids
Webdesign

مقدمة شاملة حول الشبكات في تصميم الويب

by
Length:MediumLanguages:

Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)

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

المواضيع

في هذا الدليل، سنتطرق للكثير، مثل:

  • الشبكات؟
  • المصطلحات
  • قاعدة الأثلاث
  • شبكة 12 وحدة
  • التركيز
  • الحدود
  • الخريطة الذهنية

الشبكات؟

يمكن للشبكة أن تشكل بنية أساسية، هيكل لتصميمك. فهي تتكون من خطوط "غير مرئية" يمكن وضع عناصر التصميم عليها. قيامك بذلك يربطها معا في "نظام" متكامل ويدعم التركيب – منطقيا.

BBC

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

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

المصطلحات

الوحدة

الوحدات هي كتل البناء الرئيسية لكل شبكة. تشكل الوحدات المتعددة الشبكة ككل. في المثال التالي من BBC هناك شبكة مكونة من 12 وحدة. يشكل كل شريط بنفسجي وحدة واحدة.

القناة

الخطوط الصفراء الضيقة في الرسم التوضيحي التالي هي القنوات التي تفصل الوحدات. القنوات هي نوع من المساحة البيضاء المصغرة التي تعطي الشبكة مساحة للتنفس.

العمود

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

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

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

الحقل

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

قاعدة الأثلاث

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

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

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

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

اعمل بشكل مجنون، اكسر القواعد، احظ بالمتعة وإذا كنت محظوظا، توصل لحدود جديدة!

النسب الإلهية؟

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

Vitruvian Man
فيتروفيان مان لليوناردو دا فينشي

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

شبكة الوحدات الاثنا عشر

بالعودة للمسائل العملية. أحب أن أناقش بعض الشبكات متعددة الاستعمالات وأن أضعك على أساس قوي يشكل نظام أولي جيد لبناء مخططاتك. شبكة الوحدات الاثنا عشر صديقتك.

إيتسي

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

دعنا نلقي نظرة على بعض المخططات التي تستفيد مما يمكن لهذه الشبكة المرنة أن تقدمه.

شبكة الأعمدة الأربعة

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

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

الشكل
مجلة هارفارد للتصميم
إيتسي
وولبيبر
ماري كلير

شبكة الأعمدة الثلاثة

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

وولبيبر
كيكستارتر
كيكستارتر
وولبيبر
وايرد

شبكة الأعمدة الستة

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

وولبيبر
ذا نيويورك تايمز

الدمج

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

إيتسي
BBC
إيتسي
إيتسي
BBC
إيتسي
إيتسي
إيتسي

التركيز

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

إيتسي

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

وولبيبر
الشكل
وولبيبر

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

الحدود

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

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

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

الخريطة الذهنية

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

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

لقد أنشؤوا إيقاعا جميلا لصفحاتهم وبدت شبكتهم أنيقة لأنها كانت بسيطة.

أفكار أخيرة

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.