مقدمة إلى الشبكات Grids و أهميتها في عالم التصميم

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

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

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

دليل تصفح المقال:

  1. نظرة تاريخية سريعة على الشبكات
  2. ما هي الشبكة Grid؟
  3. مكونات الشبكة
  4. الشبكات في القرن العشرين
  5. ثورة التصميم على الشبكات
  6. الشبكات و أهميتها في تصميم واجهات المستخدم المعاصرة على الويب و الموبايل
  7. نصائح حول استخدام الشبكات
  8. مصادر للتوسع و الاستزادة

1. نظرة تاريخية سريعة على الشبكات

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

نسخة من إنجيل جوتنبرج 1454 (ويكيبيديا)

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

صحيفة النيويورك تايمز 1919

2. ماهي الشبكة Grid؟

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

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

تركيزنا اليوم سيكون على الشبكات Grids.

هناك أنواع مختلفة من الشبكات تخدم كلها أغراضاً مختلفة. لنتحدث بسرعة عن بعض الأمثلة الرئيسية:

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

نموذج شبكة الحدود الرئيسية

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

نموذج عن شبكة الأعمدة
نموذج عن شبكة أعمدة متناظرة على موقع واشنطن بوست (من موقع https://visme.co)

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

نموذج عن شبكة وحداتية

شبكات مخطوطات Manuscript Grid. شبكة عمودية تتألف من عمود واحد يحدد مكان تموضع نص. تعتمد أغلب الكتب القياسية على هذه الشبكات بحيث تحتوي كل صفحة على عمود واحد.

نموذج عن شبكة مخطوطات

شبكة البكسلات Pixel Grid. مقياس معياري لشبكات الشاشات الإلكترونية عموماً يقوم على أسطر و أعمدة من البكسلات (وحدات ضوئية) التي تكون ما يعرض على الشاشة. تحتوي الشاشات على ملايين البكسلات و قد يعتمد عليها مصممو الواجهات أحياناً لتنظيم عناصر مختلفة أو كمرجع موحد كونها أصغر وحدة على لوحة الرسم ( المتمثلة بالشاشة). يمكن استخدام مرجع مكبّر مثل شبكة من مربعات كل منها 10×10 بكسل.

نموذج لشبكة بكسل (كل مربع يمثل 10 بكسل تقريباً)

للمزيد يرجى مراجعة مقال: ما الفرق بين Point و DIP كوحدات تصميم موبايل معاصرة و من أين أتت؟

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

نموذج عن شبكة هرمية
نموذج عن شبكة هرمية على موقع Vulture (من موقع https://visme.co)

3. مكونات الشبكة

عندما نتعامل مع أي شبكة Grid، هناك مجموعة من المصطلحات التي علينا الانتباه لها. أولها مفهوم الـ Format أو الوسط الذي ستكون هذه الشبكة مقيدة له. قد يكون الورق (بأحجام مختلفة) في حالات التصميم الطباعي أو المتصفح أو الجهاز (موبايل، ساعة، إلخ) في حال تصميم الواجهات و تصميم الشاشات عموماً.

الحدود Margins

الحدود باللون الأزرق الفاتح

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

المسافات بين الأسطر و الأعمدة Gutters

الـ Gutters باللون الأزرق الفاتح

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

4. الشبكات في القرن العشرين

تطورت الشبكات بشكل ملحوظ و سريع جداً مع بدايات القرن العشرين. كان هذا متزامناً مع ظهور حركات تصميمية وفنية حاولت قلب الأمور رأساً على عقب واللعب بالقوانين. حركات مثل باوهاوس Bauhaus و دي ستايل De Stijl. قام مصممون مثل جان تشيتشولد Jan Tschichold و جوزيف مولر بروكمان Josef Müller-Brockmann بتطوير نظام شبكي متناثر مناسب جداً لتصاميم الخطوط والبوسترات.

لمولر الكثير من الكتابات والدراسات حول الموضوع لعل أهمها كتاب Grid Systems in Graphic Design جمع فيها تاريخاً موسعاً حول الموضوع و دروساً استخلصها من عمله.

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

بوسترات مختلفة من خمسينات وستينات القرن الماضي لجوزيف مولر-بروكمان تبين كيف يتعامل مع الشبكات و يقدمها بشكل وحداتي أو مدور

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

نموذج لشبكة وحداتية
نموذج لشبكة وحداتية على موقع أخبار (صحيفة الجارديان)

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

ازداد عدد المصممين المبدعين في مجال الشبكات مع مرور الزمن و أصبحت استخدامات الشبكات ابداعية. مثل تطوير ماسيمو فينيلي Massimo Vignelli لأساليب متطورة في استخدام الشبكات الوحداتية Modular Grids لمطبوعات شهرية و أيقونية مثل المطبوعات الرسمية لهيئة الحدائق في الولايات المتحدة U.S. National Park Service و شركة قطارات نيويورك New York Subway.

هناك أيضاً ويم كرويل Wim Crouwel الذي كان سباقاً في اعتماد الشبكات لإنتاج تصاميم طباعية و خطوط اختبارية ممميزة.

5. ثورة المصممين على الشبكات

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

لكن المحرك الحقيقي ربما كان قدوم مفهوم النشر المكتبي عبر الحواسب. تحولت أساليب التصميم و طرائقه التصميمية فجأة لتسهل استخدام مفاهيم كانت أصعب سابقاً ما قبل العالم الرقمي كالشبكات وغيرها و سمحت بنفس الوقت بكسر هذه القيود بشكل كامل و سهل. فكرة القدرة على تدوير عناصر تصميمية كالصور و تكبيرها وتصغيرها بنقرات سريعة أدت لتسريع عملية الاختبار و فهم جديد كلياً للتصميم و ما يمكن أن يعني. أسماء مثل ديفيد كارسون David Carson و آرون درابلين Aaron Draplin.

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

6. الشبكات و أهميتها في تصميم واجهات المستخدم المعاصرة على الويب و الموبايل

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

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

سنخصص بعض الدروس لاحقاً للحديث عن التعامل مع الشبكات على تطبيقات الصميم (Figma و Sketch و غيرها). ما سنقوم به اليوم هو استعراض سريع لهذه الميزة.

بداية، تطبيق الشبكة على الويب يعني أننا سنقسمها لمجموعة من الأعمدة المتساوية و التي يفضل بينها مسافات تدعى Gutters (كما ذكرنا سابقاً) و هوامش على أقصى اليمين واليسار. تصبح الشبكات أعقد قليلاً مع أحجام الشاشات ودقاتها المختلفة، لذلك واحد من أكثر نظم الشبكات شيوعاً على الويب هو نظام 960 بكسل. يعبر هذا عن عرض الشبكة الأدنى و هو مناسب لإنتاج تصاميم ويب تعرض بشكل جيد على أغلب الشاشات (12 أو 16 عمود و قديم نوعاً ما). هناك أيضاً نظام 1200 (كحد أدنى) مناسب للشاشات الأكبر كخيار افتراضي (من المهم جداً أخذ نظام الشبكة بعين الاعتبار خصوصاً عن التعامل مع CSS لتكويد هذه التصاميم لاحقاً)

يؤمن موقع Grid System Library مصدراً ممتازاً لقوالب شبكات تعمل على مختلف الأجهزة. (بناء على نظام Bootstrap المفتوح المصدر للواجهات)

نموذج عن شبكة 12 عمود للويب من Grid System Library

يمكن التحكم طبعاً بخصائص الشبكة كعرض الأعمدة و المسافات بينها. تتبع أغلب التطبيقات نفس المنطق الذي يقوم على اختيار ميزة الشبكة من اللوحة الجانبية Inspector Panel. يطبق هذا الخيار على اللوحات الرئيسية Artboards طبعاً (تسمى إطار Frame في Figma).

مثال من تطبيق Adobe XD

7. نصائح حول استخدام الشبكات

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

الحقيقة أنه يثبت في كل يوم، أن القيد أمر مهم للابتكار في تصاميم التجارب المعاصرة خصوصاً على الويب و الموبايل. تحافظ هذه القيود على جعل التجارب Experiences واضحة الحفاظ على عنصر جمالي مقبول (دون الانجرار وراء العنصر الفني. راجع: ماهو تصميم تجربة المستخدم على تاء ثاء). هذا بالضبط ما يمسى بالـ Creative Constraints أو القيود الابداعية. و الحقيقة أن التجارب السابقة التي تحدثنا عنها من مصممين طباعيين، ترينا أن الشبكات مرنة جداً و حتى عندما قام البعض بكسر قيودها حافظوا على شيء من الرتابة التي هي من الشبكة أيضاً.

تؤمن الشبكات اللبنة الأولى للقيود الابداعية عندما نتعامل مع تصاميم ويب أو موبايل معاصرة يفترض أن تستخدم من آلاف الناس. لتيريز فيسيندن Therese Fessenden من مجموعة NNG الرائدة في تصميم تجربة المستخدم، رؤية مميزة حول هذه القيود الإبداعية. (يمكن تفعيل الترجمة الآلية من خيارات يوتيوب)

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

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

لنتذكر الأسطر Baseline دائماً. حتى و إن لم تكن موجودة في التصميم يعلب صف الأسطر (خصوصاً تلك التي تحتوي نصوصاً) دوراً هامّاً جداً في التصميم. من المهم جداً أن لا تختلف المسافات بين الأسطر و تسبب عدم تجانس بصري يؤثر كثيراً على التجربة.

لندعم شبكتنا بشبكة بكسلات. من المهم عند التصميم للويب و الموبايل أن نتذكر دائماً أهمية شبكة البكسلات و أنظمتها المختلفة، فهي عنصر هام خصوصاً عندما نرغب بتطبيق تصاميمنا على أوساط مختلفة. من الأنظمة الشائعة مثلاً اعتماد شبكة بكسلات 4px أو 8px لأنها مهمة عند التعامل مع الشاشات عالية الدقة Retina (راجع مقال: ما الفرق بين Point و DIP كوحدات تصميم موبايل معاصرة و من أين أتت؟)

8. مصادر للتوسع و الاستزادة


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

شاركنا بتعليقك