يعمل النظام الشبكي على تنظيم العلاقات بين العناصر، وهو عبارة عن تقسيمات من الأشكال الهندسية (الخطوط - الدوائر- المربعات…..). وكلما زادت هذه التقسيمات، منحتك المزيد من الإحتمالات في رسم الأشكال وترتيب وتنظيم العناصر، مثل الصور والكتابات داخل التصميمات (الشعارات والكتب والمجلات و صفحات الموقع).
للحصول على تصميمات أكثر جمالًا وتنظيمًا واتزانًا عليك استخدام الشبكية في التصميمات، ولعلك لاحظت الفرق بين التصميمات التي تعتمد على الشبكية والتي لا تستخدمها مطلقًا، فالأخيرة تكون أكثر صعوبة في إنشاء التدرج البصري وتكون أقل جمالًا واتزانًا. بالإضافة إلى ذلك تمنحك الشبكية رؤية بصرية فعالة بسيطة للمعلومات المراد عرضها في التصميم.
تكون الشبكة ناجحة إذا حلت المشكلات المتعلقة بالنصوص، والشبكة بمثابة دليل غير مرئي موجود في المستوى الخلفي للعمل.
أنظمة الشبكات ليست جديدة العهد؛ لكنها تستخدم منذ مئات السنوات. ومن أمثلة ذلك مخطط فيلارد (Villard diagram)، الذي استخدم منذ العصور الوسطى إذا لم يكن ذلك في وقت سابق. أما أنظمة الشبكية الحديثة تم تطويرها من قِبل إميل رودر (Emil Ruder) ، وماكس بيل (Max Bill) ، وجوزيف مولر بروكمان (Josef Muller – Brockmann) .
الشبكية تتكون من خطوط رأسية وأفقية؛ من أجل توزيع العناصر عليها. هذه الخطوط تُنتج أجزاء مشتركة، وبمجرد معرفتك لهذه الأجزاء يمكنك استخدام الشبكة بشكل فعال.
يعبرعن مساحة التصميم الكلية، فمثلا في المجلات والكتب تكون هي الصفحة، أما في تصميم المواقع تكون المساحة المعروضة في المتصفح. ففي هذه المساحة يتم توزيع العناصر مثل الصور والكتابات والأشكال.
هى المسافة بين حافة الصفحة إلى الحافة الخارجية للمحتوى. كلما كانت الهوامش ضيقة، جعلت تركيز العين على المحتوى أقل كما تزيد من توتر القارئ. أما الهوامش العريضة تعمل على زيادة تركيز العين على المحتوى.
تُعرف بالخطوط الانسيابية وهي خطوط أفقية تقسم الأعمدة، وتعمل على توجيه العين داخل الصفحة، وتستخدم كذلك في عمل محاذاة للصور والكتابات. ويتم محاذاة النصوص إلى مجموعة من الخطوط الانسيابية تسمى خطوط الأساس (Baselines)، وعند محاذاة الكتابات لخط الأساس يمكنك إنشاء ايقاعات رأسية في التصميم.
هي وحدات مفردة تتكون منها الشبكة، و بتكرار هذه الوحدات تتكون الأعمدة والصفوف.
تتكون من مجموعة من الوحدات، حيث يمكننا استخدام مجموعة وحدات أفقية من أجل وضع صورة عريضة، أو استخدام مجموعة وحدات رأسية لوضع كتلة نصية عريضة.
تنتج الأعمدة من خلال ترتيب مجموعة من الوحدات الرأسية، ومن الممكن أن تتكون الشبكة من أي عدد من الأعمدة. وكلما زادت عدد أعمدة الشبكة، زادت مرونتها.
تنشأ الصفوف نتيجة ترتيب مجموعة من الوحدات أفقيًا.
هو الفراغ بين الأعمدة أو بين الصفوف.
يشير (Header) إلى الجزء العلوي من الصفحة بينما (Footer)إلى الجزء السفلي من الصفحة. حيث يمكنك وضع بعض المعلومات التي تكون لها مكان ثابت مثل عنوان الفصل، أو عنوان القسم أو أرقام الصفحات.
تشير هذه العلامات إلى مكان المعلومات الثابتة مثل أرقام الصفحات وعناوين الأقسام ….إلخ.
يوجد أنواع مختلفة من الشبكات، حيث يمكنك استخدامها في توزيع المحتوى وتحقيق التوازن والوحدة داخل التصميم، وعليك أن تعرف جميع هذه الأنواع، حيث يمكنك استخدام كل واحدة على حِدة أو الدمج بينهما للوصول لأفضل النتائج في توزيع المحتوى.
يوجد ٤ أنواع أساسية للشبكات:
أبسط أنواع الشبكات؛ لأنها تتكون من عمود واحد فقط. أي تتكون من مساحة مستطيلة وتوضع بداخلها الكتابات وتكون محاطة من جميع الجهات بالهوامش.
لتنظيم كتل النصوص الطويلة كالتي توجد في الكتب والمقالات الطويلة والمدونات يفضل استخدام الشبكة المخطوطة. ولا تعتقد أنها تقتصر فقط على الكتابات لكْن يمكنك أيضًا استخدامها لتنظيم العناصر الأخري مثل الأشكال والصور.
ويعمل ضبط الهوامش على مساعدة المصممين على التركيز البصري للمحتوى الموجود داخل الصفحات. كما هو الحال في الصفحات المتقابلة الموجودة في الكتب والمجلات.
تعمل على تضييق مساحة النص، وهذا بدوره يعمل على تركيز العين على النص ويمنح الشعور بالهدوء والاستقرار.
تعمل على اتساع مساحة النص، وهي ليست جيدة لأنها تمنح إحساسًا بالتوتر نظرًا لاقتراب النصوص من حافة الصفحة.
الشبكة العمودية تتكون من خطوط رأسية تقسم الصفحات إلى وحدات طولية يحيط بها الهوامش.
زيادة الخطوط الرأسية تعمل على إنتاج أعمدة أكثر، وعندما تكون هذه الأعمدة أضيق؛ فإنها تعطي مرونة أعلى وأكثر تنوعًا في تنظيم المعلومات على الصفحة. هذه المعلومات تتنوع ما بين الكتابات والصور والأشكال. وإذا زادت عدد الأعمدة يمكننا وضع الكتابات في أعمدة، ووضع الصور في أعمدة آخرى، أو ندمج بين الأعمدة للحصول على نتائج واحتمالات أكثر لعمل اتصالات بصرية فعالة.
بالنسبة إلى عرض الأعمدة فهو يساهم في توزيع العناصر بشكل أكثر راحة للعين؛ لأن زيادة عرض العمود يساهم في وضع الكتابات على مساحات واسعة مما يؤدي إلى سهولة القراءة، أما ضيق عرض العمود يضع الكتابات على مساحات ضيقة مما يؤدي إلى صعوبة القراءة. إذا كانت الهوامش أكبر من المسافة بين الأعمدة (gutters) يكون اتجاه نظر العين إلى داخل الصفحة أي يكون تركيز العين على المحتوى أكبر، أما إذا كانت الهوامش أصغر من المسافة بين الأعمدة فإن اتجاه نظر العين إلى خارج الصفحة ومن هنا يكون تركيز العين على المحتوى أقل. ليس هناك حجم معين للهوامش والمسافات بين الأعمدة، لكْن يفضل دائمًا أن تكون الهوامش أكبر المسافات بين الأعمدة، على سبيل المثال، إذا كانت المسافات بين الأعمدة تساوي X فإن الهوامش تكون 2X وهكذا.
تتشابه الشبكة ذات الوحدات مع الشبكة العمودية من ناحية الخطوط الرأسية، لكْن في الشبكة ذو الوحدات نضيف خطوط أفقية، وينتج عن هذا وحدات متعددة تستخدم في توزيع المحتوى.
الشبكات ذات الوحدات أكثر تناسبًا مع المشاريع المعقدة التي تتطلب احتمالات متنوعة أكثر من الشبكة العمودية كالمواقع مثل مواقع مكتبات الصور و مواقع بيع المنتجات. كما أنها تصلح لتصميمات المعلومات التي تحتاج إلى جداول مثل الرسومات البيانية (Charts) والاستمارات (Forms) وجداول البيانات (Tables of date). كل وحدة من هذه الوحدات التي تكون الشبكة تمثل منطقة صغيرة يتم توزيع المعلومات عليها، وكما زاد عدد الوحدات، منحت الشبكة الكير من المرونة والدقة في توزيع العناصر. يمكنك الدمج بين الوحدات للتحكم في الكتل والفراغات وعمل علاقات بصرية مثيرة للاهتمام بين العناصر.
الشبكات التسلسلية تستخدم في الأغلب لتوزيع المعلومات في المواقع الإلكترونية المختلفة، وهى تعتمد على وحدات ذات نسب مختلفة لتوزيع المحتوى، ولا تستخدم وحدات متساوية مكرره مثل الشبكة ذات الوحدات فنلاحظ فى هذه الشبكة اختلاف فى عرض الأعمدة.
الشبكات التسلسلية مناسبة للمشاريع التي تحتاج لتوزيع المعلومات بطريقة مختلفة ومثيرة ولا تناسبها مع الشبكات الأخرى. ويمكن استخدام هذه الشبكة لتوحيد العناصر المختلفة.