الصور توثق تعديلات على موقع قائم. لم يُقَس أثرها على التحويلات أو سرعة التحميل. البانر الألماني مخصص للهاتف، بينما يعرض المثال الإنجليزي بانر الحاسوب على هاتف.
من الفكرة إلى التنفيذ
THE WORK / 05
01 /
الهدف
تقديم المحتوى بصورة أكثر عصرية ووضوحًا على الكمبيوتر والهاتف، ضمن الموقع القائم.
02 /
دوري في المشروع
تحسين تخطيطات ومكونات في موقع WordPress، وتنظيم المحتوى والصور والأزرار، وتنفيذ تعديلات CSS وتجربة الهاتف.
03 /
الأدوات المستخدمة
WordPressCSSResponsive designLocalisation
العميل / المؤسسةمعهد دوسلدورف التحضيري
الفترة2026
ما الذي يوضحه العمل؟
اختيار بانر مخصص للهاتف أتاح ترتيب العرض والنص والزر بحسب مساحة الشاشة. المقارنة قبل/بعد تخص الصفحة العربية؛ المثالان الألماني والإنجليزي يعرضان صفحتين بلغتين مختلفتين.
ما نفّذته والقرارات التي اتخذتها
01
راجعت عرض المحتوى في أجزاء متعددة من الموقع وعدّلت توزيع العناصر والمسافات وأحجام النصوص بما يناسب الشاشة.
02
أعدت تنظيم بداية الصفحة العربية، وفصلت منطقة الصورة عن المعلومات لتوضيح ترتيب القراءة.
03
صممت بانر منفصلًا للهاتف لصفحة التسجيل المبكر الألمانية؛ لأن تركيب صورة الحاسوب ونصوصها لا يناسب الشاشة الصغيرة دائمًا.
04
نفذت التعديلات في WordPress وباستخدام CSS، مع مراعاة اتجاه القراءة العربي وتخطيطات الهاتف.
نماذج من العمل
مقارنة تصميم الصفحة الرئيسية العربية
التصميم السابقالصفحة العربية السابقة.
التصميم المحدّثالصفحة العربية بعد التحديث.
الألمانية: بانر جديد مصمم خصيصًا لعرض الهاتفالإنجليزية: بانر الحاسوب معروض على الهاتف
الأدلة: مقارنة الصفحة الرئيسية العربية ولقطات صفحات التسجيل المبكر على الهاتف. تعرض الصور العربية التصميم السابق والتصميم المعدل. تُظهر اللقطة الإنجليزية بانر الحاسوب على شاشة الهاتف، مع اقتصاص أجزاء من الصورة وتداخل بعض العناصر. وتُظهر الصفحة الألمانية البانر الجديد والمنفصل المصمم للهاتف. توضح المقارنة تكييف مساحة الصورة وتوزيع النص والدعوة إلى التسجيل مع الشاشة الصغيرة. لم يُقَس تغير في معدل التحويل أو سرعة التحميل.
WordPress