عشان يكون تصميم واجهاتك متناسق ومريح العين، لازم تعرف وتطبق مصطلح اسمه Grid System 📏.
ثريد 🧵
ثريد 🧵
ماهو Grid System ؟
هو هيكل يتكون من خطوط عمودية او تقاطعات (خطوط عمودية وأفقية) تقسم الصفحة إلى أعمدة أو جزئيات لمساعدة المصممين على ترتيب محتوى الواجهة.
هو هيكل يتكون من خطوط عمودية او تقاطعات (خطوط عمودية وأفقية) تقسم الصفحة إلى أعمدة أو جزئيات لمساعدة المصممين على ترتيب محتوى الواجهة.
مالفائدة من Grid System ؟
⭐️ التنسيق البصري: ان المساحة بين الأشياء متساوية وأجزاء التصميم على نفس المحاذاة.
⭐️ تسلسل الهرمي للمحتوى (Document Hierarchy): ان الأشياء المهمة أخذت حيز أكبر من التصميم بعكس الأشياء الغير مهمة.
⭐️ التنسيق البصري: ان المساحة بين الأشياء متساوية وأجزاء التصميم على نفس المحاذاة.
⭐️ تسلسل الهرمي للمحتوى (Document Hierarchy): ان الأشياء المهمة أخذت حيز أكبر من التصميم بعكس الأشياء الغير مهمة.
⭐️ تصميم الصفحات بشكل يطابق معايير التصميم العالمية، أغلب أنظمة التصميم (Design System) تتبع هذا النظام في صناعة component وايضاً المكتبات المستخدمة لبناء تطبيقات الويب مثل Bootstrap, TailwindCSS.
مكونات Grid System:
من أشهر أنواع Grid System لتصميم واجهات الويب هو الذي يتكون من ١٢ عمود. من الصورة نلاحظ انه يتكون من ٣ أشياء.
من أشهر أنواع Grid System لتصميم واجهات الويب هو الذي يتكون من ١٢ عمود. من الصورة نلاحظ انه يتكون من ٣ أشياء.
١- الأعمدة (Columns):
يتم تحديد عرض العمود بالنسبة المئوية بدلاً من القيم الثابتة. مثال، يشغل عمود واحد 10٪ من المساحة الإجمالية.
يتم تحديد عرض العمود بالنسبة المئوية بدلاً من القيم الثابتة. مثال، يشغل عمود واحد 10٪ من المساحة الإجمالية.
يعتمد عدد الأعمدة على حجم الشاشة:
أغلب أنظمة التصميم تتبع هذا النظام ومنها نظام جوجل اللي اسمه Material Design.
الجوال: يتكون من 4 أعمدة
الكمبيوتر اللوحي (تاب): يتكون 8 أعمدة
سطح المكتب: يتكون من 12 عمودًا
أغلب أنظمة التصميم تتبع هذا النظام ومنها نظام جوجل اللي اسمه Material Design.
الجوال: يتكون من 4 أعمدة
الكمبيوتر اللوحي (تاب): يتكون 8 أعمدة
سطح المكتب: يتكون من 12 عمودًا
٢- الفواصل (Gutters):
هي المسافة بين الأعمدة التي تستخدم لفصل المحتوى. يمكن استخدام الفواصل العريضة للشاشات الكبيرة. لا تستخدم الفواصل العريضة للشاشات الصغيرة لأنها لن تترك مساحة للمحتوى.
هي المسافة بين الأعمدة التي تستخدم لفصل المحتوى. يمكن استخدام الفواصل العريضة للشاشات الكبيرة. لا تستخدم الفواصل العريضة للشاشات الصغيرة لأنها لن تترك مساحة للمحتوى.
٣- الهوامش (Margins):
هي المسافة على الجانب الأيسر والأيمن وعادة ما يكون لها قيمة ثابتة. يستخدم الهوامش الكبيرة عادة للشاشات الكبيرة والهوامش الصغيرة للشاشات الصغيرة.
هي المسافة على الجانب الأيسر والأيمن وعادة ما يكون لها قيمة ثابتة. يستخدم الهوامش الكبيرة عادة للشاشات الكبيرة والهوامش الصغيرة للشاشات الصغيرة.
كيفية تطبيق Grid System في برنامج Figma.
Layout grid -> اختار النوع (Grid, Columns, Rows) -> اختار القيم المناسبة لتصميمك من عدد الأعمدة، والسطور
Layout grid -> اختار النوع (Grid, Columns, Rows) -> اختار القيم المناسبة لتصميمك من عدد الأعمدة، والسطور
ذكرت أكثر من مرة كلمة نظام التصميم (Design System) إذا مو عارف ايش هو، تكلمت عنه في هذا الثريد 🧵
وفي نهاية الثريد لاتنسى المشاركة لإفادة الغير وشكراً 💜
جاري تحميل الاقتراحات...