ERROR 404

تصميم واجهة مستخدم (UI Design) لصفحة خطأ 404 (404 Error Page). وهي الصفحة التي تظهر للمستخدم عندما يحاول الوصول إلى رابط غير موجود أو محذوف. التصميم مخصص لموقع أو تطبيق توصيل طعام أو مطعم.

ميزات العمل (Features)

يتميز هذا التصميم بذكاء التعامل مع "حالة الخطأ" (Error State) لتحويل تجربة سلبية إلى تجربة ممتعة:

سرد القصص والفكاهة (Storytelling & Humor):

بدلاً من رسالة "الصفحة غير موجودة" التقليدية والمملة، استخدم المصمم عبارة "Oops! We overcooked this page" (عفواً! لقد طهونا هذه الصفحة زيادة عن اللزوم).

ربط الخطأ التقني بمصطلحات المطبخ (Recipe got lost - الوصفة ضاعت)، مما يخفف من انزعاج المستخدم.

الإبداع البصري (Visual Creativity):

تحويل الرقم "0" في 404 إلى مقلاة بها قطعة توست محترقة، وهو تجسيد بصري ذكي لمفهوم "الخطأ" أو "الطهي الزائد".

استخدام شخصيات كرتونية (الطهاة) وشريحة البيتزا لإضفاء طابع ودي ومرح.

تجربة المستخدم وتوجيهه (UX & Navigation):

التصميم لا يترك المستخدم في طريق مسدود؛ بل يقدم له حلين واضحين عبر أزرار كبيرة: "Go Back Home" (العودة للرئيسية) أو "Explore Menu" (استكشاف القائمة)، مما يساعد على إبقاء المستخدم داخل التطبيق.

تناسق الألوان (Color Consistency):

استخدام اللون البرتقالي بشكل أساسي، وهو لون معروف في علم النفس اللوني بقدرته على تحفيز الشهية وإثارة النشاط، مما يجعله مثالياً لتطبيقات الطعام.

--مراحل العمل (Process):

الفكرة (Ideation): العصف الذهني لإيجاد رابط بين "الخطأ" و"الطعام". (مثلاً: طعام محروق، طلب خاطئ، طبق سكب على الأرض). تم اختيار "الطعام المحروق".

كتابة المحتوى (UX Writing): صياغة نصوص خفيفة الظل تتماشى مع الفكرة (Overcooked, Recipe lost).

التصميم الجرافيكي (Illustration): رسم العناصر (المقلاة والتوست) بأسلوب مسطح (Flat Design) أو شبه واقعي ليتناسب مع هوية التطبيق.

تخطيط الصفحة (Layout): وضع رقم 404 في المنتصف كعنصر جذب (Focal Point)، وتقسيم الخيارات السفلية بفاصل رأسي لتنظيم الحلول المقترحة للمستخدم.

--الأدوات المستخدمة :

Pinterest:للصور

remove background: هو الأفضل لعملية تفريغ الأشجار (Masking) بدقة.

Figma : لتنسيق النصوص والأزرار وواجهة المستخدم النهائية