كيفية إنشاء تصميمات أكثر أناقة باستخدام نظام الشبكة

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

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

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

01image.png

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

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

02image.png

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

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

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

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

03image.png

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

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

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

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

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

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

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

هناك العديد من الأدوات التي يمكن أن تساعدك في إنشاء تخطيطات الشبكة ، وهي متاحة مجانًا عبر الإنترنت:

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

04image.png

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

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

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

تصميمنا الذي يمكننا تعديله ليلائم أنظمة العرض على منصات مختلفة يحافظ على تصميماتنا سليمة وكما يتوقع المستخدمون.

لقد رأينا أيضًا كيف يستخدم المصممون أعمدة وصفوف عرض العمود والصفوف (مثل 3: 2 أو 4: 3) والمزاريب (المسافات بين هذه “الصناديق”) لعرض عناصر التصميم بطريقة أكثر جمالية. على الرغم من أننا نتمتع اليوم برفاهية الشاشة عالية الدقة ، والتي تتيح لنا عرض تصميمات أكثر إثارة للإعجاب وواقعية ، باستخدام شبكة قائمة على عرض 960 بكسل ، يمكننا التأكد من ترجمة تصميماتنا بشكل صحيح ، بحيث يمكن مشاهدتها على العديد من شاشات أجهزة الكمبيوتر والهواتف المحمولة. ومع ذلك ، لدينا الكثير من الموارد المتاحة لمساعدتنا في اختيار نظام الشبكة الذي يتوافق مع التصميم الذي نريده.

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

الترجمة المعدلة لنظام الشبكة: بناء مخطط تصميم متين بواسطة مادس Soegaard.

أضف تعليق