مصمم تطبيق توصيل طلبات المطاعم يكون minimalist

# مطلوب مصمم UI/UX احترافي لتطبيق Food Delivery — تصميم كامل ونظام UI متكامل

## نبذة عن المشروع

أبحث عن **مصمم UI/UX محترف وذو خبرة قوية في تصميم تطبيقات الموبايل والمنتجات الرقمية الحديثة** لتصميم واجهة وتجربة مستخدم كاملة لتطبيق متخصص في **توصيل الطعام والطلبات عند الطلب**.

المشروع ليس مجرد تصميم مجموعة من الشاشات، وإنما المطلوب بناء **نظام تصميم متكامل وقابل للتوسع** يشمل الواجهات، المكونات، الحالات المختلفة، الـInteractions، الـMotion، والـPrototype.

الهدف هو إنشاء تجربة استخدام:

**Minimal — Premium — Modern — Bold — Elegant — Fast — Easy to Use**

ولا أريد استخدام Templates جاهزة أو تصميمًا مشابهًا بشكل مباشر لتطبيقات التوصيل الموجودة في السوق.

---

# 1. الهوية والأسلوب

أريد أسلوبًا بصريًا:

* Minimalistic

* Premium

* Modern

* Bold

* Elegant

* Clean

* Distinctive

التصميم يجب أن يكون بسيطًا من حيث عدد العناصر، ولكن قويًا من حيث الـVisual Hierarchy.

أريد أن يشعر المستخدم أن المنتج **Premium Digital Product** وليس مجرد تطبيق تقليدي لتوصيل الطعام.

يجب الاهتمام بشكل خاص بـ:

* Typography

* Layout

* Spacing

* Visual hierarchy

* Photography

* Cards

* Navigation

* Interaction

* Motion

* Micro-interactions

---

# 2. الصفحات المطلوبة

## Onboarding & Authentication

### Splash Screen

* شاشة افتتاحية

* Animation بسيطة

* انتقال سلس إلى التطبيق

### Onboarding

* عدة شاشات تعريفية

* توضيح أهم مزايا المنتج

* إمكانية Skip

### تسجيل الدخول وإنشاء الحساب

* تسجيل الدخول

* إنشاء حساب

* OTP

* رقم الهاتف

* البريد الإلكتروني

* استعادة الحساب

* طلب صلاحية الموقع

---

# 3. الصفحة الرئيسية Home

صفحة Home من أهم صفحات المشروع.

تحتوي على:

* الموقع الحالي

* البحث

* الإشعارات

* الملف الشخصي

* Hero Section

* المطاعم المميزة

* المطاعم القريبة

* التوصيات الشخصية

* التصنيفات

* العروض

* إعادة الطلب

* العناصر التي شاهدها المستخدم مؤخرًا

أريد تصميمًا يجعل المستخدم يفهم بسرعة:

**أين أنا؟

ماذا يمكنني أن أطلب؟

ما الذي تنصحني به؟

كيف أبدأ الطلب؟**

مع الحفاظ على Minimal UI وعدم ازدحام الصفحة.

---

# 4. البحث Search

### Search Screen

* البحث عن مطعم

* البحث عن وجبة

* البحث عن نوع الطعام

* عمليات البحث السابقة

* عمليات البحث الشائعة

### Search Results

مع:

* Filters

* Sorting

* المسافة

* التقييم

* وقت التوصيل

* السعر

* نوع الطعام

* العروض

---

# 5. Explore / Discovery

صفحة مخصصة لاكتشاف المطاعم.

مثل:

* Nearby

* Popular

* Top Rated

* Fast Delivery

* New

* Offers

* Categories

التجربة يجب أن تكون سهلة وممتعة، وليست مجرد Grid تقليدي من البطاقات.

---

# 6. Restaurant Details

صفحة المطعم يجب أن تكون من أقوى صفحات التطبيق.

تحتوي على:

* صورة Hero

* اسم المطعم

* التقييم

* نوع الطعام

* مستوى السعر

* وقت التوصيل المتوقع

* المسافة

* Favorite

