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

وبه نستعين

التصميم الجرافيكي / أمثلة عملية عن نظم الشبكات (1)

Practical Examples of layouts Systems (1)

 

نظم الشبكات بين النظرية والممارسة العملية

Layout Systems Between Theory and Practice

يمكن تعريف نظم الشبكات Grids / Layout System بأنها نظام يستخدم في تصميم محتويات الصفحة سواء كانت صفحة مطبوعة كما في الكتب والجرائد والمجلات وغيره، أو صفحة رقمية مثل صفحة الويب. إن نظم الشبكات أساس في التصميم الجرافيكي، فهي مصدر الإلهام وأداة تخطيط قوية ومؤثرة في يد المصمم.

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

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

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

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

نظم الشبكات: المخطوطة

Grid Systems: Manuscript

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

نظم الشبكات: المتناظرة

Grid Systems: Symmetrical

مثال (1)

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

مثال (2)

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

مثال (3)

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

نظم الشبكات: المعيارية

Grid Systems: Modular

مثال (1)

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

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

مثال (2)

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

نظم الشبكات: الغير متماثلة

Grid Systems: Asymmetrical

مثال (1)

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

مثال (2)

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

مثال (3)

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

نظم الشبكات: خط الأساس

Grid Systems: Baseline

مثال (1)

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

مثال (2)

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

 

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

 

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

مدرسة التصميم - تخطيط الشبكات.

Design School - layout

 

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

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

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

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