النظام الشبكي

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

لماذا نستخدم الشبكية؟

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

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

أنظمة الشبكات ليست جديدة العهد؛ لكنها تستخدم منذ مئات السنوات. ومن أمثلة ذلك مخطط فيلارد (Villard diagram)، الذي استخدم منذ العصور الوسطى إذا لم يكن ذلك في وقت سابق. أما أنظمة الشبكية الحديثة تم تطويرها من قِبل إميل رودر (Emil Ruder) ، وماكس بيل (Max Bill) ، وجوزيف مولر بروكمان (Josef Muller – Brockmann) .

أجزاء الشبكية The anatomy of grid

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

Format

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

Margins

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

Flowlines

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

Modules

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

Spatial zones

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

Columns

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

Rows

تنشأ الصفوف نتيجة ترتيب مجموعة من الوحدات أفقيًا.

Gutters

هو الفراغ بين الأعمدة أو بين الصفوف.

Header or footer

يشير (Header) إلى الجزء العلوي من الصفحة بينما (Footer)إلى الجزء السفلي من الصفحة. حيث يمكنك وضع بعض المعلومات التي تكون لها مكان ثابت مثل عنوان الفصل، أو عنوان القسم أو أرقام الصفحات.

Markers

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

أنواع شبكات التصميم

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

يوجد ٤ أنواع أساسية للشبكات:

• الشبكة المخطوطة Manuscript grid
  
• الشبكة العمودية Column grid
  
• الشبكة ذات الوحدات Modular grid
  
• الشبكة التسلسلية Hierarchical grid
  

أولاً: الشبكة المخطوطة Manuscript grid

أبسط أنواع الشبكات؛ لأنها تتكون من عمود واحد فقط. أي تتكون من مساحة مستطيلة وتوضع بداخلها الكتابات وتكون محاطة من جميع الجهات بالهوامش.

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

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

الهوامش العريضة

تعمل على تضييق مساحة النص، وهذا بدوره يعمل على تركيز العين على النص ويمنح الشعور بالهدوء والاستقرار.

الهوامش الضيقة

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

ثانياً: الشبكة العمودية Column grid

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

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

بالنسبة إلى عرض الأعمدة فهو يساهم في توزيع العناصر بشكل أكثر راحة للعين؛ لأن زيادة عرض العمود يساهم في وضع الكتابات على مساحات واسعة مما يؤدي إلى سهولة القراءة، أما ضيق عرض العمود يضع الكتابات على مساحات ضيقة مما يؤدي إلى صعوبة القراءة. إذا كانت الهوامش أكبر من المسافة بين الأعمدة (gutters) يكون اتجاه نظر العين إلى داخل الصفحة أي يكون تركيز العين على المحتوى أكبر، أما إذا كانت الهوامش أصغر من المسافة بين الأعمدة فإن اتجاه نظر العين إلى خارج الصفحة ومن هنا يكون تركيز العين على المحتوى أقل. ليس هناك حجم معين للهوامش والمسافات بين الأعمدة، لكْن يفضل دائمًا أن تكون الهوامش أكبر المسافات بين الأعمدة، على سبيل المثال، إذا كانت المسافات بين الأعمدة تساوي X فإن الهوامش تكون 2X وهكذا.

ثالثاً: الشبكة ذات الوحدات Modular grid

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

الشبكات ذات الوحدات أكثر تناسبًا مع المشاريع المعقدة التي تتطلب احتمالات متنوعة أكثر من الشبكة العمودية كالمواقع مثل مواقع مكتبات الصور و مواقع بيع المنتجات. كما أنها تصلح لتصميمات المعلومات التي تحتاج إلى جداول مثل الرسومات البيانية (Charts) والاستمارات (Forms) وجداول البيانات (Tables of date). كل وحدة من هذه الوحدات التي تكون الشبكة تمثل منطقة صغيرة يتم توزيع المعلومات عليها، وكما زاد عدد الوحدات، منحت الشبكة الكير من المرونة والدقة في توزيع العناصر. يمكنك الدمج بين الوحدات للتحكم في الكتل والفراغات وعمل علاقات بصرية مثيرة للاهتمام بين العناصر.

رابعاً: الشبكة التسلسلية Hierarchical grid

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

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