Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)
الآن وقد أصبحت تعرف كل ما هنالك عن الألوان، أسلوب الطباعة والأمور المختلفة التي يجب عليك القيام بها قبل بدئك بتصميم المشروع، حان الوقت للبدء بالعمل على بعض أساسيات التعامل مع الشبكات في تصاميمك.
تسمح لك الشبكات ببناء بنية وشكل متماسكين لتصميمك. كما عندما اطلعنا على هرمية أسلوب الطباعة وإيقاعه، يمكننا تطبيق نفس الأفكار باستخدام البنى الشبكية. كما في البرمجة، هناك طرق مفضلة لتنظيم عناصر وأجزاء الشفرة، كذلك يساعدك نظام الشبكة خلال التصميم للويب.
لا تفيدنا الشبكات كمصممين ومطورين فقط – فهي مفيدة للمستخدم، أيضا. خلال هذه الجلسة سأركز على أهمية إقامة رحلة جيدة للمستخدم وخبرة جيدة له عبر تصاميمك – ففي النهاية، فالمستخدم هنا لاستهلاك محتواك وأنت تريد أن تجعلها خبرة جيدة لهم قدر المستطاع. سيسمح لك وجود نظام شبكة متماسك في تصاميمك (ومن ثم الانتقال لمرحلة التطوير) بالقيام بذلك، من خلا إنشاء التناسق والإلفة (وبالتالي بناء الثقة) في تصميمك.
إذا كان موقعك مصمما بشكل جيد، ستساعدك الشبكة على عكس الثقة بشكل أكبر لدى المستخدمين – سواء كان ذلك بشكل واع أو غير واع. لا يعني استخدام الشبكة أن على تصاميمك أن تصبح مربعة أو مملة، أيضا. كما ذكرنا في تصميم الويب للاستجابة، تقع المسؤولية على عاتقط لإنشاء تصميم فريد وفيه شيء مختلف – ويجب النظر لنظام الشبكة على أنه شيء سيسمح لك بالقيام بهذا، بدلا من تقييدك.
ما هو نظام الشبكة؟
هو بنية مكونة من سلسلة من الخطوط الأفقية والشاقولية، المستخدمة لترتيب المحتوى.
بأبسط أشكاله، نظام الشبكة عبارة عن بنية مكونة من سلسلة من الخطوط الأفقية والشاقولية التي تتقاطع والمستخدمة لترتيب المحتوى. وحتى بمصطلحات أبسط (وهذا ما يبسط فهما أكثر!) نظام الشبكة طريقة تؤمن نظاما للمصممين بحيث يمكنهم العمل لبناء وتقديم المحتوى والصور بطريقة أسهل للقراءة، ويمكن التعامل معها.
تم استخدام أنظمة الشبكات منذ زمن لطباعة المنشورات، لكن منذ تقديمها للتصميم للويب وللعديد العديد من أطر العمل في CSS والتي ظهرت منذ ذلك الوقت، أصبحت المعيار المستخدم تقريبا.
استخدام نظام الشبكة في تصاميمك طريقة لتحقيق مستوى من التناسق الذي قد يكون صعب التعلم والعرض في التصميم بطريقة أخرى. مرة أخرى، الانتظام والتناسق هما المفتاح لتصميم موقع ويب سيجده مستخدموك سهل التصفح، القراءة والفهم. والفهم. تأتي خبرة المستخدم الجيدة من خلال الارتباط معك المستخدمين وبناء حس من الإلفة معهم – حيث يساعدك نظام الشبكة على تحقيق من خلال تأمين قاعدة صلبة يمكنك تنمية تصميمك منها.
على الرغم من أن نظام شبكتك شيء سيكون مرئي في النهاية بالنسبة للمستخدم النهائي، يمكنك استخدامه لدعمك بتصميم مخططات لتصاميمك. لكن، كما كل القواعد أثناء التصميم (وأحيانا أثناء التطوير) وضعت هذه القواعد لتكسر. ليس عليك الالتزام بشكل الشبكة دوما، لكن يجب أن تفهم نظام الشبكة، قبل أن تبدأ بكسر القواعد.
لدينا على الويب العديد من أطر العمل CSS المتوافرة لنا، إضافة للعديد من الأدوات المتوافرة للعمل مع أنظمة شبكاتنا الخاصة التي يمكننا إنشاؤها لأنفسنا. الأمر عائد لك لاختيار أي منها لاستخدامه عند التصميم – على سبيل المثال، قد يكون إطار CSS مألوفا بالنسبة لك كمطور، لذا قد تحاول التصميم باستخدامه، أيضا – لكن دعنا نلقي نظرة لم التصميم باستخدام أنظمة الشبكات أمر جيد، وكذلك للمساعدة باتخاذ القرار حول أي من أنظمة الشبكات من الممكن متابعته أكثر.
ميزات استخدام أنظمة الشبكات
هناك العديد من ميزات استخدام أنظمة الشبكات – يمكن لهذا البدء من تصميمك موقع الويب من البداية لكن قد تكون مفيدة عند انتقالك لمراحل البناء والتطوير، وكذلك عند إدارة كلا من تصميم الموقع والبناء في المستقبل.
الأمر الجيد بخصوص أنظمة الشبكات أنها تسمح بالتصميم وفق تناسب، والموازنة بين كل العناصر المختلفة التي قد تكون موجودة في التصميم. يجب أن يكون نظام الشبكة مرنا جدا على الدوام، بحيث يمكنك تحويره بحسب حاجتك عند تصميمك للعناصر المختلفة لموقع الويب خاصتك.
يسمح لك استخدام نظام الشبكة في تصميمك أيضا بوجود إحساس من الانتظام والإلفة – في حين أن وجود تصاميم صفحات واسعة الاختلاف قد ينفع مع بعض المواقع، إلا أنها ليست الحالة للعديد منها وسترغب بوجود انتظام وشعور بالترابط في المخطط الرئيسي. كما يسهل هذا الأمور عند وضع كود للتصميم، حيث يعني هذا أنه يمكنك اختيار العناصر المنتظمة في تصميمك وتطبيق التأثير المشترك لشفرتك في بنية CSS.
مساوئ استخدام أنظمة الشبكة
بهدف التوازن، دعنا نلقي نظرة على بعض السلبيات.
أولا، قد يجد العديد من الناس – خصوصا أولئك الجديدون للتصميم أو التصميم مع الشبكات – أن أنظمة الشبكات خانقة ومحددة للإبداع. لسوء الحظ، قد يحصل هذا أحيانا – وعذرا على التلاعب اللفظي – قد تشعر أحيانا أنك غير قادر على التفكير خارج حدود الصندوق وأنك بدلا من ذلك تقوم بإنشاء تصاميم باهتة جدا، وهادئة. في هذه الحالات، أشجعك على التراجع عن الشبكة – وبدلا من ذلك، جرب التلاعب بالعناصر على الصفحة حتى تشعر أنها في الموقع الصحيح، ومن ثم عد للنظر لإمكانية وضع الشبكة في تصميمك (سنتحدث بالمزيد عن ذلك بعد قليل)، وانظر كيف يمكنك إنجاح أفكارك ضمن بنية الشبكة التي لديك. إذا لم تتوافق مع تصميم الشبكة، فقد يكون الوقت مناسبا للبدء بالعمل على تصميم شبكة آخر أو تصميم بديل.
أنظمة الشبكات صعبة جدا جدا. ليس لأنها تتطلب الكثير من قوة الإرادة لفهمها خلال المرات القليلة الأولى التي تستخدمها (على الرغم من أنك ستحظى بلحظة "أها!" بعد بعض التدريب الجيد والتلاعب بها) لكن تتطلب أحيانا بعضا من الرياضيات والحسابات. لست شخصا محبا للقيام بالكثير من الحسابات – لذا فأنا شخصيا أجد هذا الجانب صعب جدا. بحيث يمكن بسهولة إدراك مفهوم الشبكات وكيفية مساعدتها لك في التصميم – لكن على أمل أنك ستبدأ برؤية التأثير بسرعة بعد استخدامها في تصاميمك، تماما كما فعلت خلال تدربك على التطوير في وقت سابق. وفي حين أن الشبكات عمل صعب جدا، إلا أنها تستحق ذلك بكل تأكيد بسبب النتيجة النهائية.
اسنخدام أنظمة الشبكات في تصاميمك
إليك بعض الأمثلة، النصائح العملية لاستخدام أنظمة الشبكات في تصاميمك:
- ضع مخططا لشبكتك فوق تصميمك. إذا كنت مرتاحا للتصميم في المستعرض باستخدام إطار عمل CSS الذي يناسبك (إما مثال معد مسبقا، أو واحدا خاصا بك) فهذا جيد – لكن من ناحية أخرى، أنصح دائما بإعداد مخطط للشبكة من تصميمك الخاص. سواءا كنت في فوتوشوب أو برنامج رسومات مفضل آخر، ضعب طبقة علوية تعرض شبكتك وثبتها. بهذه الطريقة، ستكون متوافرة دوما لإظهارها وإخفائها كما يناسبك.
- ضع بعض الدلائل لمساعدتك. إذا كان لديك مخطط موضوع، تكون الخطوة التالية بوضع الدلائل لمساعدتي. عادة، أحب إنشاء الدلائل لكل بداية نهاية لعمود في نظام شبكتي. في هذه المرحلة، فهي تعتبر مجرد مساعدات إضافية لمخطط الشبكة – لمساعدتي بتحديد أطراف أعمدة شبكتي.
- جرب القيود والحدود. قد يعتقد العديدون أن العمل مع أنظمة الشبكة لوحده وصفة جيدة للعمل بطريقة مقيدة أكثر، لكن ليست هذه الحالة. العمل مع أنظمة الشبكات – وخاصة عند إعداد شبكتك الخاصة – من السهل إعداد نظام يسمح بوجود 16 عمود، في حين أن 6 قد يكون حلا أكثر حكمة. تعلم التصميم مع قيود – ليس داخل نظام شبكتك فقط – سيساعدك فقط في المدى البعيد، حيث ستكون قادرا على تركيز تصميمك على ما هو أكثر أهمية وارتباطا بمستخدميك.
- اهتم بتباعدك. الكثير من التركيز في أنظمة الشبكات التي نستخدمها قائم على عدد الأعمدة الموجودة فيه – عرض الأعمدة، عرض الفراغ بين الأعمدة (كمية الفراغ بين كل عمودين) ومقدار التباعد حول هذه الأعمدة. لكن، لا تنسى الفراغ الشاقولي المتوافر لك لضمان أنك تستخدم شبكتك لمساعدتك بالفراغات المتوافرة لك. على سبيل المثال، قد يحقق استخدام قياس عرض الفراغ أيضا في تباعدك الشاقولي، المعجزات لتصميمك وكيفية تباعد عناصرك عن بعضها. على سبيل المثال، قد يحقق استخدام قياس عرض الفراغ أيضا في تباعدك الشاقولي، المعجزات لتصميمك وكيفية تباعد عناصرك عن بعضها.
الواجبات
يجب أن يكون قد تشكل لديك فكرة جيدة حتى الآن عن أنظمة الشبكات، ماهيتها والطرق المفيدة التي يمكنك البدء باستخدامها في تصاميمك. سنناقش في المقالة التالية كيفية اختيار نظام الشبكة الخاص بك – وفيما كان من المفترض أن تعد نظامك الخاص، أم تعمل بإطار معد مسبقا بدلا من ذلك.
في هذا الوقت، أفضل أن تقوم ببعض التخطيط. وظيفة بسيطة جدا حقيقة (ستنجو بسهولة هذه المرة!) لكن ارسم قليلا في دفتر ملاحظاتك، تلاعب بالشبكات والمخططات. فكر بالبنية، باستخدام الأعمدة كفكرة لوضع المحتوى حول الشبكة. قد لا يكون ما أنشأته جيدا في الصباح التالي، لكنه سيساعدك على الأق بتركيز تفكيرك حول الشبكات ورؤية ما يمكنك تحقيقه بواسطتها بصيغة يمكن الاستغناء عنها.
قراءة إضافية
- التصميم بالطريقة المبنية على الشبكة: تحطيم المجلة
- الشبكات جيدة (pdf) من كوي فين ومارك بولتون
By
