تقنية المعلومات والاتصالات

تطوير الواجهات الأمامية (Front-End) وتجربة المستخدم (UI/UX)

برنامج يجمع بين بناء واجهات أمامية حديثة بمكوّنات قابلة لإعادة الاستخدام وبين تصميم تجربة المستخدم: من بحث المستخدمين والنماذج الأولية إلى الوصولية وأداء الصفحة واختبار الاستخدام.

المدة5 أيام تدريبية
المحتوى5 محاور · 10 جلسات
بعد البرنامجشهادة حضور معتمدة

لمحة عن الدورة

زرٌّ في المكان الخطأ يكلّف أكثر من خطأ برمجي، لأن المستخدم لا يبلّغ عنه بل يغادر بصمت. يجمع هذا البرنامج بين تطوير الواجهات الأمامية (Front-End) وتجربة المستخدم (UI/UX) في مسار واحد: التصميم الذي يقرّر ما يراه المستخدم، والشيفرة التي تجعله يعمل بسرعة وعلى كل شاشة. يبدأ من فهم المستخدم عبر المقابلات وخرائط الرحلة وتحديد المهمة الجوهرية للواجهة، ثم بناء بنية المعلومات والنماذج الأولية واختبارها قبل كتابة سطر واحد. ينتقل بعدها إلى الجانب الهندسي: تقسيم الواجهة إلى مكوّنات مستقلّة، إدارة الحالة والبيانات القادمة من الخدمات، التصميم المتجاوب بشبكات مرنة، والتعامل مع حالات الفراغ والتحميل والخطأ. يخصّص محوراً للوصولية وفق إرشادات WCAG ومحوراً لأداء الصفحة ومؤشرات تجربة المستخدم القياسية. يخرج كل مشارك بواجهة تطبيق كاملة مع دليل نظام تصميم وتقرير اختبار استخدام مع مستخدمين حقيقيين.

الأهداف المتوقعة من الدورة

01

تحليل حاجة المستخدم عبر المقابلات وخرائط الرحلة وبنية المعلومات، وتحويلها إلى نماذج أولية قابلة للاختبار قبل التنفيذ

02

بناء واجهة أمامية بمكوّنات قابلة لإعادة الاستخدام وإدارة حالة واضحة، تتعامل مع حالات التحميل والخطأ والفراغ بلا غموض

03

تطبيق معايير الوصولية في ترتيب التركيز والتباين اللوني والنصوص البديلة وتسميات النماذج بما يخدم مستخدمي قارئات الشاشة

04

قياس أداء الواجهة بمؤشرات سرعة العرض واستقرار التخطيط واستجابة التفاعل، وتنفيذ تحسينات تثبت أثرها بالقياس

المستهدفون

01

مطوّرو الواجهات الأمامية الراغبون في ربط عملهم بأسس تصميم التجربة لا بالتنفيذ وحده

02

مصمّمو واجهات وتجربة المستخدم الذين يتعاونون مع فرق التطوير ويحتاجون فهم قيود التنفيذ

03

مديرو المنتجات الرقمية والمسؤولون عن المواقع والتطبيقات المؤسسية وقنواتها الخدمية

04

المطوّرون الشاملون والخريجون الجدد الساعون إلى إتقان بناء واجهات متجاوبة وسريعة

المحاور العلمية

اضغط على أي محور لاستعراض جلساته وبنوده.

01

المحور الأول: فهم المستخدم وتأسيس قرار التصميم

2 جلسات · 6 نقاط

1الجلسة الأولى: البحث النوعي وخرائط الرحلة

  • إعداد مقابلات قصيرة مع مستخدمين فعليين بأسئلة سلوكية تكشف ما يفعلونه لا ما يتمنّونه
  • بناء خريطة رحلة تحدّد نقاط الاحتكاك ولحظات التخلّي في المسار الحالي للخدمة
  • تحويل نتائج البحث إلى قائمة مشكلات مرتّبة بالأثر، تُشتقّ منها متطلّبات الواجهة

2الجلسة الثانية: بنية المعلومات ومسارات المهام

  • تنظيم المحتوى وتسمية الأقسام بأسلوب فرز البطاقات لتقليل التخمين في القوائم والتنقّل
  • رسم تدفّق المهمة الأساسية خطوة بخطوة وحذف كل خطوة لا تضيف قراراً للمستخدم
  • تحديد المحتوى الأولي لكل شاشة وترتيبه بحسب الأولوية البصرية للمهمة لا لهيكل قاعدة البيانات
02

المحور الثاني: لغة الواجهة البصرية ونظام التصميم

