دفتر المصمم
متدرّب— XP

مسار تعليمي في مبادئ UI/UX

دفتر
المصمم

١٦ مبدأ في تصميم الواجهات، تتعلمها كما يتعلم المصمم في الاستوديو: بالتصحيح لا بالحفظ. كل مبدأ يبدأ بتصميم خاطئ عليه علامات القلم الأحمر، وينتهي بختم «صح».

ابدأ المسار من المرحلة ١
مرحلة
١٦
أبواب
٤
أنواع تمارين
٤

كيف تتعلم هنا؟

  1. أيّهما أفضل؟

    تصميمان أمامك، تختار الصحيح ثم تعرف لماذا.

  2. اكتشف الخطأ

    تفتّش في واجهة حقيقية وتنقر على موضع الخلل.

  3. أصلحه بنفسك

    تحرّك المسافات والأوزان والألوان حتى يستقيم التصميم.

  4. اختبار سريع

    أسئلة قصيرة تثبّت الفكرة في نهاية كل مرحلة.

كل تمرين يمنحك نقاط خبرة (XP) — كاملة من أول محاولة، ونصفها بعد الخطأ. أنهِ تمارين المرحلة لتحصل على ختمها، واجمع الأختام الستة عشر لتنال شهادة الدفتر.

خريطة المسار

الترتيب مقترح لا إجباري — المراحل الستة عشر كلها مفتوحة لك. اختم مراحلها كلها لتنال شهادة الدفتر.

الباب ١

الأساسيات

كيف تقرأ العين الشاشة

  1. التسلسل البصريVisual hierarchyليست كل العناصر بنفس الأهمية — أخبر العين من أين تبدأ.
  2. التقاربProximityما يتجاور يُفهم كمجموعة واحدة.
  3. الوضوحClarityالواجهة الواضحة لا تحتاج دليل استخدام.
  4. المحاذاةAlignmentخطوط خفية تجعل الفوضى نظاماً.
الباب ٢

التنظيم

الفراغ والترتيب والتباين

  1. التباينContrastما لا يتميز عن خلفيته لا يُرى.
  2. البساطةSimplicityكل عنصر إضافي يطالب بجزء من انتباه المستخدم.
  3. المساحات البيضاءWhitespaceالفراغ ليس هدراً، إنه تنفّس التصميم.
  4. التخطيطLayoutأين تضع العنصر يحدد متى يُقرأ.
الباب ٣

الهوية البصرية

الانسجام والاتساق والعمق

  1. التوازن والانسجامBalance & harmonyلا عنصر يطغى على الباقين.
  2. الاتساقConsistencyما يتشابه في الوظيفة يتشابه في الشكل.
  3. الإشارات البصريةVisual cuesصورة أو أيقونة تختصر سطراً كاملاً.
  4. العمق والملمسDepth & textureظلال وطبقات تخبر المستخدم ما يمكن لمسه.
الباب ٤

التجربة

اللون والخط وجهد المستخدم

  1. الألوانColorاللون الأساسي يُستخدم بحساب، لا بإسراف.
  2. الطباعةTypographyالخط هو صوت الواجهة.
  3. تكلفة التفاعلInteraction costكل نقرة وكل تفكير ثمن يدفعه المستخدم.
  4. نصائح ذهبيةBonus tipsالنماذج، الحذف، منطقة الإبهام، الحالات الفارغة وصفحات الخطأ.