مهم:يُرجى إنشاء موقع إلكتروني مؤسسي راقٍ، بحيث تُبرز الصفحة الرئيسية رؤية العلامة التجارية والقدرات التجارية وقيمة العميل ومعلومات الاتصال.

مواد القبول

مواد القبول

يسجّل ما يلي متطلّبات التصميم وملاحظات التنفيذ لهذا المشروع، للرجوع إليها أثناء مراجعة القبول من قِبَل فريق المشروع.
acceptance_materials.txt

01الحفاظ على الأسلوب البصري العام مشرقًا ونظيفًا

02يجب أن تمتلك الأزرار الرئيسية حالة نقر واضحة

03تحتفظ الصفحة الرئيسية بالعناصر البصرية ذات الطابع التقني

04تُحمَل وحدات المحتوى عبر البطاقات

05يجب أن يغطّي النص الجوهري القدرة والسيناريو والقيمة

06تُستخدم الأرقام الرئيسية للتأكيد على إيقاع الصفحة

07تحتفظ الصفحات الرئيسية بمدخل واضح للحثّ على اتخاذ إجراء

08ألا يقلّ النص الأساسي عن 14px

09شريط التنقّل مثبَّت في أعلى الصفحة

10تحتاج كل صورة إلى تعليق نصّي أسفلها

11توحيد line-height عند 1.6

12يغطّي الـ favicon جميع المقاسات الشائعة

implementation_notes.txt

01يجب أن تُقدّم الصورة الرئيسية الفريق وواجهة المنتج ونطاق العلامة التجارية في آنٍ واحد.

02تظل أنماط الأزرار موحّدة على مستوى الموقع، بنصف قطر زوايا 12px.

03تُستخدم الحركة لتعزيز التسلسل الهرمي دون التأثير على القراءة الأساسية.

04يحتفظ قسم قصص العملاء بخانات عرض النتائج.

05يُعطي تخطيط الأجهزة المحمولة الأولوية لقابلية قراءة النص عند 14px.

06يستخدم شريط التنقّل position: sticky ويبقى مثبَّتًا أثناء التمرير.

07يجب عدم إغفال خصائص alt للصور والتعليقات النصية أسفلها.

ملاحظات التصميم

سجلّ التأثيرات البصرية والتفاعلية الأساسية

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

فقاعات رضا العملاء في الصورة الرئيسية

تحتاج منطقة الصورة الرئيسية إلى وسوم مؤشرات تجارية آنية لاستكمال معلومات قيمة العميل.

تنبثق فقاعات الرضا والعائد على الاستثمار وغيرها من المؤشرات في حلقة مع رسوم متحرّكة للخروج.
02

نص بتدرّج قوس قزح عند تمرير المؤشر

تحتاج العناوين والروابط إلى ردّ فعل بصري واضح في حالة hover.

تدرّج قوس قزح + إضاءة كاسحة + تدوير درجة اللون + توهّج.
03

فصل الرسوم البصرية لزرّ الحثّ عن منطقة النقر

تحتاج الأزرار إلى ردّ فعل ديناميكي أقوى عند hover/click مع الحفاظ على ثبات منطقة النقر.

تتحرّك الطبقة البصرية باستخدام translateY بينما تبقى منطقة النقر في مكانها.
04

شريط تنقّل بأسلوب الزجاج السائل

يحتاج التنقّل العلوي إلى إحساس مادّي شبه شفّاف بعمق متعدّد الطبقات.

خلفية زجاجية backdrop-filter + إضاءة كاسحة + رسوم طفو خفيفة.
05

وضع الضوء الكاشف عند إطفاء الأضواء

يوفّر وضع قراءة مركّزًا يقلّل من التشتّت البصري.

قناع بملء الشاشة + نصف قطر ضوء كاشف يتبع المؤشر للتحكّم في المنطقة المرئية.
06

مؤشر فأرة مُخصّص بهوية Richify

يوسّع التعرّف على العلامة التجارية بحيث تبقى حركة المؤشر متّسقة مع الأسلوب البصري للصفحة.

مؤشر SVG يحمل هوية العلامة التجارية + تأثيرات جسيمات متعقِّبة.
07

معرض WebGL ثلاثي الأبعاد في صفحة قصص العملاء

تحتاج صفحة قصص العملاء إلى منطقة عرض غامرة ثلاثية الأبعاد.

مصفوفة جسيمات WebGL + تفاعل بالفأرة + لوحات ديناميكية.
08

ماسة ثلاثية الأبعاد في التذييل وشريط متحرّك للعلامة التجارية

يحتاج أسفل الصفحة إلى منطقة ختامية للعلامة التجارية تظل مرئية باستمرار.

ماسة دوّارة ثلاثية الأبعاد + شريط متحرّك للعلامة التجارية + ألوان ديناميكية.
09

صورة الفريق الرئيسية مع شعار مضمّن للعلامة التجارية

تحتاج الصورة الرئيسية إلى تقديم مشهد الفريق وعلامة richify.net في آنٍ واحد.

يُضمَّن شعار علامة richify.net في منطقة شاشة الحاسوب المحمول.