2 جلسات · 6 نقاط

1الجلسة الأولى: الرموز التصميمية والتناسق البصري

  • تعريف رموز الألوان والمسافات والأحجام النصية كقيم مركزية تُستهلك في التصميم والشيفرة معاً
  • بناء سلّم طباعي متدرّج يخدم العربية والإنجليزية ويحافظ على وضوح القراءة في الشاشات الصغيرة
  • ضبط الشبكة والمسافات الداخلية لتصبح قرارات التخطيط قابلة للتكرار بلا اجتهاد في كل شاشة

2الجلسة الثانية: مكتبة المكوّنات والنماذج الأولية

  • توثيق كل مكوّن بحالاته المختلفة من افتراضي ومركَّز ومعطَّل وخطأ قبل تسليمه للتطوير
  • بناء نموذج أولي تفاعلي يحاكي المسار الكامل ويُختبر مع مستخدمين قبل بدء التنفيذ
  • إدارة تحديث المكتبة وإصداراتها بحيث لا يكسر تغيير مكوّن واحد شاشات المنتج الأخرى
03

المحور الثالث: هندسة التنفيذ في الواجهة الأمامية

2 جلسات · 6 نقاط

1الجلسة الأولى: تركيب المكوّنات وإدارة الحالة

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

2الجلسة الثانية: التخطيط المتجاوب ودعم الاتجاهين

  • بناء تخطيط مرن بالشبكات الحديثة يتكيّف مع عرض الحاوية لا مع نقاط توقّف ثابتة فقط
  • دعم اتجاه الكتابة من اليمين إلى اليسار في المسافات والأيقونات والرسوم المتحركة معاً
  • التعامل مع الصور المتجاوبة وتحميلها الكسول بما يحفظ الشكل ويمنع قفزات التخطيط
04

المحور الرابع: الوصولية وجودة التفاعل

2 جلسات · 6 نقاط

1الجلسة الأولى: بناء واجهة يستعملها الجميع

  • ضبط ترتيب التنقّل بلوحة المفاتيح وإبراز عنصر التركيز في كل عنصر تفاعلي بالواجهة
  • قياس تباين الألوان مقابل عتبات الإرشادات وتجنّب الاعتماد على اللون وحده لنقل المعنى
  • استعمال الأدوار والتسميات الوصفية للمكوّنات المركّبة واختبارها بقارئ شاشة فعلي

2الجلسة الثانية: تفاصيل التفاعل والحركة

  • تصميم حالات الانتظار بمؤشّرات هيكلية تقلّل الإحساس بالبطء وتحافظ على موضع المحتوى
  • صياغة رسائل الخطأ والتأكيد بلغة تخبر المستخدم بما حدث وبالخطوة التالية الممكنة
  • ضبط مدد الحركة ومنحنياتها واحترام تفضيل تقليل الحركة لدى المستخدمين الحسّاسين لها
05

المحور الخامس: الأداء والقياس والتحسين بعد الإطلاق

2 جلسات · 6 نقاط

1الجلسة الأولى: سرعة الواجهة ومؤشراتها

  • تحليل مسار العرض الحرج وتقليص الشيفرة المرسلة عبر التقسيم والتحميل المؤجّل
  • تحسين مؤشرات أكبر عنصر مرئي واستقرار التخطيط وزمن الاستجابة للتفاعل بقياس قبل وبعد
  • ضبط ميزانية أداء للصفحة ومراقبتها آلياً حتى لا يعيد أي إصدار جديد الصفحة إلى البطء

2الجلسة الثانية: اختبار الاستخدام والتحسين المستند إلى الدليل

  • إدارة جلسة اختبار استخدام بخمسة مشاركين وتسجيل الملاحظات بمعيار إنجاز المهمة لا بالرأي
  • تحليل بيانات الاستخدام ومسارات التخلّي لتحديد الشاشة التي تستحق التحسين أولاً
  • تنفيذ اختبار مقارن بين نسختين لعنصر واحد وقراءة النتيجة قبل تعميم التغيير

ما يحصل عليه المشارك

5 محاور علمية

مخطّط علميّ متدرّج

10 جلسة تدريبية

موزَّعة على 5 أيام

30 بنداً تفصيلياً

محتوى تطبيقي مفصَّل

شهادة حضور معتمدة

بعد إتمام البرنامج

أكمل بيانات التسجيل

سنتواصل معك خلال يوم عمل لتأكيد الحجز.

جاهز للبدء؟

احجز مقعدك في البرنامج وابدأ رحلة تطوير مهاراتك.

سجّل الآن

شارك هذه الدورة