* Share

* وصف المطعم

* حالة المطعم

* أقسام القائمة

* المنتجات

* المنتجات المقترحة

ويجب أن يكون الانتقال من Restaurant Card إلى Restaurant Details **سلسًا بصريًا** مع إمكانية استخدام Shared Element Transition.

---

# 7. Food Item Details

عند الضغط على منتج:

* صورة كبيرة للمنتج

* اسم المنتج

* الوصف

* السعر

* الخيارات

* الإضافات

* Modifiers

* الكمية

* ملاحظات خاصة

* Add to Cart

أريد تجربة اختيار المنتج وإضافته إلى السلة أن تكون سريعة وواضحة.

---

# 8. Cart

صفحة السلة:

* المطعم

* المنتجات

* الكمية

* الإضافات

* تعديل المنتج

* حذف المنتج

* Subtotal

* Delivery Fee

* Service Fee

* Discounts

* Tax

* Total

* Promo Code

* Checkout CTA

يجب أن يكون **Price Hierarchy** واضحًا جدًا.

---

# 9. Checkout

تجربة Checkout كاملة.

### Delivery Address

* الموقع الحالي

* العناوين المحفوظة

* إضافة عنوان

* الشقة

* الطابق

* تعليمات التوصيل

### Payment

* طرق الدفع المحفوظة

* إضافة طريقة دفع

* اختيار طريقة الدفع

### Order Review

* المطعم

* المنتجات

* العنوان

* معلومات التوصيل

* الرسوم

* المبلغ الإجمالي

### Place Order

زر واضح لإتمام الطلب.

الهدف أن تكون العملية **سريعة وبأقل عدد ممكن من الخطوات**.

---

# 10. Order Confirmation

بعد إتمام الطلب:

* Success Animation

* رقم الطلب

* المطعم

* وقت التوصيل المتوقع

* حالة الطلب

* Track Order

لا أريد شاشة نجاح تقليدية.

أريد **Confirmation Experience** مصممة بعناية مع Motion مناسب.

---

# 11. Live Order Tracking

هذه من أهم صفحات المشروع.

أريد تجربة **Real-Time Delivery Tracking** احترافية.

تحتوي على:

* Live Map

* موقع السائق

* Route

* ETA

* المسافة المتبقية

* حالة المطعم

* Order Timeline

* معلومات السائق

* Call

* Message

* Order Details

### حالات الطلب

* تم تأكيد الطلب

* المطعم يحضر الطلب

* تم تعيين السائق

* السائق متجه لاستلام الطلب

* الطلب في الطريق

* السائق قريب

* تم التوصيل

يجب أن تكون هناك **Transitions واضحة بين الحالات**.

---

# 12. Orders

صفحة الطلبات:

### Active Orders

الطلبات الحالية.

### Past Orders

الطلبات السابقة.

كل Order Card يحتوي على:

* المطعم

* التاريخ

* المنتجات

* الإجمالي

* الحالة

* Reorder

* View Details

---

# 13. Order Details

* رقم الطلب

* المطعم

* المنتجات

* تفاصيل الأسعار

* عنوان التوصيل

* معلومات السائق

* Order Timeline

* Receipt

* Reorder

* Help

---

# 14. Favorites

إمكانية حفظ:

* المطاعم

* المنتجات

مع إمكانية:

* إضافة

* إزالة

* فتح المطعم

* الطلب مباشرة

---

# 15. Loyalty / Rewards

صفحة Rewards قابلة للتوسع مستقبلًا.

تحتوي على:

* رصيد النقاط

* المكافآت

* Progress

* مستوى العضوية

* المكافآت المتاحة

* سجل المكافآت

* Challenges

أريدها **Premium Loyalty Experience** وليس Gaming UI مبالغًا فيه.

---

# 16. Notifications

صفحة الإشعارات:

* تحديثات الطلب

* العروض

* Rewards

* Account Notifications

* Support Notifications

مع:

* Read / Unread

* Unread State

* Notification Details

* Clear All

---

# 17. Profile

صفحة الملف الشخصي:

