فاطمة العمودي 🌻 | UI/UX Designer
فاطمة العمودي 🌻 | UI/UX Designer

@AlamoudiBy

10 تغريدة 1 قراءة Dec 07, 2023
ماهي الأشياء اللي تحتاج تجهزها في فيجما قبل ما تبدأ عملية تصميم الواجهات حتى تكون عملية التعديلات في المستقبل أسهل
ثريد 🧵
🔹الألوان: تقدر تبدأ بتحديد الألوان المستخدمة وإضافتها في نظام تصميم فيجما. إذا حدثت اي تغييرات في الألوان في المستقبل تحتاج تغير فقط الألوان المضافة في فيجما وبتتعدل الألوان تلقائياً في التصميم.
ممكن تستخدم هذا الموقع الرهيب في إختيار الألوان:
🔹نوع الخط: تقدر تكتفي بنوع خط واحد او بنوعين خط واحد للعنواين الرئيسية واخر للنصوص مع التأكد ان نوع الخط مناسب لمجال التصميم و سهل القراءة حتى في الأحجام الصغيرة
🔹أحجام الخطوط: من المهم تحديد أحجام الخطوط قبل البدء بالتصميم والتأكد من وجود تفاوت بين أحجام الخطوط لتحقيق التسلسل الهرمي للنصوص (Typography Hierarchy) بحيث النصوص المهمة تكون اكبر حجماً من النصوص العادية. ممكن استخدام أداة typography scale لعمل الأحجام
figma.com
🔹نظام الشبكة: هو نظام يتكون من عدد معين من الأعمدة (١٢ أعمدة: لأجهزة الكمبيوتر، ٨ أعمدة: لأجهزة التابلت، ٤ أعمدة: لأجهزة الجوال) يستخدم لبيان حدود الواجهة وترتيب محتوى الواجهة.
تكلمت عن نظام الشبكة في هذا الثريد:
🔹مجموعة الأيقونات: من المهم تحديد مجموعة الأيقونات في بداية التصميم والإلتزام باستخدامها للتوحيد.
في هذا الثريد، جمعت عدة مجموعات للأيقونات:
🔹تحديد قيم المسافات بين العناصر وأقسام الصفحة، حواف الأشكال والظلال في بداية التصميم والإلتزام بها لتجنب استخدام قيم عشوائية.
📍ممكن استخدام هذا الموقع ايضاً اللي يساعد في اختيار احجام الخطوط، الأيقونات، المسافات، حواف الأشكال وغيرها
proportio.app
🔹عمل العناصر (component): عند بداية التصميم، اذا كان هناك عنصر يتكرر في اكثر من واجهة مثل الزر، من الأفضل عمل عنصر منه واستخدام نسخة منه في الواجهات حتى إذا حدثت تغييرات في المستقبل تحتاج تغير فقط في العنصر وكل النسخ سوف تتغير تلقائياً.
تكلمت عن كيفية عمل العنصر في فيجما في هذا الدرس:
📍هذا الدرس من مجموعة دروس تعلم فيجما يوضح كيفية إضافة الألوان، الخطوط، نظام الشبكة في نظام تصميم فيجما:
وبكذا وصلنا لنهاية الثريد، لاتنسون المشاركة لإفادة الغير وشكراً💜

جاري تحميل الاقتراحات...