كيفية السيطرة على شبكة التصميم

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

الاستيلاء على هذا الملف رسم هنا

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

في مناسبات عديدة رأيت أن الإثارة والأمل والحماس تستنزف من وجوههم ، وتركهم يغرقون في بركة من اليأس. القضية؟ كل شبكة قوية.

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

  1. شبكة الشجاعة - ما هي الشبكة تتكون من؟
  2. تصميم على الشبكة - كيفية وضع الأشياء في الواقع على الشبكة.
  3. المرونة الإبداعية - معرفة كيفية ثني الشبكة حسب إرادتك
  4. الخط الأساسي - الجزء الآخر من نظام الشبكة الذي يتساءل عن الإيقاع العمودي.

تحذير - يتم توجيه هذا الدليل بشكل أكبر نحو تصميم الويب المتجاوب ، وهو يدور حول شبكة ذات 12 عمودًا سائلًا ، ولكن يمكن تطبيق مبادئ الشبكة عبر أي شيء رقمي تقوم بتصميمه. هيا بنا نغطس

الشجاعة الشبكة

تتكون الشبكة من مكونين رئيسيين - الأعمدة والمزاريب. معًا ، يشكلون العرض الأفقي لشاشتك ، ويعملون معًا ، ولكن هناك بعض القواعد التي يجب معرفتها.

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

الآن بعد أن استبعدنا أساسيات الشبكة ، فلنبدأ تصميمها فعليًا.

تصميم على الشبكة

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

عذرًا ، انظر فقط إلى فقط يجري المستطيلات.

ولكن عندما نكشف عن تراكب الشبكة في Sketch ، OH THE TREACHERY. صديقنا المستطيل الصغير ليس على الشبكة. كما ترون أعلاه ، تبدأ الحواف اليمنى واليسرى للمستطيل الصغير وتنتهي في الحضيض ، بينما تبدأ حواف المستطيل الأكبر وتنتهي في عمود. هذا المستطيل يعرف ما الأمر.

كيف تجرؤ.

المرونة الإبداعية

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

"لا يمكنك التصرف حتى تعرف خطوطك".

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

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

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

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

الشبكة الأساسية

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

الخط الأساسي هو ارتفاع تدريجي تم قياسه مسبقًا ويجب محاذاة جميع الكائنات والطباعة. في Filament ، نستخدم خط أساس 7px ، لأنه بالنسبة لنا ، 28px هو خط مريح وقابل للقراءة لخط أساسي 16pt. يستخدم الآخرون خط أساس 8 بكسل أو 5 بكسل حسب تفضيلاتهم ، أو النظام الأساسي الذي يصممون له. في تجربتنا ، خط الأساس 7px أو 8px يعمل بشكل رائع.

يعني محاذاة عناصر التصميم مثل الصور أو الحاويات إلى خط الأساس جعل ارتفاعاتها مضاعفات قيمة الأساس - في هذه الحالة ، 7 بكسل. بالنسبة إلى الطباعة ، فهذا يعني أن ارتفاع خط ذلك المحرف هو مضاعف لقيمة الأساس - لذلك يمكن أن يكون ارتفاع الخط 7 ، 14 ، 21 ، 28 ، 35 وما إلى ذلك. من المهم ملاحظة أن حجم الخط لا يلزم أن تكون متعددة من خط الأساس ، فقط ارتفاع الخط.

الذهاب الرابع والتصميم

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

تابعني على تويتر
وجدت هذا مفيد؟ أدناه سيساعد الآخرين في العثور عليها أيضًا.

ظهر هذا المنشور في الأصل في مدونة الشعيرة