* المعلومات الشخصية

* الطلبات

* المفضلة

* Rewards

* العناوين

* طرق الدفع

* الإشعارات

* الدعم

* Settings

---

# 18. Addresses

* العناوين المحفوظة

* Home

* Work

* Other

* Add Address

* Edit

* Delete

* Default Address

---

# 19. Payment Methods

* طرق الدفع المحفوظة

* إضافة طريقة دفع

* حذف

* تحديد الطريقة الافتراضية

---

# 20. Settings

* Account

* Notifications

* Privacy

* Security

* Language

* Location

* Payment

* Help

* Terms

* Privacy Policy

* Delete Account

* Logout

---

# 21. Help Center

مركز مساعدة داخل التطبيق.

التصنيفات:

* الطلبات

* التوصيل

* التتبع

* الدفع

* الرسوم

* الاسترجاع

* الحساب

* المساعدة العامة

يجب أن يكون الوصول إلى الحل سريعًا بدون التنقل في صفحات كثيرة.

---

# 22. AI Support

أريد تصميم **AI Support Chat Experience** حديثة.

تشمل:

* Chat Interface

* رسائل المستخدم

* ردود الـAI

* Typing Indicator

* Quick Actions

* Suggested Questions

* Order Context

* Feedback

* التحويل إلى موظف دعم

أمثلة على الإجراءات السريعة:

* تتبع طلبي

* أين طلبي؟

* أريد إلغاء الطلب

* أريد استرداد المبلغ

* التواصل مع السائق

* مشكلة في الطلب

---

# 23. Empty States

يجب تصميم جميع الحالات الفارغة، وليس فقط الصفحات الرئيسية.

مثل:

* لا توجد مطاعم

* لا توجد نتائج بحث

* السلة فارغة

* لا توجد طلبات

* لا توجد مطاعم مفضلة

* لا توجد مكافآت

* لا توجد إشعارات

---

# 24. Loading States

أريد تصميم:

* Skeleton Loading

* Shimmer

* Loading Cards

* Loading Lists

* Loading Map

* Button Loading

* Page Loading

ويفضل تجنب استخدام Spinner تقليدي في كل مكان.

---

# 25. Error States

تصميم حالات:

* Payment Failed

* Network Error

* Location Error

* Restaurant Unavailable

* Item Unavailable

* Order Failed

* Order Cancelled

* Driver Unavailable

مع رسائل واضحة وCTA مناسب لكل حالة.

---

# 26. Motion & Micro-interactions

هذه نقطة أساسية في المشروع.

لا أريد تصميمًا Static فقط.

أريد أن يكون **Motion جزءًا من الـUX من البداية**.

يجب التفكير في:

### Navigation

* Page transitions

* Bottom navigation transitions

* Tab transitions

### Restaurant

* Card → Restaurant transition

* Hero image transition

* Scroll behavior

### Food

* Product → Details

* Add to Cart animation

* Quantity animation

### Cart

* Cart counter animation

* Price update animation

* Item removal

### Checkout

* Step transitions

* Payment states

* Success animation

### Orders

* Status transitions

* Timeline animation

* Driver assignment

### Tracking

* Driver movement

* Route animation

* ETA updates

* Status changes

### Notifications

* New notification

* Unread state

### General

* Bottom sheets

* Modals

* Toasts

* Skeletons

* Loading

* Success

* Error

يجب تحديد الـMotion بشكل واضح بحيث يستطيع المطور تنفيذه لاحقًا.

---

# 27. Complete UI Kit

هذه نقطة **إلزامية** في المشروع.

لا أريد فقط Screens.

أريد **Design System + Complete UI Kit** في Figma.

## Foundations

* Typography

* Spacing

* Grid

* Radius

* Shadows

* Icons

* Layout rules

## Components

* Buttons

* Icon Buttons

* Cards

* Restaurant Cards

* Food Cards

* Search Bar

* Inputs

* Dropdowns

* Tabs

* Navigation

* Bottom Navigation

* Modal

* Bottom Sheet

* Toast

* Badge

* Chips

* Rating

