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

وبه نستعين

التصميم الجرافيكي / الهياكل الأساسية لنظام الشبكات

Basic Structures for Grids  

 

في هذه التدوينة نلتقي وكتاب جديد بعنوان:

"الشبكات وتخطيط الصفحات GRIDS AND PAGE LAYOUTS".

أفضل التطبيقات العملية لمصممي الجرافيك Best Practices for Graphic Designers.

دليل أساسي لفهم وتطبيق مبادئ تصميم الصفحة An Essential Guideline for Understanding & Applying Page Design Principles.

 

المؤلفون:

إيمي جرافر Amy Graver.

بن جورا Ben Jura.

 

عناصر نظام الشبكة

Elements of the Grid System

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

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

الهوامش Margins

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

خطوط التدفق Flowlines

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

الأعمدة Columns

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

الوحدات Modules

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

المناطق المخصصة Spatial Zones

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

العلامات Markers

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

الهياكل الأساسية لنظام الشبكات

Basic Structures for Grids

العمود الفردي / الشبكات المخطوطة Single Column / Manuscript Grids

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

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

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

وفي المعتاد تتأثر كتلة النص في نظام العمود الفردي بعناصر مثل الهوامش والأرقام أو علامات الترقيم أو المسافات البادئة indents or outdents أو المسافات الفارغة بين الأقسام أو سطور الكتابة. 

الشبكات متعددة الأعمدة Multicolumn Grids

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

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

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

الشبكات المعيارية Modular Grids

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

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

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

الشبكات الهرمية Hierarchical Grids

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

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

الشبكات الأساسية Baseline Grids

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

الشبكات المجمعة Compound Grids

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

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

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

 

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

 

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

الشبكات وتخطيط الصفحات.

Grids and Page Layouts

 

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

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

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

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