* Quantity Selector

* Toggle

* Checkbox

* Radio

* Progress Bar

* Skeleton

* Notifications

* Order Status

* Driver Card

* Map Components

* Checkout Components

---

# 28. Component States

كل Component يجب أن يحتوي على الحالات المناسبة:

* Default

* Hover

* Pressed

* Active

* Disabled

* Loading

* Error

* Success

* Selected

* Unselected

---

# 29. Responsive Design

التصميم يجب أن يكون Mobile-first مع مراعاة:

* iPhone

* Android

* Tablet

* Web/Desktop

مع الحفاظ على نفس Design System.

---

# 30. Figma Structure

أريد ملف Figma منظمًا واحترافيًا.

يفضل تقسيمه إلى:

**01 — Cover / Brand Direction**

**02 — Foundations**

**03 — Typography**

**04 — Icons**

**05 — Components**

**06 — Patterns**

**07 — Customer App Screens**

**08 — Responsive**

**09 — Prototype**

**10 — Motion Guidelines**

ويجب استخدام:

* Auto Layout

* Components

* Variants

* Variables

* Styles

* Proper naming

* Reusable components

بحيث يكون الملف مناسبًا جدًا للـDeveloper Handoff.

---

# 31. Prototype

أريد Prototype تفاعلي يوضح أهم الـUser Flows:

### Flow 1

Home → Restaurant → Food → Cart → Checkout → Order

### Flow 2

Home → Search → Restaurant → Food → Order

### Flow 3

Order → Live Tracking → Delivered

### Flow 4

Orders → Order Details → Reorder

### Flow 5

Profile → Help Center → AI Support

### Flow 6

Profile → Rewards → Redeem

---

# 32. Developer Handoff

يجب أن يكون التصميم قابلًا للتنفيذ مباشرة من قبل المطور.

المطلوب:

* Components منظمة

* Naming واضح

* Variants

* Measurements

* Typography

* Spacing

* Assets

* Icons

* Interaction specifications

* Motion specifications

* Responsive behavior

---

# 33. المطلوب تسليمه

### Deliverables

1. ملف Figma كامل

2. جميع شاشات التطبيق

3. Complete UI Kit

4. Design System

5. Responsive Design

6. Interactive Prototype

7. Components & Variants

8. Empty States

9. Loading States

10. Error States

11. Motion Guidelines

12. Micro-interactions

13. Developer Handoff

14. جميع Assets المستخدمة بشكل منظم

---

# 34. ما أبحث عنه

أبحث عن مصمم لديه خبرة فعلية في:

* Mobile UI/UX

* Product Design

* Food Delivery

* On-Demand Apps

* Premium Digital Products

* Minimalist Design

* Design Systems

* Figma

* Motion Design

* Micro-interactions

* Prototyping

يفضل وجود Portfolio قوي يوضح مستوى العمل وليس مجرد Screenshots منفصلة.

---

# 35. المطلوب في عرضك

يرجى إرسال:

1. رابط Portfolio

2. أمثلة لأفضل مشاريع Mobile UI/UX لديك

3. مثال على Design System قمت ببنائه

4. أمثلة على Micro-interactions / Motion إن وجدت

5. المدة المتوقعة للمشروع

6. السعر الإجمالي

7. هل يمكنك توفير Developer Handoff كامل؟

8. هل تعمل باستخدام Figma Components / Variables / Auto Layout؟

**لن يتم اختيار العرض بناءً على السعر فقط. جودة الـPortfolio ومستوى الـProduct Design أهم عامل.**

---

## ملاحظة مهمة

لا أريد Template جاهزًا أو تصميمًا عامًا لتطبيق توصيل.

المطلوب بناء **Product Experience متكاملة** من أول دخول المستخدم إلى التطبيق، مرورًا بالبحث والطلب والدفع والتتبع، وصولًا إلى الدعم والـLoyalty.

النتيجة المطلوبة:

**واجهة Premium + UX ممتازة + Design System قابل للتوسع + Motion مدروس + ملف Figma احترافي جاهز للتطوير.**